CSS isn't magic

Ищу спонсоров своей работы. Этот канал и статьи на Хабре — это моя попытка дать вам альтернативу. Чтобы у вас было место, где вы можете узнать что-то новое о CSS и перестали считать его магией. Вся эта движуха доступна вам без оплаты. Я считаю, если моя работа крутая, то найдутся люди, которые захотят ее финансово поддержать. В общем, если у вас есть возможность и желание поддержать меня деньгами, то напишите, пожалуйста, мне @melnik909 P.S. Если у вас доход не в рублях, то для вас тоже есть вариант. Тоже пишите.

https://t.me/ux_dev_a11y_tips У меня есть еще канал с контентом о цифровой доступности. Всех жду там!

Между первым и вторым случаем нет разницы. Я прав? случай №1

.awesome-block {
  width: 1rem;
  height: 1rem;
}

случай №2

.awesome-block {
  inline-size: 1rem;
  block-size: 1rem;
}

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 часа искал, почему свойство переопределено! Проект с большим количеством компонентов и с разными модификаторами. Хорошо, что теперь можно избежать проблему порядка правил с одинаковой специфичностью. Пользовательские свойства меня выручат.

Почему у элемента с классом .awesome-block по разному рассчитывается значение для свойства height?

<body>
  <div class="awesome-block">Великолепный текст</div>
  <div class="flex-container">
    <div class="awesome-block">Великолепный текст</div>
  </div>
</body>

.flex-container {
  display: flex;
  height: 300px;
}

Я пишу новую серию статьей, где буду задавать вопросs в стиле интервью. Мне нужна ваша помощь. Ниже я отправлю вопрос и опрос. Примите, пожалуйста, участие

Если хотите мне помочь, то поделитесь моей статьей с коллегами https://habr.com/ru/companies/ruvds/articles/873348/ А лучше закиньте в чатик, где много фронтендеров. Мне за 2 недели надо как-то 5к просмотров набрать.

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

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

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

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

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

У меня есть менторство. Помогаю изучать CSS. Со мной можно: — Подружиться с CSS, если пишете на реакте или вью; — Улучшить интерфейс вашего проекта, чтобы он был дружелюбнее к пользователям; — Критично посмотреть на свой CSS и разобрать, что с ним не так; — Подготовиться к вопросам по CSS так, что будете знать больше, чем интервьюер на собеседовании; — Накодить свою библиотеку CSS компонентов и не мучиться; — Сделать прикольную анимашку. Напишите мне @melnik909, если хотите попасть.

box-shadow не заменит outline Кто-то сделал так

:focus {
  box-shadow: 0 0 0 5px #f6f3fa;
}

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

:focus {
  outline: 5px solid #f6f3fa;
}

box-shadow может быть плохо видна или даже скрыта для пользователей во многих случаях. Например, она будет скрыта в режиме высокой контрастности. Таким образом, outline — это единственный надежный способ.

Что я советую посмотреть из моего контента: 1. Неизвестно полезный CSS Делюсь малоизвестными свойствами и нюансами работы. 2. Магия CSS на практике: советы по вёрстке от гика Мои любые подходы и приемы при работе с CSS. 3. Готовимся к вопросам по вёрстке на интервью Frontend-разработчика Отвечаю на самые популярные вопросы о CSS на интервью фронтендера. 4. Живые шпаргалки для свойств display и position Шпаргалки на Codepen, показывающие множество неизвестных нюансов свойств. Можно потыкать и изучить. 5. Код компонента Timeline Как написать CSS для компонента? На этот вопрос можно найти ответ в этой демке. Правда, придется покапаться в коде. 6. Анимашки и CSS творчество UI Анимации, CSS арт и готовые визуальные решения. 7. Пример организации CSS Правила и подходы, проверенные мной. Обратите внимание на названия классов, использование компонентов, кастомизацию, комментирование.

px не учитывает браузерные настройки размера шрифта Кто-то сделал так

body {
  font-size: 16px;
}

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

body {
  font-size: 1rem;
}

Есть холивар между фанатами px и rem. Если вы хотите разрешить увеличение размера шрифта в настройках браузера, ваш выбор — rem.

height: 100dvh побеждает height: 100vh Кто-то сделал так

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

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

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

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

Еще один раз на главной Codepen. На этот раз сделал текстовые лоадеры

Тут такое дело. В понедельник 30 декабря я буду удалять людей, подписанных, но не читающих контент. Всех, кроме тех кого лично знаю. Если вы читаете канал, то, пожалуйста, не обижайтесь. Подпишитесь еще раз. Я в панели админа увижу это и не буду еще раз удалять. Или напишите мне @melnik909, что читаете меня. Почему это происходит? Мне важно видеть активность людей. Что мой канал кому-то полезен, а не просто набрал 300 подписчиков. Мне не интересно общее количество. Сейчас у нас получается так, что около 30% просмотров к количеству подписчиков. Я хочу сдвинуть это значение ближе к 70%.

Для новеньких. Спасибо, что вы здесь! Я бездушный инфоциган-попрашайка. В среду каждую неделю публикую посты. Стабильно бешу опросами. Очень часто прошу денег и рекламирую себя. Все по классике. Фидбек, критику, похвалу, вопросы и предложения можно писать мне @melnik909. Всех жду!

Какое вычисленное значение у свойства min-width?

body > .parent {
  display: grid;
  /* min-width: ?; */
}

body > .parent::before {
  content: "";
  /* min-width: ?; */
}

Если для элемента определено display co значениями block, inline, inline-block, table или table-*, то вычисляемое значение min-width его дочерних элементов равно 0. В других случаях - auto. Правильный ответ: 0 и auto.