Search code examples
phphtmlinclude

How to include the CSS and JS in pages?

I know how <link type="stylesheet" href=".." /> and <script type="text/javascript" src=".." /> work. But I have some truble understanding where they should be in context of W3C and also in context of good programming practice. I was many examples where these are in the header. I don't know why, but seems legit. But what impact has it when they're somewhere else in the HTML code?

Take for instance a header file, that is included by PHP into all pages of a website, and this header file has its own CSS\JS files. So they can either be included in the header file itself, and then there will be a link and a script tag in the middle of the HTML body of the page including the header file. Another option is putting these in the head section of each file, but then changes will have to be made in every single page.

My questions:

  1. Where should the link and script tags be according to W3C?
  2. What impact will it have if they are in the middle of the HTML body like in the example above?
  3. What is the best solution in terms of good programming practice?
  4. How do I make the following include, while having a W3C compliant page, and in a way that I don't have to update each page when I change the CSS\JS file.
    • Consider the included code snippet to be independent of the including page.

Just for clearness a short example: (Consider same situation also for a JS file)

header.html:

   <link rel="stylesheet" href="header.css" />     <!--- Should this be here? --->
<nav>
   <ul>
     <li>Menu item1</li>
     <li>Menu item2</li>
   </ul>
</nav>

index.php:

<html>
   <head>
      <link rel="stylesheet" href="header.css" />     <!--- Or should it be here? --->
   </head>
   <body>
      <?php include('header.html'); ?>
      <!--- Some HTML code ---->
   </body>
</html>

header.css:

nav{ color: #00FF00; }
Solution

  • Simple

    Put Scripts at the Bottom.
Put Stylesheets at the Top

    The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.

    For javascipts

    The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

    FYI: http://developer.yahoo.com/performance/rules.html#css_top
    http://developer.yahoo.com/performance/rules.html#js_bottom

    [EDIT]
    For your new question,

    • Make that header.html to dynamic page.
    • When ever that is being included, Read the data from output buffer (assuming you are not flushing it out) using ob_get_contents.
    • Then you can inject the css file into the head part.
    • Echo it.
    • Clean the buffer with ob_end_clean();

    Some frameworks, like zend allows you to control this with the helpers.