19

If I have external stylesheets being included in the <head></head> section of my HTML page, will they be loaded before the HTML and immediately applied upon rendering? Let me present my specific use case.

External styles.css file:

form label {
    display: none;
}

Page containing form:

<head>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<form action="process.php" method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
</form>

Can I be confident that the labels will be invisible upon page load (no flickering due to CSS downloading)?

Otherwise, I can add the style attribute inline, but that can be a maintenance nightmare.

Joshua
  • 40,822
  • 8
  • 72
  • 132
Stephen Watkins
  • 25,047
  • 15
  • 66
  • 100
  • 1
    Why would you want to hide the `label`? – You Jun 27 '11 at 23:39
  • 1
    Good question! I think the answer is that you can *usually* be confident that the labels will be invisible, but there's no 100% guarantee - AFAIK, style sheets are always loaded and parsed parallel to the page, they don't block things like a JS script does. Related: [Load and execution sequence of a web page?](http://stackoverflow.com/questions/1795438/1795502#1795502) – Pekka Jun 27 '11 at 23:41
  • I imagine that this would vary by browser... but I don't know for sure. – John Stimac Jul 20 '11 at 05:51

5 Answers5

14

If you include the CSS in the head section, you can be confident that the label will not show.

The HTML is downloaded first. The browser starts reading the html from the top, and starts fetching all CSS and JavaScript files referenced in the HEAD section. The page will not be painted (shown) until all the CSS and JavaScript files in the HEAD have been downloaded and evaluated.

Emil
  • 8,449
  • 3
  • 27
  • 44
  • If i write my CSS codes into `` between `` (No CSS files attached), then can I be confident that the page will not be painted (shown) until all the CSS codes have been applied ? –  Jun 07 '15 at 08:13
  • @user4920811 Yes – David Callanan Sep 27 '18 at 14:25
  • 4
    Please note this is only true of embedded CSS, not true of a link tag that loads the CSS. After a couple of seconds the browser will render with no CSS and rerender when the CSS finally arrives. – Joshua Feb 09 '19 at 16:05
7

Style sheets don't prevent the document from being downloaded, but the browser won't render the document until all of the linked stylesheets have been downloaded and loaded into the DOM.

This is so that the browser doesn't need to render the page twice (wasting time in the process), and so that an unstyled page won't flash in front of the user before the stylesheets have been downloaded and parsed.

user805804
  • 191
  • 3
1

I believe everything gets loaded in the exact order you place it in the html (or whatever format) document you create.

So in the case of a stylesheet call, it will be called when it is read directly in relation to where you wrote it (typically in the )

a good 'proof of concept' of this would be to create a javascript function that would load a style sheet after a certain amount of time has passed. in this function you could have the stylesheet load with ajax.

jshbrmn
  • 1,737
  • 3
  • 22
  • 52
0

I believe the simplest answer to your question is: "Yes...the stylesheets get loaded first." That's why you link to them in the head. As ghostcake suggested above, you can do funky stuff to adjust the order in which the browser responds to and renders any instructions in your html file, but the default function of the browser is to essentially attempt to address each line of markup in the order it is presented. Hence, that's also why it's best to put tracking scripts, etc., at the bottom of the page...below the footer, but above the body tag. (Doing so let's your page render before dealing with functions otherwise not visible to the user.) If you think of the browser like an artist or draftsman you commission to draw something, you must tell the artist how/what to draw before they put pen to paper. Likewise, telling the browser where to fetch your instructions re. styling via a link in the head allows it to "know" what and how to "draw" before it begins to "draw".

Sean
  • 1,149
  • 18
  • 28
0

The documented answer (with optional preloading and script-disabled fallback):

 <!-- Optional, if we want the stylesheet to get preloaded. Note that this line causes the stylesheet to get downloaded, but not applied to the page. Use strategically — while preloading will push this resource up the priority list, it may cause more important resources to be pushed down the priority list. This may not be the desired effect for non-critical CSS, depending on other resources your app needs. -->
 <link rel="preload" href="style.css" as="style">

 <!-- Media type (print) doesn't match the current environment, so browser decides it's not that important and loads the stylesheet asynchronously (without delaying page rendering). On load, we change media type so that the stylesheet gets applied to screens. -->
 <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

 <!-- Fallback that only gets inserted when JavaScript is disabled, in which case we can't load CSS asynchronously. -->
 <noscript><link rel="stylesheet" href="style.css"></noscript>

Checkout proper explanation in How to load CSS Asynchronously

Bhargav Raviya
  • 84
  • 6