Пользовательские агенты не обязаны представлять HTML-документы каким-либо особым образом. Тем не менее, в этом разделе представлен набор рекомендаций по отображению HTML-документов, которые, если им следовать, могут привести к тому, что пользовательский опыт будет очень похож на опыт, задуманный авторами документов. Во избежание путаницы в отношении нормативности этого раздела слово «должен» не используется. Вместо этого термин «ожидаемый» используется для обозначения поведения, которое приведет к этому опыту. В целях соответствия для пользовательских агентов, предназначенных для поддержки предлагаемого рендеринга по умолчанию, термин «ожидаемый» в этом разделе имеет те же последствия соответствия, что и «должен».
15.1 Введение
Предложения в этом разделе обычно выражены в терминах CSS. Ожидается, что пользовательские агенты будут либо поддерживать CSS, либо переводить правила CSS, приведённые в этом разделе, в приближения для других механизмов представления.
При отсутствии противоположных правил уровня стилей (например, авторские таблицы стилей) ожидается, что пользовательские агенты будут отображать элемент таким образом, чтобы он передал пользователю значение, которое представляет элемент, как описано в этой спецификации.
Предложения в этом разделе обычно предполагают визуальный носитель вывода с разрешением 96 точек на дюйм или выше, но HTML предназначен для применения к нескольким носителям (это язык, независимый от носителя). Разработчикам пользовательских агентов рекомендуется адаптировать предложения в этом разделе к своим целевым носителям.
Элемент визуализируется (being rendered), если он имеет какие-либо связанные блоки макета CSS, блоки макета SVG или некоторый эквивалент в других языках стилей.
То, что элемент находится за пределами экрана, не означает, что он не отображается. Наличие атрибута скрывания hidden обычно означает, что элемент не отображается, хотя это может быть переопределено таблицами стилей.
Полностью активное состояние не влияет на то, визуализируется элемент или нет. Даже если документ не полностью активен и вообще не отображается пользователю, элементы внутри него все равно могут квалифицироваться как «отрисовываемые» («being rendered«).
Говорят, что элемент пересекает область просмотра (intersect the viewport), когда он визуализируется, и связанное с ним поле макета CSS пересекает область просмотра.
Как и в состоянии визуализирования, элементы в не полностью активных документах могут пересекать область просмотра. Область просмотра не является общим для документов и может не всегда отображаться пользователю, поэтому элемент в не полностью активном документе все еще может пересекать область просмотра, связанное с его документом.
Эта спецификация не определяет точное время тестирования перекрестка, но предполагается, что время соответствует времени API Intersection Observer. [INTERSECTIONOBSERVER]
Пользовательские агенты, которые не соблюдают таблицы стилей CSS на уровне автора, тем не менее должны действовать так, как если бы они применяли правила CSS, указанные в этих разделах, в соответствии с этой спецификацией и соответствующими спецификациями CSS и Unicode. [CSS] [UNICODE] [BIDI]
Это особенно важно для вопросов, связанных со свойствами ‘display‘, ‘unicode-bidi‘ и ‘direction‘.
15.2 Таблица стилей пользовательского агента CSS и подсказки по представлению
Правила CSS, приведённые в этих подразделах, если не указано иное, предполагается использовать как часть значений по умолчанию таблицы стилей на уровне пользовательского агента для всех документов, содержащих элементы HTML.
Некоторые правила предназначены для презентационных подсказок с нулевой специфичностью на уровне автора каскада CSS; они явно вызываются как презентационные подсказки.
Когда в приведённом ниже тексте говорится, что атрибут attribute элемента element сопоставляется свойству длины пикселя (maps to the pixel length property) (или свойствам) properties, это означает, что если у элемента element установлен атрибут attribute, и синтаксический анализ значения этого атрибута с использованием правил для синтаксического анализа неотрицательных целых чисел не генерирует ошибку, то ожидается, что пользовательский агент будет использовать проанализированное значение в качестве длины в пикселях для презентационной подсказки для свойств.
Когда в приведенном ниже тексте говорится, что атрибут attribute в элементе element сопоставляется со свойством измерения (maps to the dimension property) (или свойствами) properties, это означает, что если у элемента установлен атрибут attribute, и синтаксический анализ значения этого атрибута с использованием правил для синтаксического анализа значений измерения не генерировать ошибку, то ожидается, что пользовательский агент будет использовать проанализированное измерение в качестве значения для презентационной подсказки для свойств properties, со значением, заданным как длина пикселя, если размер был длиной, и со значением, заданным в процентах, если размер размер был в процентах.
Когда в приведенном ниже тексте говорится, что атрибут attribute элемента element сопоставляется свойству измерения (игнорируя ноль) (или свойствам) properties, это означает, что если у элемента установлен атрибут attribute, и синтаксический анализ значения этого атрибута с использованием правил для синтаксического анализа ненулевого значения измерения не генерируют ошибку, тогда ожидается, что пользовательский агент будет использовать проанализированное измерение в качестве значения для презентационной подсказки для свойств properties, со значением, заданным как длина пикселя, если измерение было длиной, и со значением, заданным в процентах, если измерение было в процентах.
Когда в приведенном ниже тексте говорится, что пара атрибутов w и h в элементе element сопоставляется со свойством соотношения сторон (map to the aspect-ratio property), это означает, что если элемент имеет оба атрибута w и h и синтаксический анализ значений этих атрибутов с использованием правил синтаксического анализа не-отрицательные целые числа не генерируют ошибку ни для одного из них, тогда ожидается, что пользовательский агент будет использовать проанализированные целые числа в качестве презентационной подсказки для свойства ‘aspect-ratio‘ (соотношение сторон) формы auto w / h.
Когда в приведённом ниже тексте говорится, что пара атрибутов w и h в элементе element сопоставляется со свойством соотношения сторон (с использованием правил измерения) (map to the aspect-ratio property (using dimension rules)), это означает, что если элемент element имеет оба атрибута w и h, и анализ значений этих атрибутов с использованием правила для синтаксического анализа значений размеров не генерируют ошибки и не возвращают проценты ни для того, ни для другого, то ожидается, что пользовательский агент будет использовать проанализированные размеры в качестве презентационной подсказки для свойства ‘aspect-ratio‘ (соотношение сторон) формы auto w / h.
Когда пользовательский агент должен выравнивать потомков (align descendants) узла, ожидается, что пользовательский агент будет выравнивать только тех потомков, у которых свойства ‘margin-inline-start‘ и ‘margin-inline-end‘ вычисляются со значением, отличным от ‘auto‘, которые чрезмерно ограничены и имеют одно из этих двух полей с используемым значением, принудительно равным большему значению, и которые сами не имеют применимого атрибута выравнивания. Когда несколько элементов должны выравнивать определённого потомка, ожидается, что наиболее глубоко вложенный такой элемент переопределит другие. Ожидается, что выровненные элементы будут выровнены, если используемые значения их полей на левой и правой сторонах строки будут установлены соответствующим образом. [CSSLOGICAL] [CSSWM]
15.3 Незаменяемые элементы
15.3.1 Скрытые элементы
@namespace url(http://www.w3.org/1999/xhtml);
[hidden], area, base, basefont, datalist, head, link, meta, noembed,
noframes, param, rp, script, style, template, title {
display: none;
}
embed[hidden] { display: inline; height: 0; width: 0; }
input[type=hidden i] { display: none !important; }
@media (scripting) {
noscript { display: none !important; }
}
15.3.2 Страница
@namespace url(http://www.w3.org/1999/xhtml);
html, body { display: block; }
Для каждого свойства в приведенной ниже таблице для заданного элемента body первый существующий атрибут сопоставляется со свойством длины в пикселях элемента body. Если ни один из атрибутов для свойства не найден или если значение найденного атрибута не может быть успешно проанализировано, вместо этого ожидается, что для этого свойства будет использоваться значение по умолчанию 8px.
| Property | Source |
|---|---|
| ‘margin-top’ | The body element’s marginheight attribute |
The body element’s topmargin attribute |
|
The body element’s container frame element‘s marginheight attribute |
|
| ‘margin-right’ | The body element’s marginwidth attribute |
The body element’s rightmargin attribute |
|
The body element’s container frame element‘s marginwidth attribute |
|
| ‘margin-bottom’ | The body element’s marginheight attribute |
The body element’s bottommargin attribute |
|
The body element’s container frame element‘s marginheight attribute |
|
| ‘margin-left’ | The body element’s marginwidth attribute |
The body element’s leftmargin attribute |
|
The body element’s container frame element‘s marginwidth attribute |
Если контекст просмотра документа узла элемента body является дочерним контекстом просмотра, а контейнер этого контекста просмотра является элементом frame или iframe, то элемент фрейма контейнера (container frame element) элемента body является этим элементом frame или iframe. В противном случае элемент фрейма контейнера отсутствует.
Вышеуказанные требования подразумевают, что страница может изменять поля другой страницы (в том числе из другого источника), используя, например, iframe. Это потенциально представляет угрозу безопасности, поскольку в некоторых случаях может позволить атаке создать ситуацию, при которой страница отображается не так, как задумал автор, возможно, с целью фишинга или иного введения пользователя в заблуждение.
Если контекст просмотра документа Document является дочерним контекстом просмотра, то ожидается, что он будет расположен и имеет размер, чтобы соответствовать блоку содержимого контейнера этого контекста просмотра. Если контейнер не визуализируется, ожидается, что контекст просмотра будет иметь область просмотра с нулевой шириной и нулевой высотой.
Если контекст просмотра документа Document является дочерним контекстом просмотра, контейнером этого контекста просмотра является элемент frame или iframe, этот элемент имеет атрибут прокрутки — scrolling, а значение этого атрибута является соответствием без учета регистра ASCII для строки «off«, » noscroll» или «no«, то ожидается, что пользовательский агент предотвратит отображение каких-либо полос прокрутки для области просмотра контекста просмотра документа Document, независимо от свойства ‘overflow’ (переполнения), которое применяется к этой области просмотра.
Когда элемент body имеет атрибут background, установленный в непустое значение, ожидается, что новое значение будет проанализировано относительно документа узла элемента, и, если это будет успешным, ожидается, что пользовательский агент обработает атрибут как презентационную подсказку, устанавливающую свойства ‘background-image’ элемента в результирующую строку URL.
Когда элемент body имеет установленный атрибут bgcolor, ожидается, что новое значение будет проанализировано с использованием правил анализа устаревшего значения цвета, и если это не вернёт ошибку, ожидается, что пользовательский агент обработает атрибут как презентационную подсказку, устанавливающую свойства ‘background-color’ элемента на результирующий цвет.
Когда элемент body имеет атрибут text, ожидается, что его значение будет проанализировано с использованием правил анализа устаревшего значения цвета, и, если это не вернёт ошибку, ожидается, что пользовательский агент обработает атрибут как презентационную подсказку, устанавливающую свойство ‘color’ элемента в результирующий цвет.
Когда элемент body имеет атрибут link, ожидается, что его значение будет проанализировано с использованием правил анализа устаревшего значения цвета, и, если это не вернёт ошибку, ожидается, что пользовательский агент обработает атрибут как презентационную подсказку, устанавливающую ‘color’ любого элемента в документе Document, соответствующего псевдоклассу :link, с результирующим цветом.
Когда элемент body имеет атрибут vlink, ожидается, что его значение будет проанализировано с использованием правил анализа устаревшего значения цвета, и, если это не вернёт ошибку, ожидается, что пользовательский агент обработает атрибут как презентационную подсказку, устанавливающую ‘color’ любого элемента в документе Document, соответствующего псевдоклассу :visited, с результирующим цветом.
Когда элемент body имеет атрибут alink, ожидается, что его значение будет проанализировано с использованием правил анализа устаревшего значения цвета, и, если это не вернёт ошибку, ожидается, что пользовательский агент обработает атрибут как презентационную подсказку, устанавливающую ‘color’ любого элемента в документе Document, соответствующего псевдоклассу :active и либо псевдоклассу :link, либо псевдоклассу :visited для результирующего цвета.
15.3.3 Содержание потока
@namespace url(http://www.w3.org/1999/xhtml);
address, blockquote, center, dialog, div, figure, figcaption, footer, form,
header, hr, legend, listing, main, p, plaintext, pre, xmp {
display: block;
}
blockquote, figure, listing, p, plaintext, pre, xmp {
margin-block-start: 1em; margin-block-end: 1em;
}
blockquote, figure { margin-inline-start: 40px; margin-inline-end: 40px; }
address { font-style: italic; }
listing, plaintext, pre, xmp {
font-family: monospace; white-space: pre;
}
dialog:not([open]) { display: none; }
dialog {
position: absolute;
inset-inline-start: 0; inset-inline-end: 0;
width: fit-content;
height: fit-content;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;
}
dialog::backdrop {
background: rgba(0,0,0,0.1);
}
slot {
display: contents;
}
Ожидается, что в качестве подсказок к презентации также будут применяться следующие правила:
@namespace url(http://www.w3.org/1999/xhtml);
pre[wrap] { white-space: pre-wrap; }
Ожидается, что в режиме причуд будут применяться следующие правила:
@namespace url(http://www.w3.org/1999/xhtml);
form { margin-block-end: 1em; }
Ожидается, что элемент center и элемент div, если у него есть атрибут align, значение которого соответствует ASCII без учета регистра для строки «center» (центр) или строки «middle» (середина), будут центрировать текст внутри себя, как если бы у них было свойство выравнивание текста ‘text-align’, установленное в ‘center‘ (центр) в подсказке презентации, и выравнивать потомков по центру.
Ожидается, что элемент div, если у него есть атрибут align, значение которого соответствует строке «left» без учета регистра ASCII, будет выравнивать текст по левому краю внутри себя, как если бы для свойства ‘text-align’ было установлено значение ‘left’ в подсказке презентации, и выравнивать потомков слева.
Ожидается, что элемент div, если у него есть атрибут align, значение которого соответствует строке «right» без учета регистра ASCII, будет выравнивать текст по правому краю внутри себя, как если бы для свойства ‘text-align’ было установлено значение ‘right’ в подсказке презентации, и выравнивать потомков справа.
Ожидается, что элемент div, если у него есть атрибут align, значение которого соответствует строке «justify» без учета регистра ASCII, будет полностью выравнивать текст внутри себя, как если бы для свойства ‘text-align’ было установлено значение ‘justify’ в подсказке презентации, и выравнивать потомков слева.
Ожидается, что элемент dialog, если его модальный флаг имеет значение true, будет действовать так, как если бы у него было правило таблицы стилей на уровне агента пользователя, устанавливающее следующие свойства:
- ‘position’ свойство на ‘fixed’
- ‘overflow’ свойство на ‘auto’
- ‘inset-block-start’ свойство на ‘0’
- ‘inset-block-end’ свойство на ‘0’
- ‘max-width’ свойство на ‘calc(100% — 6px — 2em)’
- ‘max-height’ свойство на ‘calc(100% — 6px — 2em)’
…публикация переведена не полностью
Информационные ссылки
Стандарт HTML — Раздел «15 Rendering» — https://html.spec.whatwg.org/#rendering
