CSS tips and articles
Pete
I began teaching myself Cascading Style Sheets (CSS) in 2004 when I graduated from University and started work in website development. At the time it was difficult to find well written resources that thoroughly explained how various CSS techniques worked.
In the past few years, CSS adoption has increased dramatically. These days most high profile websites use CSS rather than tables for their design. Although amazon.co.uk and bbc news still have partially table based layouts, naughty!
Thankfully they are now many excellent articles available on CSS. Yesterday while working my way though some bug fixes on phuser.com I stumbled upon some brilliant ones that I hadn’t read before.
Emil Stenstrom has written an excellent article on how to Cross-browser CSS for your site. One tip I picked up is to start your CSS files with:
-
* { margin: 0; padding: 0; }
This will remove all default element stylings which can be a right pain in the @r$e when trying to get your site to render consistently cross browser. A clever little hack he suggests is the "star html" hack:
-
* html #element { code; }
This is valid CSS but only IE will apply "code" to "#element". I think its much cleaner than other browser hacks I’ve seen. Many of his articles are well worth a read but I would especially recommend his guide on structuring large CSS files . Real hackers don't use css is more amusing than useful but still interesting.
For people wanting to learn more about CSS and web design techniques in general A List Apart is well worth checking out. Also worth a mention is this fix for the two columns with equal height layout, it uses Javascript instead of the normal background image fix.
/* Pete Graham */
Posted in Tech, css, javascript, Website Development |
February 2nd, 2007 at 11:29 am
Here’s a link with some CSS techniques I hadn’t seen before. I’ve always used margin: 0; and padding: 0; tom reset everything, but after reading this I may reconsider.
http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/
Anotehr thing is that you might want to read up on conditional comments to shield IE from CSS it can’t understand. * html is nice and easy, but relies on parsing errors which might get fixed, or might show up in other browsers. Conditional comments are a neat, valid way of doing things.