CodeinWP CodeinWP

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.

20 Responses

  1. simonminter says:

    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.

  2. Will Bridges says:

    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.

  3. David says:

    great roundup..!

  4. Jarryd says:

    I had totally forgotten about background-attachment, cheers!

  5. Jon Thomas says:

    Thanks for posting these!

  6. merlinvicki says:

    ditto. never knew something called background-attachment existed. Come to think of it, it sure can be applied for some nifty tricks.

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

  8. Ryan says:

    nice list, very useful to a css newbie

  9. Paperboy says:

    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

  10. S.N.Prabhu says:

    Great list..

    Thanks for posting

  11. Harrison says:

    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.

  12. sorin says:

    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 …

  13. @Sorin:

    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.

  14. Nice listing, thanks :)

  15. Oliver I. Pozas says:

    I use the Text-Indent (and I actually knew for what it is)

  16. Lu says:

    Thanks! Z-Index still drives me mad…

  17. Manoj says:

    Impressive!! thanks :-)

  18. Great list.Thanks for sharing post.

  19. armcade says:

    this is so good.thank you for this post.

  20. mohsen says:

    thank you.this is very nice.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).