A Few CSS Tricks You May Not Know

This is a mixed bag of small CSS tricks. Some are still useful; others are browser hacks from the days when supporting old versions of Internet Explorer was part of an ordinary afternoon.

Treat the browser-specific snippets as historical examples, not recommendations for a new project.

Unicode characters can be class names

CSS class names are not limited to plain Latin letters. Unicode characters work too:

.♫ {
  background: #222;
  color: #fff;
}

.ಠ_ಠ {
  background: #ccc;
  color: #fff;
}

This is valid, although descriptive class names are usually easier to type, search, and maintain.

Be careful when removing focus outlines

input[type="text"]:focus {
  outline: none;
}

This removes the browser’s focus outline. It may look tidier, but it also makes keyboard navigation harder to follow. If you remove the default outline, replace it with an equally clear :focus-visible style.

Opacity in old Internet Explorer

Modern browsers only need opacity. Older versions of Internet Explorer used proprietary filters:

div {
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE8 */
  filter: alpha(opacity=40); /* IE 5–7 */
}

You should not need those filters on a current site, but they can explain some strange CSS in an old codebase.

text-decoration is a shorthand

a {
  text-decoration: overline red wavy;
}

The shorthand can combine the line, colour, and style in one declaration.

The full background shorthand

The background shorthand can contain several values. Their general order is:

div {
  background: [background-image]
              [background-position]
              [/ background-size]
              [background-repeat]
              [background-attachment]
              [background-origin]
              [background-clip]
              [background-color];
}

The slash between position and size is the part I find easiest to forget.

Force a page break when printing

.page-break {
  page-break-before: always;
}

The older page-break-before property is widely found in existing stylesheets. For new CSS, break-before: page expresses the same intent more directly.

Make every word start with a capital letter

p {
  text-transform: capitalize;
}

This only changes presentation. It does not rewrite the underlying text.

The old 62.5% font-size trick

body {
  font-size: 62.5%;
}

With a 16px browser default, 62.5% makes 1rem equal to 10px. The calculation is convenient, but shrinking the root size can make inherited text unexpectedly small. I prefer leaving the root at the user’s default and accepting slightly less tidy maths.

Read an HTML attribute from CSS

a:hover::after {
  content: attr(title);
}

The attr() function can insert an attribute value into generated content. Do not make essential information available only on hover, though; touch and keyboard users may never see it.

Historical WebKit targeting hacks

This selector was used to target WebKit browsers:

.selector:not(*:root) {
  property: value;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .selector {
    property: value;
  }
}

Browser-targeting hacks are brittle. Feature queries or progressive enhancement are better choices when you can use them.

Historical Internet Explorer hacks

These malformed-looking declarations targeted different versions of Internet Explorer:

.element {
  color: black;
  color: green\9; /* IE8 and older */
  *color: blue; /* IE7 and older */
  _color: red; /* IE6 and older */
}

And this one gave paragraphs a left margin in most browsers but removed it in Opera 9 and older:

p {
  margin-left: 10px;
}

html:first-child p {
  margin-left: 0;
}

These hacks are useful when reading old CSS, but that is where I would leave them. The standards-based snippets are the ones worth carrying into a new project.