There are many different ways to achieve the same layout in CSS and HTML. Some are now frowned upon, like tables or floats, and others tend to overlap somewhat, but have a clear specific purpose, like Flexbox and Grid. But CSS has another layout engine, and it’s one that has been part of CSS since […]
CSSets
In this (hopefully) series I will talk about the little CSS tricks that many of you won’t know. Some will be nice pointers, some will be eyeopeners, none will be earth shattering, but they will all be useful.
…the title? Pronounce it ;)
An eyeopener for starters: the <ul> is a container too.
Big chance that you’ll find this code being used for a menu:
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
Many, many web designers seem to forget that all tags are containers. Yes, all tags. That includes the <ul> tag. So why would you want to add yet another <div>? there are enough already if you ask me ;). Take a moment to look at this perfectly working, perfectly validating, but very much smaller code:
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
Granted, you’ll only save a couple of bytes. But in the end, you’ve produces more readable and clean code.
Incapable browsers bugging you? Find a better position.
On every block container I add position:relative; to the css. It’s the easiest way to slap some sense into IE6 and perhaps even IE7 too. Position:relative; mostly “fixes” problems concerning odd first-time rendering problems, float problems and all sorts of weird things that seem to have no real cause.
At least, that’s what it seems. In reality it just makes sure that your hasLayout is set to 1. HasLayout is an IE property that determines if your container has, you guessed it, layout. So instead of getting headache’s, add position:relative; to every block container you have and you won’t notice problems in the first place.
Start with the right foundation.
Always start your CSS with some basic rules, it will make your life a lot easier. This is my base:
/* ***************************
GLOBAL RESET SETTINGS
***************************/
* {margin:0;padding:0;}
a img {border:none;}
a:focus {outline:0;}
html {height:100%}
That all seems a bit random, so I’ll explain the above line by line
* {margin:0;padding:0;}the * selector means “all elements”. With this, I’m effectively resetting all margins and paddings on all elements in my html. Begone, evil Browser differences!
a img {border:none;}Remember back in the day when linking images had a nice blue border? Not anymore.
a:focus {outline:0;}This is a bit more recent. Firefox adds a dotted outline to selected links. Nothing wrong with that, except for the fact that the outline adds to the width of the element too. So it screws your layout up if it’s very tight. You can use this to remove it. Make sure you have another method of focus to replace it though, focus is there for a reason. (try tab-ing your way through your homepage to find out why.)
html {height:100%}This one takes a bit of CSS knowledge. For an element to have 100% height, its parent container needs a height, too. If you would just add height:100% to your <body> tag, it wouldn’t work because the <html> tag has no height.
I hear you ask: ‘Then why doesn’t the <html> tag need a parent with 100% height?’. To be honest: beats me. But my best guess would be that your browser uses the viewport as a parent for your <html> tag.
And finally…
You’d expect me to say something about the things I will talk about next time, but honestly I don’t know yet. So instead of doing that, feel free to add a comment. Because even though I like to pretend to know everything -I don’t. If I forgot something, or if you have something you’d like to expand, feel free to do so. :)
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!