Angular Meetup: “#blog Новая статья из серии про полезные и малоизвестные CSS-фишки. В…”

#blog
Новая статья из серии про полезные и малоизвестные CSS-фишки. В этот раз нам поведают о следующем:

1. Используйте отдельные свойства трансформации
Вместо длинной цепочки значений для transform используйте отдельные свойства translate, rotate и scale.

.awesome-block::before {
 position: absolute;
 top: 50%;
 left: 50%;
 translate: -50% -50%;
}

2. Новый синтаксис медиа-запросов
Используйте математические знаки (<, <=, >, >=) для более явного указания диапазонов в медиа-запросах.

@media (width <= 1024px) {
 body {
  background-color: lightblue;
 }
}

3. Свойство grid-auto-flow для CSS Grid
Не обязательно использовать grid-template-columns или grid-template-rows для расположения элементов в столбец или строку. Используйте grid-auto-flow со значением row или column.

.awesome-container {
 display: grid;
 grid-auto-flow: column; /* Элементы будут выстроены в строку */
}

4. Свойство align-content для блочных элементов
Свойство align-content работает и для блочных элементов, позволяя выровнять содержимое по вертикали.

.awesome-container {
 display: block;
 align-content: center; /* Выравнивает содержимое по центру по вертикали */
}

5. Свойство outline-offset
Используйте outline-offset для смещения обводки элемента, что улучшит доступность для пользователей клавиатуры.

Статья - https://habr.com/ru/companies/ruvds/articles/896174/