Issue link: https://read.uberflip.com/i/1146286
44 | Chapter 5: Rule 5: Put Stylesheets at the Top Firefox is more consistent—it always chooses the second alternative (FOUC). All the examples behave identically in Firefox: they render progressively. For the first three examples, Firefox's behavior works to the user's benefit because the stylesheet is not required for rendering the page, but in the "CSS Flash of Unstyled Content" exam- ple, the user is less fortunate. The user experiences the FOUC problem precisely because Firefox renders progressively. When browsers behave differently, what's a frontend engineer to do? You can find the answer in the HTML specification (http://www.w3.org/TR/html4/ struct/links.html#h-12.3): Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times. Browsers have a history of supporting practices that violate the HTML specification in order to make older, sloppier web pages work, but when it comes to handling the placement of stylesheets, Internet Explorer and Firefox are nudging the web develop- ment community to follow the specification. Pages that violate the specification (by putting the LINK outside of the HEAD section) still render, but risk a degraded user experience. In their effort to improve one of the most visited pages on the Web, the Yahoo! por- tal team initially made it worse by moving the stylesheet to the bottom of the page. They found the optimal solution by following the HTML specification and leaving it at the top. Neither of the alternatives—the blank white screen or flash of unstyled content—are worth the risk. If you have a stylesheet that's not required to render the page, with some extra effort you can load it dynamically after the document loads, as described in the section "Post-Onload Download" in Chapter 8. Otherwise, whether your stylesheets are necessary to render the page or not, there's one rule to follow. Put your stylesheets in the document HEAD using the LINK tag.