7 CSS Tips to Reduce Development Time and Stress
April 7th, 2009 - CSS, Web DesignComments (6)
CSS is one of the first areas that aspiring web gurus encounter on their journey. It can prove to be a brutal test of dedication to the craft, browser quirks and compatibility issues can be enough to push one to a purely Flash based path. It’s not all bad though. Browsers continue to improve support with each iteration, and the web community has created solutions to fill in the gaps. Still, it’s good to be mindful of some of the lingering snags.
Below are seven things to keep in mind to reduce development time and stress when dealing with CSS.
1. Use a CSS Reset
Browsers have defaults for the basic HTML elements, and each browser is different. A reset will get them all on the same page. It’s best to use a targeted approach instead of something like:
* { margin: 0; padding: 0; }
The above has to parse through each element of the DOM and is rather inefficient. A couple of tried and true solutions include Eric Meyer’s Reset Reloaded and the YUI Reset CSS. With these if you need a specific default styling you can simply delete it from the reset code and continue on.
2. Standardize Font Sizes
A discussion on the various font units can be found at Max Design. Though the post is several years old the concepts still apply. This solution is assuming you will be using em units on your fonts. Percentages are used to set the default font size, then it’s all ems from there.
First we’ll set the font-size of the html element:
html { font-size: 100.01% }
The 0.01% on the end is for older version of the Opera browser that had some size inheritance glitches. Other browsers will simply round off to 100%.
body { font-size: 62.5%; }
Setting the body to 62.5% allows us to work with a 10px base size, much friendlier for ems ( default browser font-size is 16px – 62.5% of 16px is 10px ). It is also easier to visualize the sizes now. For example, to get a 12px font-size in paragraphs using ems:
p { font-size: 1.2em; }
3. Use a doctype
Declaring a doctype will improve the CSS support of your documents. Use it! Preferably the Strict doctype, but if you must, the Transitional type will do. A rundown of the pros and cons of each doctype was covered in a previous post. Paste one of these at the very top of your HTML:
Strict HTML Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional HTML Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Strict XHTML Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional XHTML Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. IE6 Doubles Margins on Floats
One of many IE6 quirks is the doubling of margins on the floated side of the element. For example, if you have a container floating left with a left margin of 20px:
div.root-beer { float: left; margin-left: 20px; }
The margin applied would actually be 40px. To avoid this you can simply apply margins to the opposite side only, or use a separate stylesheet ( using IE conditional comments ) and divide the margin by two. More IE6 quirks and solutions can be viewed on this post by Kyle Neath.
5. Transparency in IE = Filters
Most browsers support the opacity attribute to modify the transparency of specified elements. IE requires use of browser specific filters:
div.make-me-transparent { filter: alpha(opacity=50); }
6. IE < 7 Does Not Support position: fixed
Ah, another IE < 7 bug. Positioning an element as fixed will act like position: absolute on browsers below version 7. Luckily market share of IE6 is decreasing in favor of more standards friendly browsers.
7. IE < 7 Does Not Support PNG Alpha Transparency
The PNG image format includes an alpha channel that allows for more flexible transparency compared to GIFs. Unfortunately IE6 doesn’t recognize the alpha channel by default. Workarounds exist in the form of JavaScript snippets such as the Unit PNG fix.
IE 6 Really made a web developers life hell. It just doesn’t work like a normal browser should.
Nice article by the way.
Very true. After nearly 8 years, and 2 browser versions, hopefully we’re getting close to the point where we can stop considering IE6 during development. Until then I’m thankful we at least have conditional comments to slightly offset our troubles.
Thanks!
You may want to check that loose HTML doctype. It should be:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
Good catch! I must have been staring at those doctypes too long to miss that.
[...] Good article listing 7 CSS Tips to Reduce Development Time and Stress. [...]
[...] 7 CSS Tips to Reduce Development Time and Stress Ractoon – Web Development and Design (tags: css) [...]
Microsoft needs to leave the browser behind. MS is my bread and butter, but even I don’t promote their browser. In fact, I convert everyone I run into over to FireFox.
Won’t be long before IE is just a horrible memory.