diff --git a/files/ru/web/html/element/link/index.md b/files/ru/web/html/element/link/index.md index f279fae5306c6b..b17a2dc8acaee0 100644 --- a/files/ru/web/html/element/link/index.md +++ b/files/ru/web/html/element/link/index.md @@ -2,10 +2,12 @@ title: ": Элемент - ссылка на внешний ресурс" slug: Web/HTML/Element/link --- +l10n: + sourceCommit: f10015d1752d5668d8fe0de29f9d9807de475d58 {{HTMLSidebar}} -HTML-элемент **``** определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на {{Glossary("CSS", "stylesheets")}}, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего. +[HTML](/ru/docs/Web/HTML)-элемент **``** определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на {{Glossary("CSS", "stylesheets")}}, а также для создания иконок сайта (как для иконок в формате "favicon", так и для иконок для домашних экранов и приложений мобильных устройств) среди прочего. {{EmbedInteractiveExample("pages/tabbed/link.html")}} @@ -15,19 +17,19 @@ HTML-элемент **``** определяет отношения меж ``` -В этом простом примере указывается путь к таблице стилей внутри атрибута `href` и атрибут `rel` со значением `stylesheet`. `rel` означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента `` — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике [типы ссылок](/ru/docs/Web/HTML/Link_types), есть много различных видов отношений. +В этом простом примере указывается путь к таблице стилей внутри атрибута `href` и атрибут [`rel`](/ru/docs/Web/HTML/Attributes/rel) со значением `stylesheet`. `rel` означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента `` — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике [типы ссылок](/ru/docs/Web/HTML/Link_types), есть много различных видов отношений. -Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок: +Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на иконку сайта: ```html ``` -Есть ряд других значений `rel` для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например: +Существуют и другие значения `rel` для иконок, которые в основном используются для обозначения специальных типов иконок для использования на различных мобильных платформах, например: ```html @@ -35,7 +37,7 @@ HTML-элемент **``** определяет отношения меж Атрибут `sizes` определяет размер иконки, когда `type` содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку. -Вы можете, также, указать медиа тип или запрос внутри атрибута `media`; этот ресурс будет загружен только в том случае, если media состояние равно true. Например: +Вы также можете указать тип медиа или медиа-запрос внутри атрибута `media`; этот ресурс будет загружен только в том случае, если media состояние равно true. Например: ```html @@ -56,92 +58,213 @@ HTML-элемент **``** определяет отношения меж crossorigin="anonymous" /> ``` -Значение `rel` - `preload` указывает, что браузер должен предварительно загрузить этот ресурс (смотрите [Предварительная загрузка контента при помощи rel="preload"](/ru/docs/Web/HTML/Preloading_content) для более подробной информации), атрибут `as` указывает на определённый класс загружаемого контента. Атрибут `crossorigin` указывает должен ли ресурс загружаться с помощью запроса {{Glossary("CORS")}}. +Значение `rel` - `preload` указывает, что браузер должен предварительно загрузить этот ресурс (смотрите [Предварительная загрузка контента при помощи rel="preload"](/ru/docs/Web/HTML/Preloading_content) для более подробной информации), атрибут `as` указывает класс загружаемого контента. Атрибут `crossorigin` указывает должен ли ресурс загружаться с помощью запроса {{Glossary("CORS")}}. Другие замечания по использованию: -- Элемент `` может присутствовать в элементах {{HTMLElement("head")}} или {{HTMLElement("body")}}, в зависимости от того, имеет ли он [тип ссылки](https://html.spec.whatwg.org/multipage/links.html#body-ok), являющейся **body-ok**. Например, ссылка типа `stylesheet` является body-ok,и, поэтому, `` допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши `` от содержимого body, помещая их в ``. +- Элемент `` может присутствовать в элементах {{HTMLElement("head")}} или {{HTMLElement("body")}}, в зависимости от того, имеет ли он [тип ссылки](https://html.spec.whatwg.org/multipage/links.html#body-ok), являющейся **body-ok**. Например, ссылка типа `stylesheet` является body-ok, поэтому, `` допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши `` от содержимого body, помещая их в ``. - При использовании `` для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что [`img-src` директива](/ru/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) заголовка {{HTTPHeader("Content-Security-Policy")}} не препятствует доступу к ней. - Спецификации HTML и XHTML определяют обработчики событий для элемента ``, но не указывают как они будут использоваться. -- В XHTML 1.0, пустые элементы, такие как ``, требуют слеш: ``. +- В XHTML 1.0 {{glossary("void element", "пустые элементы")}}, такие как ``, требуют слеш: ``. - WebTV поддерживает использование значения `next` для `rel` в качестве предварительной загрузки следующей страницы в серии документов. ## Атрибуты -Этот элемент включает в себя [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes). +Этот элемент поддерживает [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes). - `as` - - : Этот атрибут используется только для элементов `` с атрибутом `rel="preload"` или `rel="prefetch"`. Он указывает тип контента, загружаемого ``, который необходим для определения приоритетов контента, сравнения запросов, применения корректного [content security policy](/ru/docs/Web/HTTP/CSP), и установки корректного {{HTTPHeader("Accept")}} запрашиваемого заголовка. -- `crossorigin` - - : Этот перечисляемый атрибут указывает, должен ли {{Glossary("CORS")}} использоваться при загрузки ресурса. [CORS-поддерживаемые изображения](/ru/docs/Web/HTML/CORS_Enabled_Image) могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не _искажая_ их. Допустимы значения: + + - : Этот атрибут обязателен, если для элемента `` установлен [`rel="preload"`](/ru/docs/Web/HTML/Attributes/rel/preload) и необязателен, если установлен [`rel="modulepreload"`](/ru/docs/Web/HTML/Attributes/rel/modulepreload). В остальных случаях атрибут не должен использоваться. Он указывает тип контента, загружаемого ``, который необходим для определения приоритетов контента, сравнения запросов, применения корректного [content security policy](/ru/docs/Web/HTTP/CSP), и установки корректного {{HTTPHeader("Accept")}} запрашиваемого заголовка. + + Кроме того, `rel="preload"` использует этот атрибут как сигнал для приоритизации запросов. + В таблице ниже приведены допустимые значения для этого атрибута и элементы или ресурсы, к которым они применяются. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеПрименяется к
audio<audio> элементы
document<iframe> и <frame> элементы
embed<embed> элементы
fetch +

fetch, XHR

+
+

+ Примечание: Для этого значения также требуется, чтобы + элемент <link> содержал атрибут crossorigin, смотрите CORS-enabled fetches. +

+
+
font +

CSS @font-face

+
+

+ Примечание: Для этого значения также требуется, чтобы + элемент <link> содержал атрибут crossorigin, смотрите CORS-enabled fetches. +

+
+
image + Элементы <img> и <picture> с атрибутами srcset или imageset, элементы SVG <image>, + CSS-правила *-image +
object<object> элементы
script + Элементы <script>, Worker importScripts +
style + Элементы <link rel=stylesheet>, CSS + @import +
track<track> элементы
video<video> элементы
workerWorker, SharedWorker
+ +- `blocking` + + - : Этот атрибут явно указывает, какие операции должны быть заблокированы при загрузке внешнего ресурса. Его можно использовать только в случае, если атрибут `rel` содержит ключевые слова `expect` или `stylesheet`. Операции, которые необходимо заблокировать, должны быть перечислены через пробел в виде списка блокирующих токенов, указанных ниже. + - `render`: Блокирует отрисовку содержимого на экране. + +- [`crossorigin`](/ru/docs/Web/HTML/Attributes/crossorigin) + + - : Этот [перечисляемый](/ru/docs/Glossary/Enumerated) атрибут указывает, должен ли {{Glossary("CORS")}} использоваться при загрузке ресурса. [CORS-поддерживаемые изображения](/ru/docs/Web/HTML/CORS_Enabled_Image) могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не _искажая_ их. + Допустимы значения: + - `anonymous` - : Cross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}), изображение будет искажено, а его использование ограничено. - `use-credentials` - - : Cross-origin запрос (т.е. с HTTP-заголовком `Origin`) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажён, а его использование ограничено.Если атрибут отсутствует, ресурс загружается без запроса {{Glossary("CORS")}} (т.е. без отправки HTTP-заголовка `Origin)`, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова **anonymous.** Для получения дополнительной информации смотрите [CORS settings attributes](/ru/docs/Web/HTML/CORS_settings_attributes). + - : Cross-origin запрос (т.е. с HTTP-заголовком `Origin`) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажён, а его использование ограничено. + + Если атрибут отсутствует, ресурс загружается без запроса {{Glossary("CORS")}} (т.е. без отправки HTTP-заголовка `Origin)`, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова **anonymous.** Для получения дополнительной информации смотрите [CORS settings attributes](/ru/docs/Web/HTML/CORS_settings_attributes). + +- `disabled` + + - : Атрибут `disabled`, который является булевым, может использоваться только для `rel="stylesheet"` и указывает, должна ли указанная таблица стилей загружаться и применяться к документу. + Если атрибут `disabled` указан в HTML во время загрузки страницы, таблица стилей не будет загружена при загрузке страницы. + Вместо этого таблица стилей будет загружена по запросу, если атрибут `disabled` будет изменён на значение `false` или удалён. + + Установка свойства `disabled` в DOM приводит к удалению таблицы стилей из списка {{domxref("Document.styleSheets")}} документа. + +- `fetchpriority` + + - : Указывает относительный приоритет, который следует использовать при загрузке ресурса определённого типа. + Допустимые значения: + + - `high` + - : Загружать ресурс с высоким приоритетом относительно других ресурсов того же типа. + - `low` + - : Загружать ресурс с низким приоритетом относительно других ресурсов того же типа. + - `auto` + - : Не задавать предпочтение для приоритета загрузки. + Это значение используется по умолчанию. + Применяется, если значение не указано или указано некорректно. + + Смотрите {{domxref("HTMLLinkElement.fetchPriority")}} для получения дополнительной информации. + - `href` - : Этот атрибут определяет {{glossary("URL")}}, связываемого ресурса. URL может быть абсолютным или относительным. - `hreflang` - - : Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt). Используйте этот атрибут только если присутствуют атрибуты [`href`](/ru/docs/Web/HTML/Element/a#href). -- `importance` {{Experimental_Inline}} - - : Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:**`auto`**: указывает на **отсутствие предпочтений**. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.**`high`**: указывает браузеру, что ресурс находится в **высоком** приоритете.**`low`**: указывает браузеру, что ресурс находится в **низком** приоритете. - > **Примечание:**Атрибут `importance` можно использовать только для элементов `` с атрибутами `rel="preload"` или `rel="prefetch"`. -- `integrity` {{Experimental_Inline}} - - : Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите [Subresource Integrity](/ru/docs/Web/Security/Subresource_Integrity). + - : Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются {{RFC(5646, "Теги для идентификации языков (также известном как BCP 47)")}}. Используйте этот атрибут только если присутствуют атрибуты [`href`](/ru/docs/Web/HTML/Element/a#href). +- `imagesizes` + - : Только для `rel="preload"` и `as="image"`. Атрибут `imagesizes` имеет синтаксис и семантику, аналогичные атрибуту [`sizes`](/ru/docs/Web/HTML/Element/img#sizes). Он указывает, что необходимо предварительно загрузить соответствующий ресурс, используемый элементом `img`, с заданными значениями атрибутов `srcset` и `sizes`. +- `imagesrcset` + - : Только для `rel="preload"` и `as="image"`. Атрибут `imagesrcset` имеет синтаксис и семантику, аналогичные атрибуту [`srcset`](/ru/docs/Web/HTML/Element/img#srcset). Он указывает, что необходимо предварительно загрузить соответствующий ресурс, используемый элементом `img`, с заданными значениями атрибутов `srcset` и `sizes`. +- `integrity` + - : Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Атрибут должен указываться только в том случае, если атрибут `rel` задан как `stylesheet`, `preload` или `modulepreload`. Смотрите [Subresource Integrity](/ru/docs/Web/Security/Subresource_Integrity). - `media` - : Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или [медиавыражением](/ru/docs/Web/CSS/Media_queries). Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска. - > [!NOTE] - > В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. [media типы и группы](/ru/docs/Web/CSS/@media), которые определены и допустимы в качестве значений для этого атрибута, такие как `print`, `screen`, `aural`, `braille`. HTML5 распространил это на любые [медиавыражения](/ru/docs/Web/CSS/Media_queries), которые являются расширенным набором допустимых значений HTML 4. - > Браузеры, не поддерживающие [медиавыражения](/ru/docs/Web/CSS/Media_queries), могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4. +- `referrerpolicy` -- `referrerpolicy` {{Experimental_Inline}} - : Строка, указывающая какой реферер использовать при загрузки ресурсов: + - `no-referrer` означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен. - `no-referrer-when-downgrade` означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное. - `origin` означает, что реферером будет источник, который соответствует схеме, хосту и порту. - `origin-when-cross-origin` означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер . - `unsafe-url` означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники. + - `rel` - : Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком [значений типов ссылки](/ru/docs/Web/HTML/Link_types). - `sizes` + - : Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если [`rel`](/ru/docs/Web/HTML/Element/link#rel) содержит значение `icon` или нестандартный тип, например `apple-touch-icon` Apple. Может иметь следующие значения: + - `any`, означает, что иконка может быть масштабируема до любого размера, например в векторном формате `image/svg+xml`. - пробелоразделенный список размеров, каждый в формате `x` или `X`. Каждый из этих размеров должен содержаться в ресурсе. - > **Примечание:**Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего [`sizes`](/ru/docs/Web/HTML/Global_attributes#sizes) содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их. + + > [!NOTE] + > Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего [`sizes`](#sizes) содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их. + - `title` - - : Атрибут `title` имеет особое значение для элемента ``. При использовании `` он определяет [предпочтительную или альтернативную таблицу стилей](/ru/docs/Web/CSS/Alternative_style_sheets). Неверное использование может стать [причиной игнорирования таблицы стилей](/ru/docs/Correctly_Using_Titles_With_External_Stylesheets). + - : Атрибут `title` имеет особое значение для элемента ``. При использовании `` он определяет [предпочтительную или альтернативную таблицу стилей](/ru/docs/Web/CSS/Alternative_style_sheets). - `type` - - : Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как **text/html**, **text/css и т.д**. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, **text/css**), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок `rel="preload"`, чтобы браузер загружал только те типы файлов, которые он поддерживает. + - : Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как **text/html**, **text/css и т.д**. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, **text/css**). Но поскольку CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут можно пропустить, что и рекомендуется. Он также используется для типов ссылок `rel="preload"`, чтобы браузер загружал только те типы файлов, которые он поддерживает. ### Нестандартные атрибуты -- `disabled` {{Non-standard_Inline}} - - : Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей. - > **Примечание:**Хотя в стандарте HTML нет атрибута `disabled`, атрибут `disabled` есть в объекте DOM `HTMLLinkElement`. -- `methods` {{Non-standard_Inline}} - - : Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту **title**) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4. -- `prefetch` {{Non-standard_Inline}} {{secureContext_inline}} - - : Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен. -- `target` {{Non-standard_Inline}} +- `target` {{Deprecated_Inline}} - : Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса. ### Устаревшие атрибуты -- `charset` +- `charset` {{deprecated_inline}} + - : Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в {{rfc(2045)}}. Значение по умолчанию `iso-8859-1`. + > [!NOTE] > Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок {{HTTPHeader("Content-Type")}} на связываемый ресурс. -- `rev` - - : Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом [`href`](/ru/docs/Web/HTML/Element/link#href). Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута `rel`. [Значения типов ссылки](/ru/docs/Web/HTML/Link_types) для атрибута аналогичны возможным значениям для [`rel`](/ru/docs/Web/HTML/Element/link#rel). - > [!NOTE] - > Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что `rev` _не_ считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на `rev` не стоит. - > [!NOTE] - > Взамен, вы должны использовать атрибут [`rel`](/ru/docs/Web/HTML/Element/link#rel) с противоположным [значением типов ссылки](/ru/docs/Web/HTML/Link_types). Например, чтобы установить обратную ссылку для `made`, укажите `author`.Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях. -## Стилизация с CSS +- `rev` {{deprecated_inline}} + + - : Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом [`href`](/ru/docs/Web/HTML/Element/link#href). Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута `rel`. [Значения типов ссылки](/ru/docs/Web/HTML/Link_types) для атрибута аналогичны возможным значениям для [`rel`](/ru/docs/Web/HTML/Element/link#rel). -Элемент `` не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться. + > [!NOTE] + > Вместо `rev` вы должны использовать атрибут [`rel`](#rel) с противоположным [значением типов ссылки](/ru/docs/Web/HTML/Attributes/rel). + > Например, чтобы установить обратную ссылку для `made`, укажите `author`. Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях. ## Примеры @@ -157,7 +280,7 @@ HTML-элемент **``** определяет отношения меж Вы можете указать [альтернативные таблицы стилей](/ru/docs/Web/CSS/Alternative_style_sheets). -Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы. +Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям выбирать между версиями страницы. ```html @@ -170,27 +293,34 @@ HTML-элемент **``** определяет отношения меж Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения `rel` и `sizes` как подсказки. ```html - + - + rel="apple-touch-icon" + sizes="167x167" + href="/apple-touch-icon-167x167.png" /> + - - - - + rel="apple-touch-icon" + sizes="180x180" + href="/apple-touch-icon-180x180.png" /> + + + + - + ``` +Для получения информации о том, какие значения атрибута `sizes` выбрать для иконок Apple, смотрите [документацию Apple по настройке веб-приложений](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4) и [руководство Apple по пользовательскому интерфейсу](https://developer.apple.com/design/human-interface-guidelines/app-icons#App-icon-sizes). Обычно достаточно предоставить изображение большого размера, например 192x192, и позволить браузеру уменьшить его при необходимости. Однако, как рекомендует руководство Apple по дизайну, вы можете создать изображения с разным уровнем детализации для различных размеров. Использование меньших иконок для низких разрешений помогает сэкономить трафик. + +Возможно, предоставлять элементы `` вовсе не потребуется. Например, браузеры автоматически запрашивают файл `/favicon.ico` из корневого каталога сайта, а Apple автоматически запрашивает `/apple-touch-icon-[size].png`, `/apple-touch-icon.png` и другие. Однако явное указание ссылок исключает проблемы при изменении стандартов. + ### Условная загрузка ресурсов с медиавыражениями -Вы можете предоставить тип медиа или запрос внутри атрибута `media`; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например: +Вы также можете указать тип медиа или медиа-запрос внутри атрибута `media`; этот ресурс будет загружен только в том случае, если media состояние равно true. Например: ```html @@ -207,22 +337,22 @@ HTML-элемент **``** определяет отношения меж ### События загрузки таблицы стилей -Вы можете определить, когда таблица стилей была загружена, наблюдая за событием `load`, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием `error`: +Вы можете определить, когда таблица стилей была загружена, наблюдая за событием `load`, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработке таблицы стилей, наблюдая за событием `error`: ```html + + - - ``` > [!NOTE] @@ -230,17 +360,51 @@ HTML-элемент **``** определяет отношения меж ### Preload примеры -Вы можете найти примеры `` в [Preloading content with `rel="preload"`](/ru/docs/Web/HTML/Preloading_content). +Вы можете найти примеры `` в [Предзагрузка контента с `rel="preload"`](/ru/docs/Web/HTML/Preloading_content). + +### Блокировка отрисовки до загрузки ресурса + +Вы можете передать значение `render` в атрибут `blocking`; +отрисовка страницы будет заблокирована до тех пор, пока ресурс не загрузится. Например: + +```html + +``` ## Техническое резюме + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Категории содержимогоМетаданные. Если присутствует атрибут itemprop: Потоковое содержимое и Фразовое содержимое.
Допустимое содержимоеОтсутствует; это {{Glossary("пустой элемент")}}.
Пропуск теговДолжен иметь начальный тег и не должен иметь конечного тега.
Допустимые родителиЛюбой элемент, принимающий метаданные. Если присутствует атрибут itemprop: любой элемент, принимающий фразовое содержимое.
Неявная ARIA-рольlink с атрибутом href
Допустимые ARIA-ролиРоль role не разрешена
DOM-интерфейс{{DOMxRef("HTMLLinkElement")}}
-| [Каталоги контента](/ru/docs/Web/HTML/Content_categories) | Контент метаданных. Если есть [itemprop](/ru/docs/Web/HTML/Global_attributes/itemprop): [потоковый контент](/ru/docs/Web/HTML/Content_categories#Flow_content) и [фразовый контент](/ru/docs/Web/HTML/Content_categories#Phrasing_content). | -| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Допустимое содержимое | Нет, это {{Glossary("empty element")}}. | -| Пропуск тегов | Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует. | -| Допустимые родители | Любой элемент, принимающий элементы метаданных. Если есть [itemprop](/ru/docs/Web/HTML/Global_attributes/itemprop): любой элемент, принимающий [фразовый контент](/ru/docs/Web/HTML/Content_categories#Phrasing_content). | -| Допустимые ARIA-роли | Нет | -| DOM-интерфейс | {{DOMxRef("HTMLLinkElement")}} | ## Спецификации @@ -253,4 +417,3 @@ HTML-элемент **``** определяет отношения меж ## Смотрите также - {{HTTPHeader("Link")}} HTTP header -- [Ryan Grove's \