CSS hacks you may not know

This is a collection of short CSS snippets I thought might be useful for beginners. If you’re experienced with CSS you’ll have seen most of these tips and tricks before, but who knows maybe you can find one or two you haven’t seen before.

You can use unicode characters for class names in your HTML, and even use write CSS selectors with those same characters.

. { background: #222; color: #FFF; } 
._ { background: #ccc; color: #fff; }
input[type="text"]:focus { outline: none; }

And orange outline won’t show up anymore.

As you know older browsers have different ways of controlling the opacity or transparency.

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

Currently works only in Firefox.

Correct syntax for all backgrounds properties are:

div { background: [background-image] 
                  [background-position] 
                  [/ background-size] 
                  [background-repeat] 
                  [background-attachment] 
                  [background-origin] 
                  [background-clip] 
                  [background-color]; 
}
.page-break { page-break-before: always; }

p { text-transform: capitalize; }
body { font-size:62.5%; }

Setting the font-size property to 62.5% in body makes 1em equal to 10px.

a:hover:after { content: attr(title); }
.selector:not(*:root) { property:value; }
@media screen and (-webkit-min-device-pixel-ratio:0) { 
                     .selector { property:value; 
} }

Easily target IE8 and older versions. Yes, I know it’s 2014, but I recently used this hack :D

.element { color: black; 
           color: green\9; /* IE8 and older */ 
           *color: blue; /* IE7 and older */ 
           _color: red; /* IE6 and older */ }
p { margin-left: 10px; } html:first-child p { margin-left: 0; }

P.S. If you know of any other good ones, please contact me via twitter.


Tagged #css.