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

Это публичный канал о магии 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.

border надежный товарищ в отличие от background-color

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

.heading::before {
  content: "";
  width: 5rem;
  height: 2px;
  background-color: #b87eef;
  /* остальной CSS */
}

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

.heading::before {
  content: "";
  width: 5rem;
  border-top: 2px solid #b87eef;
  /* остальной CSS */
}

background-color будет установлено с одинаковым значением для всех элементов в режиме Windows High Contrast Mode. В итоге они будут скрыты. Поэтому рассмотрите border в качестве альтернативы.