CSS isn't magic

Ловите https://habr.com/ru/companies/ruvds/articles/849114/

Что я советую посмотреть из моего контента: 1. HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи Рассказываю об ошибках в верстке, которые влияют на цифровую доступность. 2. Готовимся к вопросам по вёрстке на интервью Frontend-разработчика Отвечаю на самые популярные вопросы о CSS на интервью фронтендера. 3. Неизвестно полезный CSS Делюсь малоизвестными свойствами и нюансами работы. 4. Магия CSS на практике: советы по вёрстке от гика Мои любые подходы и приемы при работе с CSS. 5. Чёрт тебя возьми, CSS Объясняю сложные и неочевидные моменты работы CSS. 6. You Should Know CSS — the list of questions to level up your CSS skill Мой список вопросов, позволяющий найти слабые места в знаниях. 7. Живые шпаргалки для свойств display и position Шпаргалки на Codepen, показывающие множество неизвестных нюансов свойств. Можно потыкать и изучить. 8. Код компонента Timeline Как написать CSS для компонента? На этот вопрос можно найти ответ в этой демке. Правда, придется покапаться в коде. 9. Анимашки и CSS творчество UI Анимации, CSS арт и готовые визуальные решения. P.S. Продолжать создавать контент? 🔥 — Да 👎 — Иди работай уже, код пиши

Каким будет расстояние между бордером родителя и его дочерним элементом?

.parent {
  box-sizing: border-box;
  width: 1000px;
  padding: 20px;
  border: 1px solid;
}

.parent::before {
  content: "";
  position: absolute;
  /* оставшиеся CSS */
}

Браузеры сохраняют начальную позицию элемента после применения position: absolute, если мы не определяем координаты с помощью свойств top, right, bottom, left или inset-*. Итак, правильный ответ — 20px.

Вы можете поддержать мою работу, купив архив со всеми постами. Всего их 50 штук. Дополнительно у вас будет ранний доступ к новым. Если хотите помочь, напишите мне @melnik909

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

.parent {
  display: flex;
}
.parent::before {
  content: "";
  position: absolute;
  width: 1rem;
  flex-basis: 2rem;
}

flex-basis перестает работать после применения к элементу position: absolute или fixed, поскольку он находится вне flex контекста. Правильный ответ — 1rem

Мощь CSS наследования при определении line-height Кто-то сделал так

ul {
  line-height: 1.5;
}

p {
  line-height: 1.5;
}

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

body {
  line-height: 1.5;
}

Я забыл, что могу использовать наследование и добавлять line-height для <body> вместо того, чтобы отдельно добавлять ее для <p>, <h*>, <ul>.

Каким будет вычисленное значение свойства display в первом и втором случае?

.parent::before {
  content: "";
  display: inline; /* #1 */
  position: relative;
}
.parent::before {
  content: "";
  display: inline; /* #2 */
  position: absolute;
}

Правильный ответ - inline и block. position: absolute или position: fixed изменяет значение свойства display. Значения inline, inline-block меняется на block, inline-flex -> flex, inline-grid -> grid, inline-table -> table.

Пришел я к вам с рекламой... У меня есть менторство. Со мной можно развеять синдром самозванца, поняв, что знаете CSS на хорошем уровне. Подготовиться к вопросам по верстке на собеседовании. Увидеть что-то новое для себя. Пишите мне @melnik909. Расскажу детали P.S. Ставим 👎 , если мне нужно идти работать, код писать

Оставьте свойство content пустым, чтобы избежать неожиданного озвучивания Кто-то сделал так

.parent::before {
  content: "Тут текст";
}

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

.parent::before {
  content: "";
}

Обратите внимание, скринридеры озвучивают текст внутри свойства content. Это может привести к неожиданному озвучиванию. Вот почему мы не должны использовать CSS для добавления текста на веб-страницу.

Где расположен псевдо-элемент ::before?

.parent {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}
.parent::before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
}

По оси X псевдо-элемент ::before будет в центре, потому что применен place-items: center. По оси Y прижат к верхней границе родителя, потому что свойство top имеет больший приоритет, чем place-items.

Пришло время использовать новый способ центрирования элементов с position: absolute Кто-то сделал так

.parent {
  position: relative;
}
.parent::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.parent {
  display: grid;
  place-items: center;
}
.parent::before {
  content: "";
  position: absolute;
}

Все еще используете сниппет для центрального элемента с position: absolute с использованием transform(-50%, -50%)? Пришло время использовать новую альтернативу! Познакомьтесь с place-items: center.

display: block не нужен для ::before или ::after внутри элемента с display: grid Кто-то сделал так

.parent {
  display: grid /* или inline-grid */
}
.parent::before {
  content: "";
  display: block;
}

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

.parent {
  display: grid /* или inline-grid */
}
.parent::before {
  content: "";
}

Вы привыкли определять display: block для ::before или ::after? Друзья, нет необходимости делать так, если вы определяете display: grid или display: inline-grid для родительского элемента. Браузеры делают это сами.

Определяйте только то, что вам нужно определить Кто-то сделал так

.hero {
  background: #e1bfe9;
  /*
    background-color: #e1bfe9;
    background-image: initial
    background-size: initial
    и оставшиеся background-* свойства
  */
}

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

.hero {
  background-color: #e1bfe9;
}

Есть отличный способ написать масштабируемый CSS. Не определяйте то, что не нужно. Если вам нужно определить цвет фона, сделайте это с помощью background-color, а не с помощью background.

Незаметные проблемы от counter() Кто-то сделал так

.section {
  counter-increment: section-counter;
}
.section__heading::before {
  content: "0" counter(section-counter) ".";
  color: #3861cb;
  font-size: 2rem;
}

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

/* 
<h3 class="section__heading">
  <span class="section__step" aria-hidden="true">01.</span>
  О нас
</h3>
*/

.section__step {
  color: #3861cb;
  font-size: 2rem;
}

Внимание! Пользователи скринридера услышат цифры, которые вы добавляете с помощью counter(). Вы думаете, они полезны? Нет. Они только засоряют озвучку.

У меня подготовлено всего 49 постов. Опубликованы 20. А хотите получить оставшиеся? А еще ранний доступ к новым? Напишите мне @melnik909. Продам вам архив. Мне же надо зарабатывать...

Как написать CSS в зависимости от количества дочерних элементов Кто-то сделал так

.uia-control {
  display: inline-flex;
  gap: .5rem;
  /* оставшиеся CSS */
}

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

.uia-control {
  display: inline-flex;
  /* оставшиеся CSS */
}
.uia-control:has(> :nth-child(2)) {
  gap: .5rem;
}

Мне всегда приходилось определять gap. Даже если у элемента только один дочерний элемент. Хотя... Мы можем избежать этого с помощью :has()! Например, я сделал так, что gap применяется, если у uia-control есть минимум 2 дочерних элемента.

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

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

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

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

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

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

Пишем код, реагирующий на изменение направления текста Кто-то сделал так

.container {
  box-sizing: border-box;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

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

.container {
  box-sizing: border-box;
  max-inline-size: 75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

Круто же, когда код подстраивается под желания пользователя. Сейчас уже можно учитывать направление текста. Логические свойства это сделают!

Это отрывок из гайда для Влада. Он изучает ARIA-атрибуты, а я помогаю. Если хотите, чтобы я помог вам в изучении CSS и цифровой доступности, пишите мне @melnik909 . Работаю с разработчиками, дизайнерами, проектировщиками, со всеми! P.S. Жду ваших реакций. 🔥 — нравится, 👎 — перестать рекламировать.