CSS-live.ru

Почему viewport — метатег?

Адам Брэдли спросил:

Брюс, <meta> — это ведь данные о данных, так почему же viewport — метатег, если он командует браузеру, что делать, а не описывает себя?

Маркос Касерес ответил:

Адам, Брюс, это единственный элемент, который можно использовать в голове документа, не нарушая обратной совместимости. Семантика ни при чем.

HTML никогда не требовал наличия элементов <html>, <head> и <body> (только валидатор XHTML требовал этого). Так что если открыть тест 1 в любом браузере и просмотреть исходник, вы увидите, что этих трех элементов там нет. Но если изучить DOM в любом соотв. инспекторе, вы увидите, что браузер вставил эти элементы.

Откуда браузер знает, где закрыть <head> и открыть <body>? Тест 2 показывает страницу, на которой есть элемент <блюющаявыдра>. Он еще не является официальной частью HTML (Хикси, поторопись!). В исходнике нет элемента <body>, но браузер понял, что элементы <title> и <meta charset> нужно оставить в голове, а элемент <блюющаявыдра> добавить в <body> (благодаря чему мы и видим его содержимое: по умолчанию никакой текст в <head> не попадает в видимую часть страницы).

По-простому, первый элемент, который не известен как возможная часть <head>, заставляет браузер закрыть <head> и открыть <body>. Так что если он не распознан как элемент типа «метаданные» (<base>, <link>, <meta>, <noscript>, <script>, <style>, <template>, <title>), он оказывается в <body>. Любой нижеследующий «головной» элемент остается в <body>; эти элементы не возвращаются в <head> (см. DOM теста 3), даже если вы явно обернете их в элементы <html>, <head> и <body> в исходнике — см. тест 4.

Это не проясняет более важный вопрос, почему Эпл — которая изобрела метатег viewport — вообще решила добавить его в HTML. В конце концов, HTML относится к контенту, а информация об области просмотра относится к оформлению, и поэтому логичнее было бы объявлять ее в CSS. Я не знаю на него ответа, кроме того, что Эпл обо всём знает лучше.

Существует CSS-спецификация под названием «CSS Адаптация к устройствам», которая по сути представляет собой «<meta viewport> в CSS», с правилом @viewport (см. руководство Андреаса Бовенса). Это обобщает директиву viewport, и к тому же дает больше возможностей: поскольку оно в CSS, его можно комбинировать с медиавыражениями. Оно поддерживается в Опере, Хроме и IE.

Оригинал статьи и автор

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.