Прекратите использовать хак Padding (для видео)

Это совет больше для себя, чем для кого-либо. CSS прошел долгий путь с тех пор, как я начал его использовать.

Большинство «хаков», которые мы использовали в CSS в 2010 году, были заменены лучшими альтернативами. Вот несколько изменений парадигмы, которые произошли за последнее десятилетие:

Раньше мы использовали…	Теперь мы используем…
Плавающие элементы, абсолютное позиционирование и таблицы	Flexbox и CSS-сетки
Переменные PHP и Sass	Пользовательские свойства CSS
Библиотеки анимации JS	CSS-анимация и переходы
Магические числа для отступов	`box-sizing: border-box`
Гибкое изменение размера шрифта с помощью JS	Единицы области просмотра

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

Центрирование чего-либо в CSS? Это больше не мем. С помощью Flexbox выравнивание по центру не требует усилий.

Нелегко постоянно учиться чему-то новому и заново осваивать свою профессию каждые год или два, но в случае с CSS это того стоит. Сегодня почти все стало проще и быстрее, чем пять лет назад. ^[1]

Но есть несколько новых возможностей CSS, которые я еще не успел интегрировать в свою голову. Одна из самых очевидно полезных — соотношение сторон. Уже много лет мы используем хак padding для имитации соотношения сторон. Это часто используется для встроенных видео, например, видео на YouTube, и выглядит следующим образом:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

Эта техника была впервые использована в ALA еще в 2009 году. Это хороший прием, и даже сегодня, если вы набираете в поисковике «responsive videos css», все первые результаты выдают именно этот прием.

Но в нем больше нет необходимости! Приведенный выше хак с набивкой имитирует соотношение сторон 16 / 9. Мы используем его, потому что именно так выглядит большинство видео на YouTube. Вместо того чтобы использовать полумагический хак 56,25% padding, в наши дни вы можете прописать точное соотношение сторон, которое вам нужно:

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Это поддерживается везде (кроме IE, конечно).

Боже, как приятно сократить 11-строчный хак до двух легко запоминающихся строк. ^[2]

Я, несомненно, искал «responsive videos css» сотни раз, потому что хак padding был плотным, труднозапоминаемым и труднонаписываемым. Всегда было проще скопировать/вставить из статьи CSS Tricks. Но не более!

CSS со временем становится все лучше и лучше, и я всегда рад оставить в историческом мусорном ящике неуклюжие (хотя и гениальные) хаки вроде вышеописанного.

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