Indice

<link>: l'elemento "Collegamento ad una risorsa esterna"

L' elemento HTML <link> specifica le relazioni tra il documento corrente e una risorsa esterna. Questo elemento è più comunemente utilizzato per creare collegamenti a fogli di stile, ma viene anche utilizzato per stabilire icone del sito (sia icone di stile "favicon" che icone per la schermata iniziale e le app sui dispositivi mobili), tra le altre cose.

Per collegare un foglio di stile esterno, dovresti includere un elemento <link> all'interno del tuo in elemento <head> in questo modo:

<link href="main.css" rel="stylesheet">

Questo semplice esempio fornisce il percorso del foglio di stile all'interno di un attributo href e un attributo rel con un valore di stylesheet. L'acronimo rel significa "relazione" ed è probabilmente una delle caratteristiche chiave dell'elemento <link>: il valore indica come l'elemento, a cui è collegato, è correlato al documento che lo contiene.

Ci sono un certo numero di altri tipi comuni che incontrerai. Ad esempio, un link alla favicon del sito:

<link rel="icon" href="favicon.ico">

Esistono numerosi altri valori nel caso in cui rel sia utilizzato con delle icone, utilizzati principalmente per indicare tipi di icone speciali da utilizzare su varie piattaforme mobili, ad esempio:

<link rel="apple-touch-icon-precomposed" sizes="114x114"
    href="apple-icon-114.png" type="image/png">

L'attributo sizes indica la dimensione dell'icona, mentre type contiene il tipo MIME della risorsa collegata. Questi forniscono suggerimenti utili per consentire al browser di scegliere l'icona più appropriata disponibile.

Puoi anche fornire un tipo di supporto o una query all'interno di un attributo media; questa risorsa verrà quindi caricata solo se la condizione del supporto è vera. Per esempio:

<link href="print.css" rel="stylesheet" media="print>
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)>

Attributi

Se l'attributo non è presente, la risorsa viene recuperata senza una richiesta CORS (cioè senza inviare l'intestazione HTTP Origin), impedendone l'utilizzo non contaminato. Se non valido, viene gestito come se fosse stata utilizzata la parola chiave enumerata anonymous .

as

Questo attributo viene utilizzato solo quando rel="preload" o rel="prefetch" è stato impostato sull'elemento <link>. Specifica il tipo di contenuto caricato da <link>, necessario per la corrispondenza delle richieste, l'applicazione di criteri di sicurezza del contenuto corretti e l'impostazione dell'intestazione della richiesta Accept corretta. Inoltre, rel="preload" lo utilizza come segnale per la definizione delle priorità delle richieste.

crossorigin

Questo attributo enumerato indica se è necessario utilizzare CORS durante il recupero della risorsa. Le immagini abilitate per CORS possono essere riutilizzate nell'elemento <canvas> senza essere contaminate . I valori ammessi sono:

anonymous

Viene eseguita una richiesta multiorigine (ad es. con un'intestazione HTTP Origin), ma non viene inviata alcuna credenziale (ad es. nessun cookie, certificato X.509 o autenticazione HTTP di base). Se il server non fornisce le credenziali al sito di origine (non impostando l'intestazione HTTP Access-Control-Allow-Origin), la risorsa sarà contaminata e il suo utilizzo sarà limitato.

use-credentials

Viene eseguita una richiesta multiorigine (ad es. con un'intestazione HTTP Origin) insieme a una credenziale inviata (ad es. viene eseguita un'autenticazione di cookie, certificato e/o HTTP di base). Se il server non fornisce le credenziali al sito di origine (tramite intestazione HTTP Access-Control-Allow-Credentials), la risorsa verrà contaminata e il suo utilizzo sarà limitato.

disabled

Solo per rel="stylesheet", l'attributo Booleano disabled indica se il foglio di stile descritto deve essere caricato e applicato al documento. Se disabled è specificato nell'HTML quando viene caricato, il foglio di stile non verrà caricato durante il caricamento della pagina. Invece, il foglio di stile verrà caricato su richiesta, se e quando l'attributo disabled viene modificato su false o rimosso.

L'impostazione della proprietà disabled nel DOM provoca la rimozione del foglio di stile dall'elenco del documento Document.styleSheets.

fetchpriority

Fornisce un suggerimento sulla priorità relativa da utilizzare durante il recupero di una risorsa precaricata. Valori consentiti:

high

Segnala un recupero ad alta priorità rispetto ad altre risorse dello stesso tipo.

low

Segnala un recupero a bassa priorità rispetto ad altre risorse dello stesso tipo.

auto

Predefinito: Segnala la determinazione automatica della priorità di recupero rispetto ad altre risorse dello stesso tipo.

href

Questo attributo specifica l' URL della risorsa collegata. Un URL può essere assoluto o relativo.

hreflag

Questo attributo indica la lingua della risorsa collegata. È puramente consultivo. Utilizzare questo attributo solo se l'attributo href è presente.

imagesizes

Solo per rel="preload" e as="image", l'attributo imagesizes è un attributo che indica di precaricare la risorsa appropriata utilizzata da un elemento <img> con valori corrispondenti per i suoi attributi srcset e sizes.

imagesrcset

Solo per rel="preload" e as="image", l'attributo imagesrcset è un attributo del set di sorgenti che indica di precaricare la risorsa appropriata utilizzata da un elemento <img> con valori corrispondenti per i suoi attributi srcset e sizes.

integrity

Contiene metadati inline: un hash crittografico con codifica base64 della risorsa (file) che stai dicendo al browser di recuperare. Il browser può utilizzarlo per verificare che la risorsa recuperata sia stata consegnata senza manipolazioni impreviste.

media

Questo attributo specifica il supporto a cui si applica la risorsa collegata. Il suo valore deve essere un media type/media query . Questo attributo è utile principalmente quando ci si collega a fogli di stile esterni: consente all'agente utente di scegliere quello più adatto al dispositivo su cui viene eseguito.

prefetch

Identifica una risorsa che potrebbe essere richiesta dalla navigazione successiva e che l'interprete dovrebbe recuperarla. Ciò consente all'agente utente di rispondere più rapidamente quando la risorsa verrà richiesta in futuro.

referrerpolicy

Una stringa che indica quale referrer utilizzare durante il recupero della risorsa:

  • no-referrer significa che l'intestazione Referer non verrà inviata.
  • no-referrer-when-downgrade significa che non verrà inviata alcuna intestazione Referer durante la navigazione verso un'origine senza TLS (HTTPS). Questo è il comportamento predefinito di un programma utente, se non è altrimenti specificato alcun criterio.
  • origin significa che il referrer sarà l'origine della pagina, che è più o meno lo schema, l'host e la porta.
  • origin-when-cross-origin significa che la navigazione verso altre origini sarà limitata allo schema, all'host e al porto, mentre la navigazione sulla stessa origine includerà il percorso del referrer.
  • unsafe-url significa che il referrer includerà l'origine e il percorso (ma non il frammento, la password o il nome utente). Questo caso non è sicuro perché può divulgare origini e percorsi da risorse protette da TLS a origini non sicure.

rel

Questo attributo denomina una relazione del documento collegato al documento corrente.

sizes

Questo attributo definisce le dimensioni delle icone per i media visivi contenuti nella risorsa. Deve essere presente solo se v contiene un valore icon o un tipo non standard come apple-touch-icon. Può avere i seguenti valori:

  • any, il che significa che l'icona può essere ridimensionata a qualsiasi dimensione poiché è in un formato vettoriale, come image/svg+xml.
  • un elenco di dimensioni separate da spazi bianchi, ciascuna nel formato <width in pixels>x <height in pixels> o <width in pixels>X <height in pixels>. Ognuna di queste dimensioni deve essere contenuta nella risorsa.

title

L'attributo title ha una semantica speciale sull'elemento <link>. Quando viene utilizzato su <link rel="stylesheet">, definisce un foglio di stile predefinito o alternativo.

type

Questo attributo viene utilizzato per definire il tipo di contenuto a cui è collegato. Il valore dell'attributo dovrebbe essere un tipo MIME come text/html , text/css e così via. L'uso comune di questo attributo è definire il tipo di foglio di stile a cui si fa riferimento (come text/css ), ma dato che CSS è l'unico linguaggio per fogli di stile usato sul web, non solo è possibile omettere l'attributo type, ma è in realtà ora pratica consigliata. Viene anche utilizzato sui tipi di collegamento rel="preload", per assicurarsi che il browser scarichi solo i tipi di file supportati.

Note sull'uso

Un elemento <link> può essere presente nell'elemento <head> o <body>, a seconda che abbia un tipo di collegamento body-ok . Ad esempio, il stylesheettipo di collegamento è body-ok e pertanto <link rel="stylesheet"> è consentito nel corpo. Tuttavia, questa non è una buona pratica da seguire; ha più senso separare i tuoi elementi <link> dal contenuto del tuo corpo, inserendoli nell'elemento <head>.