Related
I know that there are several very similarly-related questions on this website, however after reviewing the play, I believe this question is unique in its own right. If someone can find and provide evidence of an exact dupe of my question, I will withdraw it myself (so please just don't downvote this!).
I am a Java developer, not a web developer. But, as is the case in so many families where there is one person who becomes the designated family "computer guy", my Java development skills have been mistaken for web development skills, and I somehow got roped into building a website for my parents to help them sell their house.
So, like any web development newbie, I wrote the HTML/CSS myself (by hand, sans editor like DW or Expression, etc.) and tested it against FireFox 3.x. All looked great, and we deployed/launched.
Now we're getting negative feedback from everyone and their dog stating that the site isn't rendering properly in other browsers, browser versions, or on FireFox installations running on different operating systems. Similarly, the site is apparently a total mess when being viewed through a smart phone or tablet device.
Now I could dive in and write a whole bunch of messy, nasty, painstakingly-tedious edits to my CSS rules, that basically say: do X when browser is Y, etc. But I am hoping that out there is a tool that can put all my fears to rest.
What I'm looking for is a tool that could take my valid CSS files, and use them to generate CSS rules that will be compatible with a high percentage of all common browsers/versions.
Alternatively, if I have to re-write my CSS from scratch, it would be nice to have a tool that allows me to write/design once, deploy many, so that I only have to focus on the design of a single CSS file, but the code that gets generated is multi-browser compatible.
It sounds like DreamWeaver kind of does this, but you have to choose from one of 16 pre-existing templates.
My wife is a graphic designer, and made the website pretty sweet (not cookie cutter). It was a nightmare trying to figure out what CSS rules to use to implement her design. So any tool that forces you to choose between templates is not an option.
Is there any hope for me, or do I banish myself from my family in shame right now?
css is a mess, no way to automatically doing it right. saying that I would say there are tools that would walk with you the proper way.
1. use the meta tag:
http-equiv="X-UA-Compatible" content="IE=8" (encpsulate as a meta tag - SO won't display if I wrote it as a valid tag)
to force IE to render with it's most modern engine, that would solve some problems.
2.begin your css with normalize.css - that would eliminate some of the cross browser problems - because it resets your css (better and more modern the reset.css)
I'll second the GWT if you come from the java dev world. although It's a framework to learn with it's own quirks. another possible web framework is Grails - a nice java/groovy port of the mighty Ror.
Less or Scss won't automatically solve your basic problem - which is browser compatibily - but are a better and simpler way to write css
remember that most css3 properties aren't support equally in all browsers (and in IE almost not supported) - use them only with graceful downgrade option with supported js or css -when Modernizr js library can give you pretty good property support detection for various browsers
don't go dreamweaver - it produces terrible code
use csslint to check for valid css and common css pitfalls
If you must use cutting edge web rendering with html5+css3 elements you should look into chrome frame -that would enable older browser better support of your site - although I believe this may be an overkill for a simple sell-my-house kind of site.
use a css framework to prototype- it would give you better css, good basics and resets and good boilerplate - maybe bootstrap or something similiar (didn't try most of them but the internet is crowded with those.
good luck
Check out modernizr. http://www.modernizr.com/docs/
You want to get into the position of checking for features and not browsers.
Here's an excellent site to check your site with alternative browsers:
http://www.browserstack.com/
Less (http://lesscss.org/) will help you with a lot of CSS3 functions.
However, good CSS code simply works on all browsers. There are some CSS concepts that must always be avoided as much as possible (absolute positioning, excessive floats, using the wrong elements for a task, etc) and your code will work better.
In the many years I have programmed I only needed browser-specific code in the first two years. Then I grew up and learned which CSS code not to use and when it was possible to use them. It has been my experience that properly written CSS code works on all browsers, and if it doesn't it will at least get the basic concepts right (eg. a few pixels may be wrong or some effects, but the site still works well).
Several things come to mind that may help your case:
Forget about IE6, that one will give you trouble no matter how much effort you put into the site.
Make sure you have a good doctype (html5 or xhtml would be good).
Try out html5 reset, it tries to make sure all browsers behave the same.
The aforementioned reset also includes modernizr to bring older browsers up to speed
Finally: accept (some even say "embrace") that different browsers render things slightly different. Getting every pixel exactly the same in each browser will be near impossible.
I hate to put this into the world, but it sounds like you need Adobe Muse.
There is no equal to a good developer who will write clean cross browser code, but if you just want to get the site done check out the beta: http://labs.adobe.com/technologies/muse/
What I'm looking for is a tool that could take my valid CSS files, and
use them to generate CSS rules that will be compatible with a high
percentage of all common browsers/versions.
Unfortunately there's no such a tool and you have to debug and test your website for cross-browser compatibility manually. The best way i've found for cross-browser testing it to install and test different versions of browsers in several virtual machines.
You will also find the following helpful:
Modernizr
Google Web Toolkit
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What's the point of valid CSS/HTML?
This is a over-asked question, but I'm going to ask anyway.
How important is site/code validation?
I'm not referring to code errors that would break a site layout, like forgetting to close a tag, or using an unsupported tag. Just general warnings and tag usage errors.
I used to make sure my sites were validated 100%. No questions asked. Lately, I have not taken that approach however, especially with the use of HTML5. I feel that it is more important to make the site function as needed, even if it means putting a <p> tag within a <span> tag. Also, some of the CSS validation rules are pointless I feel. They are more considered with saving every possible byte then code readability.
Does it really matter? Looking for thoughts/concerns/opinions/links to articles. Thanks!
I do it for Peace of Mind.
When code is valid, it's more likely to work with a compliant browser. In theory, just because I test it and it works in various browsers today, does not mean it will work in newer browsers tomorrow. Standards Compliance solves that issue because if it follows the "Standard" today, it will follow the "Standard" tomorrow... of course, assuming that new browsers continue to support the Doctype you've selected to standardize against.
Why Validate - W3C
From W3C itself, here's a "Why Validate?" page that is extremely helpful: http://validator.w3.org/docs/why.html
Some of the main points:
Validation as a debugging tool
Validation as a future-proof quality
check
Validation eases maintenance
Validation helps teach good practices
Validation is a sign of
professionalism
Edit
The biggest reason I think is that when you don't validate, you're catering to broken browsers instead of designing for the browsers that do it right. Chad recently quipped that "if you use a degraded browser you deserve a degraded experience", and I think he's absolutely right. Design perfectly valid markup for standards-compliant browsers, and if absolutely necessary use IE6-specific stylesheets and the like for broken browsers. This way, you don't break the standards-compliancy of the good browsers, but you can "cheat" for the broken browsers.
Edit 2
The best exception, I think, is when you're moving forward instead of backwards. When you move backward, use separate stylesheets that only load for broken browsers - that way the good browsers aren't affected. But when you're moving forward (e.g, using CSS animations with vendor-branded tags, etc) you know that someday those will become standards (well, most of the time).
HTML5 is the culmination of our loose and sloppy HTML periods then overly-anal and pedantic semantic XML compliant xhtml period.
Which led us to an overall "validation is really important, but let's be pragmatic about it."
As stated, valid html is easier to debug, so there's the big plus right there. But there's plenty of room for exceptions as well. As long as you aren't using laziness as an excuse to allow for invalid markup when needed, it's probably a pragmatic decision.
With different browsers choosing to render CSS in their own preferred way , whats the point of having a standard?
Simple stuff like creating a fluid 3 column layout that works across all browsers can be an experience in frustration. How do you deal with this or make cross-browser compatible development not so painful?
As always, there's a reason behind all this.
The standard is not broken (a standard can't be broken), just that some browsers like IE don't adhere to it completely.
This is mainly because IE was developed before any standard was created and in that time it was the best browser around, with almost zero competitors (I read that netscape was the other option and that it was much worse than IE).
Then people realized that a standard was needed, and they created it obviously not including any of IE proprietary code and features. IE was forced to choose backwards compatibility with it's previous versions, or to adhere to this new "standard", they absolutely ruled the browser market so the choice was obvious.
With new versions IE tried to be more and more standards compliant, and they say that IE8 successfully passes the ACID2 test, so the standard utopia is (slowly) coming to reality.
In the mean time, check this site -> quirksmode that contains useful cross browser information. Also try to check any articles about "IE box model" online, and stay away of padding in IE. If you also use a 3rd party javascript library (JQuery, Prototype, Dojo) you should be fine (or as fine as anyone of us can be).
Regards.
One major point of having standards is to keep us out of another browser war. You know the one where Netscape and Microsoft kept adding as many proprietary features as they could to the browsers. Cross browser development is a breeze today compared to then...
Another good reason for having standards is that you know where future versions of the browsers will be heading. Following the standards is the best prediction that you can get for how future browsers will work.
You can find a lot of cross-browser tips in this question: How can I achieve a consistent layout in all browsers?
Standards are emergent, not pre-defined. Well, at least they should be. Many developers I've talked to seem to find my view of Web standards slightly heretical, but stay with me here.
When you try to create the standard before the implementation, you have several problems:
A long delay before useful implementations appear. Nobody has a working implementation to reference, and since nobody is using any of the standard's features (since it doesn't exist yet), there is little impetus to actually implement it. A chicken-and-egg type of problem.
The potential for standards that cannot actually be implemented. Who knows for sure until somebody actually tries it? The HLA standard was a good example of this happening, to the point where the DoD had to write an "interpretations" memo that attempted to set the de facto standard by glossing over some of the errors in the actual standard.
The potential for standards that don't serve any practical need. Do people actually want this? See example at XForms, which has fallen into a weird, server-side niche. Or, I can't think of anybody I've met who found the CSS "width does not including padding" box model to be intuitive.
An inability for implementers of the standard to distinguish their products from their competitors, resulting in a stubborn desire to break with the standard in practical or lock-in-encouraging ways. See example at CORBA.
I think that the W3C learned this the hard way in recent years. Some of the most end-user visible innovation has come from a new browser war: examples would be HTML5 (several vendors), canvas (Apple), XMLHttpRequest (Microsoft's Outlook Web Access team), input range (Safari's built-in RSS reader), and the video element (Firefox)--these came from the proprietary level on up, not from the standards tower on down. And these new "standards" were forged by looking at these past individual implementations (Firefox copied Microsoft largely for XMLHttpRequest, and so on), not by some wide-eyed think tank pondering the future. (ISAPI, the Netscape plugin API, and SQL are all examples of bottom-up standards, where breaking changes are done gradually in a lock-step fashion.)
A standard should be a least common denominator that smooths over the basic differences in implementations, a pidgin language that works across all of them, and not an enumeration of Robert Lowth-style prescriptive rules about a language or system, because then you end up with rules that don't always make sense or apply a non-realistic ideal (like trying to apply Latin-based grammar rules to a Germanic-based language, like trying to apply XML-based grammar rules to an SGML-based language). Oh well, this is what we've got.
Probably the greatest defect in the CSS standard at this point is that there really isn't a good way to specify that a page was written against a particular version of the standard. We can specify DOCTYPEs for our HTML documents, why can't I indicate that a document was written for CSS 2.1? This will only become more important as we start adding more and more bizarre features to CSS that affect the actual content of the page, such as CSS's :before pseudo-elements. A future version of the standard is going to have errors one day that potentially break compatibility, and it'd be nice to let the document author ask for certain behavior rather than have browsers attempt to figure out the intent.
On the lighter side, though, now that IE8 and IE7 are out, things really aren't as bad as they were in, say, 2005. A specific IE6 stylesheet served with conditional comments can really go a long way to making a CSS/standards-based implementation feasible. The other advice is to use Google, to take the 3-column fluid layout example, and hope that someone else has done most of the troubleshooting for you.
Creating a cross-browser compatible Web site is difficult, standard or no standard. You can make it easier on yourself if you accept that there will be some differences in the way different browsers render your site. Don't be afraid of proprietary extensions by any means (it's all right to have CSS3 rounded corners for your non-IE users), but have a fall-back for when they don't exist (eh, the rounded corners aren't critical for using the site), and let your users choose how they'd like to consume your content.
The other answers to this question pretty much cover the ins and outs of why CSS isn't the problem, but as for how I deal with the cross-browser difficulties, it's normally in roughly 4 steps:
Design the site using firefox, as it has lots of useful extensions (most notably Firebug, which tells you which CSS rules are being applied, which are being over-ridden by other rules, etc.)
Check the site quickly in Safari and Opera to make sure design has no flaws there. Normally it'll work fine as - thanks to the CSS web standard - these browsers render web pages in almost identical ways
View the design in ie7 and use the *+html css filter to correct errors
View the design in ie6 and use the * html css filter to correct errors
to do points 3 and 4 yo would have something like this
.box {css rules}
*+html .box {css rules to override in ie7}
* html .box {css rules to override in ie6}
At the end of all this you will still be left with valid css that works across the major browsers.
Hope this helps
*edit - forgot to add that ietester is a great bit of software that allows you to install multuiple versions of ie on windows xp or vista: http://www.my-debugbar.com/wiki/IETester/HomePage
The standard has some shortcomings. It's also quite a difficult thing to implement. The problem is in the implementation more so than the standard.
Use things like YUI where a lot of smart people have done a lot of hard work to make these things work across various browsers.
The standard is there in the open so that the browsers who do not confirm to the standard may look and learn. The standard is important because it is the only way by which you can HOPE to make a webpage that will display correctly on all pages.
Also remember that a standard that is developed is never for the past, it is only for the future. If in the past some browsers did not confirm to the standard it doesn't mean that we should not have standard.
In fact the standard is born because the browsers were all doing their own thingie and there was then a need for the standard.
If you code to the standard the browsers will confirm to it.
Have a hope pal!
It looks to me that You are just starting with CSS. Because even though the browsers do not adhere to the CSS specification perfectly, there is a lot of safe ground that You can use with confidence. This safe ground is nowadays much larger than it used to be about ten years ago, when coding for web was really a royal pain. And new browser releases adhere to the specification more and more, which is exactly why the standard matters. It is a kind of theoretical ideal that the browsers will probably never fully achieve, but even 90–95 percent of it are quite useful in the real world.
I also wish IE would have better implementation of CSS, but once You learn the few things that behave oddly, You can code most of the usual layouts without major hiccups. Most common layouts have also been discussed to death on various CSS forums on the web and there is always some good solution readily available so that You do not have to make it up yourself.
The CSS standard is IMHO not the problem [at least not in the sense of Your question], the problem is the reality of the browser market and the software market in general. As for the frustration, it should mostly go away after You gain some experience. The limits will always be there, but there is a plenty of safe space.
That seems like a non-sequitur. Just because some browsers flout web standards does not mean there's something wrong with the standards themselves. It's a bit like saying that seatbelts are broken because some people choose not to wear them, or that drunk driving laws are pointless because some people don't obey them.
If there were absolutely no standards to conform to, then there would be no World Wide Web, period. Just like an egalitarian society is an unachievable ideal, yet striving for that unattainable ideal has produced tremendous social progress over the decades, so too have W3C recommendations and open web standards produced measurable progress over the lifetime of the web. Without standards like CSS, the interoperability which the web depends on to thrive would not exist.
Yes CSS is broken - though semantically you cannot call it a 'broken standard'. But the question is not really one of semantics.
Experience of aiding in the definition of the UNICODE standard back in the late 80s and early 90s was good training for learning how to write a standard well. I have rolled my eyes so many times W3C write standards documentation that leaves immense holes in the definitions that lead to browsers interpreting things in different ways. There are many mutally exclusive parts to the CSS standard, even in v3, that have come about because we still have to keep compatibility with pre-CSS1.
On the critical side, CSS has three mind-bendingly obvious issues that any computer scientist will tell you are both improperly designed and inconsitent.
The Box Model - there are still huge holes in this even as CSS 3 approaches.
The 'specificity' calculations. 'specificity' was implemented to patch a hole in CSS standard and then later to try and shore-up the ever conflicting rules. If stylesheets are be truely cascading then 'specificity' needs to be scrapped. Until it is CSS should be called SWISMCCS (sometimes-when-it-suits-me-CSS). Of course, in order to scrap this feature all the remaining issues with loose language in the standards need fixing - which in reality means it will never happen.
Naming conventions for classes,selector etc allow the use of characters that are a problem for dynamic processing. The most obvious is allowing '-' symbol to be used in names. If you don't understand why I would encourage you to read up and bytecode compilers and compiler language parsing.
So the answer is the CSS standard is not broken, the premise is sound, but the implementation of the standards documentation (not the browsers, the documentation) shows how conquest by committee will rarely get you something fully fit for purpose.
I suppose this was because CSS was not created for trained programmers, it was created for web-designers - a strange breed who are not really programmers and not really designers. There are real web-developers who are different, but spend less time on pretty graphics.
IMHO: CSS is broken. On the other hand, the alternatives are much worse. Better the devil-we-know. Role on the replacement for HTML.
Developing websites are time-consuming. To improve productivity, I would code a prototype to show to our clients. I don't worry about making the prototype comform to the standard. Most of the time, our clients would approve the prototype and give an unreasonable deadline. I usually end up using the prototype in production (hey, the prototype works. No need to make my job harder.)
I could refactor the code to output valid HTML. But is it worth the effort to output valid HTML?
It is only worth the effort if it gives you a practical benefit. Sticking to standards might make it easier to build a website that works across most browsers. Then again, if you're happy with how a website displays on the browsers you care about (maybe one, maybe all), then going through hoops to make it pass validation is a waste of time.
Also, the difference in SEO between an all-valid html website and a mostly-valid html website is negligible.
So always look for the practical benefit, there are some in some situations, but don't do it just for the sake of it.
Yes. It's hard enough trying to deal with how different browsers will render valid HTML, never mind trying to predict what they'll do with invalid code. Same goes for search engines - enough problems in the HTML may lead to the site not being indexed properly or at all.
I guess the real answer is "it depends on what is invalid about the HTML". If the invalid parts relate to accessibility issues, you might even find your customer has legal problems if they use the site on a commercial basis.
Probably not if you have a non-complying site to begin with and are short on time.
However, and you won't believe me because I didn't believe others to begin with, but it is easier to make a site compliant from the start - it saves you headaches in terms of browser compatibility, CSS behaviour and even JavaScript behavior and it is typically less markup to maintain.
Site compliance (at least to Transitional) is pretty easy.
Producing compliant HTML is similar to ensuring that you have no warnings during a compilation - the warnings are there for a reason, you may not realise what that reason is, but ignore the warnings and, before you know where you are, there as so many, you can't spot the one that's relevant to the problem that you're trying to fix.
If you use Firefox to view your web pages, you'll get a helpful green tick or red cross in the bottom right hand corner, quickly showin you whether you've complied or not. Clicking on a red cross will show you all of the places where you goofed.
Some of the warnings/errors may seem a bit pedantic, but fix them and you'll benefit in many ways.
Your page is much more likely to work with a wider range of browsers.
Accessibility compliance will be easier (You'll have 'alt' attributes on your images, for example)
If you choose XHTML as a standard, your markup will be more likely to be useful in an AJAX environment.
Failure to do this results in unpredictability.
One of the biggest problems with web browsers is that they have perpetuated bad habits (And still do, in some cases) by silently correcting certain markup problems, such as failure to close table cells and/or rows. This single fact has resulted in thousands of web pages that are not compliant but 'work', lulling their developers into a false sense of security.
When you consider how many things there are that can go wrong with a website, being lazy when it comes to compliance is just adding more problems to your workload.
EDIT: having read your original post again, I notice that you say you don't bother with compliance when working on a prototype, then you go on to say that you usually use the prototype in production - this means that it's not strictly a prototype, but a candidate.
The normal situation in such circumstances is that once the customer accepts a candidate, no time is allocated for bug fixing or tidying up, thus strengthening the argument for making the markup compliant in the first place.
If you won't be given time later, do it now.
If you are given time later, then you had the time to do it anyway.
If you want your sight to be accessible to people with and without disabilities, as well as external systems, then yes, you should definitely make sure you output valid HTML.
It's easy to test your HTML with automatic validators.
I'll add to what Mike Edwards said about legal ramifications and remind you that you have a moral obligation too :)
Why not write the prototype in valid (X)HTML in the first place? I've never found that to be more of an effort than using invalid HTML. Producing valid XHTML should be a trivial task. (On the other hand, producing semantically meaningful XHTML might be more taxing.)
In short, I see no advantage whatsoever in using invalid HTML for prototypes.
I honestly dont know why it is extra effort to do standards based HTML. It's not as if it's hard and you should be doing it as a matter of professionalism.
If you paid someone to build you a house and he cut corners out of laziness, that you didnt notice at the time, but in 10 years cracks appeared in your walls, would you be happy?
Valid HTML just to be able to have a badge on your site - no.
Having "valid HTML" in the sense of "HTML that works on every major browser or browser engine" - yes.
Absolutely. Invalid code can cause all sorts of weird behaviors, and errors which don't obscure those that do when you get a validation report.
Case in point:
A yellow background was spilling out of a list of messages and over the heading for the next list of messages - but only in Internet Explorer.
Why? The background was applied to a list item, but the person who wrote the page had written it as a single list with a heading in the middle. Headings are not allowed between list items and different browsers attempted to recover from it in different ways. Internet Explorer ended the list item (with the background colour) when it saw the start of the following item (after the heading), while other browsers ended it when they saw the end tag for the first list item.
It was the only validity error on the page, so it took only a couple of minutes to track down the problem and fix it.
Because, if you stick to standards, your work will be compatible in the future. User Agents will strive for standard compliance and their quirks non-compliance mode will always be subject to change. This is the way is supposed to be.
Unless you're into that whole IE8 broken standards perpetuation thing that they want to enable by default. -- that's another argument.
Webkit, Gecko, Presto? (is that opera's engine?), and the others will always become more compliant with every release.
Unless your html work is in a IE embedded browser control, then there's really no reason to output valid html as long as it renders.
In my opinion the key criterion is "fit for purpose" - If your clients want something for a small/internal market (and don't care if that alienates potential customers who have disabilities or use less-common browsers) then that's their choice.
At the same time I think it's our (as developers) responsibility to make sure they know the implications of their decisions - Some organisations will be bound by legislative requirements that websites be useable by screen readers, which typically means standards-compliant HTML.
i believe making valid html outputs wont hurt your development time that much if you've trained yourself to code valid html from the start. for one, its not that hard to know which tags are not allowed within an elementand the required attributes in a tag are sometimes the ones you'd really need anyway - i believe these are the main errors that makes your html invalid, so why not just learn them as early as now if you plan to stay on the web for long?plus outputting valid html can help boost your sites ranking
There are two rules for writing websites:
The site must work for your users.
The site must work for your users.
To meet the first rule, you have to code such that your site renders correctly when using Internet Explorer. Unless you have the freedom to alter your site design to use only those features that IE renders correctly, this means writing invalid HTML.
To meet the second rule, you have to code such that your site renders correctly when using screen-readers and braille screens. Although some newer screen readers can work with IE-targeted sites, in general this means writing valid HTML.
If you're working on a small project, or you're part of a large team, you can code a site that outputs IE-targeted HTML for IE, and valid HTML otherwise. But if you're taking on a medium-to-large project on your own, you have to decide which rule you're going to follow and which one you're going to ignore.
UPDATE:
This is getting voted down by users who think you can always get away with valid HTML in IE. That may be true if you have the flexibility to change your design to get around IE's shortcomings, but if a client has given you a design and you have to get it working, you may have to resort to invalid HTML. It's sad, but it's true, whatever they might think.
Short version: What is the cleanest and most maintainable technique for consistant presentation and AJAX function across all browsers used by both web developers and web developers' end-users?
IE 6, 7, 8
Firefox 2, 3
Safari
Google Chrome
Opera
Long version: I wrote a web app aimed at other web developers. I want my app to support the major web browsers (plus Google Chrome) in both presentation and AJAX behavior.
I began on Firefox/Firebug, then added conditional comments for a consistent styling under IE 6 and 7. Next, to my amazement, I discovered that jQuery does not behave identically in IE; so I changed my Javascript to be portable on FF and IE using conditionals and less pure jQuery.
Today, I started testing on Webkit and Google Chrome and discovered that, not only are the styles inconsistant with both FF and IE, but Javascript is not executing at all, probably due to a syntax or parse error. I expected some CSS work, but now I have more Javascript debugging to do! At this point, I want to step back and think before writing piles of special cases for all situations.
I am not looking for a silver bullet, just best practices to keep things as understandable and maintainable as possible. I prefer if this works with no server-side intelligence; however if there is a advantage to, for example, check the user-agent and then return different files to different browsers, that is fine if the total comprehensibility and maintainability of the web app is lower. Thank you all very much!
I am in a similar situation, working on a web app that is targeted at IT professionals, and required to support the same set of browsers, minus Opera.
Some general things I've learned so far:
Test often, in as many of your target browsers as you can. Make sure you have time for this in your development schedule.
Toolkits can get you part of the way to cross-browser support, but will eventually miss something on some browser. Plan some time for debugging and researching fixes for specific browsers.
If you need something that's not in a toolkit and can't find a free code snippet, invest some time to write utility functions that encapsulate the browser-dependent behavior.
Educate yourself about known browser bugs, so that you can steer your implementation around them.
A few more-specific things I've learned:
Use conditional code based on the user-agent only as a last resort, because different generations of the "same" browser may have different features. Instead, test for standards-compliant behavior first — e.g., if(node.addEventListener)..., then common non-standard functions — e.g., if(window.attachEvent)..., and then, if you must, look at the user-agent for a specific browser type & version number.
Knowing when the DOM is 'ready' for script access is different in just about every browser. A good toolkit will abstract this for you.
Event handlers are different in just about every browser. A good toolkit will abstract this for you.
Creating DOM elements, particularly form controls or elements with attributes, can be tricky with document.createElement and element.setAttribute. While not standard (and kinda yucky), using node.innerHTML with strings that contain bits of HTML seems to be more reliable across browser types. I have yet to find a toolkit that will let you use element.setAttribute to add a 'name' to a form element in IE.
CSS differences (and bugs) are just as important as JS differences.
The 'core' Javascript features (String, Date, RegExp, Array functions) seem to be pretty reliable and consistent across browsers, especially relative to the DOM/CSS/Window functions. There's some small joy in the fact that the language isn't entirely different on every platform. :-)
I haven't really run into any Chrome-specific JS bugs, but it's always one of the first browsers I test.
HTH
Chrome is actually a little different to Safari, it uses a completely different javascript implementation and problems have been reported with both prototype and jquery. I wouldn't worry about it too much for now, it's still an early beta version of the browser and such inconsistencies will probably be treated as bugs. Here's the bug report.
One "silver bullet" you may consider turning to is Google Web Toolkit (GWT).
I believe it supports all the browsers you are interested in, and gives you the ability to code your UI in a Java-compatible IDE such as Eclipse. The advantage of this is you can use IDE tools for code completion and compile-time error checking, which greatly improves development on large-scale UI projects.
If you use GWT UI components, it will hide a lot of browser-specific nastiness from having to be dealt with, but when you compile, will create a compact, deploy file for each browser platform. This way you never download any IE-specific code if you are viewing the app in Firefox. You will also have a client-side stub generated which will load the appropriate compiled bundle of JS. To sweeten the deal, these files are cacheable, so perceived performance is generally improved for returning visitors.
The landscape has evolved considerably to accommodate cross-browser development. jQuery, Prototype and other frameworks exist for cross-browser Javascript. CSS resets are good for starting on a common blank canvas for all browsers. BluePrint and 960 are both CSS frameworks to help with layouts using CSS grid layouts techniques that seems to be getting very popular these days.
As for other CSS quirks across the different browsers, there is no holy grail here and the only option is to test you website across different browsers and use this awesome resource and definitely join a mailing list to save up soem time.
If you are working on high volume production site then you can use a service like browsercam.com in the end game to ensure the site doesn't break horribly in some browser.
Lastly, don't try to make the site look the same in every browser. Your primary design should target IE/FF and you should be okay with reasonable compromises on others. Use the graded browser chart to narrow in on browser support.
As for best practices, starting using wireframes on blank paper or a service like Balsamiq mockups. I am still surprised how many developers start with an editor instead of a wireframe but then again I only switched a year back before realizing how big a time saver it is. Have clean seperation of layout (HTML), presentation (CSS) and behaviors (Javascript). There should be no styling elements in HTML, no presenation in Javascript (use .addClass('highlight') instead of .css({'background-color': 'red'});).
If you are not familiar with any of the bold terms in this post, Googling them should be fruitful for your web development career and productivity.
If you're starting from a base reset or framework and have accounted for IE and it's still all freaky, you may want to recheck the following:
Everything validates? CSS and HTML?
Any broken links to an included file (js, css, etc?). In Chrome/Safari, if your stylesheet link is busted, all of your links might end up red. (something to do with the default 404 styling I think)
Any odd requirements of your js plugins that you might be using? (does the css file have to come before the js file, like with jquery.thickbox?)
For UI, check out Ext.
It's great as a standalone library, though it can also be used with jQuery, YUI, Prototype and GWT.
Samples: http://extjs.com/deploy/dev/examples/samples.html
I've found four things helpful in developing JavaScript applications:
Feature detection
Libraries
Iterative Development using Virtualization
JavaScript: The Definitive Guide, Douglas Crockford & John Resig
Feature Detection
Use reflection to ask if the browser supports the desired feature. If you want to know what event handling a browser supports, you can if(el.addEventHandler) for W3C compliance, if(el.attachEvent) for the IE-type, and finally fall back on el.['onSomeEvent'].
ONE BIG BUT!
Browsers sometimes lie about what features they support. I can't remember, but I ran into an issues where Firefox implemented a DOM feature, but would return false if you tested for that feature!
Libraries
Since you're already working with jQuery, I'll save the explanation. But if you're running into problems you may want to consider YUI for it's wonderful cross-browser compatibility. They even work together.
Iterative Development with Virtualization
Perhaps my best advice: Run all your test environment's at once. Get a Linux distro, Compiz Fusion and a bunch of RAM. Download a copy of either VMWare's VMWare Server or Sun's Virtual Box and install a few operating systems. Get images for Windows XP, Windows Vista and Mac OS X.
The basic idea is this: Compiz Fusion gives you 4 Desktops mapped onto a Cube. 1 of these desktops is your Linux computer, the next your Virtutual Windows XP box, the one after that Vista, the last Mac OS X. After writing some code, you alt-tab into virtual computer and check out your work. Plus it looks awesome.
JavaScript: The Definitive Guide, Douglas Crockford & John Resig
These three sources provide most of my information for JavaScript development. The Definitive guide is perhaps the best reference book for JavaScript.
Douglas Crockford is a JavaScript guru (I hate the word) at Yahoo. Lookup his series "Douglas Crockford Theory of the DOM", "Douglas Crockford Advanced JavaScript", "Douglas Crockford Theory of the Dom", and ""Douglas Crockford The Good Parts" on Yahoo! Videos.
John Resig (as you know) wrote jQuery. His website at ejohn.org contains a wealth of JavaScript information, and if you dig around on Google you'll find he's given a number of presentations on defensive JavaScript techniques.
... Good luck!
Just so you've got one less browser to worry about, Chrome uses the same rendering engine as Safari. So if it works in Safari, it should work exactly the same in Chrome.
See this post on Matt Cutts' blog.
Google Chrome uses WebKit for rendering, which is the same rendering engine as Apple’s Safari browser, so if your site is compatible with Safari it should work great in Chrome.
Update: Looks like this is now out-dated info. Please see Vox's comment on this answer.
If your very top priority is exactly consistent presentation on all the browsers listed with no disparities, you should probably be looking at AS3 and Flex.
Personally, I use Mootools as a simple lightweight javascript framework. It is simple to use and supports all the browsers above (except Chrome, but that seems to work too as far as I can tell).
Also, to ensure consistency across the browsers, I get a feature/style/behaviour/etc. to work in one browser first (usually Firefox 3 with firebug), then immediately check to make sure it works in all the other browsers (leaving IE6 for last). If it doesn't, I inveset the time to fix it right away, because otherwise I know I won't have time later (in my experience, getting things to work cross-browser takes about 50% of my dev. time ;-) )
Validating your javascript with a "good parts" + browser on JsLint.com makes it less likely to have JavaScripts behaving differently in FF, Safari etc.
Otherwise - using standards and validating your code as well as building on existing techniques like jQuery should make your site behave the same in all browsers except IE - and there's no magic recipe for IE - it's just bugs everywhere...