Humans are creatures of habit, and web developers are naturally no different. We develop certain techniques that work, and we stick with them — because, well, they work. But once in a while it’s good to refresh our minds and recall some aspects of development that we’ve probably forgotten. In this article I’ll go through 10 CSS properties that accomplish very specific, practical tasks, that are often overlooked.
I know what you’re thinking: Nobody’s forgotten about the
overflow property. It’s used all the time on
<div> elements when you want them to scroll. That is certainly the most well-known use of the
overflow property, but I personally find that this property comes in quite handy when you want to give “auto height”, or natural vertical expansion, to a block level element that you don’t want to float.
This problem usually occurs in Firefox; the element is essentially “collapsed” — unless you float it. But floating often brings about other layout issues, and using float in this manner goes against the purpose of the float property.
overflow: hidden to allow a block level element (usually a
<div> that does not have a set height) to expand vertically with the content it contains, even when it contains floated elements.
visibility: hidden is easily confused with
display: none, but the difference between them is very important. 99% of the time, when you want to hide an element on your page, you’ll use
display: none. Using
display: none will ensure that the space occupied by the “invisible” element disappears along with the element itself. But there are some rare instances when you don’t want this to happen. Instead, you want the space that the element occupies to remain exactly the same (possibly because it’s being replaced by another element that was previously invisible). So in this case, the correct CSS would be
display: none affects the flow of the document;
visibility: hidden doesn’t.
Any time you want to keep an inline element from breaking onto a second line, simply apply
While this property comes in handy for short anchor text and span elements, it should be used with caution, since it can potentially cause an element to become larger in width than the element that contains it.
text-transform property is used quite often, and is highly recommended for controlling the case of text. It offers values of capitalize (also called “title case”), uppercase, and lowercase. But only the
font-variant property allows us to set text to “small-caps”.
In almost 10 years of web development, I think I’ve used letter-spacing twice, but it provides a very simple, yet practical, effect, and it does exactly what it says — it adjusts the space between letters. The only thing to keep in mind is that the space set by
letter-spacing is not absolute space, but rather, it is relative to the space that already exists by default. So, the
letter-spacing property legally accepts negative values. Therefore, using
letter-spacing: -1px will decrease the space between elements by 1 pixel. And
letter-spacing: 3px will increase any already existing space.
I think z-index is one of a few CSS properties that has caused the most head-scratching in the web development world. You would think that, since it sets the stacking order of the element to which it’s applied, then it should be quite simple: If you set the
z-index to a high value, it will stack the element on top of everything; if you set it to a low value, it will stack the element below everything.
But, unfortunately, it’s not that simple. First, the element that has a
z-index value must have its
position property set to either relative, absolute, or fixed. In addition, in order to cause the specified element to actually override the page’s default stacking order (which is the order in which the elements appear in the XHTML), the other elements must also have a specified
z-index and a specified
position of one of the three values mentioned above.
z-index only works on positioned elements, and only restacks in relation to other positioned and z-indexed elements.
z-index is probably not a “forgotten” property — but it’s most certainly a constantly abandoned one.
Tables are not dead. They have their place in standards-compliant, accessible web pages, and they should still be used — just not for layouts. When they are used, they most often have a visible border, so be sure to use
border-collapse: collapse to make sure the borders aren’t doubled.
If you want to see this one in action, visit the css Zen Garden. I haven’t used this property much lately, but it always serves a practical purpose when it is needed.
background-attachment allows you to force a background image to be “fixed” in relation to the viewport, preventing it from scrolling with the rest of the document. With some creativity, you can make some neat effects. Here is one of my favourite examples.
You would think the only reason this property was created was to allow text to be pushed completely off the page when using image replacement techniques on titles or navigation bars. That is definitely the most common reason for using
text-indent. But don’t forget it’s actual purpose: To indent the first line of text in a paragraph, similar to what you see in print media.
10. Font-Weight / Font-Style
Although these are different properties, and could easily be numbers 10 and 11 on this list, I’m putting them together because what is “forgotten” about them is exactly the same: They replace something that you could just as easily accomplish via markup.
font-weight property is set to “bold” and
font-style is set to “italic”. But why not just use
<em>? Well, it depends on what you’re using them for.
Basically, if you want the “bold” or “italic” text to be emphasized for keyword optimization, then you should apply the change via markup, so search engines will see the marked up words and give them more weight. On the other hand, if you want to add visual emphasis to specific words or phrases for the reader’s sake, but don’t want search engines to give more weight to those words, then use
font-weight: bold or
font-style: italic instead.
That’s it. I hope you enjoyed reviewing these sometimes-forgotten elements. I think a lot more could be added to the list, but many properties are not available in some browsers, so for this list I tried to stick to CSS properties that work fairly well in all popular browsers.
Great list. In an internet full of lists endlessly repeating stuff that everybody knows, this has some genuinely useful information! The ‘real’ uses for text-indent, visibility and overflow are for example well worth this reminder of their usage.
While I haven’t forgotten most of these it’s still a good refresher on some key css attributes and a ‘things to remember’ of sorts.
I had totally forgotten about background-attachment, cheers!
Thanks for posting these!
ditto. never knew something called background-attachment existed. Come to think of it, it sure can be applied for some nifty tricks.
Z-Index is probably the coolest CSS skill to master if you want to make really creative pages. Definitely a great call mentioning that one.
nice list, very useful to a css newbie
Thanks for the reminder!
Just looked to fix a “Read more …” anchor from wrapping the other day and just couldn’t remember white-space: nowrap; :D
Thanks for posting
Very nice list. Thank you for posting this.
One thing about the use of font-weight and font-style with <strong> and <em>; I tend to use them together, using the markup in HTML, and in CSS further specifying the styles applied to those tags. So, instead of just relying on the default <strong> and <em> styles, I’ll modify and/or add the style characteristics for those tags.
As far as I know is better to clear your floats instead of overflowing hidden. And I’m not sure Opera agrees with this technique either ;)
Overall good job, thanks …
Thank you for you comment.
The overflow method works exactly the same in Opera 9 as it does in Firefox. Also, when you say “clear your floats”, I think what you mean is adding a “clearfix” element below all of your floats. Honestly, that is a hacky method that adds unnecessary elements to your HTML. If you mean “clearing” the actual floated element, then that won’t help at all, and might cause other undesirable layout issues.
Using overflow: hidden in the manner I’ve suggested is not a hack, and keeps your HTML clean. One caution with that method is to ensure that you’re not adding it to an element that has a height value, because you risk getting information cut off, as I mentioned in the article.
Also, if you have absolutely positioned elements inside your “overflow: hidden” div, those too might be cut off if their positioning is outside of the div’s borders. And finally, even a simple negative margin on a child element could cause “hiding” issues.
But, those are rare instances, and can be dealt with accordingly. Otherwise, overflow: hidden is absolutely the best way to auto expand non-floated divs that hold floated elements.
Nice listing, thanks :)
I use the Text-Indent (and I actually knew for what it is)
Thanks! Z-Index still drives me mad…
Impressive!! thanks :-)
Great list.Thanks for sharing post.
this is so good.thank you for this post.
thank you.this is very nice.