HTML
Relier des ressources
Recherche…
Introduction
Bien que de nombreux scripts, icônes et feuilles de style puissent être écrits directement dans le balisage HTML, il est préférable et plus efficace d'inclure ces ressources dans leur propre fichier et de les lier à votre document. Cette rubrique traite de la liaison de ressources externes telles que les feuilles de style et les scripts dans un document HTML.
Syntaxe
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
Paramètres
| Attribut | Détails |
|---|---|
charset | Spécifie le codage des caractères du document lié |
crossorigin | Spécifie comment l'élément gère les demandes d'origine croisée |
href | Spécifie l'emplacement du document lié |
hreflang | Spécifie la langue du texte dans le document lié |
media | Spécifie sur quel périphérique le document lié sera affiché, souvent utilisé avec la sélection de feuilles de style en fonction du périphérique en question |
rel | Requis Spécifie la relation entre le document actuel et le document lié |
rev | Spécifie la relation entre le document lié et le document en cours |
sizes | Spécifie la taille de la ressource liée. Seulement quand rel="icon" |
target | Spécifie où le document lié doit être chargé |
type | Spécifie le type de support du document lié |
integrity | Spécifie un hachage codé en base64 (sha256, sha384 ou sha512) de la ressource liée permettant au navigateur de vérifier sa légitimité. |
Feuille de style CSS externe
<link rel="stylesheet" href="path/to.css" type="text/css">
La pratique standard consiste à placer des balises CSS <link> dans la <head> en haut de votre code HTML. De cette façon, le CSS sera chargé en premier et s’appliquera à votre page au fur et à mesure de son chargement, au lieu d’afficher le code HTML non stylé jusqu’à ce que le CSS soit chargé. L'attribut de type n'est pas nécessaire en HTML5, car HTML5 prend généralement en charge CSS.
<link rel="stylesheet" href="path/to.css" type="text/css">
et
<link rel="stylesheet" href="path/to.css">
... faire la même chose en HTML5.
Une autre pratique, quoique moins courante, consiste à utiliser une instruction @import à l'intérieur de CSS direct. Comme ça:
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
JavaScript
Synchrone
<script src="path/to.js"></script>
La pratique standard consiste à placer des balises JavaScript <script> juste avant la </body> fermeture. Le chargement de vos scripts en dernier permet aux images de votre site de s’afficher plus rapidement et décourage votre JavaScript d’essayer d’interagir avec des éléments qui ne sont pas encore chargés.
Asynchrone
<script src="path/to.js" async></script>
Une autre alternative, lorsque le code Javascript en cours de chargement n'est pas nécessaire pour l'initialisation de la page, peut être chargé de manière asynchrone, ce qui accélère le chargement de la page. En utilisant async le navigateur charge le contenu du script en parallèle et, une fois téléchargé, interrompt l’analyse HTML pour analyser le fichier Javascript.
Différé
<script src="path/to.js" defer></script>
Les scripts différés sont comme les scripts asynchrones, à l'exception du fait que l'analyse ne sera effectuée qu'une fois que le code HTML sera entièrement analysé. Les scripts différés sont garantis être chargés dans l'ordre de déclaration, de la même manière que les scripts synchrones.
<noscript>
<noscript>JavaScript disabled</noscript>
L'élément <noscript> définit le contenu à afficher si l'utilisateur a désactivé les scripts ou si le navigateur ne prend pas en charge l'utilisation de scripts. La <noscript> peut être placée dans <head> ou <body> .
Favicon
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Utilisez l' image/png type mime pour les fichiers PNG et l' image/x-icon pour les fichiers d'icône ( *.ico ). Pour la différence, voir cette question SO .
Un fichier nommé favicon.ico à la racine de votre site Web sera généralement chargé et appliqué automatiquement, sans nécessiter de <link> . Si ce fichier change, les navigateurs peuvent être lents et obstinés à mettre à jour leur cache.
CSS alternatif
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
Certains navigateurs permettent d'appliquer d'autres feuilles de style si elles sont proposées. Par défaut, ils ne seront pas appliqués, mais ils peuvent généralement être modifiés via les paramètres du navigateur:
Firefox permet à l'utilisateur de sélectionner la feuille de style en utilisant le sous-menu Affichage> Style de page, Internet Explorer prend également en charge cette fonctionnalité (commençant par IE 8), également accessible depuis View> Style de page (au moins depuis IE 11). utilisez la fonctionnalité (à partir de la version 48). La page Web peut également fournir sa propre interface utilisateur pour permettre à l'utilisateur de changer de style.
(Source: les documents MDN )
Flux Web
Utilisez l' rel="alternate" pour permettre la découverte de vos flux Atom / RSS.
<link rel="alternate" type="application/atom+xml" href="http://example.com/feed.xml" />
<link rel="alternate" type="application/rss+xml" href="http://example.com/feed.xml" />
Consultez la documentation MDN pour les flux RSS et Atomic RSS .
Attribut "média" de lien
<link rel="stylesheet" href="test.css" media="print">
Le support spécifie quelle feuille de style doit être utilisée pour quel type de support. L'utilisation de la valeur d' print n'afficherait que cette feuille de style pour les pages imprimées.
La valeur de cet attribut peut être l'une des valeurs du type de mediatype (similaire à une requête de support CSS).
Précédent et Suivant
Lorsqu'une page fait partie d'une série d'articles, par exemple, on peut utiliser prev et à next pour pointer vers des pages qui arrivent avant et après.
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
Conseil de ressource: dns-prefetch, prefetch, prerender
Préconnecter
La relation preconnect est similaire à dns-prefetch car elle résout le DNS. Cependant, cela permettra également d'établir le protocole TCP et la négociation TLS facultative. Ceci est une fonctionnalité expérimentale.
<link rel="preconnect" href="URL">
DNS-Prefetch
Informe les navigateurs de la résolution du DNS pour une URL, afin que tous les actifs de cette URL se chargent plus rapidement.
<link rel="dns-prefetch" href="URL">
Prélecture
Informe les navigateurs qu’une ressource donnée doit être pré-extraite afin qu’elle puisse être chargée plus rapidement.
<link rel="prefetch" href="URL">
DNS-Prefetch résout uniquement le nom de domaine, tandis que prefetch télécharge / stocke les ressources spécifiées.
Prérendeur
Informe les navigateurs de l'extraction et du rendu de l'URL en arrière-plan, afin qu'ils puissent être livrés instantanément à l'utilisateur lorsque l'utilisateur accède à cette URL. Ceci est une fonctionnalité expérimentale.
<link rel="prerender" href="URL">