#css_in_action
Ви однозначно не раз ставали свідком того, як непередбачувано стрибає вебсторінка перед вашими очима, коли бравзер дозавантажує якісь ресурси, наприклад зображення. І це дуже сильно бісить, особливо, якщо ти вже почав читати ту нещасну статтю про реакт-абізян в дикій природі, а текст зненацька починає від тебе тікати вниз.

Одним зі способів подолати цю проблему є фіксування розмірів елементів зображень, наприклад, задаючи в HTML width та height. Однак, якщо у вас адаптивний дизайн, і картинки мають динамічні розміри, цей підхід просто не спрацює.

І тоді людство згадало про так чудову річ, як пропорції, і почало "резервувати" місце під зображення, поки сам файл вантажиться. Найнадійнішим способом тривалий час був так званий padding-top hack — коли за допомогою внутрішнього відступу, абсолютного позиціонування і такоїто матері вдавалось таки забезпечити сталі пропорції. Але якою ціною?

<div class="box">
  <img class="fixed-ratio">
</div>

<style>
.box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 / 16 = 0.5625 → 56.25% */
  overflow: hidden;
}

.fixed-ratio {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>

Я, до речі, дуууже довго не міг зрозуміти, як і чому це працює, але секрет виявився простим, хоча й не очевидним для стороннього спостерігача. Виявляється, всі відступи, включаючи вертикальні, розраховуються від ширини елемента, а не від відповідного виміру. Звичайно, логічно було б, щоб padding-top у відсотках рахувався від висоти, але це не так. І це турбувало мене з першого дня, відколи я дізнався про відступи.

Як і будь-який хак, цей підхід має свої плюси і мінуси. Мінусів зазвичай більше. Я не буду заглиблюватися в них, але таку конструкцію дуже легко вивести з ладу: тут тобі і overflow: hidden, і неявна висота, і абсолютне позиціонування.

Хто не поставить серденько — втратить доступ до каналу через 3… 2… 1…

Однак давно вже можна забути про спадщину часів IE, та користуватися нормальними підходами в CSS, а в нашому випадку властивістю aspect-ratio, яка робить рівно одну річ — задає елементу потрібні пропорції, до того ж в очевидний спосіб.

.fixed-ratio {
  aspect-ratio: 16 / 9;
}

Можна задати й по старому, одним значенням, якщо вам дуже подобається знущатися над колегами:

.fixed-ratio {
  aspect-ratio: 1.77777778;
}

А, що ще важливо — очевидно, що aspect-ratio працює для усіх блочних елементів, не лише для зображень.

Частиною Baseline ця властивість є з вересня 2021 року, а це означає, що ви можете спокійно використовувати її у ваших продакшн-проєктах. Якщо ви досі не пишете під IE, звичайно.

Для себе я цей підхід відкрив приблизно у той же час, але використовував доволі обережно, зазвичай у пет-проєктах, але зараз підтримка сучасних CSS-фіч пришвидшилась, тож уже немає сенсу триматись за хаки

🌐 MDN: aspect-ratio

А ви як, слідкуєте, аби ваші сторінки не цибали вверх-вниз, як дикі гібони, чи покладаєтесь на волю богів та швидкий інтернет у юзера?

@babichdev