Quelle est la différence si je mets le fichier css dans ou ?

Normalement, les fichiers css sont placés à l’intérieur de , et si je les ai mis dans , quelle différence cela fera-t-il?

Juste pour append à ce que jdelStrother a mentionné à propos des spécifications w3 et ARTstudio sur le rendu du navigateur.

Il est recommandé car lorsque le CSS est déclaré avant le démarrage de , vos styles sont déjà chargés. Donc, très rapidement, les utilisateurs voient 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 ne parvienne à l’utilisateur.

De plus, si vous laissez les styles quelque part dans , le navigateur doit redéfinir la page (nouvelle et ancienne lors du chargement) lorsque les styles déclarés ont été analysés.

Les versions les plus récentes de la spécification HTML autorisent désormais la

dans les éléments du corps. https://www.w3.org/TR/html5/dom.html#flow-content L' atsortingbut scoped qui était une condition préalable pour avoir une balise de style dans le body est désormais obsolète.

Cela signifie que vous pouvez utiliser la balise de style où vous voulez, les seules implications étant une baisse des performances de la page en raison de possibles redissortingbutions / repeints une fois que le navigateur aura dépassé les styles plus bas dans l'arborescence.

Réponse obsolète:

La

n'est pas autorisée dans conformément aux spécifications w3. (Vous pouvez bien sûr appliquer des styles en ligne via

si nécessaire, mais cela est généralement considéré comme une mauvaise séparation du style et du contenu)

Mettre du CSS dans le corps signifie qu’il est chargé plus tard. C’est une technique que certains utilisent pour permettre au navigateur de dessiner plus rapidement l’interface (c’est-à-dire qu’il supprime une étape de blocage). Ceci est important pour l’expérience utilisateur sur SmartPhones.

Je fais de mon mieux pour garder un petit css sur la et je déplace le rest en bas. Par exemple, si une page utilise la CSS de l’interface utilisateur JQuery, je la déplace toujours au bas du , juste avant les liens vers le javascript JQuery. Au moins, tous les éléments non Jquery peuvent déjà être dessinés.

Head est conçu pour (citant le W3C):

“des informations sur le document actuel, telles que son titre, des mots clés pouvant être utiles aux moteurs de recherche et d’autres données qui ne sont pas considérées comme du contenu de document

Voir la structure globale d’un document HTML . Comme le CSS n’est pas du contenu de document, il devrait être dans la tête.

De plus, tous les autres développeurs Web s’attendent à le voir là-bas, alors ne confondez pas les choses en les 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.

Les normes ( HTML 4.01: l’élément de style ) spécifient clairement que la balise de style est uniquement autorisée à l’intérieur de la balise head. Si vous mettez des balises de style dans la balise body, les navigateurs essaieront de tirer le meilleur parti possible, si possible.

Il est possible qu’un navigateur ignore une balise de style dans le corps si vous spécifiez un type de document ssortingct. Je ne sais pas si un navigateur actuel le fait, mais je ne compte pas sur toutes les futures versions pour être si détendu sur l’endroit où vous placez l’élément de style.

Bien que la balise de style ne soit pas autorisée dans le corps, la balise de link est, aussi longtemps que vous référencez une feuille de style externe, tous les navigateurs doivent rendre et utiliser le CSS correctement lorsqu’ils sont utilisés dans le body .

Source: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element

En plus des réponses précédentes, bien que placer un bloc de code de style dans l’élément puisse fonctionner dans les navigateurs modernes (bien que cela ne soit toujours pas correct), il existe toujours un danger, en particulier avec les anciens navigateurs. sauf si la section de style est incluse dans une section CDATA.

Bien sûr, le fait de ne pas utiliser les spécifications HTML / XHTML du W3C signifie que toute page qui le contient dans le corps échouera sur le validateur du W3C. Il est toujours plus facile de détecter les 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 avoir un impact négatif sur le rendu de tout élément au-delà de son emplacement dans le code. Vous pouvez donc obtenir des effets inattendus avec des éléments dans des endroits où ils ne devraient pas l’être. Il est plus facile de deviner comment l’afficher, et différents navigateurs peuvent prendre différentes décisions quant à leur rendu.

Que vous utilisiez un doctype transitionnel ou ssortingct, il serait toujours invalide selon les spécifications (X) HTML.

En fait, vous ne devriez plus utiliser CSS en insérant 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, tout changement de style peut être effectué dans la feuille de style, pas dans le contenu. Une fois que vous avez utilisé la méthode de style en ligne, chaque page comportant un style en ligne doit être modifiée une par une. Fastidieux et risqué car vous pourriez rater une page ou trois ou dix.

En utilisant une feuille de style, il vous suffit de modifier la feuille de style. les modifications se propagent automatiquement à chaque page HTML liée à la feuille de style.

le point du nouveau-né est aussi une autre grande raison; Si vous gâchez le HTML en ajoutant CSS en ligne, le rendu devient un problème. HTML ne lance pas d’exceptions à votre code. Au lieu de cela, il s’éteint et le rend le mieux possible, et continue.

Adhérer aux normes Web en utilisant une feuille de style en fait un meilleur site Web. Et lorsque vous avez besoin d’aide parce que les choses sur votre page ne sont pas exactement ce que vous voulez, le fait de placer votre CSS dans la tête par opposition au corps permet de mieux résoudre les problèmes et d’en aider les utilisateurs.

Deux réponses contradictoires:

De la page MDN sur la balise link:

Un élément peut apparaître dans l’élément ou , selon qu’il possède ou non un type de lien. Par exemple, le type de lien de la feuille de style est body-ok et, par conséquent, un est autorisé dans le corps. Ce n’est cependant pas la meilleure pratique; Il est plus judicieux de séparer vos éléments de votre contenu corporel en les mettant dans votre tête.

À partir de CSS Le Guide définitif (4ème édition / 2017) page 10

Pour charger avec succès une feuille de style externe, le lien doit être placé à l’intérieur de l’élément head mais ne peut être placé dans aucun autre élément.

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 link, c’est pourquoi il est bon d’avoir en haut dans la tête.

Quelle différence cela fera-t-il?

Avantages: Parfois, il est plus facile d’appliquer certains atsortingbuts à certains endroits, en particulier si du code est généré à la volée (par exemple, la création via php et une liste de taille dynamic nécessite sa propre classe, par exemple pour les timings des transformations).

Les inconvénients: Un peu plus lent, peut ne pas fonctionner un jour dans un avenir lointain.

Mon avis général à ce sujet: ne le faites pas, vous n’avez pas à le faire, mais si vous devez le faire, ne perdez pas votre sumil.

Mettre le

dans le corps fonctionne bien avec tous les navigateurs modernes.

Je l'avais utilisé dans eBay.

Si ça marche, ne le cognez pas.