Seven CSS Tricks No One Should Ever Have to Memorize

CSS is kinda cool, or at least it would be if everybody used the same browser. Instead, they don’t, so doing stuff with CSS is mostly impossible. There are few super annoying hacks and tricks that I use every six months but can never remember, and then end up scouring the internet looking for an implementation that’s not on webmasterworld.com. Seriously, how is that site still so far up in the Google rankings? It’s so terrible.

Anyway, I’ve compiled a short list of seven things that I’m constantly googling for. Note that this isn’t a list of “Tommy’s 101 CSS tricks for beginers (sic)!”. This is a list of things I can’t be bothered to remember. I already know all of the basic stuff, and I’m assuming you do too.

1. Reset

Reset CSS by Eric Meyer

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

The reset CSS creates an even playing field across all browsers, by removing the default styles that each applies. If you want to create a cross-browser compatible web app, then use this, and don’t question it.

2. Clearfix

Clearfix

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

This hack has gone through a few iterations, so I don’t know who the original author is. I use the one described at the link above. Use this if all child elements are floated, and you want the parent element to retain its “assumed” height. Useful for horizontal menus made up of floated lis. Give your <ul> a clearfix.

3. MIR Image Replacement

Malarkey Image Replacement Examples

.mir { letter-spacing : -1000em; }
/* Just for Opera, but hide from MacIE */
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* End of hack */

This is a useful hack for when you want your fancy menus/giant h1 tag to gracefully degrade when styles are removed. Slap a class="mir" on it, give it some text, and you’re good to go. See the examples for examples (derp).

4. 100% height

CSS 100% Height

html { height:100%; }
body { min-height:100%; }
#content { min-height:100%; }

While you can of course solve this (and the world’s) problem with tables, you shouldn’t. Because tables suck, much like urmom. But seriously, this is an incredibly difficult problem with an extremely simple solution.

5. Center an unordered list

Centering a floated menu

.container {
  width:100%;
  overflow:hidden;
}
ul#menu2 {
  margin:0 auto;
  list-style-type:none;
  float:left;
  position:relative;
  left:50%;
}
#menu2 li {
  float:left;
  position:relative;
  right:50%;
}

You won’t figure this one out on your own. Stop trying.

Tommy’s Steps to Success

  1. Ctrl+C
  2. Ctrl+V
  3. ???
  4. Profit

6. Opacity in IE

CSS Opacity in IE

.something-with-opacity {
  opacity: 0.5; /* everybody under the sun except IE */
  filter: alpha(opacity = 50); /* IE */
}

You might also need that zoom: 1 crap for elements that don’t have layout.

7. Vertically center a block element

Vertically Centering in CSS or How (Not) to Vertically Center Content

If you already know the width and height of the container, then you should be able to figure out how to vertically center something by using math (hint: division) and absolute positioning. If it’s more fluid, then you’re probably screwed.

For inline elements, use line-height. For block elements, use JavaScript. If that’s not an option, then you can attempt at implementing something like the above links, but I wouldn’t hold your breath. It’s mostly impossible.

If absolute positioning is not an option, you can try the display: table-cell; vertical-align: middle route, but it’s a crapshoot, and it doesn’t seem to work in all browsers. Using position: absolute; top: 50%; is viable as long as you know the height of the element and don’t care about absolutely positioning something.

Of course, you could valign yourself to success if you’re using tables, but you wouldn’t be stupid enough to do something like that, would you?

May 1, 2010   Posted in: web development

2 Responses

  1. Byron - May 3, 2010

    #6) I’m not sure if i’m correct here, but recently in webkit browsers opacity hasn’t been cuttin’ the mustard. It seams they want [-webkit-opacity] instead. Though i’m on a mac, and that might have something to do with it.

    Nice work though, very informative … I like yer clearfix version.

  2. tmont - May 3, 2010

    @Byron – recent versions of Webkit use opacity (as does everything besides IE). Really old versions used the Konqueror specific stuff (-khtml-opacity); see here for more details. I’m actually not sure if Konqueror still needs that, but I would assume they’ve gotten their stuff together since then.

Leave a Reply