Things It Might Be Fun/Useful to Try the Universal (*) Selector On

Paul Irish recently wrote a post on using the universal selector to set border-box box-sizing on everything:

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

I’ve been wanting to try that for a while and I’m happy to say I’ve used it on a few projects already and it’s awesome. It also got my thinking what other properties might be similarly useful in applying to all elements on the page.

Transitions

* {
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}

If you’re on a desktop browser, try it out right now. Open your browsers dev tools and add a new CSS rule. I happen to be in Chrome so:

I just tried it in the WordPress dashboard where I’m writing this and it’s pretty wacky fun, especially in the side navigation. Performance could certainly be a concern here, so I’m not exactly advocating it’s use right now, but it’s fun to play with. When everything on the page has a quick and equal transition, I find it a nice, softened, comforting feel.

Non-Repeating Backgrounds

I bet overall you tell backgrounds to no-repeat more often than you actually leave them repeating.

* {
  background-repeat: no-repeat;
}

That way you can do:

.logo {
  background-image: url(logo.png);
}

Without worrying that the image you’ve set will repeat and be weird if the container is slightly bigger than the logo. And you also don’t have to use the shorthand for background, which sets/resets background-color, background-attachment, and background-position whether you want it to or not.

I know Estelle Weyl is a fan. =)

Relative Positioning

* {
  position: relative;
}

If everything starts out with relative positioning, that means z-index “just works” instead of the confusing issue where default statically positioned elements ignore it. It also means it’s easier to nudge things around with top, left, right, and bottom which all “just work” on relatively positioned elements. It might be hard to apply this to an existing layout but starting from scratch with this shouldn’t be too hard.

Middle Alignment

* {
  vertical-align: middle;
}

I find myself setting this value a lot, especially on projects that use icons. It doesn’t affect much on most layouts I tried applying it on, as it only really comes up when inline or inline-block elements line up with each other on the same line. Essentially, I find myself setting this more than resetting a default, which I think makes it a good candidate for universal settage.