diff options
Diffstat (limited to 'files/uk/web/html/element/link/index.html')
| -rw-r--r-- | files/uk/web/html/element/link/index.html | 326 |
1 files changed, 326 insertions, 0 deletions
diff --git a/files/uk/web/html/element/link/index.html b/files/uk/web/html/element/link/index.html new file mode 100644 index 0000000000..b70e0254cd --- /dev/null +++ b/files/uk/web/html/element/link/index.html @@ -0,0 +1,326 @@ +--- +title: '<link>: The External Resource Link element' +slug: Web/HTML/Element/link +translation_of: Web/HTML/Element/link +original_slug: Web/HTML/Елемент/link +--- +<div><font><font>{{HTMLRef}}</font></font></div> + +<p><font><font>Елемент </font></font><strong><font><font>посилання зовнішнього ресурсу HTML ( </font></font><code><link></code><font><font>)</font></font></strong><font><font> визначає відносини між поточним документом і зовнішнім ресурсом. </font><font>Цей елемент найчастіше використовується для посилання на {{Glossary ("CSS", "stylesheets")}}, але також використовується для встановлення значків сайтів (іконок стилів favicon і мобільного домашнього екрана / значків програм) .</font></font></p> + +<div><font><font>{{EmbedInteractiveExample ("сторінки / вкладки / link.html")}}</font></font></div> + +<div class="hidden"><font><font>Джерело для цього інтерактивного прикладу зберігається в сховищі GitHub. </font><font>Якщо ви хочете внести свій внесок до проекту інтерактивних прикладів, будь ласка, клонуйте </font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-examples</font></font></a><font><font> і надішліть нам запит pull.</font></font></div> + +<p><font><font>Щоб пов’язати зовнішню таблицю стилів, потрібно включити </font></font><code><link></code><font><font>елемент у {{HTMLElement ("head")}} так:</font></font></p> + +<pre class="brush: html no-line-numbers"><font><font><link href = "main.css" rel = "stylesheet"></font></font></pre> + +<p><font><font>Цей простий приклад надає шлях до таблиці стилів всередині </font></font><code>href</code><font><font>атрибута і </font></font><code>rel</code><font><font>атрибут зі значенням </font></font><code>stylesheet</code><font><font>. </font><font>Поняття </font></font><code>rel</code><font><font>"відносини", і, можливо, одна з ключових особливостей </font></font><code><link></code><font><font>елемента - значення позначає, як пов'язаний елемент пов'язаний з документом, що містить. </font><font>Як видно з </font></font><a href="/en-US/docs/Web/HTML/Link_types"><font><font>посилання на типи</font></font></a><font><font> посилань, існує багато різних типів відносин.</font></font></p> + +<p><font><font>Існує ряд інших поширених типів. </font><font>Наприклад, посилання на значок сайту:</font></font></p> + +<pre class="brush: html no-line-numbers"><font><font><link rel = "icon" href = "favicon.ico"></font></font></pre> + +<p><font><font>Існує ряд інших </font></font><code>rel</code><font><font>значень </font><font>значків </font><font>, які в основному використовуються для позначення спеціальних типів піктограм для використання на різних мобільних платформах, наприклад:</font></font></p> + +<pre class="brush: html no-line-numbers"><font><font><link rel = "розмір яблуко-значка-попередній" розмір = "114x114"</font></font><font><font> + href = "apple-icon-114.png" type = "image / png"></font></font></pre> + +<p><code>sizes</code><font><font>Атрибут вказує розмір значків, в </font><font>той час як </font></font><code>type</code><font><font>містить MIME - </font><font>тип ресурсу пов'язані між собою </font><font>. </font><font>Вони надають корисні поради, які дозволяють браузеру вибрати найбільш доступну піктограму.</font></font></p> + +<p><font><font>Ви також можете вказати тип або запит носія в </font></font><code>media</code><font><font>атрибуті; </font><font>цей ресурс буде завантажено лише в тому випадку, якщо умова носія є істинною. </font><font>Наприклад:</font></font></p> + +<pre class="brush: html no-line-numbers"><font><font><link href = "print.css" rel = "stylesheet" media = "print"></font></font><font><font> +<link href = "mobile.css" rel = "stylesheet" media = "екран і (max-width: 600px)</font></font></pre> + +<p><font><font>До </font></font><code><link></code><font><font>елемента також </font><font>додано кілька цікавих нових функцій продуктивності та безпеки </font><font>. </font><font>Візьміть цей приклад:</font></font></p> + +<pre class="brush: html no-line-numbers"><font><font><link rel = "preload" href = "myFont.woff2" як = "шрифт"</font></font><font><font> + type = "font / woff2" crossorigin = "anonymous"></font></font></pre> + +<p><code>rel</code><font><font>Значення </font></font><code>preload</code><font><font>вказує на те, </font><font>що браузер повинен попередньо завантажити цей ресурс (див </font></font><a href="/en-US/docs/Web/HTML/Preloading_content"><font><font>предзагрузкі зміст з отн = "переднавантаження»</font></font></a><font><font> для отримання </font><font>більш докладної інформації), з </font></font><code>as</code><font><font>атрибутом , </font><font>що вказує певний клас контенту, витягується. </font></font><code>crossorigin</code><font><font>Атрибут вказує , </font><font>чи повинен ресурс бути залучена з {{Глосарій ( «CORS»)}} запитом.</font></font></p> + +<p><font><font>Інші примітки щодо використання:</font></font></p> + +<ul> + <li><code><link></code><font><font>Елемент може відбуватися або в {{HTMLElement ( «голова»)}} або {HTMLElement} {( «тіло»)} елемента, в </font><font>залежності від того, </font><font>чи має він </font></font><a href="https://html.spec.whatwg.org/multipage/links.html#body-ok"><font><font>тип зв'язку</font></font></a><font><font> , який є </font></font><strong><font><font>тілом-ок</font></font></strong><font><font> . </font><font>Наприклад, </font></font><code>stylesheet</code><font><font>тип зв'язку - це тіло-ok, і тому </font></font><code><link rel="stylesheet"></code><font><font>дозволено в тілі. </font><font>Проте, це не хороша практика; </font><font>більше сенсу відокремлювати </font></font><code><link></code><font><font>елементи від вмісту тіла, розміщуючи їх у </font></font><code><head></code><font><font>.</font></font></li> + <li><font><font>При використанні </font></font><code><link></code><font><font>для створення значка Favicon для сайту, і ваш сайт використовує політику безпеки контенту (CSP) для підвищення своєї безпеки, політика застосовується до позначки. </font><font>Якщо у </font><font>вас виникли проблеми з Favicon не завантажується, переконайтеся , </font><font>що {{HTTPHeader ( «Content-Security-Policy»)}} заголовка по </font></font><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code><font><font>директиві</font></font></a><font><font> не запобігання доступу до нього.</font></font></li> + <li><font><font>Специфікації HTML і XHTML визначають обробники подій для </font></font><code><link></code><font><font>елемента, але незрозуміло, як вони будуть використовуватися.</font></font></li> + <li><font><font>Під XHTML 1.0, порожні елементи , </font><font>такі як </font></font><code><link></code><font><font>вимагають слеш: </font></font><code><link /></code><font><font>.</font></font></li> + <li><font><font>WebTV підтримує використання значення </font></font><code>next</code><font><font>для </font></font><code>rel</code><font><font>попереднього завантаження наступної сторінки в серії документів.</font></font></li> +</ul> + +<h2 id="Атрибути"><font><font>Атрибути</font></font></h2> + +<p><font><font>Цей елемент включає </font></font><a href="/en-US/docs/Web/HTML/Global_attributes"><font><font>глобальні атрибути</font></font></a><font><font> .</font></font></p> + +<dl> + <dt><font><font>{{HTMLAttrDef ("as")}}</font></font></dt> + <dd><font><font>Цей атрибут використовується тільки тоді, коли </font></font><code>rel="preload"</code><font><font>або </font></font><code>rel="prefetch"</code><font><font>було встановлено на </font></font><code><link></code><font><font>елементі. </font><font>Вона визначає тип завантажуваного контенту </font></font><code><link></code><font><font>, який необхідний для визначення пріоритетів вмісту, відповідності запиту, застосування правильної </font></font><a href="/en-US/docs/Web/HTTP/CSP"><font><font>політики безпеки контенту</font></font></a><font><font> та встановлення правильного заголовка запиту {{HTTPHeader ("Accept")}}.</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("crossorigin")}}</font></font></dt> + <dd><font><font>Цей перерахований атрибут вказує, чи слід використовувати {{Глосарій ("CORS")}} при отриманні ресурсу. </font></font><a href="/en-US/docs/Web/HTML/CORS_Enabled_Image"><font><font>Зображення з підтримкою CORS</font></font></a><font><font> можна повторно використовувати в елементі {{HTMLElement ("canvas")}}, не </font></font><em><font><font>засмучуючись</font></font></em><font><font> . </font><font>Дозволені значення:</font></font> + <dl> + <dt><code>anonymous</code></dt> + <dd><font><font>Запит на перехресне походження (тобто з HTTP-заголовком {{HTTPHeader ("Походження")}} виконується, але не надсилаються дані облікового запису (тобто, файли cookie, сертифікат X.509 або HTTP Basic). </font><font>Якщо сервер не надає облікових даних сайту (не встановлюючи заголовок HTTPHeader ("Access-Control-Allow-Origin")}} HTTPHeader, зображення буде заплямовано, а його використання обмежене.</font></font></dd> + <dt><code>use-credentials</code></dt> + <dd><font><font>Запит на перехресне походження (тобто з </font></font><code>Origin</code><font><font>заголовком HTTP) виконується разом із відправленими обліковими даними (тобто виконується cookie, сертифікат та / або HTTP Basic аутентифікація). </font><font>Якщо сервер не надає облікових даних сайту (через {{HTTPHeader ("Access-Control-Allow-Credentials")} HTTP-заголовок), ресурс буде </font></font><em><font><font>заплямовано</font></font></em><font><font> і його використання буде обмежене.</font></font></dd> + </dl> + <font><font>Якщо атрибут відсутній, ресурс вибирається без запиту {{Glossary ("CORS")}} (тобто без відправлення </font></font><code>Origin</code><font><font>заголовка HTTP), що запобігає його непрямому використанню. </font><font>Якщо він недійсний, він обробляється так, якби </font><font>було використано </font></font><strong><font><font>анонімне</font></font></strong><font><font> перераховане ключове слово </font><font>. </font><font>Див </font></font><a href="/en-US/docs/Web/HTML/CORS_settings_attributes"><font><font>настройки CORS атрибути</font></font></a><font><font> для отримання </font><font>додаткової інформації.</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("href")}}</font></font></dt> + <dd><font><font>Цей атрибут визначає {{глосарій ("URL")}} пов'язаного ресурсу. </font><font>URL-адреса може бути абсолютною або відносною.</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("hreflang")}}</font></font></dt> + <dd><font><font>Цей атрибут вказує мову пов'язаного ресурсу. </font><font>Це суто консультативний характер. </font><font>Дозволені значення визначаються </font></font><a href="https://www.ietf.org/rfc/bcp/bcp47.txt"><font><font>BCP47</font></font></a><font><font> . </font><font>Використовуйте цей атрибут, лише якщо присутній атрибут {{HTMLAttrxRef ("href", "a")}}.</font></font></dd> + <dt id="name-attribute"><font><font>{{HTMLAttrDef ("значення")}} {{Experimental_Inline}}</font></font></dt> + <dd><font><font>Вказує відносну важливість ресурсу. </font><font>Підказки щодо пріоритетів делегуються за допомогою значень:</font></font></dd> + <dd> + <p><strong><code>auto</code></strong><font><font>: Вказує на </font></font><strong><font><font>відсутність уподобань</font></font></strong><font><font> . </font><font>Для визначення пріоритету ресурсу браузер може використовувати власну евристику.</font></font></p> + + <p><strong><code>high</code></strong><font><font>: Вказує браузеру, що ресурс має </font></font><strong><font><font>високий</font></font></strong><font><font> пріоритет.</font></font></p> + + <p><strong><code>low</code></strong><font><font>: Вказує браузеру, що ресурс має </font></font><strong><font><font>низький</font></font></strong><font><font> пріоритет.</font></font></p> + + <div class="blockIndicator note"> + <p><strong><font><font>Примітка:</font></font></strong><code>importance</code><font><font> атрибут може бути використаний тільки для </font></font><code><link></code><font><font>елемента , </font><font>якщо </font></font><code>rel="preload"</code><font><font>або </font></font><code>rel="prefetch"</code><font><font>присутній.</font></font></p> + </div> + </dd> + <dt><font><font>{{HTMLAttrDef ("цілісність")}} {{Experimental_Inline}}</font></font></dt> + <dd><font><font>Містить вбудовані метадані - криптографічний хеш-код, зашифрований за допомогою base64, який повідомляє веб-переглядачу. </font><font>Цей веб-переглядач може використовувати це, щоб переконатися, що отриманий ресурс доставлений без несподіваних маніпуляцій. </font><font>Див </font></font><a href="/en-US/docs/Web/Security/Subresource_Integrity"><font><font>Subresource цілісності</font></font></a><font><font> .</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("медіа")}}</font></font></dt> + <dd><font><font>Цей атрибут визначає носій, до якого застосовується пов'язаний ресурс. </font><font>Його значення має бути тип </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>медіа</font></font></a><font><font> / </font><a href="/en-US/docs/Web/CSS/Media_queries"><font>медіа-запит</font></a><font> . </font><font>Цей атрибут є в основному корисним при підключенні до зовнішніх таблиць стилів - це дозволяє користувальницькому агенту підібрати найбільш адаптований для пристрою, на якому він працює.</font></font> + <div class="blockIndicator note"> + <p><strong><font><font>Примітки:</font></font></strong></p> + + <ul> + <li><font><font>В HTML 4, це може бути тільки простий білий список розділених пробілами опису медіа - </font><font>литералов, тобто </font></font><a href="/en-US/docs/Web/CSS/@media"><font><font>типів і груп</font></font></a><font><font> , в </font><font>яких визначені і дозволені в </font><font>якості значень для цього атрибута, наприклад </font></font><code>print</code><font><font>, </font></font><code>screen</code><font><font>, </font></font><code>aural</code><font><font>, </font></font><code>braille</code><font><font>. </font><font>HTML5 розширив це до будь-яких типів </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>медіа-запитів</font></font></a><font><font> , які є набором допустимих значень HTML 4.</font></font></li> + <li><font><font>Браузери, які не підтримують </font></font><a href="/en-US/docs/Web/CSS/Media_queries"><font><font>CSS3 Media Queries</font></font></a><font><font> , не обов'язково розпізнають адекватне посилання; </font><font>не забувайте встановлювати резервні посилання, обмежений набір медіа-запитів, визначених у HTML 4.</font></font></li> + </ul> + </div> + </dd> + <dt><font><font>{{HTMLAttrDef ("referrerpolicy")}} {{Experimental_Inline}}</font></font></dt> + <dd><font><font>Рядок, який вказує, який референт використовувати для отримання ресурсу:</font></font> + <ul> + <li><code>no-referrer</code><font><font> означає, що заголовок {{HTTPHeader ("Referer")}} не буде надіслано.</font></font></li> + <li><code>no-referrer-when-downgrade</code><font><font>означає, що заголовок {{HTTPHeader ("Referer")}} не буде надіслано при переміщенні до джерела без TLS (HTTPS). </font><font>Це поведінка користувача агента за замовчуванням, якщо інша політика не вказана.</font></font></li> + <li><code>origin</code><font><font> означає, що реферер буде походженням сторінки, що є приблизно схемою, хостом і портом.</font></font></li> + <li><code>origin-when-cross-origin</code><font><font> означає, що навігація до інших джерел буде обмежена схемою, хостом і портом, під час навігації за тим же походженням буде включено шлях реферера.</font></font></li> + <li><code>unsafe-url</code><font><font>означає, що реферер буде включати походження та шлях (але не фрагмент, пароль або ім'я користувача). </font><font>Цей випадок є небезпечним, оскільки може витікати джерела та шляхи від ресурсів, захищених TLS, до небезпечного походження.</font></font></li> + </ul> + </dd> + <dt><font><font>{{HTMLAttrDef ("rel")}}</font></font></dt> + <dd><font><font>Цей атрибут іменує відношення пов'язаного документа до поточного документа. </font><font>Атрибут повинен бути розділеним пробілами списком </font></font><a href="/en-US/docs/Web/HTML/Link_types"><font><font>значень типів посилань</font></font></a><font><font> .</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("розміри")}}</font></font></dt> + <dd><font><font>Цей атрибут визначає розміри піктограм для візуальних медіа, що містяться в ресурсі. </font><font>Він повинен бути присутнім, лише якщо {{HTMLAttrxRef ("rel", "link")}} містить значення </font></font><code>icon</code><font><font>або нестандартний тип, наприклад, Apple </font></font><code>apple-touch-icon</code><font><font>. </font><font>Він може мати такі значення:</font></font> + <ul> + <li><code>any</code><font><font>, що означає, що іконку можна масштабувати до будь-якого розміру, як у векторному форматі, наприклад </font></font><code>image/svg+xml</code><font><font>.</font></font></li> + <li><font><font>список розмірів, розділений білим простором, кожен у форматі </font><font>або </font><font>. </font><font>Кожен з цих розмірів повинен міститися в ресурсі.</font></font><code><em><width in pixels></em>x<em><height in pixels></em></code><code><em><width in pixels></em>X<em><height in pixels></em></code></li> + </ul> + + <div class="blockIndicator note"> + <p><strong><font><font>Примітка.</font></font></strong><font><font> Більшість форматів піктограм можуть зберігати лише одну піктограму; </font><font>тому більшу частину часу {{HTMLAttrxRef ("розміри")}} містить тільки один запис. </font><font>Формат ICO MS, як і ICNS від Apple. </font><font>ICO є більш повсюдним; </font><font>Ви обов'язково повинні використовувати його.</font></font></p> + </div> + </dd> + <dt><font><font>{{HTMLAttrDef ("назва")}}</font></font></dt> + <dd><code>title</code><font><font>Атрибут має спеціальну семантику на </font></font><code><link></code><font><font>елементі. </font><font>При використанні на ньому </font></font><code><link rel="stylesheet"></code><font><font>він визначає </font></font><a href="/en-US/docs/Web/CSS/Alternative_style_sheets"><font><font>бажану або альтернативну таблицю стилів</font></font></a><font><font> . </font><font>Неправильне використання може </font></font><a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets"><font><font>призвести до ігнорування таблиці стилів</font></font></a><font><font> .</font></font></dd> + <dt><font><font>{{HTMLAttrDef ("type")}}</font></font></dt> + <dd><font><font>Цей атрибут використовується для визначення типу змісту, з яким пов'язаний. </font><font>Значення атрибута має бути типом MIME, таким як </font></font><strong><font><font>text / html</font></font></strong><font><font> , </font></font><strong><font><font>text / css</font></font></strong><font><font> і так далі. </font><font>Загальним використанням цього атрибуту є визначення типу стильової таблиці, на яку посилаються (наприклад, </font></font><strong><font><font>текст / css</font></font></strong><font><font> ), але враховуючи, що CSS є єдиною мовою таблиць стилів, що використовується в Інтернеті, не тільки можна опустити </font></font><code>type</code><font><font>атрибут, але й насправді тепер рекомендується практика. </font><font>Він також використовується для </font></font><code>rel="preload"</code><font><font>типів посилань, щоб переконатися, що браузер завантажує лише типи файлів, які він підтримує.</font></font></dd> +</dl> + +<h3 id="Нестандартні_атрибути"><font><font>Нестандартні атрибути</font></font></h3> + +<dl> + <dt><font><font>{{HTMLAttrDef ("вимкнено")}} {{Нестандартний_Інтернет}}</font></font></dt> + <dd>This attribute is used to disable a link relationship. In conjunction with scripting, this attribute could be used to turn on and off various style sheet relationships. + <div class="blockIndicator note"> + <p><strong>Note: </strong>While there is no <code>disabled</code> attribute in the HTML standard, there <strong>is</strong> a <code>disabled</code> attribute on the <code>HTMLLinkElement</code> DOM object.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.</dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd> +</dl> + +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> + <dd>This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is <code>iso-8859-1</code>. + <div class="note"><strong>Usage note:</strong> To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.</div> + </dd> + <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> + <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{HTMLAttrxRef("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="/en-US/docs/Web/HTML/Link_types">Link type values</a> for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Note:</strong> 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 <code>rev</code> is <em>not</em> considered obsolete in the W3C specification. That said, given the uncertainty, relying on <code>rev</code> is unwise.</p> + + <p>Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite <a href="/en-US/docs/Web/HTML/Link_types">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. 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.</p> + </div> + </dd> +</dl> + +<h2 id="Styling_with_CSS">Styling with CSS</h2> + +<p>The <code><link></code> element has no visual presence on a web document, therefore it has no styling considerations to worry about.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Including_a_stylesheet">Including a stylesheet</h3> + +<p>To include a stylesheet in a page, use the following syntax:</p> + +<pre class="brush: html no-line-numbers"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Providing_alternative_stylesheets">Providing alternative stylesheets</h3> + +<p>You can also specify <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheets</a>.</p> + +<p>The user can choose which style sheet to use by choosing it from the View > Page Style menu. This provides a way for users to see multiple versions of a page.</p> + +<pre class="brush: html no-line-numbers"><link href="default.css" rel="stylesheet" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" title="Basic"> +</pre> + +<h3 id="Providing_icons_for_different_usage_contexts">Providing icons for different usage contexts</h3> + +<p>You can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the <code>rel</code> and <code>sizes</code> values as hints.</p> + +<pre class="brush: html no-line-numbers"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="favicon57.png"> +<!-- basic favicon --> +<link rel="icon" href="favicon32.png"></pre> + +<h3 id="Conditionally_loading_resources_with_media_queries">Conditionally loading resources with media queries</h3> + +<p>You can provide a media type or query inside a <code>media</code> attribute; this resource will then only be loaded if the media condition is true. For example:</p> + +<pre class="brush: html no-line-numbers"><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)"> +</pre> + +<h3 id="Stylesheet_load_events">Stylesheet load events</h3> + +<p>You can determine when a style sheet has been loaded by watching for a <code>load</code> event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an <code>error</code> event:</p> + +<pre class="brush: html"><script> +var myStylesheet = document.querySelector('#my-stylesheet'); + +myStylesheet.onload = function() { + // Do something interesting; the sheet has been loaded +} + +myStylesheet.onerror = function() { + console.log("An error occurred loading the stylesheet!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"> +</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</p> +</div> + +<h3 id="Preload_examples">Preload examples</h3> + +<p>You can find a number of <link rel="preload"> examples in <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a>.</p> + +<h2 id="Technical_summary">Technical summary</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> + <td>Metadata content. If <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> and <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th>Permitted content</th> + <td>None, it is an {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th>Tag omission</th> + <td>As it is a void element, the start tag must be present and the end tag must not be present</td> + </tr> + <tr> + <th>Permitted parents</th> + <td>Any element that accepts metadata elements. If <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> is present: any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>None</td> + </tr> + <tr> + <th>DOM interface</th> + <td>{{DOMxRef("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Preload")}}</td> + <td>{{Spec2("Preload")}}</td> + <td>Defines <code><link rel="preload"></code>, and the <code>as</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link>")}}</td> + <td>{{Spec2("Subresource Integrity")}}</td> + <td>Added the <code>integrity</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No changes from latest snapshot</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-elemen", "<link>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Added <code>crossorigin</code> and <code>sizes</code> attributes; extended values of <code>media</code> to any media queries; added numerous new values for <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td> + <td>{{Spec2("Resource Hints")}}</td> + <td>Added <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code>, and <code>prerender</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"><font><font>Таблиця сумісності на цій сторінці генерується зі структурованих даних. </font><font>Якщо ви хочете внести свій внесок до даних, зверніться до </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> та надішліть нам запит pull.</font></font></div> + +<p><font><font>{{Compat ("html.elements.link", 3)}}</font></font></p> + +<h2 id="Дивіться_також"><font><font>Дивіться також</font></font></h2> + +<ul> + <li><font><font>Заголовок HTTPHeader ("Link")}} HTTP</font></font></li> + <li><a href="https://pie.gd/test/script-link-events/"><font><font><script> і <link> графік сумісності подій у Ryan Grove</font></font></a></li> +</ul> |