10 Cross-Browser CSS Properties You’ve Probably Forgotten

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.

1. Overflow

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.

So, use 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.

2. Visibility

Using 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 visibility: hidden.

Thus, display: none affects the flow of the document; visibility: hidden doesn’t.

3. White-Space

Any time you want to keep an inline element from breaking onto a second line, simply apply white-space: nowrap.

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.

4. Font-Variant

The 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”.

5. Letter-Spacing

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.

6. Z-Index

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.

In short: 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.

7. Border-Collapse

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.

8. Background-Attachment

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.

9. Text-Indent

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.

Usually the font-weight property is set to “bold” and font-style is set to “italic”. But why not just use <strong> and <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.