Great CSS Thingies
OK, in the last few days (and before that) I have discovered a few CSS tricks that are pretty handy. You may already know them but if not here they are.
!important
This is an oldie and not really a hack of any kind but it is still pretty cool. If you are putting stuff in your CSS and you can't see why it isn't styling the stuff it should be, try adding in !important after the attribute value like this:
a { color: #00ff99 !important; }
Normally in your stylesheet, whichever style come last takes precendence but using !important forces it to overide all previous and following styles. Except in IE (surprise, surprise) where the !important needs to be the last declaration.
The Hide-From-IE Child Selector Hack
This is a simple hack to hide CSS from IE. All it takes is to add the html>body parent/child selector at the start of the style definition and becaue IE is inept at recognising this W3C defined selector it ignores it. Your CSS may look something like this:
html>body a { color: #00ff99; }
For more info on Child Selectors visit www.w3.org.
The Show-Only-In-IE Underscore Hack
This is the inverse of the previous hack in that it hides the CSS from everything but IE. It's really simple because all you do is prefix your CSS arribute with an underscore. Your CSS may look something like this:
a { _color: #00ff99; }
The downside of this is that your CSS will no longer validate so where possible use the Child Selector hack which is valid. For more info, check out www.noscope.com
Vertical Centering in CSS (without using tables)
This is the most useful CSS thingummy I've found in a long time. Back in the day of tables-based layout, vertically centreing content of an unknown height was easy. However, in these days of CSS and XHTML, the weakness that is inherent in CSS for vertically centreing content that has a variable height is a real pain. The best solution I have come across combines the use of CSS display types that are supported by all browsers but IE, a few small hacks and 3 holding DIVs. Your HTML would look something like this:
<div id="demoouter">
<div id="demomiddle">
<div id="demoinner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>
Your CSS would then look a little like this:
#demoouter{
width: 200px;
height: 400px;
position: relative;
border: 1px solid #990099;
}html>body #demoouter {
display: table;
position: static;
}#demomiddle {
width: 200px;
position: absolute;
top: 50%;
}html>body #demomiddle {
display: table-cell;
vertical-align: middle;
position: static;
}#demoinner {
width: 200px;
position: relative;
top: -50%;
text-align: center;
border: 1px solid #009900;
}
This would give you the following result:
any height
any content, for example generated from DB
everything is vertically centered
Groovy huh? It's not quite as clean as I would like but it does mean that your code retains a logical structure without adding in table tags for something that isn't actually a table. For more info on this, check out www.jakpsatweb.cz.
Hmmm. I’m not a huge fan of
!important. It encourages sloppiness, as in “I can’t be arsed to find out what’s overwriting this, so I’ll just bung an !important in there”. What it’s usually down to is your selectors not being specific enough. I tend to use it as a last resort when I really can’t figure out why my styles aren’t being applied (usually when IE6 is being a spanner).Another thing to note is that IE7 will support child selectors and it’s likely that they will have fixed the underscore bug too, which may mean that your hard work fixing a stylesheet for IE will have gone to pot. The very best way of specifically targetting IE is to use conditional comments. That’s also good in that it encourages you to keep your hacks in a separate stylesheet.
February 12th, 2006 at 5:10 pmThere was an occasion recently where my CSS selectors had to be specifically vague so I could share some styles depending on the parent div ID and the child element class. Using !important was the only way I could get the styles to apply.
As far as IE7 is concerned I shall wait and see what happens when it is actually released. I have heard that they are fixing many things so it may be that if IE7 starts applying the html>body hacks I have put in for Mozilla et al then it will still look as intended. If not, I’ll have to go back and revisit the CSS. Oh, I haven’t actually used the underscore hack yet, I just thought it looked pretty useful if push came to shove!
To be honest, I have never had a stylesheet so full of hacks that I have thought it important to have a seperate, conditional CSS document. That said, I’m sure the day will come when I have to. We’ll see what happens when IE7 finally arrives. If it is as good as MS have promised than hopefully many of the well known problems will disappear.
February 12th, 2006 at 5:24 pmHaving said I have never used a conditional IE CSS document I have just set one up for the site I’m working on. It all seems to be going OK. It’s just a pain you can’t do the conditional stuff within a single CSS document.
February 12th, 2006 at 6:58 pmAs you have chosen to ignore the fact!!!
Don’t catalogue Man and catalogue Boy (Pete and Raj) look very pretty together!
Helen looks pretty too.
S
February 13th, 2006 at 10:58 amDude - I’m getting round to writing something up. I just have some work to do first!
February 13th, 2006 at 11:00 amThnaks for the tips to this css newbie. Maybe some day I will be as cool as you and olly
February 13th, 2006 at 4:00 pmSara - I’m always willing to help. Olly isn’t though because he’s a curmudgeonly old so-and-so.
Seriously though, if you ever need to ask someone a quick question and none of your wiser associates are around, feel free to drop me a mail or MSN me.
February 13th, 2006 at 4:05 pmBAH HUMBUG.
February 14th, 2006 at 9:49 amI wish I could code this well.
February 17th, 2006 at 10:09 amNo you don’t.
February 17th, 2006 at 11:27 amYes I do….
Or maybe…
February 17th, 2006 at 3:13 pm