Normalement, les fichiers css sont placés à l'intérieur <head></head>, et si je le mets à l'intérieur <body></body>, quelle différence cela fera-t-il?
155
Juste pour ajouter à ce que jdelStrother a mentionné à propos des spécifications w3 et ARTstudio sur le rendu du navigateur.
Il est recommandé car lorsque vous avez déclaré le CSS avant le <body>démarrage, vos styles sont déjà chargés. Les utilisateurs voient donc très rapidement quelque chose apparaître sur leur écran (par exemple les couleurs de fond). Sinon, les utilisateurs voient un écran vide pendant un certain temps avant que le CSS n'atteigne l'utilisateur.
De plus, si vous laissez les styles quelque part dans le <body>, le navigateur doit rendre à nouveau la page (nouvelle et ancienne lors du chargement) lorsque les styles déclarés ont été analysés.
linketstylene doivent pas apparaître dans le corps à moins qu'ils ne soient définis (style) ou que l'attributitemprop(lien) ne soit déclaré.styleest un élément de flux en html5 et html4.1 (même s'il n'est pas cadré) et peut être mis dans le corps.scopedattribut est devenu obsolète.Les versions les plus récentes de la spécification HTML autorisent désormais la
<style>balise dans les éléments du corps. https://www.w3.org/TR/html5/dom.html#flow-content De plus, l'scopedattribut qui était autrefois prérequis pour avoir unestylebalise dans lebodyest maintenant obsolète.Cela signifie que vous pouvez utiliser la
stylebalise partout où vous le souhaitez, les seules implications sont une diminution des performances de la page en raison de possibles reflux / repeints une fois que le navigateur atteint les styles plus bas dans l'arborescence de la page.Réponse obsolète:
La
<style>balise n'est pas autorisée<body>selon les spécifications w3. (Vous pouvez, bien sûr, appliquer des styles en ligne via<div style="color:red">si nécessaire, mais il est généralement considéré comme une mauvaise séparation du style et du contenu)la source
<style>c'est un élément de flux dans html 5 et 4.1 et peut être mis dans le corps (comme tous les autres éléments de flux).Mettre CSS dans le corps signifie qu'il est chargé plus tard. C'est une technique que l'on utilise pour permettre au navigateur de commencer à dessiner l'interface plus rapidement (c'est-à-dire qu'elle supprime une étape de blocage). Ceci est important pour l'expérience utilisateur sur les SmartPhones.
Je fais de mon mieux pour garder un petit css sur le
<head>et je déplace le reste en bas. Par exemple, si une page utilise JQuery UI CSS, je la déplace toujours en bas de<body>, juste avant les liens vers JQuery javascript. Au moins, tous les éléments non Jquery peuvent déjà être dessinés.la source
Head est conçu pour (citant le W3C):
Voir la structure globale d'un document HTML . Comme CSS n'est pas un contenu de document, il devrait être dans la tête.
De plus, tous les autres développeurs Web s'attendront à le voir là-bas, alors ne confondez pas les choses en le mettant dans le corps, même si cela fonctionne!
Le seul CSS que vous devriez mettre dans le corps est le CSS en ligne , bien que j'évite généralement les styles en ligne.
la source
Les standards ( HTML 4.01: l'élément style ) spécifient clairement que la balise style n'est autorisée qu'à l'intérieur de la balise head. Si vous mettez des balises de style dans la balise body, les navigateurs essaieront d'en tirer le meilleur parti de toute façon, si possible.
Il est possible qu'un navigateur ignore une balise de style dans le corps si vous spécifiez un type de document strict. Je ne sais pas si un navigateur actuel fait cela, mais je ne compterais pas sur toutes les versions futures pour être aussi détendues sur l'endroit où vous placez l'élément de style.
la source
stylebalises sont autorisées dans le corps si elles ont unscopedattribut.Bien que la
stylebalise ne soit pas autorisée dans le corps, lalinkbalise l'est, donc tant que vous faites référence à une feuille de style externe, tous les navigateurs doivent afficher et utiliser correctement le CSS lorsqu'il est utilisé dans lebody.Source: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
la source
En plus des réponses précédentes, bien que mettre un bloc de code de style à l'intérieur de l'élément puisse fonctionner dans les navigateurs modernes (bien que cela ne règle toujours pas les choses), il y a toujours un danger, en particulier avec les navigateurs plus anciens, que le navigateur rende le code sous forme de texte sauf si la section de style est incluse dans une section CDATA.
Bien sûr, l'autre chose en le plaçant à l'intérieur de l'élément, autre que les styles en ligne, est que, comme il ne répond pas aux spécifications HTML / XHTML du W3C, toute page qui le contient dans le corps échouera sur le validateur W3C. Il est toujours plus facile de rechercher des problèmes d'affichage inattendus si tout votre code est valide, ce qui facilite la détection des erreurs. Un élément HTML non valide peut nuire au rendu de tout élément au-delà de l'endroit où il se produit dans le code, vous pouvez donc obtenir des effets inattendus ayant des éléments à des endroits où ils ne devraient pas être, car lorsqu'un navigateur trouve un élément non valide, il permet de deviner au mieux comment il doit l'afficher, et différents navigateurs peuvent prendre des décisions différentes quant à la façon dont ils le rendent.
Que vous utilisiez un doctype transitoire ou strict, il serait toujours invalide selon les spécifications (X) HTML.
la source
Vous iriez en fait à l'encontre de l'objectif de l'utilisation de CSS en plaçant les styles dans le corps. Le but serait de séparer le contenu de la présentation (et de la fonction). De cette façon, toutes les modifications de style peuvent être effectuées dans la feuille de style, pas dans le contenu. Une fois que vous utilisez la méthode de style en ligne, chaque page qui a un style en ligne doit être modifiée une par une. Fastidieux et risqué car vous pourriez manquer une page ou trois ou dix.
En utilisant une feuille de style, il vous suffit de changer la feuille de style; les modifications se propagent automatiquement à chaque page HTML qui renvoie à la feuille de style.
Le point de neonble est également une autre grande raison; si vous gâchez le HTML en ajoutant du CSS en ligne, le rendu devient un problème. Le HTML ne lève pas d'exceptions à votre code. Au lieu de cela, il sort et le rend de la meilleure façon possible, et passe à autre chose.
Adhérer aux normes Web en utilisant une feuille de style permet un meilleur site Web. Et lorsque vous avez besoin d'aide parce que les éléments de votre page ne sont pas exactement comme vous le souhaitez, placer votre CSS dans la tête plutôt que dans le corps permet un meilleur dépannage par vous-même et pour toute personne à qui vous demandez de l'aide.
la source
Deux réponses contradictoires:
De la page MDN sur la balise de lien:
Tiré de CSS The Definitive Guide (4e édition / 2017) page 10
la source
La différence est. Le chargement de la page est asynchrone, donc si vous avez une feuille de style externe elle chargera le fichier css immédiatement quand il atteindra la balise de lien, c'est pourquoi il est bon d'avoir en haut en tête.
la source
Quelle différence cela fera-t-il?
Avantages: Parfois, il est plus facile d'appliquer certains attributs à certains endroits, en particulier si le code est généré à la volée (comme la construction via php et chaque liste de taille dynamique a besoin de sa propre classe ... comme pour les horaires des éléments pour les transformations).
Inconvénients: légèrement plus lent, peut ne pas fonctionner un jour dans un avenir lointain.
Mon opinion générale à ce sujet: ne le faites pas, vous n'êtes pas obligé, mais si vous le devez, ne perdez pas le sommeil.
la source
Mettre le
<style>dans le corps fonctionne bien avec tous les navigateurs modernes.J'avais utilisé ceci sur eBay.
Si cela fonctionne, ne le frappez pas.
la source