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.
-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.
I bet overall you tell backgrounds to
no-repeat more often than you actually leave them repeating.
That way you can do:
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-position whether you want it to or not.
I know Estelle Weyl is a fan. =)
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
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.
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.