So I'm nearly finished with the website I had to make for my school's prom. Now, I just checked it in Internet Explorer and, well, it's hopeless. Elements aren't where they're supposed to be, most of the JavaScript/jQuery doesn't work at all. I am clueless where to start to make my site compatible with Internet Explorer. Whats the best way to make your site compatible with IE?
The main cross browser step is DOCTYPE Declaration. It is an instruction to the web browser about what version of HTML the page is written in.
It's going to be murder to fix what's already broken... you really needed to start off on the right foot, as it is you may need to re-write large chunks of your site in order to get things working again.
Going back? Well the easiest thing is going to be to start a fresh layout (using the following pointers) and then move your site into the new framework. Depending on the scale of your site this is no small task. Your alternative is one-by-one code debugging, with maybe firebug light
Going forward, how do you build a site that works more evenly across the board?
1 Use a reset CSS boilerplate
I like the html5 one at http://html5reset.org/. These apply layers of CSS to get each browser looking the same to start with (your CSS then gives it the style you want). Note they DON'T address the variety of ways browsers calculate things - borders being part of the width or not (firefox/ie difference)
2 Use a JS library
Or write your own, but be aware of all the differences between the browsers don't just code for the one you're using. Build some JS tests for the library that you can run in any browser to make sure that the library performs as expected, then deal with any site oddities after that. There's too many JS libraries to make a recommend but Prototype.js and jQuery are a popular two.
well it's known that there are differences between browsers. The way browsers render CSS code is also different. You should check parts and see how or if it works as you want. :) There is no one-to-all solution. The experience will let you know what works and what not. But to start you could isolate what is not working in IE (javascript code) and then see what alternatives you have. As for the appearance, there is the option of having separate CSS files especially for IE. However, often there is a technique(a different way to implement the same appearance) that lets you create the appearance you want without multiple versions of code.
Related
I've built my mobile site using the jQuery Mobile UI but I now realize that I need some functionality to be different between it and my desktop site (datepicker dates should be longer on the desktop site, etc).
I've looked into Modernizr and matchMedia to help me load separate js files but I can't figure out a nice way for it to work responsively. Modernizr only works (unless I missed something in the doc) on the initial load and I'm having problems with matchMedia executing multiple times as it crosses the min/max-width threshold. It works sometimes but the trouble is in adding/removing the separate js files. On top of that (but not a huge issue - I don't think), Chrome fires off an error when loading scripts into the DOM from another script.
Would the best thing be to write one js file and then add a listener such as $.mobile.media("screen and (min-width: XXXpx)") to the body's width, changing my needed values?
I may be making this too hard for myself, or missing something obvious because I'm trying to keep HTTP requests and site size as small as possible, but I can't figure out a good solution for this.
Thank you!
Lightning Round Bonus Question: Is it good practice/proper to keep all of the jQuery Mobile styling (data-role data-id data-theme) after switching to the desktop site? It looks awfully .. awful for someone only viewing it on a larger screen.
IMHO, the best approach would be to introduce a couple of flags in your javascript, like "isMobile", "isTablet" or "isDesktop", that would be set within a method attached to the "pageinit" event of your webapp. Later on, you could check that flags to act accordingly with the proper version in the specific parts of your code.
The way you can check that flags depends on your architecture. In the project I am working right now, I extract that information from a class attached by the back-end on the body of the page, but that's because we have that info. You could try to use a library like Harvey to observe the media-queries that would be trigger, and set the flags accordingly. I don't think that your options ends here, but I am afraid I can't help you more!
I've just learned javascript and jquery a few weeks ago, since then I always use it to position all my divs and stuff in the screen by knowing the size of the screen and the window which I find extremely useful, but now I don't know if is this a good practice, cause it makes my web-pages fully dependant on jquery which I don't know if it may cause some troubles with different browsers.
I would really like to find answers like "Sure is a good practice, use all the scripts you want" cause I'm really loving this javascript stuff but well just tell what you think.
Use JavaScript for behaviors and CSS for styling.
Styling with JavaScript is slower and difficult for another developer/designer to figure out what you did.
Also if you use Firebug or Chrome Web Inspector you can not see where your styling is coming from.
Optionally set classes from JavaScript and not specific styling. You can transition between classes to create a nice effect. But at least your colleague can see where the styles are defined and change it.
I'm sorry, but I'm going to burst your bubble, somewhat.
It's somewhat OK to do it - as long as the page looks OK if you disable Javascript, as well. I would say it should look even better than OK. I would also say that you should only do that if the functionality of your site really demands Javascript, as well.
Keep in mind that a certain percentage of users will have Javascript disabled. I've seen sites that look horrible this way (I use NoScript on Firefox, and selectively enable Javascript as I browser), and a couple where nothing at all appears without JS enabled.
Bad.
As Darin notes, you can (and should!) use CSS for positioning and styling. That is what it was made for! Feel free to enhance the page with Javascript, but keep in mind what I say above!
You could use CSS for positioning and styling of elements. That's what it was designed for.
It's okay to use it for positioning in some cases, but using CSS is the better practice whenever applicable.
Well, In my opinion you should avoid it as often as possible. But I know sometime you don't have the choice.
And yea you can make great web apps using scripts.
It depends what you're positioning.
CSS should be your first choice for positioning standard, run-of-the-mill sections and elements of a webpage. To opt for JavaScript in these cases suggests a lack of understanding of CSS.
Likewise if you find yourself using JS to position things for different devices. Again, CSS has evolved; media queries came along for that. Rule: always exhaust CSS possibilities first.
That said, it would be oversimplification to suggest that JavaScript never be used for positioning. All of us, rightly or wrongly, have resorted (and it is just that, resorting) to JS in order to get things to look right cross-browser, particularly where support for older IEs is concerned.
But by far the biggest use case for JS positioning is for modern web aps and games. If you're building a game with random asteroids dotted around, JS is absolutely the choice for that, since the positions are based on calculation and computation.
Finally, bear in mind that when you position in JS, you are of course still using CSS. JS doesn't have its own, concurrent styling/positioning system - it simply sets CSS properties. It is simply able to do so more dynamically and conditionally than flat CSS.
It is almost certainly bad practise. Use CSS for styling - JavaScript to do this is slower, more work, and more prone to breaking.
If you're positioning everything absolutely (fixed coordinates) it won't look good on screens of different resolutions. There's no real answer to this question.. scripts have their place, and you can use all the scripts you want... Positioning all of the elements of your layout, however, is not a job for JS. Use CSS for that.
I'd start here: Starting with HTML + CSS
There is not one method for all situations. Each web application needs to employ the right tools and practices to achieve its goals. This varies so much between applications that there is not a "correct" answer to your question.
I am trying to find some example code using a javascript library for a force directed graph in which the user can move any node around (and the graph responds dynamically) - but then each node can be clickable and open an "node detail" page (in a different tab).
I looked through D3.js, arbor.js, jit (javascript infoviz toolkit), springy. Those all look great and have demos which are close to what I want, but not quite there.
I'm not an experienced js programmer, I mostly do server side stuff.
My fear is that I might try to learn one of these libraries to try and implement my use-case only to find that it won't work for some reason. For example, one of these (D3) has a discussion in its forum that clicking a node is often mistaken for moving the node and there didn't seem to be a quick workaround. In another one (arbor.js), the front page (in addition to being minified) shows something close to what I want but the nodes which are movable are not clickable and the nodes which are clickable are not movable.
FF or Chrome is fine - I don't need IE support.
I am also open to something Flash based - as long as I don't need to compile anything in Actionscript/Flash - something with a js/html API.
Thanks.
I think that's a pretty good list of tools you have. Protovis?
I suspect it's actually not going to be much work to grab a click event from any JS-based tool-- but I haven't done that specifically with any of the ones you mention.
A couple years ago I did a prototype project using a pure Javascript implementation. Everything is just DOM nodes, so you can definitely grab clicks as necessary. It's fine, but since the code is not actively maintained (as far as I could find), I did have to do quite a bit to fit it to my needs. Using something with more recent and active development is a good idea. I also learned that performance was going to be an issue, especially in Firefox. You can play with my prototype and see where it breaks down-- which it does. I think 100 nodes or so is the danger point.
Good luck!
by simple I mean, having buttons:
bold,
italic,
numbered list
bullet point list
indent left
indent right
spell check (obviously supported by ready made js component)
by custom I mean: having custom icons - so really just custom design
no frameworks, written from scratch, lightweight, compatible with major browsers
this is one of the main components of the webapp, so it has to be super lightweight, that's why I don't want frameworks
Unless you are targeting one browser, editors are immensely complicated components to get to work cross browser. There's no reason to do it yourself, unless you want to learn.
Use one of the many available that allow customization:
tinymce,
fckeditor,
wysihat,
others
Writing an editor that works cross-platform can be difficult, but, you should create your own framework as you do it, as it is a large project.
If you just want custom icons, that will depend on how long it takes you to make them, but, to get some basic functionality isn't that hard, probably less than 40 hrs of work if you know what you are doing.
In Unix writing your own shell used to be a rite of passage, in javascript it may be writing your own editor. :)
Where it gets tricky is if I have
<b>some text</b><i>more text</i>
and I decide to remove the tags from this text, then how to fix it will get tricky.
If you want to use only css then it gets to be more of a problem as you are grouping text from span tags, and fixing css classes, while the user is continuing to make changes.
I am dealing with this currently as I want an editor that works in XHTML2.0, and it is not a trivial issue, much harder than it is to do in a desktop application.
I would suggest getting it to work on Firefox 3 and Safari first, then, once it is working, go back and add in the code to get it to work on IE8, and if you want IE7, since MS is pushing IE8 out as a critical update now.
Don't.
Go get something else (any of those Jason mentioned, or e.g. what SO itself uses, WMD). Swap out its images. The end.
Seriously you don't want to write your own editor unless you have a very good reason for it functionally, not just what it looks like.
Read through the first chapters of the emacs tutorial, and you will see that there is not anything like a "simple" editor. But google will give you lots of easy customizable editors.
I have been using dean edwards ie7/8 script. Not sure if it's my implementation or not but sometimes I would experience ie6 issues that weren't quite fixed or required special handling which meant I would be back where I started, caring about ie6. So, I was wondering if ie7/8 is still the go or if some other practice/solution was better.
Update: I expanded my answer here with a tutorial on my site, which will probably be more helpful than my answer here. Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
Here's how I tackle IE6:
I validate both my XHTML and CSS.
I keep my designs simple, even the complicated ones.
I don't use hacks that invalidate my
CSS.
I use a JavaScript framework/library
(I like MooTools, but you'll get a
lot of votes for jQuery, Prototype,
YUI, Dojo, and many others) that
handles most of my cross-browser
JavaScript problems.
I progressively enhance my pages so
that they first work without
JavaScript and then add all the bells
and whistles.
For some of the double margin
problems, I use display:inline;
If I absolutely have to, I use a
separate stylesheet, though I'm
finding I have to do this less and
less.
I try to avoid transparent images in
my layouts. If I absolutely need
them, I use a PNG8 with alpha
transparency, which IE6 actually does
support.
To get at the min-height problem, I
do the following:
This for IE6, which interprets height as min-height:
.classNameHere {height:300px;}
This for for everything else:
div>div .classNameHere {min-height:300px; height:auto;}
Incidentally, if you need to isolate IE6 with CSS, that's a good way to do it, as it doesn't support child selectors.
I try not to support IE6
YUI reset and YUI grids have allowed me to keep my sanity when support IE6.
IE 6 is an "A-grade" browser, which means that bugs and errors get priority.
I'm using:
"Reset.css" to minify the difference between the browsers default CSS computed styles (e.g. YUI reset.css)
Conditional Comments to put additional css file into the scope ;) (e.g. ./ieFix.css)
W3C Validator to tell if the difference in rendering is caused by bad nesting or it's just IE ;)
if that fails, jQuery helps a lot ;)
To be completely honest, I don't really handle IE6-issues much lately. My design-process is simple:
Reset margin/padding on everything. I mean everything.
Test my page layout every few minutes. Takes one tap on F5.
If any change breaks the page, I stop everything and evaluate the change.
If the desired method cannot be used, I research alternative methods, excluding 'hacks'.
I validate both markup and css. And always use XHTML 1.0 Strict.
I make sure my site works first without Javascript, and then later use jQuery.
These basic practices have kept me from having to work around IE6 issues a lot over the years. The only issue I still get upset over is IE6's support for PNG24 with Transparency, but IEPNGFix takes care of those - usually without breaking my layouts too.
It may be the opinion of a foolish man:Great developers don't find complaints, they find solutions.
Conditional comments, patience and sometimes ie7-js.
I agree with the responses that talk about a process involving clean code, conditional comments, keeping ie6 happy but not perfect, etc etc. But it's a very cautious, little by little process which is still, at the heart, quite time consuming when really it's all for one browser.
I am reluctant to tick any response as answered because all the responses talk about existing methods I am familiar with. It may be that my question is answered "No" :) because essentially I was after a framework that meant you didn't even have to worry about ie6's nuances, just code in a modern way - something I thought ie7/8's js would do but even just today I realise that min-height isn't being fixed!!.
Thanks anyway for the replies - it's helped re-enforce that my approach is still the status quo and I am using my time as efficiently as I can.
I instituted a policy recently with regards to IE6, basically, as long as it does not break the site on IE6, don't spend time on it.
I don't think IMHO, that IE6 still has enough use to make it worthwhile for my company to continue spending money fixing small issues with it.
Here is a quick sample of data from several of the sites that my company has tracking data on. This is a combination of recent data (today) and some data from about 1 year ago, so there is a higher percentage of IE6 than we actually get now, and even then all but 3% of the hits are to 1 of the 8 sites included in the data.
alt text http://unkwndesign.com/browerUsage.png
**Note Chrome is built on webkit but its numbers are not included in webkit, just to show how fast it has grown. The total percentage is 100.5% because of rounding.
I don't think there is ever a standard as to what browser you can or can't ignore. It depends on the organization -- or the audience in the case of your start-up. Any JS you write should "gracefully degrade" but making sure that actually happens requires some artfulness at times.
There is really just one "fix" for IE-problems which is to help facilitate its suicide. The only way I've discovered to help IE commit suicide is to educate my visitors. This can be done by sniffing the browser and if IE is detected you display a "help upgrade the web" banner.
Kind of like GMail does...
We're doing this at ra-ajax and stacked (visit the site with any versions of IE)
Build for firefox first, nuke or downgrade design elements experience tells you IE6 can't handle at the outset, and not spend more time than the client spec warrants
TBH experience is the #1 preventative measure for IE6 problems
Make it work in Firefox;
Check to see if it looks and works the same in IE7;
Check to see if it sorta works in IE6 (because that's good enough).
If you can't do the layout with simple CSS (no crazy relative+absolute positioning or float:after fixes) then just do it with tables;
Put a DOCTYPE in to force the browser into compliance (rather than quirks) mode;
Minimize box model issues by minimizing the use of contained borders (or by giving invisible borders to other similar elements) and nesting elements to minimize padding/margin/border combos, which will just cause you grief;
Don't bother trying to get a CSS menu to work across all browsers. It isn't 2003 anymore. Just use Javascript (eg jQuery/superfish).
Only use :hover on links. If necessary change them with display: block.
Kill ALL default styling before starting.
Throw Dean Edwards script at it.
If problems persist to tell users to upgrade.
If IE6 is vital, use an IE stylesheet that removes whatever doesn't work and replaces them with less complex styles.
jQuery :hover etc. to .hover, input[type=submit] to input.submit etc. Helps with older versions of FF and Opera aswell occasionally.
I've decided yesterday to not support it anymore. There's a movement starting trying to kill IE 6.
Thanks to IE's conditional comments it's easy to show a message for just those users.
I build it for Chrome, then I optimize for Firefox most of the time its just little things then I go into IE 8 and then I go into IE 7 since most bugs I will have eliminated by then. After IE 7 I take a brief look at Opera and am finished for the day. Who cares about IE 6 anymore?
Are you complaining to the Intel manufaturers that the cpu doesn't fit into your comodore? There are technology advancements and I think IE 6 should be killed the best way to do that is to tell the the user he has to upgrade and let the site look like crap thats the only way to force them to switch. Some will eventually ask their children why the internets are broken and then the son will come along install all updates and the mom or dad can be happy again.
My answer in short: No more optization at all is how I handle it.
By encouraging users to upgrade to something—ANYTHING—better.