Единицы масштабирования элементов. Процентные vs вьюпортовые.

Источник: Viewport vs Percentage Units.
Автор:  Ire Aderinokun.
Перевод: .

Как известно, стандартом CSS3 не так давно были представлены новые единицы измерения — vw, vh, vmin и vmax, которые основаны на величине вьюпорта браузера. И поскольку реальный размер элемента, установленный с помощью таких единиц, изменяется пропорционально соответствующему размеру вьюпорта, они становятся незаменимыми в случае с отзывчивым дизайном.

Вьюпортовые единицы.

Вьюпортовые единицы измерения являются относительными, то есть для них не существует реальных значений измерения. Определяемые этими единицами величины привязаны к вьюпорту и вычисляются в зависимости от его размера. Всего существует четыре такие единицы.

Наименование Обозначение Описание
Viewport Width
(Ширина вьюпорта)
vw Одна единица равна 1/100 (одной сотой) ширины вьюпорта.
Viewport Height
(Высота вьюпорта)
vh Одна единица равна 1/100 (одной сотой) высоты вьюпорта.
Minimum Viewport
(Минимум Вьюпорта)
vmin Одна единица равна 1/100 (одной сотой) меньшей размерности (высоты или ширины) вьюпорта.
Maximum Viewport
(Максимум вьюпорта)
vmax Одна единица равна 1/100 (одной сотой) большей размерности (высоты или ширины) вьюпорта.

В своей статье я все же остановлюсь только на первых двух единицах, поскольку вероятность их использования на практике наиболее вероятна.

Большинство случаев применения процентных и вьюпортовых единиц говорят о том, что результаты их использования довольно схожи. Тем не менее, каждый из вариантов имеет свои достоинства и недостатки. Если коротко, то можно сказать так:

Имея дело с шириной, предпочтение следует отдавать процентам, а в случае с высотой лучше использовать единицу vh.

Элементы в полную ширину (% > vw).

Как уже упоминалось выше, значение, выраженное в единицах vw, вычисляется на основе ширины вьюпорта. Однако браузеры определяют величину вьюпорта равную размеру окна браузера, которое включает в себя и область, отводимую для полосы прокрутки.

И если высоты вьюпорта будет недостаточно для отображения страницы в ее полную длину, то это приведет к появлению вертикального скроллбара. В результате получится, что реальная ширина вьюпорта будет несколько больше, чем ширина элементов html и body

Вьюпорт > html > body

То есть если вы установите ширину элемента равную 100vw, то это приведет к тому, что он будет выходить за рамки элементов html и body.

Границы элемента html выделены красным, а форматируемая секция заполнена фоном.

По причине этого нюанса, при необходимости привязки ширины элемента к ширине страницы, лучше отдать предпочтение процентным единицам, а не ширине вьюпорта.

Элементы во всю высоту (vh > %).

Если же элемент должен быть растянут по всей высоте страницы, то здесь, наоборот, следует использовать привязку к высоте вьюпорта вместо процентных единиц.

Поскольку определенный с помощью процентных значений размер элемента устанавливается относительно соответствующей размерности его родительского элемента, то для того, чтобы элемент полностью заполнял экран по высоте, его родительский элемент тоже должен быть растянут на всю высоту экрана. И это зачастую реализуется путем фиксированного позиционирования элемента, благодаря чему html элемент становится родительским по отношению к форматируемому элементу. В противном случае требуемого эффекта можно добиться лишь прибегнув к разного рода хитростям.

Если же воспользоваться вьюпортовой единицей vh, то все сводится к написанию простейшего правила:

.example {
height: 100vh;
}

Независимо от глубины вложенности элемента с классом .example в структуру html-документа, его размер все равно будет устанавливаться в соответствии с величиной вьюпорта. Описанную выше проблему со скроллбаром в данном случае можно проигнорировать, поскольку большинство страниц корректно работающих сайтов, как правило, не имеют горизонтальной полосы прокрутки.

Ниже представлены несколько примеров использования вьюпортовых единиц высоты vh для достижения определенного эффекта в дизайне.

Фоновое изображение на весь экран.

Типичный случай использования единицы vh на практике, заключается в создании фонового изображения, полностью заполняющего экран по высоте и ширине. Такой эффект достигается с помощью следующего несложного кода:

.bg {
position: relative;
background: url(‘bg.jpg’) center/cover;
width: 100%;
height: 100vh;
}

Секции во весь экран наподобие страниц.

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

section {
width: 100%;
height: 100vh;
}

Иллюзии перелистывания страниц можно добиться с помощью следующего JavaScript:

$('nav').on('click', function() {

if ( $(this).hasClass('down') ) {
var movePos = $(window).scrollTop() + $(window).height();
}
if ( $(this).hasClass('up') ) {
var movePos = $(window).scrollTop() — $(window).height();
}

$('html, body').animate({
scrollTop: movePos
}, 1000);
})

Изображения, ограниченные рамками показа.

Вьюпортовая единица vh позволяет также контролировать размер изображения в рамках страницы. Представим себе ситуацию, когда нам, к примеру, необходимо, чтобы находящееся на странице изображение было полностью просматриваемо независимо от размера экрана. Это можно реализовать посредством следующих установок:

img {
width: auto; /* Привязка ширины изображения к его высоте для соблюдения пропорциональности */
max-width: 100%; /* Предотвращение превышения изображением ширины родительского блока */
max-height: 90vh; /* Высота изображения ограничивается высотой вьюпорта */

margin: 2rem auto;
}

Поддержка вьюпортовых единиц браузерами в 2016г.

Поскольку вьюпортовые единицы определения размерностей элементов описаны спецификацией CSS Values and Units Module Level 3, которая пока не является полноценным стандартом, поддержка браузерами не полноценна. Хотя для «кандидата в рекомендации» статистика тоже неплохая:

caniuse.com

Глобальная поддержка браузерами на ноябрь 2016 составляет 83%.

Картину сильно портит Opera Mini, однако это отдельная тема, которую мы затронем ниже. Что касается IE и его собратьев (Edge, IE Mobile), то как видно из диаграмм, данный функционал реализован этой серией браузеров лишь частично. Дело в том, что IE не поддерживает единицу vmax.

Баги.

Далее предлагаю вашему вниманию список проблем использования вьюпортовых единиц, с которыми столкнулись веб-разработчики на практике:

  • Chrome не выводит на печать элементы, размеры которых установлены с помощью вьюпортовых единиц (проблема решена).
  • В случае использования внутри фреймов (iframe) IE9 вычисляет вьюпортовые единицы относительно родительского окна, а не самого фрейма.
  • При зумировании окна браузера или системы IE9 вычисляет значения вьюпортовых единиц некорректно.
  • На данный момент все браузеры, за исключением Firefox неверно обрабатывают значение 100vw, воспринимая его как полную ширину страницы вместе с вертикальной полосой прокрутки. Это может стать причиной появления горизонтальной полосы прокрутки, если имеет место правило overflow: auto. Такое поведение было описано выше.
  • Поведение IE10 и 11 может быть непредсказуемым при совместном использовании 3D трансформации и единиц vw.
  • При смене ориентации экрана iOS 7 Safari пересчитывает определенные с помощью единиц vh значения ширины в vw значения, а определенные с помощью vw единиц значения высоты в vh значения.
  • В режиме печати IE9 интерпретирует значения в единицах vh как количество страниц, т.е. 30vh = 30 страницам.
  • Если пользователь покинул страницу и вернулся обратно по истечении 60 секунд, то iOS 7 Safari обнуляет все значения, определенные с помощью вьюпортовых единиц.
  • Safari и iOS Safari (оба 6 и 7 версии) не поддерживают вьюпортовые единицы применительно к ширине границ (border-width), интервалам между колонками (column-gap), значениям в трансформации (transform), теням блоков (box-shadow) и к аргументам функции calc().
  • Chrome до 34-й версии также не поддерживает вьюпортовые единицы для ширины границ, интервалов между колонками, значений трансформации, теней блоков и аргументов calc().
  • Сообщается, что iOS вычисляет значения vh относительно высоты с учетом нижней панели инструментов, а значения vw на основе ширины, включающей область боковой панели (панели закладок).

Насколько безопасно использовать вьюпортовые единицы в 2016 году?

И в заключение хотелось бы более подробно остановиться на поддержке вьюпортовых единиц браузером Opera mini. Попробуем раскрыть данную тему методом разбора соответствующей темы из ресурсе Quora, где на обсуждение был поставлен следующий вопрос:

Is it safe to use viewport units without fallbacks in 2016?
Opera mini still doesn’t support. If I will go into viewport units direction, I will be doing a layout that is impossible to make fallback for with pixel units.

Насколько безопасно использовать вьюпортовые единицы в 2016 году без обеспечения обратной совместимости?
В Opera mini до сих пор нет поддержки данного функционала. И если я пойду по пути использования вьюпортовых единиц, то означает ли это, что созданный в результате шаблон невозможно будет обеспечить обратной совместимостью на основе пиксельных единиц?

По правде говоря, браузер Opera mini трудно назвать удобным и популярным, скорее наоборот. Вот несколько ссылок на статистику: "stetic.com", "netmarketshare.com". Знаю по себе, когда одно время у меня был старый телефон (один из первых смартфонов), на нем был предустановлен этот браузер, и мне приходилось периодически пользоваться им при необходимости выхода в Интернет, совершенно не задумываясь о том, насколько он хорош или каким, более удобным браузером можно его заменить. Я просто терпеливо его использовал. Вероятнее всего львиная доля мизерного процента пользователей Opera mini и представлена владельцами подобных устройств.

В качестве подходящего примера «умирающего» браузера можно назвать IE8, в котором, кстати, тоже не работают относительные вьюпортовые единицы. Еще в 2013 году Google и Facebook объявили о прекращении поддержки этого браузера, как, собственно и IE9. Создается впечатление, что Opera mini придерживается такого же пути «развития». Ведь в этом браузере отсутствует поддержка не только вьюпортовых единиц, но и других средств совершенствования фронт-энд разработки. Взять, к примеру, атрибут async, благодаря которому можно значительно ускорить загрузку сайта. Учитывая все вышеизложенное, Opera mini можно смело назвать «слабым звеном» Интернет-индустрии. И кто может гарантировать, что этот браузер не пойдет по пути IE ранних версий.

А что касается ответа на заданный вопрос, то право выбора нужно предоставить вашему клиенту, т.е. тому, кто платит вам за создание сайта. И если в предоставленной клиентом матрице браузеров нет Opera mini, то зачем утруждать себя его присутствием. Если же вы разрабатываете сайт для собственных нужд, то смело, без раздумий используйте вьюпортовые единицы.

Добавить комментарий

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