SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <link> and download

    Hello,

    I'd like to know more about when browsers download "media queried" stylesheet. In the code below (taken from 320 and Up), are the four stylesheets downloaded and triggered when you resize your window, or are they downloaded only when needed?

    Code:
    <!-- For progressively larger displays -->
    <link rel="stylesheet" media="only screen and (min-width: 480px)" href="css/480.css?v=1">
    <link rel="stylesheet" media="only screen and (min-width: 768px)" href="css/768.css?v=1">
    <link rel="stylesheet" media="only screen and (min-width: 992px)" href="css/992.css?v=1">
    <link rel="stylesheet" media="only screen and (min-width: 1382px)" href="css/1382.css?v=1">
    A similar question (still taken from 320 and Up): are all the icons downloaded or do device/UA know which one to download and use?

    Code:
    <!-- For iPhone 4 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
    <!-- For iPad 1-->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
    <!-- For iPhone 3G, iPod Touch and Android -->
    <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
    <!-- For Nokia -->
    <link rel="shortcut icon" href="img/l/apple-touch-icon.png">
    <!-- For everything else -->
    <link rel="shortcut icon" href="/favicon.ico">
    Regards,

    -jj.

  2. #2
    SitePoint Member
    Join Date
    Jun 2011
    Location
    Surrey, UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A quick test with Chrome developer tools shows that all stylesheets are downloaded when the page loads.

    Media Query Test

    as far as the icons/favicon goes I'm afraid I couldn't tell


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
  •