Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS stylesheets at top or bottom? or How to solve blank page issue?

I have been putting stylesheets on top (between <head></head>) of html. As far as I understand this is the best practice. (e.g. http://stevesouders.com/hpws/css-bottom.php)

Anyhow, recently I have experienced different results. Instead the codes below will return blank page when test.css is slow, which means I am not experiencing progressive rendering.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Blah..
</body>
</html>

Then when putting test.css at bottom, I get progressive rendering.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Blah..
<link rel="stylesheet" href="test.css" />
</body>
</html>

As far as I have understood and tought so far, it should be the other way round.. Probably there are other factors that I have overlooked?

like image 881
forestclown Avatar asked Nov 07 '11 07:11

forestclown


People also ask

Does CSS go at the top or bottom?

CSS should always be defined in <head> . AFAIK, the files that "should" be at the end of your document are scripts, not styles.

Which three 3 ways can CSS formatting be applied?

CSS can be applied to HTML or XHTML using three methods: linked, embedded, and inline. In the linked method, the CSS is stored in a separate file, instead of directly in the HTML page.

Which are the 3 types of stylesheets available?

There are three types of CSS which are given below: Inline CSS. Internal or Embedded CSS. External CSS.

What are the 3 ways to style a web page using CSS?

CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.


2 Answers

Google is fast busting the tradition of styles 'belonging' in the head. They do indeed recommend that critical styling belongs either in the <head> tag or even inline, but that other, non-essential styles should be referenced after the closing </html> tag. This does work on most, if not all modern browsers (I've not tested all).

The reason behind this is to load the bulk of the styles as a non-blocking reference, allowing the browser to begin writing to page before getting all the (potentially) bulky styles. Depending on what's in the 'critical' styles, this could cause an initial layout of hideous proportions before styling is rendered (FOUC). That is probably what you are experiencing with the "blank page" issue.

Remember also that CSS was released almost 20 years ago (1996), so it's not surprising that Google (and others) are manipulating and pushing out the traditional parameters of the concept.

A ridiculously simple example:

<!DOCTYPE html>
<html>
<head>
    <title>It's a Brave New World</title>
    <link rel="stylesheet" type="text/css" href="css/critical_styles.css" />
</head>
<body>
    <!-- best page ever -->
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/bulky_nonessential_styles.css" />
like image 193
Jongosi Avatar answered Nov 07 '22 13:11

Jongosi


CSS should be defined in your <head>.

This way, as elements are loading in the DOM, they will render with the proper styles applied immediately.

like image 27
maček Avatar answered Nov 07 '22 12:11

maček