CSS is an easy to learn and use language, but working with it in real world problems can be a little challenging especially for newbie. The main cause of trouble is different browser support and rendering for CSS.
- Tip 1: Learn how to target IE
- Tip 2: Use a CSS reset
- Tip 3: Make your content printable
- Tip 4: Use an advanced CSS editor
- Tip 5: Compress Vs. lucid your code
IE is known for its’ bad support for the CSS and HTML standards, however 60% of people use it. So it needs a special care which means a special style sheet for it.
In your page “head”, you can target IE browsers by this tag
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
Nevertheless, this doesn’t always work. Why? Because IE6 and IE7 are also different, so you need to target each one apart.
Target Version 6 only:
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
If you have tweaks for earlier versions of IE, don’t target each one alone, you can target less than IE X
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
And more than IE X
<!--[if gte IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
Browsers have default values for margin, padding. But each browser has its’ default settings.
To avoid being confused (especially when using margin and padding values), you’d better use a reset to set all values to default.
Some Popular CSS resets:
MeyerWeb
YUI CSS reset
What about if a user liked a page and desired to print it and read it offline instead?
Will it print all those widgets, logos and other carps you did add to your website?
CSS is flexible and offers a way to target other media than screen, like print, phones…
To include the style in a style sheet:
@import url("fancyfonts.css") screen;
@media print {
/* style sheet for print goes here */
}
In a HTML page
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">
For more information, visit W3C
Get yourself advanced CSS editors and some other professional plug-in.
Most popular and powerful ones are
Firebug: a Firefox plug-in for debugging HTML, CSS and JavaScript.
Stylizer: not very popular but you are very unlikely to try another if you explored all its’ functionalities.
When writing, reading and debugging CSS, it’s better to use understandable code, like this.
Body
{
Color: #121212;
}
When publishing your website, compressing your code can save you few bits (by suppressing spaces, comments…): up to 40%.
Body { color: #121212; }
Clean CSS is a great service that can both compress and uncompress your code.
Interested in more tips to improve your coding skills?
53 CSS techniques (Smashing Magazine)
CSS tips and tricks (Blog Herald)
101 CSS techniques (Noupe)
{ 0 comments… add one now }