Выходим за пределы контейнера - Web-Global: Связывая миры через веб-технологии
Web-Global

Выходим за пределы контейнера

Пост опубликован 16 июля 2022 в 19:54 и находится в рубриках HTML&CSS. 1300
Поделиться:

Выходим за пределы контейнера

Я обратил внимание на случай, который больше всего подходит для редакторских шаблонов. А именно когда дочерний элемент забирает 100% ширины вьюпорта, хотя его родитель ограничен в ней. Давайте рассмотрим пример ниже:

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

.break-out {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

Давайте разберем всё по полочкам и поймём как это работает.

Добавляем width: 100vw

Самый важный шаг, который даст изображению ширину равную 100% вьюпорта.

Добавляем margin-left: -50vw

Чтобы отцентровать изображение, нам понадобится выдать отрицательный маргин с половиной ширины вьюпорта.

Добавляем left: 50%

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

Вертикальный и горизонтальный спейсинг

Ещё один интересный пример, а именно использование вьюпорт единиц для спейсинга между элементами. Его можно использовать с таким значениями как margin, top, bottom и grid-gap. Применяя его, спейсинг будет основываться на ширине вьюпорта и его высоте, что может быть крайне полезным для создания динамических шаблонов.

Модалка

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

.modal-body {
    top: 20vh;
}

Посмотрите это видео, чтобы посмотреть на результат.

Шапка

Шапка это секция, которая показывает нам общую картину на странице или сайте. Часто там есть заголовок и описание, и среди этого всего есть фиксированная высота и падинги для верха и подвала страницы. Тут нам интересны падинги.

Для примера, вот как выглядит CSS:

.page-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 800px) {
    .page-header {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

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

.page-header {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.page-header h2 {
    margin-bottom: 1.5vh;
}

Я использовал vh для паддинга в шапке и маргина под заголовком. Обратите внимание как меняется спейсинг!

Сетка из нескольких элементов

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

Используя их в grid-gap, мы можем получить желаемый результат. Обратите внимание, что я применял функцию calc(). Суть использования calc() в том, чтобы у нас уже был базис для вертикального и горизонтального промежутков.

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: calc(14px + 1vh) calc(14px + 0.5vw);
}

Vmin и Vmax — примеры использования

Изучая примеры использования для этих двух единиц, я не нашёл ничего, только этот пример из CSS-tricks.

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

.page-header {
    padding: 10vmin 1rem;
}

Пример

Вертикальные медиа запросы и единицы вьюпорта

Несколько лет назад я написал статью о вертикальных медиа запросах.

Сейчас я хочу пролить свет на эту тему, так как она имеет прямое отношение к статье, которую вы сейчас читаете.

Секции на всю высоту экрана в Landscape режиме

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

Чтобы решить эту проблему, мы можем сделать следующее.

@media (min-height: 400px) {
    .section {
        height: 100vh;
    }
}

Или мы можем использовать orientation в медиа запросах:

@media (orientation: landscape) {
    .section {
        height: 100vh;
    }
}

Соотношение сторон

Мы можем использовать vh для создания адаптивных элементов, которые поддерживают актуальное состояние соотношения сторон вне зависимости от размера вьюпорта. Давайте на это посмотрим.

Нам нужно решить, какое соотношение сторон нам нужно. Для примера, 9/16.

section {
    /* 9/16 * 100 */
    height: 56.25vw;
}

Пример

Используем единицы вьюпорта для графических элементов

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

Довольно популярный подход с верхним бордером

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

Давайте сделаем изначальным значением бордера 3px. Как конвертировать это фиксированное значение в вьюпорт единицу? Вот как можно это посчитать:

vw = (Pixel Value / Viewport width) * 100

Ширина вьюпорта используется для расчета отношения между пикселями и vw единицей.

Для примера, вот как добавлен верхний бордер:

.header {
    border-top: 4px solid #8f7ebc;  
}

В моём случае ширина вьюпорта равна 1440.

vw = (4 / 1440) * 100 = 0.277

И вот такой CSS мы получим:

.header {
    border-top: 0.277vw solid #8f7ebc;  
}

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

.header {
    border-top: calc(2px + 0.138vw) solid $color-main;
}

Нумерация секций

Для элементов секций с каунтером или иконкой, мы можем тоже применить единицы вьюпорта. Посмотрите на макет ниже:

/**
1. Используем гибкое значение для flex, width и height свойств.
2. line-height используется для центровки текста вертикально.
3. Размер шрифта.
4. Расстояние между кругом и текстом
**/
.point:before {
    flex: 0 0 calc(24px + 4vw); /* [1] */
    width: calc(24px + 4vw); /* [1] */
    height: calc(24px + 4vw); /* [1] */
    line-height: calc(24px + 4vw); /* [2] */
    font-size: calc(14px + 1vw); /* [3] */
    margin-right: calc(10px + 0.5vw); /* [4] */
}

Пример

Viewport Units Watcher

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

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

Пример

Проблема со скроллом на мобильных устройствах

Есть распространенная проблема на мобильных устройствах, которая касается скролла, даже если используется 100vh. Проблема тут в том, что адресная строка находится во вьюхе. Луис Хобрегс написал статью об этом и показал простое и легкое её решение.

.my-element {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

А теперь js:

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

Использование 100vw как антипаттерн

Применяя 100vw для того, чтобы выдать элементу полную ширину вьюпорта, всё у вас будет отлично работать на Mac OS, так как вертикальный скроллбар там спрятан по-дефолту. Как результат, ширина скроллбара добавлена полной ширине.

Однако, пользователи Windows обратят внимание на то, что появился горизонтальный скроллинг. Почему? Потому что ширина скроллбара была добавлена ширине экрана. Скажем, что вы добавили такой CSS:

.element {
    width: 100vw;
}

На Windows, высчитанная ширина .element будет равна 100vw + 8.5px, где 8.5px это ширина вертикального скроллбара.

Насколько я знаю, то пока что нет конкретного решения этой проблемы без использования JavaScript, применение которого тут я не советую. Лучше избегать 100vw и использовать альтернативу. Для примера, мы можем применить CSS Grid, чтобы элемент вышел за пределы контейнера, посмотрите на решение в этой статье.

Спасибо Крису Моргану и Килиану Валкхофу за то, что предупредили меня об этой проблеме.

Доступность это важно

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

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

.title {
    font-size: calc(16px + .3vw);
}

Даже лучше, мы можем использовать CSS единицы em и rem, вместо px. Таким образом у нас будет больше контроля при изменении размера шрифта.

.title {
    font-size: calc(1rem + .3vw);
}

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