Cascading Style Sheet (CSS) - Tips and Tricks

CSS - Development and Testing Resources

Color Checking Tool

• http://www.colorschemer.com/online.html
• http://colorschemedesigner.com

For CSS development the following tools can be used

• Adobe Dreamweaver

There are CSS analysis tools that come with all the leading browsers now.

• IE - Tools->Developer Tools or press F12
• Firefox - Firebug plugin has webdeveloper toolbar.
• Chrome - The browser itself comes with rich java script and CSS handling tools. To access go to Tools->Developer Tools

Testing Tools

• For IE testing one can use Expression Web super view from http://expression.microsoft.com/en-us/dd565874.aspx
• IE tester is another one that can be used for testing different version of IE  http://www.my-debugbar.com/wiki/IETester/HomePage
• Adobe Browser lab

CSS - Handling Browser Moods

I think a big part of browser compatibility industry survives on the moods of IE6. And still this can not be ignored because still substantial number of people use IE6. To see the various trends on browser usage, look at the link http://www.w3schools.com/browsers/browsers_stats.asp

To handle IE specific issues, the conditional statements are put inside comment. (We think comments are only for real user). The IE will look into those comments though all other browser ignore it. The condition looks like

<! -- [if condition] >

IE is the greatest browser. Only IE will see it :)

<! [endif]- ->

Conditions are:

• lt  Less than
• lte  Less than or equal to
• gt  Greater than
• gte  Greater than or equal to
• IE 6  IE version 6 (Note the space between IE and 6
• IE 7  IE version 7

For example for less than or equal to IE6

<! -- [if lte IE 6] >

IE 6 is the coolest browser ever made

<! [endif]- ->

CSS - Trivia

What is the most available font list in internet?

• The most available font list in end machine can be seen at http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

What is 960 grid system?

• Designers use to do the layout and is based on 960 pixels width screen and is used for doing layouts. Check http://960.gs/

HTML5 boilerplate

• Check http://html5boilerplate.com/. This is a base html/css/js template to start with. Supports various browsers and all.

Modernizr Javascript

• http://www.modernizr.com/. A small javascript library which provides fine level control on various issues depending on the underlying browser.

selectivizr

• http://selectivizr.com/. selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Please add to comment if you have more tricks under your sleeve.

More articles on CSS