web-dev-qa-db-fra.com

Où devrais-je placer le code CSS et Javascript dans une page Web HTML?

Lors de la conception d'une page Web, où dois-je placer le code suivant?

<link rel=stylesheet type="text/css" href="css/layout.css">

Devrais-je le mettre dans le <head> ou devrais-je le mettre dans le <body>? Veuillez clarifier les questions suivantes:

  1. Quelle différence cela fait-il si je le mets dans <head> ou ailleurs autour du code HTML?
  2. Que se passe-t-il si j'ai deux fichiers CSS (ou Javascript)? Comme je ne peux inclure qu'un fichier avant un autre, quel fichier le navigateur Web utilisera-t-il pour afficher la page Web?
javascripthtmlcsscss3
55
Sumit Gupta

À mon avis, la meilleure pratique consiste à placer le fichier CSS dans l'en-tête.

<head>
  <link rel="stylesheet" href="css/layout.css" type="text/css">
</head>

et le fichier Javascript avant la balise </body> de fermeture

  <script type="text/javascript" src="script.js"></script>
</body>

Aussi, si vous avez, comme vous l'avez dit deux fichiers CSS. Le navigateur utiliserait les deux. S'il y avait des sélecteurs, c'est à dire. .content {} étant identiques dans les deux fichiers CSS, le navigateur écraserait les propriétés similaires du premier avec les propriétés du second. Si ça a du sens.

69
brenjt

Placer les feuilles de style en hautLiens vers les discussions

En recherchant les performances chez Yahoo !, nous avons découvert que le déplacement des feuilles de style dans le document HEAD accélère le chargement des pages. En effet, le fait de placer des feuilles de style dans le HEAD permet à la page d’être affichée progressivement.

Les ingénieurs qui s’intéressent aux performances veulent une page à charger progressivement. En d'autres termes, nous voulons que le navigateur affiche le contenu le plus rapidement possible. Ceci est particulièrement important pour les pages contenant beaucoup de contenu et pour les utilisateurs disposant de connexions Internet plus lentes. L'importance de donner aux utilisateurs un retour visuel, tel que des indicateurs de progrès, a été bien documentée et documentée. Dans notre cas, la page HTML est l'indicateur de progression! Lorsque le navigateur charge progressivement la page, l'en-tête, la barre de navigation, le logo en haut, etc. servent tous de retour visuel à l'utilisateur qui attend la page. Cela améliore l'expérience globale de l'utilisateur.

Le problème posé par la présence de feuilles de style au bas du document est qu’il interdit le rendu progressif dans de nombreux navigateurs, y compris Internet Explorer. Ces navigateurs bloquent le rendu pour éviter de devoir redessiner des éléments de la page si leurs styles changent. L'utilisateur est bloqué en train de visualiser une page blanche vierge.

La spécification HTML indique clairement que les feuilles de style doivent être incluses dans le HEAD de la page: "Contrairement à A, [LINK] peut uniquement apparaître dans la section HEAD d'un document, même s'il peut apparaître un nombre quelconque. de fois. " Aucune des solutions de rechange, l’écran blanc ou le contenu non stylé, ne vaut le risque. La solution optimale consiste à suivre les spécifications HTML et à charger vos feuilles de style dans le document HEAD.

Mettre les scripts en bas

Le problème posé par les scripts est qu'ils bloquent les téléchargements parallèles. La spécification HTTP/1.1 suggère que les navigateurs ne téléchargent pas plus de deux composants en parallèle par nom d'hôte. Si vous diffusez vos images à partir de plusieurs noms d'hôte, vous pouvez effectuer plus de deux téléchargements en parallèle. Cependant, pendant le téléchargement d'un script, le navigateur ne lance aucun autre téléchargement, même avec des noms d'hôte différents.

Dans certaines situations, il n'est pas facile de déplacer les scripts vers le bas. Si, par exemple, le script utilise document.write pour insérer une partie du contenu de la page, il ne peut pas être déplacé plus bas dans la page. Il pourrait également y avoir des problèmes de portée. Dans de nombreux cas, il existe des moyens de contourner ces situations.

Une suggestion alternative souvent proposée consiste à utiliser des scripts différés. L'attribut DEFER indique que le script ne contient pas document.write et constitue un indice pour les navigateurs qu'ils peuvent continuer le rendu. Malheureusement, Firefox ne supporte pas l'attribut DEFER. Dans Internet Explorer, le script peut être différé, mais pas autant que souhaité. Si un script peut être différé, il peut également être déplacé au bas de la page. Cela accélérera le chargement de vos pages Web.

17
Joe
  1. Vous devez placer les liens des feuilles de style et le code javascript <script> dans le <head>, comme le dictent les formats. Cependant, certains placent javascript <script>s au bas du corps, de sorte que le contenu de la page se charge sans attendre le <script>, mais il s’agit d’un compromis, car l’exécution du script sera retardée jusqu’au chargement des autres ressources.
  2. CSS a priorité dans l'ordre dans lequel elles sont liées (en sens inverse): premier écrasé par deuxième, remplacé par troisième, etc.
8
shelhamer

Vous devriez mettre CSS dans le <head> car c'est ce que la spécification dit de faire.

Si vous avez plusieurs fichiers CSS, ils seront chargés dans l'ordre dans lequel vous les avez placés dans le code. S'il y a du style dans le deuxième fichier CSS, le style est écrasé dans le premier. Cela se produira par conception. Ainsi, Cascading Style Sheets.

La plupart des navigateurs rendent toujours efficacement les fichiers CSS, mais votre code n'est pas sémantiquement correct.

Vous pouvez utiliser des liens de fichier JavaScript n'importe où sur le document. Il y a différentes raisons pour en utiliser certaines dans le <head> et d'autres ailleurs sur la page. (Par exemple, le code analytique de Google doit être placé en bas.)

5
Michael Irigoyen

À mon avis, le meilleur moyen est 1) placez le fichier CSS dans la partie en-tête entre les balises head La raison en est que la première page montre la vue pour ce css require 2) et que tous les fichiers js doivent être placés avant la balise de fermeture du corps . la raison est après tout affichage de composant js peut s'appliquer 

4
Saloni shah

Vous devriez le mettre dans la <tête>. Je place généralement les références de style au-dessus de JS et je commande mon JS de haut en bas si certaines dépendent d'autres, mais je pense que toutes les références sont chargées avant le rendu de la page.

2
Glenn Ferrie

Les inclus CSS doivent aller dans la variable head avant que tout script js inclut . Javascript peut aller n'importe où, mais la fonction du fichier pourrait en réalité déterminer l'emplacement. Si cela crée un contenu de page, mettez-le en tête. S'il est utilisé pour des événements ou un suivi, vous pouvez le mettre avant le </body>

2
zeal

En ce qui concerne <link /> et <style />, vous n’avez pas le choix, ils doivent figurer dans la section <head /> (voir un et deux ).

En ce qui concerne <script /> il peut apparaître à la fois dans <head /> et <body /> (voir trois ), il est généralement préférable de les mettre dans le <head /> car ils ne sont pas vraiment "contenu" (où "contenu" est ce que le l’utilisateur voit à l’écran), c’est plutôt quelque chose qui "fonctionne" sur le "contenu".

Spécification W3C HTML4 FTW!

1
Albireo

AS par mon étude dans la place de CSS toujours à l'intérieur. Like: -

 <head>
  <link href="css/grid.css" rel="stylesheet" />
 </head>

et pour script sa depen: -

  1. Si à l'intérieur du document de script. écris présent alors il sera dans la balise de tête.
  2. Si le script contient l'attribut DEFER, BECAUSE différer le téléchargement en parallèle 
0
Neha Sinha

Et si vous avez plusieurs fichiers .css ou .js à appeler, incluez-les simplement l'un après l'autre, ou:

<head>

<link href="css/grid.css" rel="stylesheet" />

<link href="css/style.css" rel="stylesheet" />

<script src="js/jquery-1.4.4.min.js"></script>

<script src="js/jquery.animate-colors-min.js"></script>

</head>
0
Adam