Search code examples
cssmedia-queries

CSS performance with media queries

I am wondering if CSS can be 'heavy', e.g. use a lot of parsing time from a browser.

For example I use a CSS sheet with a lot of specific selectors, like 

:last-child, 
:nth-child(n) 
table.sortable thead tr th:not(.table-th-nosort):hover

etc. Can that noticably influence performance?

Same for using media-queries. I want to make a site accessible for mobile devices using CSS3 media queries:

@media screen and (max-width: 600px) {
   #sidebar {
      display: none;
      // etc
   }
}

For now I have about 600 lines of CSS (not minified) in my main file, and for some specific pages include extra CSS files (between 10-300 lines).

Using media queries would add substantially to that I expect. Will that have an effect on performance?

Solution

  • The easiest way to check is to grab a webkit nightly, or Chrome Canary, then check out the new audit for CSS performance. It lets you see how long each selector takes to run, as well as the % of overall time taken. The new builds of Opera also have a similar tool.

    Here's a small screenshot of what it looks like:

    CSS performance audit