[Разработка веб-сайтов, CSS] В ожидании aspect-ratio: все «хаки» для пропорциональных боксов

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 3 месяца
Сообщений: 27286

news_bot ^® написал(а)
13-Фев-2021 12:32

Цитировать

В ожидании широкой поддержки свойства aspect‑ratio предлагаю вам вспомнить несколько вариаций "хака", которые мы все еще можем использовать, чтобы достичь такого же поведения с обычными боксами.padding-top/bottom в %Соблюдения соотношения сторон без aspect-ratio можно было достичь задав боксу с нулевой высотой padding-top или padding‑bottom в %. Процентное соотношение рассчитывалось по формуле:высота / ширину * 100%Например:
1:1 aspect ratio = 1 / 1 * 100% = padding‑top: 100%
4:3 aspect ratio = 3 / 4 * 100% = padding‑top: 75%
16:9 aspect ratio = 9 / 16 * 100% = padding‑top: 56.25%В некоторых случаях, проценты округляли до сотых:
3:2 aspect ratio = 2 / 3 * 100% = padding‑top: 66.67% (66.66666666666667%)Видимо, людям не нравилось писать 16 значные значения свойства. Что приводит нас кpadding‑top/bottom + функция calc()

.aspect-ratio-box {
padding-bottom: calc(120 / 327 * 100%);
height: 0;
}

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

Все проекты этого блока это по сути article с заголовком внутри. Изображения заданы через background‑image. Проекты также должны быть кликабельны. Мы можем обернуть все содержимое article в ссылку (в данном случае это не будет проблемой). Однако если проектам захотят добавить описание — у нас будет проблема с доступностью. Скринридер прочитает все что вложено в ссылку — и заголовок и описание. Решение есть и заключается в том, чтобы положить ссылку в заголовок и растянуть её область клика через псевдоэлемент. Но для этого нам нужно чтобы заголовки не были абсолютно cпозиционированы. А значит нужен другой вариант пропорционального бокса. Блок лендинга Loopstudioиз frontendmentor.iopadding-top/bottom для ::beforeСледующий способ заключался в том, чтобы задать внутренний отступ в % уже для псевдо‑элемента со значением float: left; Вот так:

.aspect-ratio-box {
display: flow-root;
/* Нужно чтобы контейнер не схлопывался. */
}
.aspect-ratio-box::before {
content: "";
float: left;
padding-bottom: calc(120 / 327 * 100%);
}

Для более широкой поддержки по сравнению с flow-root (т.е. для браузеров ~ до середины 2017 года), в качестве альтернативы, для контейнера вы могли использовать свойство column-count:

.aspect-ratio-box {
column-count: 1;
/* Пуленепробиваемый clearfix */
}
.aspect-ratio-box::before {
content: "";
float: left;
padding-bottom: calc(120 / 327 * 100%);
}

Вариант с flexboxdisplay: flex; изменит направление потока документа с обычного, на горизонтальное слева направо:

.aspect-ratio-box {
display: flex;
/* предусмотрительно оставленный комментарий о том, */
/* что свойство flex как и направление главной оси */
/* убирать и менять нельзя */
}
.aspect-ratio-box::before {
content: "";
padding-bottom: calc(120 / 327 * 100%);
}

Помните, что последние две вариации все так же не позволяют вам добавлять внутренние отступы контейнеру. Если Вам нужны отступы — их придется добавлять дочерним боксам.Что дальше? @supports notКакой же способ использовать в работе? Мне кажется, мы можем начать использовать aspect‑ratio и подстраховаться директивой @supports с оператором not:

.aspect-ratio-box {
aspect-ratio: 327 / 120;
}
@supports not (aspect-ratio: 1 / 1) {
/* если браузер НЕ поддерживает свойство, то */
/* применить стили внутри */
.aspect-ratio-box {
column-count: 1;
}
.aspect-ratio-box::before {
content: "";
float: left;
padding-bottom: calc(120 / 327 * 100%);
}
}

Данный способ является самым надежным.Если кому‑то работающему с вашим CSS понадобится как-то спозиционировать заголовок — они смогут сделать это с помощью флексбокса и внешних отступов со значением auto.
float просто перестанет работать. Таким образом, они ничего не заденут по случайности.А со временем, когда поддержка будет более распространена — мы просто удалим правило.
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_css, #_aspectratio, #_css_aspectratio, #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_css

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 21-Май 02:42
Часовой пояс: UTC + 5