HTML
Collegamento di risorse
Ricerca…
introduzione
Mentre molti script, icone e fogli di stile possono essere scritti direttamente nel codice HTML, è consigliabile e più efficiente includere queste risorse nel proprio file e collegarle al documento. Questo argomento riguarda il collegamento di risorse esterne come fogli di stile e script in un documento HTML.
Sintassi
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
Parametri
| Attributo | Dettagli |
|---|---|
charset | Specifica la codifica dei caratteri del documento collegato |
crossorigin | Specifica come l'elemento gestisce le richieste di origine incrociata |
href | Specifica la posizione del documento collegato |
hreflang | Specifica la lingua del testo nel documento collegato |
media | Specifica su quale dispositivo verrà visualizzato il documento collegato, spesso utilizzato con la selezione di fogli di stile in base al dispositivo in questione |
rel | Richiesto Specifica la relazione tra il documento corrente e il documento collegato |
rev | Specifica la relazione tra il documento collegato e il documento corrente |
sizes | Specifica la dimensione della risorsa collegata. Solo quando rel="icon" |
target | Specifica dove deve essere caricato il documento collegato |
type | Specifica il tipo di supporto del documento collegato |
integrity | Specifica un hash codificato base64 (sha256, sha384 o sha512) della risorsa collegata che consente al browser di verificarne la legittimità. |
Foglio di stile CSS esterno
<link rel="stylesheet" href="path/to.css" type="text/css">
La pratica standard consiste nel posizionare i <link> CSS <link> all'interno del tag <head> nella parte superiore del codice HTML. In questo modo il CSS verrà caricato per primo e si applicherà alla tua pagina mentre viene caricata, piuttosto che mostrare un HTML non disegnato fino a quando il CSS non viene caricato. L'attributo type non è necessario in HTML5, poiché HTML5 di solito supporta i CSS.
<link rel="stylesheet" href="path/to.css" type="text/css">
e
<link rel="stylesheet" href="path/to.css">
... fai la stessa cosa in HTML5.
Un'altra pratica, anche se meno comune, consiste nell'utilizzare una dichiarazione @import all'interno del CSS diretto. Come questo:
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
JavaScript
Sincrono
<script src="path/to.js"></script>
La pratica standard consiste nel posizionare tag <script> JavaScript appena prima del tag di chiusura </body> . Il caricamento degli script per ultimo consente di visualizzare le immagini del tuo sito più rapidamente e scoraggia il tuo JavaScript dal tentativo di interagire con elementi che non sono ancora stati caricati.
asincrono
<script src="path/to.js" async></script>
Un'altra alternativa, quando il codice Javascript che viene caricato non è necessario per l'inizializzazione della pagina, può essere caricato in modo asincrono, accelerando il caricamento della pagina. Usando async il browser caricherà il contenuto dello script in parallelo e, una volta scaricato completamente, interromperà l'analisi HTML per analizzare il file Javascript.
differite
<script src="path/to.js" defer></script>
Gli script posticipati sono come gli script asincroni, con l'eccezione che l'analisi verrà eseguita solo dopo che l'HTML è stato interamente analizzato. Gli script posticipati sono garantiti per essere caricati nell'ordine della dichiarazione, allo stesso modo degli script sincroni.
<Noscript>
<noscript>JavaScript disabled</noscript>
L'elemento <noscript> definisce il contenuto da visualizzare se l'utente ha script disabilitati o se il browser non supporta l'uso di script. Il tag <noscript> può essere inserito in <head> o <body> .
favicon
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Usa l' image/png tipo mime per i file PNG e l' image/x-icon per i file di icone ( *.ico ). Per la differenza, vedi questa domanda SO .
Un file chiamato favicon.ico nella radice del tuo sito web verrà in genere caricato e applicato automaticamente, senza la necessità di un tag <link> . Se questo file cambia, i browser possono essere lenti e testardi sull'aggiornamento della cache.
CSS alternativo
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
Alcuni browser consentono l'applicazione di fogli di stile alternativi se vengono offerti. Per impostazione predefinita, non verranno applicati, ma in genere possono essere modificati tramite le impostazioni del browser:
Firefox consente all'utente di selezionare il foglio di stile utilizzando il sottomenu Visualizza> Stile pagina, Internet Explorer supporta anche questa funzione (a partire da IE 8), accessibile anche da Visualizza> Stile pagina (almeno a partire da IE 11), ma Chrome richiede un'estensione per utilizzare la funzione (dalla versione 48). La pagina Web può anche fornire la propria interfaccia utente per consentire all'utente di cambiare stile.
(Fonte: i documenti MDN )
Feed Web
Utilizza l' rel="alternate" per consentire la rilevabilità dei tuoi feed 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" />
Vedi i documenti MDN per i feed RSS e RSS Atomic .
Collega l'attributo 'media'
<link rel="stylesheet" href="test.css" media="print">
Media specifica quale foglio di stile deve essere usato per quale tipo di media. L'uso del valore di print mostrerebbe solo quel foglio di stile per le pagine di stampa.
Il valore di questo attributo può essere uno qualsiasi dei valori mediatype (simile a una query multimediale CSS).
Prev e Next
Quando una pagina fa parte di una serie di articoli, per esempio, si può usare prev e next to point alle pagine che vengono prima e dopo.
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
Suggerimento sulla risorsa: dns-prefetch, prefetch, prerender
preconnect
La relazione di preconnect è simile a dns-prefetch in quanto risolverà il DNS. Tuttavia, farà anche l'handshake TCP e la negoziazione TLS opzionale. Questa è una caratteristica sperimentale.
<link rel="preconnect" href="URL">
DNS-Prefetch
Informa i browser a risolvere il DNS per un URL, in modo che tutte le risorse da tale URL vengano caricate più velocemente.
<link rel="dns-prefetch" href="URL">
prefetch
Informa i browser che una data risorsa deve essere precaricata in modo che possa essere caricata più rapidamente.
<link rel="prefetch" href="URL">
DNS-Prefetch risolve solo il nome del dominio mentre il prefetch scarica / memorizza le risorse specificate.
Prerender
Informa i browser a recuperare e rendere l'URL in background, in modo che possano essere consegnati all'utente istantaneamente mentre l'utente naviga verso quell'URL. Questa è una caratteristica sperimentale.
<link rel="prerender" href="URL">