Element Łącza Zasobów Zewnętrznych (<link>) określa relacje między aktualnym dokumentem a zewnętrznym zasobem. Ten element jest najczęściej używany do linkowania do {{Glossary("CSS", "arkuszy stylów")}}, ale jest również używany między innymi do tworzenia ikon strony (zarówno ikony typu "favicon", jak i ikon dla ekranu głównego i aplikacji na urządzeniach mobilnych).
Aby połączyć zewnętrzny arkusz stylów, umieść element <link> wewnątrz swojego {{HTMLElement("head")}} w ten sposób:
<link href="main.css" rel="stylesheet">
Ten prosty przykład podaje ścieżkę do arkusza stylów wewnątrz atrybutu href oraz atrybut rel z wartością stylesheet. rel oznacza "relację" i jest prawdopodobnie jedną z kluczowych cech elementu <link> - wartość oznacza sposób, w jaki element, z którym jest powiązany, jest powiązany z dokumentem źródłowym. Jak zobaczysz z naszego odwołania do typów odnośników, istnieje wiele różnych rodzajów relacji.
Jest wiele innych popularnych typów, na które można się natknąć. Na przykład link do favicon na stronie:
<link rel="icon" href="favicon.ico">
Istnieje szereg innych wartości rel ikon, używanych głównie do wskazywania specjalnych typów ikon do wykorzystania na różnych platformach mobilnych, np.:
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="apple-icon-114.png" type="image/png">
Atrybut sizes oznacza rozmiar ikony, a type zawiera typ MIME łączonego zasobu. Dostarczają one użytecznych wskazówek, które pozwalają przeglądarce na wybór najbardziej odpowiedniej dostępnej ikony.
Możesz również podać typ nośnika lub zapytanie wewnątrz atrybutu media; zasób ten zostanie załadowany tylko wtedy, gdy stan nośnika jest prawdziwy. Na przykład:
<link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
Do elementu <link> dodano również kilka interesujących nowych funkcji wydajności i zabezpieczeń. Weźmy ten przykład:
<link rel="preload" href="myFont.woff2" as="font"
type="font/woff2" crossorigin="anonymous">
Wartość rel dla preload wskazuje, że przeglądarka powinna wstępnie załadować ten zasób (więcej szczegółów w sekcji Wstępne załadowanie zawartości z rel="preload"), z atrybutem as wskazującym konkretną klasę pobieranej zawartości. Atrybut crossorigin wskazuje, czy zasób powinien być pobierany z żądaniem {{Glossary("CORS")}}.
Pozostałe uwagi dotyczące zastosowania:
<link> może występować w elemencie {{HTMLElement("head")}} lub {{HTMLElement("body")}}, w zależności od tego, czy ma on typ połączenia, który jest body-ok. Na przykład, typ linku stylesheet jest body-ok, a zatem <link rel="stylesheet"> jest dozwolony w body. Jednakże nie jest to dobra praktyka do naśladowania; bardziej sensowne jest oddzielenie elementów <link> od zawartości, umieszczając je w <head>.<link> do utworzenia favicon dla witryny, a Twoja strona używa Content Security Policy (CSP) w celu zwiększenia jej bezpieczeństwa, polityka ta ma zastosowanie do favicon. Jeśli napotkasz problemy z załadowaniem favicon, sprawdź, czy dyrektywa dyrektywa img-src nagłówka {{HTTPHeader("Content-Security-Policy")}} nie uniemożliwia dostępu do niego.<link>, ale nie jest jasne, jak miałyby być one wykorzystywane.<link> wymagają ukośnika: <link />.next dla atrybutu rel, w celu wstępnego załadowania następnej strony w serii dokumentów.Ten element uwzględnia atrybuty globalne.
<link> ustawiono rel="preload" lub rel="prefetch". Określa on typ zawartości załadowanej przez <link>, który jest niezbędny do dopasowania żądania, zastosowania poprawnej polityki bezpieczeństwa zawartości, oraz ustawienie poprawnego żądania nagłówka {{HTTPHeader("Accept")}}. Co więcej, rel="preload" wykorzystuje to jako sygnał do nadania priorytetu żądaniu. Poniższa tabela zawiera ważne wartości dla tego atrybutu oraz elementy lub zasoby, do których się odnoszą.| Wartość | Dotyczy |
|---|---|
| audio | elementów <audio> |
| document | elementów <iframe> oraz <frame> |
| embed | elementów <embed> |
| fetch |
fetch, XHR Ta wartość wymaga również, aby |
| font | CSS @font-face |
| image | elementy <img> oraz <picture> z atrybutami srcset lub imageset, elementy SVG <image>, reguły CSS *-image |
| object | elementy <object> |
| script | elementy <script>, Worker importScripts |
| style | elementy <link rel=stylesheet>, CSS @import |
| track | elementy <track> |
| video | elementy <video> |
| worker | Worker, SharedWorker |
anonymoususe-credentialsOrigin) wraz z przesłanym poświadczeniem (tj. cookie, certyfikat, i/lub uwierzytelnienie HTTP Basic). Jeśli serwer nie przekaże danych uwierzytelniających do strony pochodzenia (poprzez nagłówek HTTP {{HTTPHeader("Access-Control-Allow-Credentials")}}), zasób zostanie skażony, a jego wykorzystanie ograniczone.Origin), co uniemożliwia jego bezpieczne użytkowanie. Jeśli jest nieprawidłowy, jest traktowany tak, jakby użyte zostało słowo kluczowe anonymous. Dodatkowe informacje znajdują się w części atrybuty ustawień CORS.Tylko w przypadku rel="stylesheet", atrybut logiczny disabled wskazuje, czy opisany arkusz stylów powinien zostać załadowany i zastosowany w dokumencie. Jeśli atrybut disabled jest określony w HTML podczas ładowania, arkusz stylów nie zostanie wczytany podczas ładowania strony. Zamiast tego arkusz stylów zostanie załadowany na żądanie, jeśli i kiedy atrybut disabled zostanie zmieniony na false lub usunięty.
Jednak po załadowaniu arkusza stylów zmiany wartości właściwości disabled nie mają już żadnego związku z wartością właściwości {{domxref("StyleSheet.disabled")}}. Zamiast tego zmiana wartości tej właściwości po prostu włącza i wyłącza formularz arkusza stylów zastosowany w dokumencie.
Różni się ona od wartości disabled właściwości StyleSheet; zmiana jej na true powoduje usunięcie arkusza stylów z listy {{domxref("document.styleSheets")}} i nie powoduje automatycznego przeładowania aruksza stylów po ponownym przełączeniu go na false.
auto: Oznacza brak preferencji. Przeglądarka może korzystać z własnej heurystyki, aby zdecydować o priorytecie zasobu.
high: Wskazuje przeglądarce, że zasób ma wysoki priorytet.
low: Wskazuje przeglądarce, że zasób ma niski priorytet.
Uwaga: Atrybut importance może być użyty dla elementu <link> tylko wtedy, gdy występuje rel="preload" lub rel="prefetch".
Uwagi:
print, screen, aural, braille. HTML5 rozszerzył to na wszelkiego rodzaju zapytania media, które są uzupełnieniem dozwolonych wartości HTML 4.no-referrer means that the {{HTTPHeader("Referer")}} header will not be sent.no-referrer-when-downgrade means that no {{HTTPHeader("Referer")}} header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.origin means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.origin-when-cross-origin means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.unsafe-url means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.icon or a non-standard type such as Apple's apple-touch-icon. It may have the following values:
any, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml.<width in pixels>x<height in pixels> or <width in pixels>X<height in pixels>. Each of these sizes must be contained in the resource.Note: Most icon formats are only able to store one single icon; therefore most of the time the {{HTMLAttrxRef("sizes")}} attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).
title attribute has special semantics on the <link> element. When used on a <link rel="stylesheet"> it defines a preferred or an alternate stylesheet. Incorrectly using it may cause the stylesheet to be ignored.type attribute, but is actually now recommended practice. It is also used on rel="preload" link types, to make sure the browser only downloads file types that it supports.iso-8859-1.
rel attribute. Link type values for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.Note: This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that rev is not considered obsolete in the W3C specification. That said, given the uncertainty, relying on rev is unwise.
Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite link type value. For example, to establish the reverse link for made, specify author. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.
rel jest ustawiony na stylesheet. Wartością tego atrybutu może być być pojedyncze określenie medium, jak screen, lub lista rozdzielona przecinkami. Możliwymi wartościami tego atrybutu all, aural, braille, print, projection oraz screen. Mogą być również zdefiniowane inne wartości, zależnie od przeglądarki. Internet Explorer wspiera all, print oraz screen jako wartości tego atrybutu.alternate, bookmark, chapter, contents, copyright, glossary, help, index, next, prev, section, start, stylesheet oraz subsection. Najbardziej powszechnym użyciem tego atrybutu jest określanie linku do zewnętrznego arkusza stylów. Atrybut rel jest ustawiany na stylesheet, zaś atrybut href jest ustawiany na URL zewnętrznego arkusza stylów w celu formatowania strony. WebTV wspiera również użycie wartości next dla rel dla wstępnego załadowania następnej strony w serii dokumentów.rev pokazuje relację aktualnego dokumentu do dokumentu linkowanego, zdefiniowanego przez atrybut href. Atrybut w ten sposób definiuje odwróconą relację w porównaniu do wartości atrybutu rel. Wartości dla atrybutu rev są podobne do możliwych wartości atrybutu rel. Mogą zawierać alternate, bookmark, chapter, contents, copyright, glossary, help, index, next, prev, section, start, stylesheet oraz subsection.target jest używana do definiowania nazwy ramki lub okna, które ma zdefiniowaną relację linkowania lub które pokaże wyświetlenie jakiegoś zlinkowanego zasobu.MIME takim jak text/html, text/css i tak dalej. Powszechnym użyciem tego atrybutu jest definiowanie zlinkowanego arkusza stylów i najbardziej powszechną obecnie wartością jest text/css, która wskazuje format Kaskadowych Arkuszy Stylów.Aby dołączyć arkusz stylów do strony, użyj następującej składni:
<link href="style.css" rel="stylesheet">
Można również określić alternatywne arkusze stylów.
Użytkownik może wybrać, który arkusz stylów ma być użyty, wybierając go z menu Widok > Styl strony. Dzięki temu użytkownik może zobaczyć wiele wersji strony.
<link href="default.css" rel="stylesheet" title="Domyślny Styl"> <link href="fancy.css" rel="alternate stylesheet" title="Efektowny"> <link href="basic.css" rel="alternate stylesheet" title="Podstawowy">
Możesz umieścić linki do kilku różnych ikon na tej samej stronie, a przeglądarka wybierze, która z nich najlepiej pasuje do danego kontekstu, używając jako podpowiedzi wartości rel oraz sizes.
<!-- iPad trzeciej generacji z wyświetlaczem Retina wysokiej rozdzielczości: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> <!-- iPhone z wyświetlaczem Retina wysokiej rozdzielczości: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> <!-- iPad pierwszej i drugiej generacji: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> <!-- urządzenia iPhone bez wyświetlacza Retina, iPod Touch i Android 2.1+: --> <link rel="apple-touch-icon-precomposed" href="favicon57.png"> <!-- podstawowy favicon --> <link rel="icon" href="favicon32.png">
Możesz podać typ nośnika lub zapytanie wewnątrz atrybutu media; zasób ten zostanie załadowany tylko wtedy, gdy stan nośnika jest prawdziwy. Na przykład:
<link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="all"> <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
Można określić kiedy arkusz stylów został załadowany, obserwując, czy wystąpiło na nim zdarzenie load; podobnie, można wykryć, czy podczas przetwarzania arkusza stylów wystąpił błąd, obserwując, czy wystąpiło zdarzenie error:
<script>
var myStylesheet = document.querySelector('#my-stylesheet');
myStylesheet.onload = function() {
// Zrób coś ciekawego; arkusz został załadowany
}
myStylesheet.onerror = function() {
console.log("Wystąpił błąd podczas ładowania arkusza stylów!");
}
</script>
<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet">
Uwaga: Zdarzenie load zostaje wywołane, gdy arkusz stylów i cała jego zaimportowana zawartość zostanie załadowana i przetworzona, a także bezpośrednio przed zastosowaniem stylów do zawartości.
Możesz znaleźć szereg przykładów z <link rel="preload"> w sekcji Wstępne załadowanie zawartości z rel="preload".
| Kategorie treści | Zawartość metadanych. Jeśli itemprop jest obecny: Zawartość przepływu i Zawartość frazowania. |
|---|---|
| Dozwolona zawartość | Brak, to jest {{Glossary("empty element", "pusty element")}}. |
| Pominięcie znacznika | Ponieważ jest to pusty element, znacznik otwierający musi być obecny, a znacznik zamykający nie może być obecny. |
| Dozwoleni rodzice | Każdy element, który akceptuje elementy metadanych. Jeśli itemprop jest obecny: każdy element, który akceptuje zawartość frazowania. |
| Dozwolone role ARIA | Brak |
| Interfejs DOM | {{DOMxRef("HTMLLinkElement")}} |
| Specyfikacja | Status | Komentarz |
|---|---|---|
| {{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}} | {{Spec2("HTML WHATWG")}} | Brak zmian w stosunku do ostatniego wydania |
| {{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "<link>")}} | {{Spec2("HTML5 W3C")}} | Dodano atrybuty corssorigin oraz sizes; rozszerzono wartość media do dowolnych zapytań media; dodano wiele nowych wartości dla rel. |
| {{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}} | {{Spec2('HTML4.01')}} |
{{Compat("html.elements.link", 3)}}