Grow your CSS skills. Land your dream job.

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

Published by Chris Coyier

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.

Comments

  1. cnwtx
    Permalink to comment#

    * {position: relative;} will crash IE6, which may or may not be a bad thing. . .

    On another note, I do use the transition on just about everything I do these days, it’s really nice on :hovers for links, and I haven’t run into any performance issues, yet.

    • Permalink to comment#

      “* {position: relative;} will crash IE6, which may or may not be a bad thing. . .”
      hehe

    • Yehoshua
      Permalink to comment#

      I don’t know, I honestly dislike IE 6 a lot and have not refrained from making a site that, even though it is compatible, is not visible at all in IE 6 by doing an if statement with a style code saying *{display:none}; just to troll IE 6 users.

    • Permalink to comment#

      I chuckled too when I read that IE6 comment

    • Permalink to comment#

      I back you up on this one.
      I’ve been using * { transition: all 0.2s ease; } for a while now and never noticed any speed issues. Even on low bandwidth.

    • Permalink to comment#

      Thanks for the tip, I’ll just be adding this to all my sites now =)

    • Rohit Mehta
      Permalink to comment#

      LOL!! :D IE6??? Really??? :D :D

    • Crashes IE6? I’m in!!

    • Crashes IE6? Count me in =)

      
      // Crash baby Crash
      * {
        position: relative;
      }
      
    • Hahaha, knowing this eases the pain a bit.

    • Permalink to comment#

      Ha, nice!

      Maybe I’ll actually use this one now.

    • Bart
      Permalink to comment#

      Nice! Directly used it!

    • oxen
      Permalink to comment#

      IE6 uuuuh man! :)

    • Ian
      Permalink to comment#

      Then this code will be perfect :D

      
      <!-- IE has tortured the world for long enough -->
      <!--[if IE 6]>
      <style type="text/css">
      * {
        position: relative;
      }
      </style>
      <![endif]-->
      
    • @Julien, are you serious?

      > Even on low bandwidth.

      What does CSS and client-side rendering have to do with bandwidth?

      As for `* { position:relative }`. You do realize that you will lose the ability to position things absolutely once and for all?

    • Permalink to comment#

      @Julien, he meant client-side rendering performance, not network performance :)

    • This made my day! :D

    • As much as I think that *{position: relative;} would be awesome, I should experiment with it but I’m losing care for IE 6, I think we all should. IE 6 is dead now and while some of use

    • ….while some of us lt IE 7 conditions for IE 6, I think it’s really time to stop caring for it and concentrate on rubbing out IE 7 now. IE 7 is the only real one I see with the major bugs (i.e. bad margins), so I think it’s time to start rubbing it out.

    • Yehuda
      Permalink to comment#

      Stupid replyers … Do you make websites for yourself only, or to make some contents available to the users, whatever the tool they use ? You stupid bunch of degenerated selfish egocentric pseudo-dev. Usability and accessibility should be your main concern, not the size of you little device. Displaced vanity.

  2. Permalink to comment#

    I’ve been using the above since I learnt them from your blog of course :) Universal easing transitions are very effective. But I’ve stopped giving a damn about the IE6. The people using it should realize it’s 21st century we’re living in.

    • Noah Gelman
      Permalink to comment#

      It’s funny you should say that actually. You have to remember the internet is still very new and moving very fast.

      IE6 DID come out in the 21st century. It came out on August 27, 2001 (after Windows XP was completed).

      In the last 10 years the internet has become a whole new beast. And in 10 years it’ll be a completely different beast. And 10 years after that, another one. That’s just way technology works.

  3. Enrique Moreno
    Permalink to comment#

    I wouldnt use position: relative on the universal selector.

    Quite often I find myself using it on elements which have some child using position: absolute. This allows me to use as point of reference the position of the parent, and not the beginning of the page.

    If every elements is relative, using this technique would be much more complicated, or maybe even impossible in some cases.

    • I think what you mean is that you don’t *always* want the positioning context to the parent, as it would if all elements were relative. In that case you could reset the parent element back to static. But yeah could be weird.

    • Enrique Moreno
      Permalink to comment#

      Yeah, exactly.

      If the elements with position: absolute had *many* ancestors, reseting the ancestors to static could take more code than declaring “position: relative” just on the elements that actually need it.

  4. Permalink to comment#

    Transitions on everything could be a performance nightmare. These features come at a cost and we should exercise restraint.

    I’d also advise against using border-box everywhere. It comes with its own fair share of issues. For example, you lose the 1-1 relation between specified width and rendered width. With border-box you might end up with width: 20px; and width:0; to have the same result. Also, there are browser bugs related with it, such as Gecko not respecting it in (min|max)-(width|height) properties.

    I like the rest, nice article Chris!

    • Permalink to comment#

      I would be careful using “transition: all“. I came into huge performance issues using this. And in conjunction with the “*” selector, this could be really a “performance nightmare” like you said. And i like to sleep well :-)

    • Lea, could you explain how you “lose the 1-1 relations between specified width and rendered width”? I thought that’s what “border-box” was intended to fix. Set the width to 100px, and the rendered with (including padding and borders is 100px).

      Also, does anyone have references they can point to about any browser bugs related to “border-box”

    • Patrick Bruckner
      Permalink to comment#

      Not only performance lacks with transition… also CSS-Sprites for Buttons with hover effects would look creepy…

  5. Micah
    Permalink to comment#

    I have always heard to steer clear of * selectors as it is an ‘expensive’ selector, as far as performance goes. That’s why css resets have that big huge strings of selectors before the padding:0px; margin:0px etc…

    Has that thinking changed?

    • I would also really be interested in this answer.. if it has one haha.

    • I don’t think the * selector by itself gives a noticeable performance hit. It’s when you combine it with other selectors (and what you use it to apply) that might start to cause issues on very large, complex pages.

    • cnwtx
      Permalink to comment#

      Something like this would cause a big performance drag:

      div#nav ul.something li * {...}

      But using it by itself isn’t that big of a deal.

    • Matthew P.
      Permalink to comment#

      In theory using * by itself should if nothing else, yield the cheapest possible logical comparisons, ideally none at all – just “apply this rule no matter what”.

      Of course actually applying the style rule to each element has a computational cost too, so if you’re targeting too many elements needlessly there is some extra work being done as well as bloating the styles. I’ve never seen anyone talk about how expensive it actually is to apply a style/property to an element VS. excluding it via selectors though, so at what point one approach wins over the other I can’t say.

  6. Permalink to comment#

    Mozilla appears to require the ‘s’ on the time properties. So it should be 0.2s, not 0.2.

  7. BrianMB
    Permalink to comment#

    I have tried * { display: inline-block; } on projects where I am not supporting IE6/7.

    It’s very cool! For these reasons:

    * All elements respect box model properties and vertical-align.

    * No floats, except when whitespace in code places an unwanted gutter between elements. Sometimes that gutter is fine and you get it with no extra effort.

  8. I could be wrong about this, but I was under the impression that the universal selector is bad from a performance standpoint since it literally goes through and assigns that CSS to every possible element, even ones that you are not using?

  9. David Martian
    Permalink to comment#

    Get your own post ideas fatty.

  10. DeanP
    Permalink to comment#

    playing with this one a few sites that use http://adapt.960.gs/

    THAT is some interesting stuff!

    Somebody PLEASE give me some serious pros and cons before I put this on all my sites lol

  11. Scott Vivian
    Permalink to comment#

    Honestly, I really like the regular box model. It takes a short while to get used to it, but there is something really nice about setting a width and having the content actually being that width. Especially where images are involved.

    • BrianMB
      Permalink to comment#

      There are some things you can’t do with the content-box model unless you have calc() – and even then it’s less elegant.

      I think your use-cases for content-box are totally valid, though possibly in the minority of regularly-encountered scenarios.

      Also, you could always img { box-sizing: content-box; }

  12. Permalink to comment#

    Some of these are pretty cool. I am not sure about transitions as they may be kind of resource intensive for the UA, even if they aren’t activated.

    The position relative , aside from IE 6, has the downfall of reducing control. what I mean i that MANY TIMES it is useful to position an object absolutely relative to an ancestor. so if we *’ed {position:relative} every element we would need to go back an individually assign position:static to all the element we want “skipped” so we are back to where we started as far as the amount of code necessary. :/

    OH, and let us not forget what *{} rules can do to form elements, which cannot be reset back.

    • BrianMB
      Permalink to comment#

      You’re thinking of position: absolute;

      position: relative; will position an element relative to its natural coordinate (“natural” meaning as though no positioning were used at all).

    • Matthew P.
      Permalink to comment#

      @BrianMB – the point is that absolute positions are based off the nearest parent with a position other than static. If everything is relatively positioned, by default absolute positioning will always be in relation to the element’s immediate parent, and it will be more difficult if you need to position based on some more distant parent.

  13. Permalink to comment#

    the transition one reminded me of a relatively old post from WebDesignerDepot.com which mentioned a similar technique

    http://www.webdesignerdepot.com/2010/01/css-transitions-101/

    Interesting that Lea recommends against using it for the box model, and Paul Irish does recommend using it. Both are experts, so which should I believe?

    • Permalink to comment#

      I think it’s more about being aware of the consequences when deciding whether or not to use it. Lea mentions a few issues when using it across the board, so if you aren’t comfortable with dealing with these issues, then you probably shouldn’t use it.

  14. Permalink to comment#

    Like the background-repeat suggestion. Would avoid the transitions on everything for performance reasons.

  15. Permalink to comment#

    Already having fun playing around with it a little bit, just using Stylish, and applying a global transition to every web page – it’s kind of fun, but also a bit wacky sometimes…
    Easy to try out, though:

    
    @namespace url(http://www.w3.org/1999/xhtml);
    
    * {
      -webkit-transition: all 0.5s ease;
      -moz-transition:    all 0.5s ease;
      -ms-transition:     all 0.5s ease;
      -o-transition:      all 0.5s ease;
    }
    
  16. Permalink to comment#

    I’ve used:
    * { transition:0.1s; margin:0; padding:0; }
    in a few projects before (along with Prefix Free to handle vendor prefixing) and it has really saved me some time.

    I’m usually against setting up classes for specific things like color, etc, but the examples you give of using classes like this for alignment et. al. are intriguing.

    Though it’s nice to not have to change your markup, if you have elements that you’re sure won’t change for a long time this technique is really practical.

  17. Permalink to comment#

    Just trying the * rule for WP dashboard as you said, and found that the background changes perfectly! Very nice effect. I also love other ideas of setting non-repeated background and middle alignment. I often see these problems.

    Thanks!

  18. Dels
    Permalink to comment#

    isn’t box-sizing: border-box; is the default box model in IE6? so the 1st rule should be save to use across browser isn’t?

  19. Navaru
    Permalink to comment#

    I’ve used ” * {position: relative}” in a project before, despite that I really liked how it fits on modern browsers, IE8 sucked really bad.

    I ended up making a separate file just to fix IE8/7 and had a lot of (wierd) problems. Even firefox 5 had some issues.

    Some of them where fixed by setting html {position: static}.. this was after a few hours of trying random stupid stuff that just might work.. I hade a few tables, and positioning inside the cells was horribly wrong, also a few line-height weirdness..

    Overall not worth it, and also the performance was bad, I’ve rewrote the stylesheet using the CSS performance tips that I’ve found on various posts and really made the pages more smooth/fast in IE8.

    This article is very good, I even played with Opera’s CSS performance tool; for me, the guidelines where very useful:

    https://developer.mozilla.org/en/Writing_Efficient_CSS

  20. I’ve found that using transitions on the universal selector can cause a weird text resizing issues in Wekbit-based browsers, whereas this doesn’t happen if you spell out the html elements like below:

    
    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 {
      -webkit-transition: all 0.2s ease;
      -moz-transition:    all 0.2s ease;
      -ms-transition:     all 0.2s ease;
      -o-transition:      all 0.2s ease;
    }
    

    I haven’t noticed using transitions on the universal selector a resource hog though. How would you notice? All the animation seems to work as it should

  21. Permalink to comment#

    setting a relative position on every element is just “wrong” :p, I think this will cause lots of problems in older browsers. But apart from that I realy like the idea of the non-repeating backgrounds.

    I’m also a bit worried about performance if you set transition to every element but you could always use it like this, so that it doesn’t match every item.

    .navigation * {-webkit-transition: all 0.2s ease;   -moz-transition: }
  22. * { background-repeat: no-repeat }
    does not work for all background images because if you use the shorthand property
    .logo { background-image: url(logo.png) }
    the unspecified individual properties will be set to their default values, i.e. ‘background-repeat’ will be set to “repeat”. Because of the selector’s higher specifity this value will be applied.
    To set “no-repeat” for all background images, you’d have to make it ‘!important’ — with all the troubles you’d run into.

    • Permalink to comment#

      in your example, you’re not using the shorthand property – things will work as intended.

      But if you were using the shorthand, yes, thing would go awry.

    • Permalink to comment#

      I liked the no-repeat idea until I realised it was of no real use. If you are writing longhand CSS then you would gain far more by switching to short hand than you ever could with this idea. It is a shame browser manufacturers hadn’t set no-repeat as the default originally.

  23. tparssinen
    Permalink to comment#

    Blimey, until now I was under impression using * is quite expensive performance vice. Apparently it’s not. Good to know :-)

  24. Permalink to comment#

    Ive found its useful when switching off the hover attribute for mobile devices like the iPad and iPhone otherwise you have to double tap the button. You could use other methods but this is quick and easy and you just have to place it in @media query.

    *hover { display:none; }

  25. D
    Permalink to comment#

    Chrome 17 dies when you try to add * to via inspector now ? that didn’t happen before

  26. Ryan
    Permalink to comment#

    I’m quite surprised at the recent trend of using the universal selector. A few years back when we were all using * { padding: 0; margin: 0 } to reset styles it quickly became apparent that this was not a best practice and we moved to more selective resets style solutions so the browser wasn’t bogged down applying rules to everything.

    How come the practice is now ok? Why not make a more specific reset style snippet to target only the elements you want box-sizing, transitions, relative, etc on?

    • Ryan
      Permalink to comment#

      OK so I should have read through the comments first. It appears quite a few others share my concerns but Paul Irish discusses the issue of * performance at the end of this article: http://paulirish.com/2012/box-sizing-border-box-ftw/

    • It’s just like everything IT/programming related. The speed of computers, servers, internet connections all increase. So using something like * { } isn’t likely to cause a problem on most sites unless it’s supremely complicated.

      But as the speed and power increase we find ourselves becoming less frugal and using code that was once considered sloppy.

      How many people really try to get every kilobyte shaved off their images or write and then rewrite their HTML and CSS to make it as small and efficient as possible? Of course you should aspire to do the best you can but it’s not the end of the world (unless you start dumping 4MB background images into your pages)

  27. Chris
    Permalink to comment#

    I like the theory behind * { box-sizing: border-box }, but I also quite like the Twitter Bootstrap framework. Anyone know if they work together, or does Twitter’s careful spacing just break if you try to force it to border-sizing?

  28. Permalink to comment#

    Definitely do not use the universal selector and position relative. I have tried this for a couple of years now and found that internal table elements do not like it and it causes layout issues. (I can’t remember which browser). The parent table element is fine though.

    Finally to answer the comment about the parent issue – IMO all dynamic content should be inserted at the end of the DOM which means there are no parent issues. The position to then display the position: absolute element can then be calculated from the originators position inside the DOM.

    Nice post. Cheers.

  29. Fabrizio Calderan
    Permalink to comment#

    Instead of * { transition: all 0.2s ease; } I would prefer set this rule only in some specific elements (and not to all elements) but anyway with some kind of flexibility . e.g.

    div { transition: ... ; } 
    /* or */
    .fx { transition: ... ; }
  30. Jason
    Permalink to comment#

    If we all would use transitions everywhere, everyone would go nuts.

    Imagine using Gmail and hovering or clicking something always brings up a non functional (cause thats what it is) animation.. That would suck. I think it’s just a temporary hype. Same with border-radius. 1 year ago I saw many sites using about 20px and nowadays I see people going back to 10px even 4px just to give it a little bit of style but not more.

    Look at cars, every 10 years they also switch from overal styles. It’s kind a fashion.

    Or am I getting too old? :)

    • Just a slight, short animation of 0.2 or 0.3 seconds adds a nice shine to a site. You only really notice it when you hover over the links.

  31. lol
    Permalink to comment#

    i have been using this for over millennia

  32. Its, fun to use

    * {transition: all .5s ease}

    animates everything :)

  33. Jason Witt
    Permalink to comment#
    * {
    -webkit-box-shadow: 1px 1px 0px 0px #000000,
      											-1px -1px 0px 0px #000000;
    	-moz-box-shadow: 1px 1px 0px 0px #000000,
      											-1px -1px0px 0px #000000;
    	box-shadow: 1px 1px 0px 0px #000000,
      											-1px -1px 0px 0px #000000;
    }
    

    This is will give everything an outline without messing with the layout like adding a border. It’s good for checking overall layout.

    • Permalink to comment#

      I personally use the CSS property ‘outline’ as it is much quicker to type out:

      * { outline: 1px dotted red; }
  34. Permalink to comment#

    Awesome article. I’ve always been really hesitant to add new things within my universal selectors but I think I’m gonna start playing around with some of these!

  35. Jamie L.
    Permalink to comment#

    I tried putting *{position: relative} in my site and it broke the WordPress search bar. I couldn’t highlight it and my submit button wouldn’t go into its hover state. Is that normal?

    • Permalink to comment#

      What’s the positioning used for the search bar and its child elements? Also, is your universal selector before or after the search styles? If the search bar positioning is set to “absolute,” and if it comes BEFORE the universal selector, the universal selector may be overriding the search bar positioning.

    • Aimee Armour-Avant
      Permalink to comment#

      I had the same issue with the position:relative. Lost an hour of my life trying to figure out why all my img links could no longer be selected.

  36. Permalink to comment#

    I like using relative positioning for the universal selector. As well, I now declare float and overflow values globally for certain elements, just below my reset. I then override them, if necessary, later in the stylesheet for specific needs ( ex: “div {overflow:hidden;}” ).

  37. Permalink to comment#

    I’ve used three of these (box-sizing: border-box;, background-repeat: no-repeat; and position: relative;) on my WordPress framework… I had a couple of minor teething problems, and I think I’m going to have to re-learn how to do some of the things I do – but for the most part, they seem to work well.

  38. Nelson
    Permalink to comment#

    When I tried to use the * selector while on your page, it crashed Chrome! Fun, eh?

  39. Charbs
    Permalink to comment#

    Very interesting article. I’d love to use Paul Irish’s tip, and yours too Chris, but i’m forever in doubt of using the * selector.

    • I thoroughly agree!

    • What absolutely haphazard advice. These suggestions advocate developers to apply blanket rules that are meant to be used as adjustments. Even box-sizing should never be applied universally. You need to offer graceful degradation for clients that don’t understand box-sizing.

      Furthermore, maintenance is hindered, as we forget about these blanket rules below the fold.

      I’m very unimpressed with developers encouraging their followers to be lazy, which is exactly what it is.

  40. Geoff
    Permalink to comment#

    *{
    -webkit-font-smoothing: antialiased;
    }

  41. Ohne Mitleid
    Permalink to comment#

    I just found out today that the universal selector did not apply to :before and :after pseudo elements. I had rendered a CSS shape and thought I could just round out all of the sharp corners after everything was in place. Not true. This works, but…

    *, *:before, *:after { border-radius: 2px; }

    Since these elements are obviously not in the realm of universal, do they exist in their own Pseudo Universe?

    • Ohne Mitleid
      Permalink to comment#

      BING – lightbulb! If what I just said is true:

      *:before, *:after {
          position: absolute;
          content:"";
      }

      at least when making complex shapes. This should save me loads of time and tidy things up. Thanks… somebody! Paul maybe?

    • You can just use

      
      :before, 
      :after {
         content: "";
         position: absolute;
      }
      
  42. Sam Purcell
    Permalink to comment#

    Also, *::selection{} works great for making your whole site have a unique highlight.

  43. * on vertical-align? Doesn’t it work only for TD and display table-cell?

  44. Permalink to comment#

    On the box-sizing topic I’ve been meaning to ask: Chris, what’s your opinion on dropping IE7 support in favor of offering a more solid experience in the more modern browsers?

  45. Wrote a basic Chrome extension which applies the transition rule on all elements. Check it out at Chrome Web Store

  46. Julian Cizmic
    Permalink to comment#
    
    * { use: != IE6-; }
    
  47. Really Helpful post, I needed the code for the -webkit and this was very handy, thanks for taking the time to share this, BTW!!! I HATE YOU, Your comment forms looking AMAZING!!!

    Steve Loneton
    Web Design Bournemouth and SEO
    Keep up the good work ;)

  48. Permalink to comment#

    It is so much fun to use transitions with the global selector… now I am going to update some of my older Projects :D

  49. pixelutely
    Permalink to comment#

    I’ve used the * selector for the box-sizing property too, seems to work well where’s it supported.

    But when I started added other dynamic properties like background-sizing and transitions, all hell broke loose ;-)

    Always remember that just because you may have the advantage of working on hi-spec kit, there are millions of people all over the world who don’t have dual/quad core processors, superfast graphics processors, or even up-to-date browsers.

    My advice, be realistic about how many properties you assign to the * selector. For larger scale projects where perhaps the CSS differs from page to page, be more selective and use selector groupings rather than the wildcard.

    I’d also suggest being even more restrained when using it with media queries for smaller devices. By and large many effects that look great on a desktop are simply lost on smaller devices due to screen size limitations.

  50. pixelutely
    Permalink to comment#

    Off-topic, but is anyone else seeing the responses to this thread displayed in a random-ish order?

    • cnwtx
      Permalink to comment#

      I didn’t think so at first, but I see the one below yours by snillor is 5 days before yours. . . Odd.

  51. Permalink to comment#

    I too have recently started using transitions. Very nice and simple way to add a touch of flair.

  52. William malo
    Permalink to comment#

    When I don’t support old versions of ie I use * to hide the whole page, then I display a message telling them to ugrade.

  53. Permalink to comment#

    I was using position: relative; on my universal selector, as a result of this post – but earlier today I removed it – it was causing more trouble than it was worth.

    box-sizing: border-box; is working well (apart from a minor clash with colorbox, but a couple of minor edits to the colorbox css fixed that, and background-repeat: no-repeat; also seems to be working well.

  54. Permalink to comment#

    How can I add a new CSS rule via Chrome? Everytime I click on the “+”, and enter any rule (IE “*”) just to start, the browser windows crashes: it gets blue and tells some error has occurred….. ;( I cannot experiment anything from here…!

    Thanks

  55. Permalink to comment#

    Guys, how can I insert a new CSS rule with the Chrome inspector? Everytime I try to add it and name it (“+” button), Chrome crashes: the screen gets blue, and it says that some error has occurred, like it’s trying to refresh the page with my new rule… ;(
    thanks

  56. I’m going to be using this trick in all my css form now on, I didn’t notice any lag; I love things not insto-breaking when I tweak a few pixels.

    I got to think what other elements are nearly as wide as * and I thought of a and dive. I took the transitions idea and applied it to the a element to give the feel of touch in the browser and I’m very pleased with it.

  57. *{ cursor: default; }
    input, textarea{ cursor: auto; }

  58. interesting article i’ll be sure to try some of these out myself. please help me out and visit my website i have interesting articles myself.

  59. Smapty
    Permalink to comment#

    *
    {
    -webkit-transform: rotate(-11deg);
    -moz-transform: rotate(-11deg);
    }

    Can turn a site into abstact art.

    Also, adding hover makes it interactive…

    *:hover
    {
    -webkit-transform: rotate(-11deg);
    -moz-transform: rotate(-11deg);
    }

  60. Bart
    Permalink to comment#

    Sliiiightly modified smapties code. I like this one:

    * {
    	-webkit-transition: all 2s ease-in-out;
    	-moz-transition: all 2s ease-in-out;
    }
    
     *:hover {
    	-webkit-transform: rotate(-11deg);
    	-moz-transform: rotate(-11deg);
    }

    Pro tip: Make a userscript matching all websites, let it add this css and install it at someone’s computer ^^,

  61. loving the transition code, nice simple way to add a bit of animation to the page. We are always struggling with clients using old browsers, and it really cool to add all these extra bonus features to users on the lates browsers!

  62. 
    /* You must try this !  */ 
    
    *{
     -webkit-transition: all 0.2s cubic-bezier(1,0,1,0);
      -moz-transition:    all 0.2s cubic-bezier(1,0,1,0);
      -ms-transition:     all 0.2s cubic-bezier(1,0,1,0);
      -o-transition:      all 0.2s cubic-bezier(1,0,1,0);
    }
    
  63. IE6… Really?

  64. Great info. Especially the part on universal transitions. Such a subtle effect yet so stylish (do you feel a “but” coming?).

    But.

    Apparently css3 transitions seem to mess up all of jQuery’s animation functions – ex. for a slideDown menu etc .-

    Anyone else got that problem? Any fixes?

    Thought of using *:hover (ex. for some anchors) instead but still, it’s a matter of curiosity to find out why it breaks up like that.

  65. Browserstack is getting a workout today. Love the comments. I use inline-block on too many things already, so I have some experiments to do now.

    • After some playing around a little this seems totally reasonable and will actually save me some time in future projects.

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

      Nav is when I notice this stuff anyway.

  66. TheOnlyOne
    Permalink to comment#

    *{display:none;}

  67. Great tips! I would be careful setting “vertical-align: middle” globally, though. You can inadvertently change the height of elements and cause alignment problems with nested inline-elements.

    Here’s a demo http://jsbin.com/uReMoHi/latest

  68. Lisa
    Permalink to comment#

    What about using break-word on every element?

    *{
        word-break: break-word;
    }
    
  69. phani
    Permalink to comment#

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

    i am working on liferay project i am using above syntax in CSS how can exempt this for some classes

  70. snillor
    Permalink to comment#

    Maybe it’s just me, but I don’t think it’s appropriate to add responses that have nothing to do with the article and are purely self-promotional.

  71. I myself deliberated weather to post it here or not, and since it relates to this article, I did.

    Wonder how you concluded that it has nothing to do with the article… The core part of the extension is the "* {-webkit-transition: all 0.2s ease;}" rule. Moreover, it was inspired by this article.

  72. snillor
    Permalink to comment#

    Chaitanya Pramod,

    My apologies to you.

    I wasn’t referring too your response, but to a different one that apparently was quickly removed as obvious SPAM. When it was removed, the placement of my post was bumped to just below yours, making it seem like I was attacking you.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".