Article
Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know
Options for the Non-compliant Browser
Progressive Enhancement
Progressive enhancement is a very important part of using advanced CSS. You can avoid problems with non-compliant browsers by taking a layered approach to development:
- Layer 1 is your content and document structure (HTML).
- Layer 2 is your presentation (CSS).
- Layer 3 is any behavior you want to add (advanced CSS and JavaScript).
First, focus on getting layers one and two right -- to ensure a decent base-level experience for all users, no matter which browser they use. Once the core development is finished, you can safely add advanced CSS features to enhance the user experience for visitors who use supportive browsers, knowing that the most important elements will always be available to all.
Filling in the Gaps with JavaScript
There are some great JavaScript libraries available to help IE6 achieve more standards-compliant behaviour. In some cases, it can end up being more compliant than its upgraded companion, IE7.
Back before IE7 was released, Dean Edwards created a script called "ie7". This is a package of JavaScript files that deals with a variety of compliance issues in IE6. These files can be downloaded from Google Code, and you can find additional information on the Dean Edwards ie7 page. These files tend to be a little heavy, but work very well, and you can pick the ones you want to use based on your own needs.
Another script that you can use to help work around non-compliant browsers is jQuery. JQuery's prepend method can be used to insert client-side elements into your markup, and you can style them accordingly. This will create more CSS, but may be a good solution if you're already using jQuery.
One more solid option is Alex Bischoff's offspring.js on A List Apart. Offspring.js adds pseudo-classes automatically via DOM scripting. It also allows you to use CSS3 selectors, such as :nth-child(), that aren't normally available. While IE6 has the most to gain from this script, all current browsers will reap the benefits.
Trust Your Own Experience
I feel like the guy from Reading Rainbow saying "don't take my word for it", but... don't take my word for it! Make sure you do your own research. I have stats on browser usage on my personal web site, SitePoint has its own stats, and so do you; the majority of your front-end development decisions should be based on the people who visit your site. Every web site will have different trends and demographics to guide development strategies. You should track your visitors and create a regular schedule for reviewing your statistics (I look over mine about once a month). These review can be very helpful over a period of time. Wouldn't you want to know the instant your users start upgrading their browsers?
Personally, I've used Google Analytics and StatCounter to analyze my site traffic. Either one will get the job done. Google Analytics is a more comprehensive program with extremely in-depth data analysis. StatCounter provides more general information, but it's very relevant and useful.
Enjoying the Benefits of Advanced CSS
Some of the best publications I've read have answered the question: "Why?" Why should I use advanced CSS techniques when I can accomplish the same effect by adding in an extra class, ID, span, or div, or by using JavaScript?
The answer is very simple: you can do more with less code. With browsers evolving very rapidly in recent years, CSS support is improving. By having to use a minimal amount of markup, you can safeguard your site against browser updates and changes, and vastly increase accessibility with very little effort.
These techniques will cut down on the amount of HTML and CSS you need to use to complete the layout you desire. There will always be a hundred different ways to do something on the web; if you use advanced CSS, you can do them with less markup and create lighter, more usable, accessible web sites.
References