CSS3 on a higher level

Stylesheets download behave on browsers


  Downloading all stylesheets
    Notes:
    "If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later."
    
    Responsive Media stylsheet behaviour
    Link: https://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/
    "We've already established that the browser is smart enough to defer the loading of stylesheets which (a) do not match the media query, and (b) do not match the media device type. All other stylesheets are given a PriorityVeryLow to allow other critical assets, like JavaScript, to go ahead in the download queue"
    
    "Given that the size of CSS assets is just 37kB on average, you are much better off downloading all of the CSS content in one shot over the initial, warmed up connection. By doing so, you will also help the user extend their battery life. If there is one optimization to be made here then it is simply: concatenate and compress."
  
    Desktop browsers & Print.css
    Link: http://www.phpied.com/5-years-later-print-css-still-sucks/
    "Browsers blocked rendering waiting for print.css. Some took 10 seconds (downloading print.css and screen.css in parallel), some took 15. Why, oh why? It's a print CSS, you don't need this sh...eet."
  
    Media Query Download test [2012]
    Link: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  
    Stylesheet Downloading Test [Page]
    Link: http://scottjehl.github.io/CSS-Download-Tests/
    
    Combine Print and Screen stylesheets
    Link: http://geertdedeckere.be/article/saving-a-http-request-by-combining-screen-and-print-styles
    
    [Forum]
    "Or, a more practical example is, it maybe be less that 460px wide now, but what's to say it won't be bigger. It will load all      of the content it thinks might be used at some point and go with that."
    Link: http://doctype.com/mobile-browsers-download-all-content-stylesheets-just-content-specified-media-query-applies-them