Некоторые элементы HTML всегда вызывали головные боли у разработчиков интерфейсов, например, iframes, апплеты, встроенные объекты или элементы управления формы. Никогда нельзя было полностью контролировать их отображение, потому что они выглядят по-разному в разных браузерах, в разных ОС.
Бесчисленные библиотеки и фреймворки создали замены, от jQueryUI до Bootstrap, и многие другие. Но вы когда-нибудь задумывались, почему эти элементы ведут себя так, как они? Некоторые голоса (в том числе несколько известных веб-сайтов) укажут пальцем на довольно неясное определение W3C, а именно определение замененных элементов . Но они на 100% правы? Это квест, который мы будем преследовать вместе сегодня.
Что такое заменяемые элементы?
Любой хороший квест должен начинаться с исследования. Поэтому давайте посмотрим, что официальные спецификации говорят, что замененный элемент:
Элемент, содержимое которого выходит за рамки модели форматирования CSS, например изображение, встроенный документ или апплет. Например, содержимое HTML-элемента IMG часто заменяется изображением, которое обозначает его атрибут «src». Замененные элементы часто имеют внутренние размеры: внутреннюю ширину, внутреннюю высоту и внутреннее соотношение. Например, растровое изображение имеет внутреннюю ширину и внутреннюю высоту, заданные в абсолютных единицах (из которых, очевидно, можно определить внутреннее отношение). С другой стороны, другие документы могут не иметь внутренних измерений (например, пустой документ HTML).
Источник: 3. Соответствие: требования и рекомендации> 3.1 — Определения
Пока все хорошо — мы получили общее описание того, что такое заменяемый элемент. Прежде чем мы углубимся в этот раздел спецификаций, давайте сделаем небольшой обход и проясним часть «внутренние измерения».
Что такое внутренние размеры?
Лучшее определение, доступное в настоящее время для внутренних измерений, взято из документа « Значения изображений CSS» и «Модуль 3-го содержания контента» :
Термин внутренние размеры относится к набору внутренней высоты , внутренней ширины и внутреннего аспектного соотношения (отношения между шириной и высотой), каждый из которых может существовать или не существовать для данного объекта. Эти внутренние размеры представляют предпочтительный или естественный размер самого объекта; то есть они не являются функцией контекста, в котором используется объект. CSS не определяет, как внутренние размеры находятся в целом.
Вот некоторые примеры:
- Нормальное изображение имеет все три измерения: ширину, высоту и соотношение сторон.
- Изображение SVG может иметь только соотношение сторон. Его масштабирующий характер означает, что ширина и высота не ограничены одним значением.
- Пустая страница HTML, вставленная через элемент
iframeвообще не имеет размеров.
То, как эти свойства связаны друг с другом, означает, что не может быть объекта только с двумя измерениями. Знание двух из них автоматически определяет третий.
В целом это означает, что такой объект при размещении на странице будет обеспечивать эти внутренние размеры документа, чтобы они могли быть правильно отображены. Эта информация будет полезна позже, а пока вернемся к основному пути.
Замененные элементы в реальном мире
Для полного описания замененных элементов нам нужно перейти на другой ресурс, а именно в раздел « Рендеринг » документа HTML Living Standard. По мере углубления в спецификации, легко увидеть, как эта тема может сбивать с толку. Это связано с тем, что некоторые элементы HTML действуют как заменяемые элементы все время, а другие — только в определенных обстоятельствах.
К счастью, подраздел 14.4 дает нам всю информацию, необходимую для правильного понимания каждого случая.
Встроенный контент
Первая категория заменяемых элементов — это встроенный контент. Это включает в себя любой элемент, который импортирует другой ресурс в документ, или контент из другого словаря, который вставлен в документ. Эти внешние ресурсы по своей природе имеют внутренние измерения, которые соответствуют требованиям определения.
Основными элементами в этой категории являются embed , iframe и video . Эти элементы всегда обрабатываются как замененные элементы, потому что они всегда импортируют внешний контент в ваш документ.
Все немного сложнее с элементами, которые попадают в эту категорию только в особых обстоятельствах:
-
applet— рассматривается как заменяемый элемент, когда он представляет плагин, в противном случае он рассматривается как обычный элемент. -
audio— рассматривается как заменяемый элемент, только если он « представляет элемент пользовательского интерфейса ». Рендеринг будет примерно на одну строчку настолько широким, насколько это необходимо для предоставления возможностей пользовательского интерфейса агента пользователя. -
object— рассматривается как заменяемый элемент, когда он представляет изображение, плагин или вложенный контекст просмотра (аналогичноiframe). -
canvas— рассматривается как заменяемый элемент, когда он представляет встроенный контент. То есть он содержит растровое изображение элемента, если оно есть, или прозрачное черное растровое изображение с теми же внутренними размерами, что и у элемента.
Это единственные случаи, когда вышеперечисленные элементы рассматриваются как заменяемые элементы (что охватывает почти все случаи, когда эти элементы используются). Для получения полной информации об этом см . Правила рендеринга WHATWG для встроенного контента .
Картинки
Далее в нашем списке находятся изображения. В подавляющем большинстве случаев (при правильном отображении изображения) элемент img рассматривается как заменяемый элемент с внутренними размерами изображения. Эта категория также включает элементы input с атрибутом type="image" .
Все становится немного сложнее, когда по разным причинам изображение не отображается на странице. Отсутствующее изображение, которое, как ожидает браузер, оно будет отображать в конечном итоге, должно рассматриваться как заменяемый элемент, содержимое которого представляет собой текст, который представляет элемент (при желании можно также добавить значок). Вместо этого <input type="image"> будет отображаться как обычная кнопка. Полный набор правил и условий может быть рассмотрен в спецификации .
Размер по умолчанию замененных элементов
Вот где информация, которую мы собрали о внутренних измерениях, становится полезной. Мы уже установили, что свойства width и height заменяемого элемента определяются внутренними размерами содержимого, которое они вносят на страницу. Если эти измерения не могут быть рассчитаны (как в случае iframe загружающего пустую страницу HTML), браузер должен вернуться к правилам по умолчанию, как указано в разделе Подробности модели визуального форматирования . Сам набор правил довольно большой и сложный, но мы сосредоточимся только на принципах «ничего больше не работает»:
В противном случае, если «width» имеет вычисленное значение «auto», но ни одно из указанных выше условий не выполняется, используемое значение «width» становится равным 300px. Если 300px слишком широки, чтобы соответствовать устройству, UA должны использовать ширину самого большого прямоугольника с соотношением 2: 1 и вместо этого соответствовать устройству.
Источник: 10.3 Расчет ширины и полей
В противном случае, если «height» имеет вычисленное значение «auto», но ни одно из указанных выше условий не выполняется, то используемое значение «height» должно быть установлено на высоту самого большого прямоугольника с соотношением 2: 1, имеет высоту не более 150 пикселей и ширину, не превышающую ширину устройства.
Источник: 10.6 Расчет высот и полей
Мы можем обобщить все это в трех основных правилах:
- если объект имеет явные значения
width,heightиratio, используйте их; - если объект имеет только
ratio, используйтеautoдля ширины и высоты, сохраняя указанное соотношение; - если ни одно из этих измерений не доступно:
- используйте
width: 300px; height: 150pxwidth: 300px; height: 150px150 пикселей, когда область просмотра больше 300 пикселей - используйте «auto» как для ширины, так и для высоты, и соотношение 2: 1, если область просмотра меньше 300 пикселей;
- используйте
Вот пример, иллюстрирующий ситуации, описанные выше. У нас есть растровое изображение, изображение SVG и iframe. Как вы можете видеть, изображение отображается в своем нормальном размере, SVG сохраняет соотношение сторон, но занимает все доступное пространство, в то время как значение iframe по умолчанию составляет максимум 300 × 150. Если мы сузим область просмотра, то iframe всегда будет иметь соотношение сторон 2: 1.
Округление вещей
Теперь у нас достаточно информации, чтобы собрать полный список замененных элементов:
- встроенный контент:
embed,iframeиvideoвсегда рассматриваются как заменяемые элементы - встроенный контент:
applet,audio,objectиcanvasобрабатываются как замененные элементы в определенных случаях - images:
imgиinput type="image"обрабатываются как заменяемые элементы при правильной загрузке или когда браузер ожидает, что он будет в конечном итоге
А как насчет других типов элементов управления формы?
Как я уже упоминал вначале, существует определенное заблуждение, что другие типы элементов управления формы также заменяются элементами. В конце концов, если вы не добавите стили и атрибуты, эти элементы также будут отображаться с шириной и высотой по умолчанию. Это отвечало бы требованиям определения, не так ли?
На самом деле это не так. Давайте еще раз посмотрим на раздел « Рендеринг » стандарта HTML. Здесь мы обнаруживаем, что 14.3.11 Элементы управления формой являются подразделом 14.3 незамещенных элементов . То, что большинство людей считает внутренними измерениями, на самом деле происходит из следующей строки:
Каждый вид элемента управления формы также описан в разделе « Виджеты », в котором описывается внешний вид элемента управления.
Источник: 14.3.11 Форма контроля
И вот причина, по которой элементы управления форм выглядят так по-разному в разных браузерах и в разных ОС:
Элементы, определенные в этом разделе, могут быть представлены различными способами в соответствии с рекомендациями, приведенными ниже. ПАгентам рекомендуется устанавливать свойство CSS «внешний вид» надлежащим образом для достижения внешнего вида платформы для виджетов, и ожидается, что они будут реализовывать любые соответствующие анимации и т. Д., Подходящие для платформы.
Источник: 14.5 Виджеты> 14.5.1 Введение
Термин « внешний вид платформы » объясняет, почему элементы форм отображаются таким образом, как в разных браузерах и в разных операционных системах. Каждый браузер определяет свою интерпретацию того, как должны выглядеть эти виджеты.
Вывод
Оглядываясь назад, можно понять, как перепутались замененные элементы и элементы управления формой. Чтобы раскрыть правду, необходимо было углубиться в спецификации HTML и CSS. Это разные категории элементов HTML, причем <input type="image"> является единственным элементом управления формы, который является заменяемым элементом.
И вот мы в конце нашего квеста. Результаты могут быть не совсем такими, как мы ожидали, но я думаю, что они показывают более четкую картину малоизвестной области HTML.