SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Processing time of media queries

    I use media queries for 4 different pixel sizes / breakpoints on my site.

    For readability and grouping I am actually using a media query 23 times in the stylesheet (so duplicated throughout the file). Of course I could merge these all into the four, but ideally I don't want to unless there's a performance benefit (other than slightly increased file size obviously, which I don't think is a major concern).

    Is there a processing time cost to process 23 media queries rather than 4, even though overall styles are the same?

    Please answer based on raw CSS rather than a pre-processor.

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by johnsmith153 View Post
    For readability and grouping I am actually using a media query 23 times in the stylesheet
    I can't speak on the speed aspects, though I would suspect it requires more processing to account for all those instances of the media queries. But it sounds inefficient to me to do it this way. I would much rather have any styles for a particular media situation grouped together, and perhaps ordered in the same way as for the other devices.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I can't speak on the speed aspects, though I would suspect it requires more processing to account for all those instances of the media queries. But it sounds inefficient to me to do it this way. I would much rather have any styles for a particular media situation grouped together, and perhaps ordered in the same way as for the other devices.
    I used to think like that but lately it seems to me more logical to put them alongside the original element while testing and debugging to save jumping around the page to find rules for one element. When all is finished then maybe group them together if space is tight.

    It would be interesting to know if there is an extra time overhead in multiple media queries but there doesn't seem to be that sort of information around. I'm guessing there would be a small overhead but for most normal sites I don't think anyone would notice.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •