Спасибо, что вы здесь!

Это публичный канал о магии CSS. Пишу каждую среду с 17 30 до 18 00. В канале всегда опубликован пост только за текущую неделю.

Несколько важных сообщений:

— доступ к каналу может закрыться в любой момент (об этом сообщаю заранее)
— комментарии, предложения, критику и любые мысли пишите мне напрямую

Можно сразу купить доступ к закрытой части канала. Там есть контент, которого тут не будет.

Пожалуйста напишите мне @melnik909, расскажу детали.

min-height: 100dvh побеждает min-height: 100vh

Кто-то сделал так

.hero {
  min-height: 100vh;
  background-image: url("hero.jpg");
  background-color: #121212;
}

Я предлагаю делать так

.hero {
  min-height: 100dvh;
  background-image: url("hero.jpg");
  background-color: #121212;
}

Единицы измерения vh не учитывают изменение панели поиска на смартфонах. Таким образом, мы получим кривой результат. Это можно исправить с помощью единиц измерения dvh

Кастомные чекбоксы на стероидах с помощью :has()

Кто-то сделал так

.checkbox__input:checked + .checkbox__icon-wrap noscript {
  /* стили кастомного чекбокса */
}

Я предлагаю делать так

.checkbox:has(:checked) .checkbox__icon-wrap noscript {
  /* стили кастомного чекбокса */
}

Ура! У нас есть способ победить хрупкость комбинатора +. Это псевдо-класс :has()!

CSS без зависимости от порядка правил

Кто-то сделал так

.heading_size-l {
  font-size: 5rem;
}

.heading {
  font-size: 2.5rem;
}

Я предлагаю делать так

.heading_size-l {
  --heading-font-size: 5rem;
}

.heading {
  font-size: var(--heading-font-size, 2.5rem);
}

Черт, я 2 часа искал, почему свойство переопределено! Проект с большим количеством компонентов и с разными модификаторами. Хорошо, что теперь можно избежать проблему порядка правил с одинаковой специфичностью. Пользовательские свойства меня выручат.

У нас пополнение. Пришли новенькие. Спасибо, что вы здесь!

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

Фидбек, критику, похвалу, вопросы и предложения пишите мне мне @melnik909.

Всех жду!

Вы упустили этот супер очевидный способ отобразить элементы в столбец

Кто-то сделал так

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Я предлагаю делать так

.container {
  display: grid;
  gap: 1rem;
}

Конечно, когда нужно отобразить элементы в столбец, flex-direction сделает это. Но мне нравится более короткий вариант. Просто использовать display: grid.