Where can I find out about browser-related issues when writing CSS/HTML/JavaScript?

August 17, 2010 8:54 AM

Where can I learn about how to deal with browser-related problems when writing CSS, HTML and JavaScript for a web site?

I've mostly taught myself how to create web sites, and have learned most of the basics of HTML, cascading style sheets, and simple JavaScript. However, I have discovered that at least 90% of my development time is spent ensuring that a design works on all supported browsers, as each browser's implementation of cascading style sheets differs from the design specification in small but frustrating ways.

Is there a book, web site, or other resource that can provide some handy tips and tricks for which code constructions and CSS rules work best on all commonly used browsers? Most books that I have seen describe what the appearance of a web site would be in an ideal world where the standard is implemented as designed.

Thanks in advance for any help you can provide. Much appreciated.

posted by tallmiddleagedgeek to computers & internet (10 answers total)

One thing I would recommend is using a CSS Reset (the link is to Eric Meyer's version). Using a reset starts you out on an even playing field with all browsers, then build UP, instead of coming in and editing to each browser's specs.
posted by coupdefoudre at 9:15 AM on August 17, 2010 [1 favorite]

Position is Everything lists the known bugs of the major browsers and how to solve them.
posted by JJtheJetPlane at 9:44 AM on August 17, 2010

quirksmode
posted by juv3nal at 10:00 AM on August 17, 2010

Ditto quirksmode, especially for javascript.

I think 60% or more of my headaches have gone away by dropping IE6 whenever possible. IE7 kills a lot of the huge major super-stupid CSS bugs out there.

I tend to build to the best browsers available--Webkit and Firefox most often, sometimes Opera--then figure out some workarounds for older and less capable browsers (IE, basically). The IE development plugin is insanely useful, if only for the ability to add "zoom:1" to elements to see what happens. Very often it's just a trick of forcing an element to "hasLayout".

I tend to maintain an informal "standard library" of markup and css that I tweak and add to whenever I see a deficiency. I then drop that into a project I'm working on (if appropriate) and tweak as necessary. This includes things like buttons, form fields, boxes, columns, layouts, and microformat-esque layouts.

For javascript, pick a JS library and get good at it. Learn to read the original source code to track down the how and why the code works. Any of the major libraries out there are good option (and best you remember that, lest you become one of those people itching for a JS platform war), and their primary goal is to smooth out browser inconsistencies and give you a standard set of tools to work with.
posted by TeslaNick at 10:42 AM on August 17, 2010

Oh, also, I have no idea if it's best practice or not, but if you don't already know about them, IE conditional comments can be really useful for serving up alternate versions of css when a one-size-fits-all solution can't easily be had.
posted by juv3nal at 11:11 AM on August 17, 2010

Another thing to consider is adopting a good scripting library that will effectively "shield" you from browser inconsistencies (it doesn't actually fix anything, but the library will handle the different implementations of features, etc, leaving you with a single interface to call). Ive had good luck with jQuery for both interactivity and styling. Just an idea...
posted by OneMonkeysUncle at 12:09 PM on August 17, 2010

If you're seeing big variance in how CSS works across major browsers (apart from IE <>quirks mode, where browsers are purposely compatible with older versions of themselves rather than the standards, and not "Almost Standards" mode or full standards mode.

For a general introduction to cross browser web design try Bulletproof Web Design or the latest edition of Designing with Web Standards. Another book I like is CSS Mastery which, at least in the first edition, covered in detail how to target specific browsers in CSS through hacks.

For JavaScript, if you're not going to use jQuery as OneMonkeysUncle very sensibly suggests, try Bulletproof Ajax.
posted by robertc at 4:47 PM on August 17, 2010

Thanks for the information - greatly appreciated.
posted by tallmiddleagedgeek at 7:11 PM on August 17, 2010

All excellent answers. Since you should still be testing, even with all the good advice you've received, you might check into creating a test bed with a group of virtual machines. I use VM Ware and have a VMs for several browser / OS configurations, I can then easily run through the VMs and test the page that way.

Take care.
posted by hagg at 12:25 PM on August 18, 2010

I've just noticed half my first sentence above disappeared, I think because I used an angle bracket. The missing fragment, where the angle brackets are, was something like "less than or equal to 7) then you're probably having your pages render in".
posted by robertc at 3:19 PM on August 18, 2010