Селекторы, блочная модель и позиционирование

Самые важные темы CSS: как точно выбрать элемент, как устроен «ящик» и как управлять положением блоков.

Селекторы

Селектор решает, к каким элементам применить правила. Основные виды:

p              /* тег */
.card          /* класс */
#header        /* id */
nav a          /* потомок (внутри nav) */
ul > li        /* прямой ребёнок */
h1, h2, h3     /* группа */
a:hover        /* псевдокласс состояния */
input:focus    /* элемент в фокусе */
li:nth-child(2)/* каждый второй элемент */

Блочная модель (box model)

Каждый элемент — это «ящик» с четырьмя слоями. Внутрь наружу:

• content — контент;
• padding — внутренний отступ (фон тоже красится);
• border — граница;
• margin — внешний отступ от соседей.

.card {
  width: 300px;
  padding: 20px;       /* внутри */
  border: 1px solid #334155;
  margin: 16px auto;   /* снаружи, по центру */
  box-sizing: border-box; /* важный трюк */
}

Типы отображения: display

Позиционирование: position

Атрибут управляет, как элемент размещается относительно чего-либо.

.static   { position:  static; }   /* по умолчанию */
.relative { position: relative; top: 10px; } /* сдвиг от своего места */
.absolute { position: absolute; top: 0; right: 0; } /* относительно ближайшего positioned родителя */
.fixed    { position: fixed; bottom: 20px; }  /* относительно окна браузера */
.sticky   { position: sticky; top: 0; }      /* прилипает при прокрутке */

Фоновые эффекты

.hero {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
  border-radius: 16px;
  padding: 40px;
}

Специфичность селекторов

Когда несколько правил претендуют на одно свойство, побеждает самое «сильное» по специфичности. Сила считается как баллы:

• id — 1 0 0 (счётчик идентификаторов);
• класс, атрибут, псевдокласс — 0 1 0;
• тег и псевдоэлемент — 0 0 1.

#btn              /* 100 — сильнейший */
.btn              /* 010 */
button.link      /* 011 — тег + класс */
button            /* 001 — слабейший */

Псевдоэлементы ::before и ::after

Псевдоэлементы добавляют на страницу «невидимые» сущности, видимые только в CSS. Идеальны для декоративных деталей без лишнего HTML:

.badge::after {
  content: " ⭐";
  color: #fbbf24;
}

.card::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 99px;
  margin-bottom: 12px;
}

box-shadow и border-radius

Тень задаётся сдвигом, размытием и растяжением, а скругление может быть разным для каждого угла:

.card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  border-radius: 12px 12px 0 0;   /* верх круглый, низ квадратный */
  border-radius: 50%;             /* из квадрата — круг */
}

overflow и видимость

Что делать, когда контент не помещается в блок? Управляем свойством overflow:

.scroll   { overflow: auto; }      /* появится полоса прокрутки */
.hidden   { overflow: hidden; }    /* всё лишнее обрежется */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;        /* многоточие в конце */
  white-space: nowrap;            /* без переносов */
}

z-index и контексты наложения

Свойство z-index поднимает элементы над соседями — но только среди позиционированных (relative, absolute, fixed и sticky):

.modal  { position: fixed; z-index: 100; }
.toast  { position: fixed; z-index: 200; }  /* выше модалки */

Плавные переходы: transition

Без transition изменения свойств происходят мгновенно и «дёрганно». Переходы делают их плавными:

.btn {
  background: #1e293b;
  transition: background-color .3s ease, transform .3s ease;
}

.btn:hover {
  background-color: #38bdf8;
  transform: translateY(-2px);
}

transform: translate, rotate, scale

Свойство смещает, поворачивает и масштабирует элемент — все соседи остаются на месте, что дёшево для браузера:

.moving   { transform: translate(20px, 10px); }   /* сдвиг */
.rotated  { transform: rotate(45deg); }           /* поворот */
.zoomed   { transform: scale(1.2); }              /* масштаб */
.skewed   { transform: skew(10deg); }            /* наклон */

/* комбинация: тогда ставьте все через пробел */
.combo    { transform: translate(10px) rotate(15deg) scale(1.1); }

margin и padding: хитрости

Отрицательный margin «выедает» пространство у соседей, а margin: auto центрирует горизонтально при ограниченной ширине:

.overlap { margin-top: -20px; }       /* натянуть блок на предыдущий */
.center  { margin: 0 auto; width: 600px; }  /* блок по центру */
.tight   { padding: 20px; }            /* сразу все стороны */

/* padding сокращённо: сверху правый низу левый */
.box     { padding: 10px 20px 30px 40px; }

Скрыть элемент: display vs visibility vs opacity

Скрыть блок можно тремя способами — у каждого своё поведение:

Курсор и выделение: cursor, user-select

Курсор подсказывает, что элемент интерактивен, а выделение можно запрещать из интерфейсных соображений:

.clickable { cursor: pointer; }
.drag      { cursor: grab; }
.blocked  { cursor: not-allowed; }
.no-select { user-select: none; }
.text      { cursor: text; }

Универсальный селектор и «сброс»

Звёздочка берёт все элементы сразу. Классика — выравнивание «коробки»:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

min-width и max-width

Ограничить диапазон ширины блока:

.container {
  max-width: 1080px;   /* не шире */
  margin: 0 auto;
}

.sidebar {
  min-width: 180px;   /* не уже */
}

min-height и растяжение

Блок гарантированно занимает минимум высоты, но может расти:

.hero { min-height: 60vh; }

.card { min-height: 220px; }

Вертикальное центрирование текста

Старый трюк: высота строки = высоте блока центрирует одну строку:

.pill {
  height: 40px;
  line-height: 40px;
  text-align: center;
}

Перенос длинных слов

Домены и URL не умещаются в узкие блоки. Скажите им переноситься:

.url {
  word-break: break-all;
  overflow-wrap: anywhere;   /* перенос по допустимым точкам */
}

Одна строка с многоточием

Рецепт из трёх строк — «Текст, который не помещается…»:

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Бейджи на отрицательных margin

Отрицательный margin «выедает» пространство — так бейдж наезжает на край карточки:

.card { position: relative; padding-top: 30px; }

.badge {
  position: absolute;
  top: -12px;
  left: 16px;
  background: #38bdf8;
  border-radius: 99px;
}

object-fit для картинок

Вписать изображение в рамку блока, не искажая пропорции:

.thumb {
  width: 200px;
  height: 150px;
  object-fit: cover;    /* заполнить, обрезав лишнее */
  object-fit: contain;  /* целиком внутри, с полями */
}

aspect-ratio: пропорции блоков

Задать соотношение сторон без знания конкретной высоты:

.video-frame {
  aspect-ratio: 16 / 9;
}

.avatar {
  aspect-ratio: 1;  /* квадрат */
}

outline против border

«Обводка» не влияет на размеры и не «схлопывается», а border вёрстку двигает:

button:focus {
  outline: 3px solid #38bdf8;
  outline-offset: 2px;
}

filter: перекрасить мир

Фильтры применяются к картинкам и фонам без фотошопа:

.bw        { filter: grayscale(100%); }
.bright    { filter: brightness(1.15); }
.blur-in   { filter: blur(4px); }
.sepia     { filter: sepia(0.6); }

Загрузка CSS и порядок

Файлы стилей подключаются в <head>; тот, что объявлен позже, перекрывает раннего при прочих равных:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">  /* выше в приоритете */

Иерархия: оформление через класс

Стиль по тегу быстро «перерастает». Для переиспользуемых деталей правильнее классы:

<button class="btn">Сохранить</button>
<a class="btn" href="/profile">Профиль</a>

.btn {
  padding: 10px 18px;
  border-radius: 8px;
  background: #1e293b;
}

pointer-events: доступность кликов

Клики и наведение можно «прокалывать» сквозь декоративный слой:

.overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;   /* клики уходят вниз */
}

Тренировка

1. Сделайте карточку (класс .card) с полями, границей, скруглением и тенью.
2. Поместите бейдж 😎 поверх угла карточки через position: absolute.
3. Сделайте пункт меню :hover с изменением фона и подчёркиванием.
4. Закрепите шапку «липкой» через position: sticky; top: 0.

Специфичность: очки селектора

Специфичность — «вес» селектора: id бьёт класс, класс бьёт тег. Повторяющийся класс «усиливает». Считайте очки: (id=100, класс=10, тег=1) — победителю передаётся свойство.

.card h3 { color: red; }     /* 10+1=11 */
h3.title { color: blue; }   /* 1+10=11 — тоже */
#head { color: green; }     /* 100 — побеждает */

Потомок и «прямой» ребёнок: пробел и >

«Пробел» — любой потомок внутри, «>» — только прямой ребёнок. .menu > a не заденет a, если оно спрятано глубже.

.card a { color: #333; }        /* любая ссылка внутри */
.menu > li > a { color: #111; }  /* только первого уровня */

Сосед справа: комбинатор «+»

A + B выбирает B, идущий сразу за A как брат. Классика: «первый абзац после заголовка» или «поле после подписи».

h2 + p { margin-top: 0; }
h3 + .lead { color: #555; }

Общий сосед: «~»

A ~ B — все B, идущие после A среди соседей. Работает там, где «любой следующий элемент ряда», независимо от того, что между ними.

input:checked ~ .status { color: green; }

Селектор атрибута: точный и «начинается с»

[type="email"] — по значению, [href^="https"] — «начинается с», [href$=".pdf"] — «заканчивается на», [alt*="рис"] — «содержит».

[type="password"] { border-color: #f59e0b; }
a[href$=".pdf"]::after { content: " 📄"; }

Элемент с двумя классами: цепочка

.btn.primary — элемент, у которого ДВА класса одновременно. Удобно для «основа + модификатор»: один класс базы, второй — варианта.

.btn { padding: 10px 16px; border-radius: 8px; }
.btn.primary { background: #38bdf8; color: #fff; }
.btn.ghost { background: transparent; border: 1px solid #38bdf8; }

Каждый, кроме: :not()

:not(.x) — «все, кроме тех, у кого класс .x». Полезно убрать отступ у «последнего», не трогая разметку.

.list > *:not(:last-child) { margin-bottom: 12px; }

Псевдокласс фокуса: focus-visible

:focus-visible включает стили фокуса только когда фокус «видимый» — с клавиатуры. Мышь-кликам он не мешает, но навигация стрелками остаётся заметной.

a:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

Не сгущайте: селектор по глубине

Вложенный селектор глубиной 4–5 — «штрих-код», а не правило. Он цепляется за случайные структуры и ломается при малейшей правке разметки. Правило: держите селекторы «по одному-двум уровням».

/* хрупко */
.sidebar ul li a.promo { ... }
/* надёжно */
.promo { ... }

Как читать сложный селектор

Читайте справа налево: что выбираем, из какого окружения, с каким условием. .card > h3.sale: «заголовок с классом sale, прямой ребёнок карточки».

.card > h3.sale { color: #e11d48; }
/* цепь: [card] → прямо → [h3 со sale] */

Схлопывание margin: вертикальная «склейка»

Вертикальные margin двух соседних блоков не складываются, а «сливаются» в один — больший. Это особенность «нормального потока»: проявляется только по вертикали.

.a { margin-bottom: 20px; }
.b { margin-top: 30px; }
/* между ними 30px, а не 50px */

Отрицательный margin: сместить вручную

Отрицательный margin «вытягивает» блок против потока: уводит левее, выше, сближает с началом. Приём «бейджа на краю карточки» строится именно на нём.

.badge { margin-top: -12px; margin-left: auto; }

box-sizing: border-box — «правильная» ширина

По умолчанию width считает ТОЛЬКО контент, а padding и border «раздувают» коробку. box-sizing: border-box включает их в ширину — блок не «выходит за» заданное.

*, *::before, *::after {
  box-sizing: border-box;
}

Проценты ширины: всегда от родителя

Ширина в % считается от родителя: width: 50% — половина родительского блока. Проценты удобны для «этажей» и колонок, но не наследуются как размеры текста.

.half { width: 50%; }
.third { width: calc(33.33% - 16px); }

Высота-авто против min-height

Высота по умолчанию (auto) растёт с контентом. Жёсткая height + контент повыше = текст вылезает. min-height задаёт «пол», позволяя расти вверх.

.panel { min-height: 120px; }
/* меньше 120px не станет, больше — пожалуйста */

Overflow: clip, hidden, scroll

hidden прячет лишнее и запрещает скролл, scroll — всегда показывает полосу, clip — обрезает без способности «удержать» прокрутку. Для картинок в рамке чаще всего нужно hidden.

.frame {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

Вертикальный ритм: единые отступы

Сайт «дышит», когда вертикальные отступы одинаковые: 8/16/24px — «лестница». Держите кратность: отступ в один и тот же «шаг» от блока к блоку.

.block { margin-bottom: 24px; }
.block--half { margin-bottom: 12px; }

Картинка «во весь блок»: object-fit: cover

object-fit: cover заполняет коробку картинкой без искажения — как «обложка»: что не влезло, обрезается. Без него картинка тянется «по коробке» и кривится.

.thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

Полупрозрачная плашка над фото

Текст на фото «душится» пёстрым фоном. Решение: плашка rgba под текстом (или поверх фото lighter rgba-фоном) без opacity, чтобы текст остался чётким.

.hero-text {
  background: rgba(255,255,255,0.7);
  padding: 8px 16px;
  border-radius: 8px;
}

Диапазон ширины: min/max-width

max-width: 600px — «не шире», min-width: 200px — «не уже», width: 100%; max-width: 960px — «весь экран, но не больше полосы». Это «подушки безопасности» для адаптива.

.content {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

position: relative — «подвинуть вручную»

relative не выводит блок из потока, но разрешает сдвиг относительно своего места: top/right/bottom/left. Классика: «чуть поднять кнопку», «наложить бейдж с краю».

.shifted { position: relative; top: 4px; left: 8px; }

position: absolute — уход из потока

absolute вынимает блок из потока («остальные его не замечают») и позиционирует относительно ближайшего «позиционированного» предка.

.btn { position: absolute; top: 0; right: 0; }

Якорь: absolute внутри relative

Ставим на «карточку» position: relative, а на «бейдж» absolute — бейдж теперь считается от карточки, а не от документа. Это «магнит» в 90% макетов.

.card { position: relative; }
.badge { position: absolute; top: 8px; right: 8px; }

position: fixed — плавающая панель

fixed «приклеивает» элемент к окну: меню сверху, кнопка «вверх», чат в углу. Он не двигается при прокрутке страницы.

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
}

position: sticky — прилипающая шапка

sticky — гибрид: блок «обычный», но при прокрутке «прилипает» к верху, пока не закончится область родителя. Удобно для закрепить «заголовки разделов» и «мини-меню».

.section h2 { position: sticky; top: 0; background: #fff; }

z-index: слои и порядок

Наложение решается z-index — числом «высоты» среди позиционированных: больше число — выше слой. Работает только для элементов с установленным position (или flex/grid-детей).

.overlay { position: fixed; z-index: 100; }
.modal { position: fixed; z-index: 200; }

Контексты наложения: почему z-index «немой»

Иногда z-index «не работает»: элемент внутри «контекста наложения» (transform, opacity, position+порядок) сравнивается только с соседями того же контекста. Проверяйте «ближайший позиционированный предок».

float: legacy, но живой

Когда-то float верстали колонки; теперь для раскладки есть flex/grid. Но float остаётся для реальной задачи: «обтекание» — картинка слева, текст течёт вокруг. Помните про сброс (clearfix) — и не верстайте им макеты.

img.left { float: left; margin-right: 16px; }

Итоги урока 5: чек-лист раскладки

Вы собрали «хребет» вёрстки: специфичность и комбинаторы, box-sizing и поля, overflow и картинки, относительное/абсолютное/фиксированное/липкое позиционирование, слои и обтекание. Дальше — флекс и грид: время строить настоящие сетки без «колёс на ровном полу».

Селектор типа: базовый инструмент

Селектор по тегу цепляет «все такие элементы»: p — все абзацы, a — все ссылки, h2 — все заголовки. Глобально и «безлико», но основа каскада: начинают «уровень по типу».

p { margin: 0 0 1em; }

Класс против типа: выбираем удобство

Класс .menu — «метка» для группы: «переиспользуем», «переопределяем». Тип p — «большой» набор. Больше классов — тоньше контроль; больше типов — «бесплатно» широко. Правило: семантику «своего имени» даёт класс.

Селектор потомков: глубина пары

«p в .article» пишется .article p — любой p внутри (не только прямой ребёнок). Глубина «пара слов» приучает к «контекстному» стилю без лишних id.

.article p {
  text-align: justify;
}

Соседний и «братский»: «+» и «~»

«+» — «вплотную следующий»: h2 + p — абзац сразу после заголовка. «~» — «брат позже»: распространяется дальше. Аккуратно управлять «следующим шагом» — сильный селектор интерфейсов.

h2 + p { margin-top: 0; }

Универсальный селектор: * со здравым смыслом

* цепляет «всё». Полезно для «обнуления» (margin:0) и «трюков», но «всем» легко перебить конкретику. Применяют умеренно: box-sizing: border-box глобально — прекрасное место «звёздочки».

* { box-sizing: border-box; }

Атрибутные селекторы: [type] и друзья

Селекторы по атрибуту: [disabled], [href^="https"], [lang|="en"]. Цепляются «по признаку», а не по классу — удобно для форм и ссылок, где «класс не добавили».

input[disabled] { opacity: 0.6; }

Комбинирование: класс плюс класс

.btn.active — элемент с двумя классами сразу: «кнопка, и в состоянии active». Двойная «метка» даёт верные «срезы»: base-стили в .btn, состояния — отдельно.

.btn { background: #eee; }
.btn.active { background: #39c; }

Специфичность: кто «перевешивает»

Три «весá»: идентификаторы (id) > классы/атрибуты/псевдоклассы > типы/псевдоэлементы. Ид «тяжелее», класс «жирнее» типа. Меньше id — проще «переигрывать» стили потом.

#top p   // 1-0-1
.clear p // 0-1-1

Наследование: какие свойства «текут»

color, font-*, text-align «текут» от родителя к потомку; margin, padding, border, width — нет. «Наследуемое» берёт «по умолчанию», «ненаследуемое» — «складывает» себя. Инструмент: свойство inherit.

a { color: inherit; }

Каскад: финальный «победитель»

Каскад — порядок «суддей»: источник (стили/!important), специфичность, порядок в файлах. Победитель — «сильнейшая» комбинация. Победил поздний похожий селектор — «перепишите источник» и «источник» выиграет.

display: блоки и строки заново

display решает «природу» элемента: block — «вся строка», inline — «течёт в тексте», inline-block — «в строке, но с размерами». Изменили display — изменили «поведение», не «тег».

span.chip { display: inline-block; }

display: none против visibility

display: none — элемент «исчезает из потока» (не занимает места). visibility: hidden — «невидно, но место есть». Первое — «скрыли блок», второе — «отвернулись на месте». Тонкость: событийность тоже «скрыта» при none.

Ширина блока: auto и вся механика

Ширина по умолчанию auto — «заполни родителя, минус поля и рамки». «Точно заданная» width отключает «эластичность». Отсюда правило: контейнеру — ширину, тексту — auto.

Высота: от содержимого

Высоту по умолчанию задаёт контент: больше текста — больше блок. Фиксированная height «обрежет» или «оставит пусто». Иметь «минимум» (min-height) — честнее, чем «жёсткая» высота.

.banner { min-height: 200px; }

content-box против border-box

box-sizing решает, «куда» входит padding и border: content-box — «вовне ширины width», border-box — «внутри». Полезно запомнить: border-box «легче» в раскладке карточек.

* { box-sizing: border-box; }

Поля: четыре стороны margin

margin — «внешнее» пространство блока. Свойства: margin-top/right/bottom/left или «кратка» (1–4 значения). «Сутки»: auto центрирует по горизонтали. «Стуки» вниз — и «кровать» блоков «уходят».

.card { margin: 10px 20px; }
// верх/низ 10px, право/лево 20px

Начинка: padding внутри рамки

padding — «внутренний воздух» между содержимым и рамкой/краем. Больше — «нежная кнопка», меньше — «плотный бейдж». Не забывайте: щедрый padding делает кнопку «кликабельной».

.btn { padding: 10px 18px; }

Рамка: border с тремя «слоями»

border лепится из трех: толщина (width), стиль (style), цвет (color). Без стиля — рамки нет. border: 1px solid #ccc — «быстрый» синтаксис-кратка.

div { border: 2px dashed #999; }

Склеивающиеся поля: margin-слияние

Вертикальные margin соседних блоков «схлопываются» в один (берётся больший). Разделить: задать padding родителю или использовать gap у флекс-контейнера. «Схлоп» — старая «механика» потока.

Минимум/максимум: min-width и max-width

min-width — «не меньше», max-width — «не больше». Пара «упирается» в эластичность: карточка «от»/«до». max-width: 720px — «сонет» для статьи; min-width на кнопках — «тач-безопасность».

article { max-width: 720px; }

Авто-центрирование по горизонтали: margin auto

Блочному элементу с заданной шириной margin: 0 auto центрирует его «в родителе». Без ширины — «безсмысленно», элемент и так «весь ряд». Приём — «классика центровки блока».

.intro {
  max-width: 600px;
  margin: 0 auto;
}

Скругление углов: border-radius

border-radius закругляет углы: одно значение — все четыре, «8px 4px 12px» — по очереди. «Круг» — 50%. Скругление «умягчает» квадраты и делает «пилюли»-кнопки.

.avatar { border-radius: 50%; }

Тень блока: базовый box-shadow

box-shadow: сдвиг-x сдвиг-y размытие цвет — «отброшенная» тень. Умеренное размытие придаёт «объём» карточке; слишком много — «грязь». Это иногда «слой» страницы, а не разноцветие фон.

.card { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

Внутренняя тень: inset-вариант

inset «вдавливает» тень внутрь: карточка «утоплена», а не «парит». Эффект «углубления» для полей и «lowfi»-дизайн. Снаружи — «подъём», внутри — «пустота».

input { box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

Фон блока: color и position

background-color красит, background-image «кладёт» картинку; background-position ставит «где». Компания «цвет + изображение» — страховка на время загрузки файла.

.hero {
  background: #f4f4f4 url("hero.jpg") center no-repeat;
}

Градиент фона: linear-gradient

linear-gradient (направление, цвета) — плавный переход в фоне. direction: to right, 45deg...; стопы останавливают цвет. «Нежно» смотрится заменителем сплошной «заливки».

body { background: linear-gradient(180deg, #fff, #eef); }

Прозрачность: opacity элемента

opacity: 0..1 делает «полу-прозрачным» весь элемент (и содержимое). Сравните: сплошной фон с rgba-alpha — прозрачным «только фон». Выбор: «весь блэк» или «фон-поле».

.overlay { opacity: 0.7; }

box-sizing: глобальное правило

border-box «глобально» — практика большинства современных проектов: размеры считаются «с рамкой». Проголосовать раз, увидеть «одинаковость». Спор наследования — «локального» проекта не будет.

html { box-sizing: border-box; }

Кратка margin: три и четыре значения

margin: 10px 20px 15px — «верх, бока, низ»; margin: 10px 5px 15px 2px — «по часовой» (верх, право, низ, лево). Меньше строк — яснее правило; привыкайте к «котроллю по кругу».

Особые «авто» значения: inherit, initial, unset

inherit — «унаследуй родителя», initial — «дефолт спецификации», unset — «inherit, если наследуемое, иначе initial». Три «ключа» — точная настройка «из того, что есть».

a { color: inherit; }

Псевдокласс :hover: «под курсором»

:hover стилизует элемент, когда курсор над ним. «Ожидание»: кнопка темнеет, ссылка приобретает цвет, карточка приподнимается. Псевдокласс «живящий» — но «не вся» интеракция: у тача hover «мутить» не стоит.

a:hover { color: #39c; }

Состояния ссылок: :visited и их порядок

Ссылки в «состояниях»: :link, :visited, :hover, :active. «Вести» порядок «LVHA» (link-visited-hover-active), иначе «перезаписи» повредят. Примерно «дефолт браузера» у ссылок — это «про script».

a:hover  { color: #06c; }
a:visited { color: #639; }

Псевдокласс :focus: «виден» клавиатуре

:focus цепляет элемент, получивший фокус (Tab, клик в поле). Уважайте :focus: outline — «извенный» индикатор доступности. Убрали «обводку» — дайте «другое» «своё» указание фокуса.

input:focus { border-color: #39c; }

Первая строка: ::first-line

::first-line стилизует первую строку абзаца: «каплевидное» начало, «иной цвет». «Разрыв строки» зависит от ширины — «первая строка» «живая» у блока. Скромный псевдоэлемент журнальной «виньетки».

p::first-line { font-weight: 600; }

Первая буква: ::first-letter

::first-letter — «буквица»: первая буква блока увеличивается, красится. Изящная «кружка» для первой статьи; старт «буквы-декорации» в CSS-типографике.

article p::first-letter {
  font-size: 2em;
  float: left;
}

Маркеры списка: list-style

list-style управляет маркерами: type (disc, square, decimal...), position (inside/outside), и image. Убрать маркеры: list-style: none. Списки «по-умолчанию» — это «набор маркеров» из коробки.

ul { list-style: square inside; }

Маркер-картинка: list-style-image

list-style-image заменяет «шарик» на иконку: url("check.png"). Размер «не прыгает» за текстом, но «пиксель» остаётся. Современная замена — фон/::marker и «эмодзи» через содержание.

ul { list-style-image: url("check.svg"); }

Позиция маркера: inside и outside

outside — маркер «за отступом текста» (классика), inside — «в строке с текстом». Внешний маркер «дышит»; внутренний «компактен» для узких просторов. Меняйте в зависимости от «ширины перечисления».

Псевдокласс :not(): «всё, кроме»

:not() исключает из выбора: li:not(.active) — «все пункты, кроме активного». Логика «исключения» читается ясно; «минус» точнее «плюсов» перечислений.

li:not(.active) { opacity: 0.6; }

:nth-child: «через один»

:nth-child(2n) берёт «чётные»; nth-child(odd/even), nth-of-type — по типу. Формулы «2n+1» лепят «шахматку», «животных» по паттернам. «Позиция ученика» решает, что «интересно» стилизовать.

tr:nth-child(odd) { background: #fafafa; }

Практика: карточка из «блоков»

Соберите карточку: рамка, скругление, внутренний padding, тень, «под-заголовок» мельче. Фон, отступы, border-radius — «вся блочная модель» в одном маленьком блоке. Заголовок-бонус: hover поднимает тень.

.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

Практика: меню селекторами

Навигация: ul>li с классами; «разделители» между пунктами — «соседей-стиль» ли+li; активный пункт — .active с «другим» цветом. Селекторы «потомков» и «соседей» тут «в прозе».

.nav li + li { border-left: 1px solid #ccc; }

Практика: состояния ссылки в комплекте

Прогоните ссылку по состояниям: обычная, hover, visited, активная — каждый «по-своему» (цвет, underline, inset). Проверьте «LVHA»-порядок и «фокус-обводку» от Tab. Законченный «цикл» ссылки готов.

Практика: сетка из div-«слоёв»

Четыре «слоя»-строки: шапка, навигация, основное с «боковым» блоком, подвал. Каждый — свой блочный стиль (фон, padding, margin). «Слой-собрать» — это «поток» блочных элементов, оживающий в «стопку».

Специфичность на практике: где «каскад» спасает

Реальный спор: «все карточки одни», а одна «акцентная». Без id: класс «обычный», класс «особый» — и каскад «умиротворил». Увидели «заплутавший» стиль — не «дожимайте» id, «уточните класс».

Ошибки селекторов: три «частых»

1) лишний «обобщающий» селектор-тип ловит «не тех»; 2) «вечные» id в «перекрытии»; 3) «забытые» состояния (:focus, :visited). Три «типика», и каждый — «диагноз» текущей иерархии.

Чек-лист блочной модели

Проверьте: box-sizing согласован; margin-«слияния» учтены; рамки «не съедают» размеры; центрирование — auto/флекс, не «магия»; границы и тени «не перегружены». Прошли — «блоковое зрение» окрепло.

Инспектор: смотрим поля и рамки

В DevTools «Count»-обе «расцветает» блочная модель: синие поля, оранжевые padding, рамки, края. Кликом «замораживаете» любую карточку и видите «почему». Инспектор — «рентген» блочной модели.

Реальность: как браузер «думает» о CSS

Браузер «спрашивает» у каждого элемента: «к какому селектору подхожу?» — и строит «вычисленные» стили. Понимание «вычисленного» (Computed) — лучшее лекарство от «а оно перекрыло».

Итоги урока 5: CSS-фундамент

Селекторы, каскад и специфичность, блочная модель, фон и рамки, «состояния» и псевдоклассы. Фундамент «правит» всем остальным; «плохие» основы «рыхлят» любой «флекс». Закрепили — переходим к float/flex/grid уверенно.

Селекторы атрибутов: точный прицел

Атрибутные селекторы «достают» по атрибуту: [type], [href^="https"], [title~="css"]. Модификаторы: ^= «начинается», $= «кончается», *= «содержит». Точность «по свойствам» — «крепкая» альтернатива классам.

input[type="submit"] { background: green; }

Соседский селектор: плюс после

h2 + p — «первый» абзац сразу «за» заголовком. «Близость» «по коду» — «по соседству» визуально. Применение: «отбивка» под абзацами заголовков. Логичный «соседский» отбор.

Общий брат: тильда среди siblings

h2 ~ section — «все» сёстры «после» заголовка. «Строка» и «строка» по общему родителю: «после» — обязательно. Отличается от + «не только первый». Для «серии» элементов «в хвосте».

Ребёнок напрямую: знак >

.menu > li — «прямые» дети (не внуки). Специфичнее пробела, «чище» намерение. Защита от «глубоких» сюрпризов вложенности. «Поле» ясности: «только один уровень».

Отрицание: селектор :not

:not(селектор) «исключает» из выбора: p:not(.note) — «все кроме». Инверсия «для» «одного правила» — «скромная», «читаемая». «Не объект» «без :not» «не писать» — «память» CSS-логики.

Смягчение специфичности: :is и :where

:is(a, &:hover) «выбирает» любого из списка — специфичность «максимального». :where(a, aa) — «нулевую» специфичность. «Множественный» выбор — «без» раздувания «веса». «Проще» «чтение» сложных списков.

Будущее: селектор :has

:has() «спрашивает наличие» у потомка: .card:has(img) — «карточки с картинкой». «Родитель» «реагирует» на «дитя» — «перевёрнутый» стиль. Поддержка современная — применима «аккуратно».

Дочерние мимо: как не «раздувать» специфичность

Глубокая «лестница» селекторов (div.menu ul li a) — «хрупкая» и «тяжёлая». Классы «на месте» — «плоские» и «серьёзные». «Правило простоты»: специфичность — «как можно ниже». «Легко» «переопределять» «логично».

Селектор строки: ::selection

Псевдоэлемент ::selection красит «выделенный» текст: фон и цвет. «Брендированный» «маркер» пользователя. «Маленький», но «заметный» штрих «индивидуальности» страницы.

Числа в селекторах: nth-child и друзья

:nth-child(2), :nth-child(odd/even), :nth-child(3n) — «по позиции» среди братьев. «Зебра» строк таблиц, «смещённые» карточки. nth-of-type — «в ряд народа» своего тега. «Структурные» селекторы — «точность» без классов.

Специфичность как математика

«Счет» весов: (a, b, c) — id, классы/атрибуты/псевдоклассы, теги/псевдоэлементы. Сравните «кортежи» слева направо. 1 id «бьет» любые классы. «Арифметика» каскада — «ответ» на «почему не работает».

Слои каскада: @layer

@layer «организует» css по «слоям»: base, components, utilities. Порядок слоёв приоритетнее порядка файлов. «Чистый» переопределизм без «расползания» войны. Современный «порядок» в командах.

@layer base, theme;

Почему !important — последний аргумент

!important «отменяет» естественный каскад: «невозможно» перебить «штанной» специфичностью. Либо «структура» «сломанная», либо «война» с ним. «Разбор» причины — «лучше», чем «флажок». В производстве — «строго дозировать».

Переменные и каскад: живой узел

Пользовательские свойства (--x) наследуются и «переопределяются» каскадом. «Узел» темы на :root, «местные» значения на блоках. «Динамика» переменных — «сила» двойного сцепления: контекст и каскад.

Глубокое наследование: какие свойства «текут»

«Текстовые» наследуются: color, font-*, line-height, letter-spacing, visibility. «Блочные» — нет: margin, padding, border, background. «Забытое» наследование — «дна» «странных» стилей — «проверяйте» DevTools.

revert и rewind: возврат к значениям

revert «вернёт» значение «из каскада» (слоя) — «отменяет» «свою» правку. unset — «наследовать»/«по умолчанию» (по типу). «Гибкая» отмена из-под «эффектов» — «точечная» «откатка». «Приемы» скромные, но точные.

Каскад как контракт: источники таблиц

Источники: user-agent → пользовательские → авторские → важные. Стили «сайта» («автор») побеждают «браузерные». «!important» автора — «выше» пользователя. «Контракт» четырёх «слоёв» — «карта» побед браузера.

Оформление по состояниям: множество псевдоклассов

Состояния управляются: :hover, :focus, :active, :visited, :checked, :disabled. «Состояние» — «это» «жизнь» элемента «глаз» пользователя. «Говорите» через них: «наведёно», «нажато», «выбрано» — «реакция» мгновенна.

Фокус и Focus-visible: зрение с клавиатуры

:focus — «любой» фокус (клик/таб); :focus-visible — «только» клавиатура (иногда). «Клавиатурный» индикатор — «заметный», «мышь» — «спокойная». «Дизайн» + доступность «дружат»: стиль «по способу» входа.

Состояния полей: checked, disabled, required

:checked — «включённый» флажок; :disabled — «замороженный»; :required + :invalid — «статус» формы без JS. «Кухня» форм CSS-ом: «галкой» «стилизуется» и «подсказка» видна. «Без скриптов» — «уже» интерфейс.

Первые и последние дети: границы потока

:first-child, :last-child — «первый»/«последний» в группе братьев. Скруглить «первый» угол списка, «убрать» разделитель «у последнего». «Граничные» «эффекты» — «чистый» список без лишних классов.

Селектор типа «братьев по типу»

:nth-of-type(2) — «второй» элемент «данного тега». В отличии от nth-child игнорирует «чужаков». «Два» р-абзаца и один div: nth-child(2) «споткнётся», nth-of-type(2) — «наш» абзац. «По типу» — «надёжнее» в структурах.

Only-child и empty: редкие, но точные

:only-child — «единственный» ребёнок родителя; :empty — «пустой» элемент. «Одинокий» «редирект» — «шире» сеткой; «общежитие» — «иное». Структурные «диагнозы» без «звезд» на разметке.

Корневые селекторы и темы

:root — самый «верх» документа: сюда кладут переменные тем. html «почти» :root (разница в специфичности). «Несущая» переменная база темы — «один» :root, «адаптация» — «конечные» узлы.

Минусовые поля: работа только по делу

Отрицательный margin «подтягивает» элемент «внатяг» к соседу: колонки «перекрытий», «выравнивание» «на глаз». Сильный, но «хрупкий» приём: «ломается» от «раздутых» соседей. «Документируйте» «зачем».

Инлайн-блок: лазейка между ними

inline-block «строчная» коробка с размерами. «Пробел» между inline-block «в разметке» — «щель» 4px в вёрстке. Борьба: снять «пробел», font-size: 0, или flex. «Щель» — «классическая» засада верстальщика.

Смещение контура: outline-offset

outline-offset «раздвигает» контур от элемента: «светящееся» кольцо «вокруг». Отрицательное «заводит» внутрь. Для «сигнальных» рамок фокуса и «меток». Пара: outline + offset — «аккуратная» рамка «без» сдвига.

Многослойные тени: box-shadow список

box-shadow принимает несколько теней через запятую: «внутренняя», «внешняя», «глубокие». Из «слоёв» теней — «сложные» глубины и «капли». «Три-четыре» слоя — «продуманная» «карточка».

Размеры по контенту: min-content, max-content

min-content — «минимально» по самому длинному слову; max-content — «в один раз» по всему. Гибкая «ширина» под «контент». Применение в целевых раскладках: «своя» ширина, «а не 100%». «Продвинутый» «минимум» вёрстки.

Пропорции блока: aspect-ratio

aspect-ratio: 16/9 «держит» пропорцию при любом размере. Картинки, ролики, «превью» — «ровные» на сетке. Вместо «горбатых» hacks с padding-процентами. «Современная» геометрия — «прощание» с «check-track-тиками».

Несколько фонов: список сlay

background можно «перечислить» через запятую: картинка над цветом, два узора. Первый — ближний, последний — «дальний (цвет-база)». «Многослойность» фона — «рисунки» без img. «Красивые» «обложки» фона из слоёв.

.hero { background: url(p.png) center, linear-gradient(#333, #111); }

Радиальные и конические градиенты

radial-gradient — «круг» от центра; conic-gradient — «по углу» (сегменты «пирога»). Эффекты «свечения», «диаграмм-колец», «заливок углов». «Три» вида градиентов — «палитра программиста» фона.

Повторяющиеся градиенты: узоры

repeating-linear-gradient «плиточкой» повторяет узор: полосатые фоны, «шпалеры». repeating-radial — «кольца». «Полосатая» доска, «sweater»-фоны — «кодом», без изображений. «Узоры» — «дешёвые» и «масштабные».

Прилипание фона: background-attachment

background-attachment: fixed «держит» фон на экране при скролле: «панорама», «слой-глубина». Внимание: на мобильных fixed «тяжёл» и «поломан» — «осторожно». «Паралаксы» — «доза», не «стиль» страницам.

Смешивание фона: blend-режимы

background-blend-mode смешивает слои фона: multiply, overlay, screen. Фото «натекстуривается» «паттерном»; «зальётся» «переливами». Осторожно с «читаемостью»: режим «умножает» и «кренит». «Точность» — в «один узел» декора.

Фильтры: filter как ретушь без фото

filter: brightness, contrast, grayscale, blur применяются «на лету». «Приглушить» фото, «утроить» «яркость» иконок. hover-фильтр — «вспышка» превью. Не «ложите» blur на «весь» сайт: он «дорогой».

Обрезка фона: background-clip

background-clip: text — фон «в контур букв»: градиентный текст. padding-box/border-box — «границы» заливки. «Буква-градиент» — «звучный» заголовок. Внимание: «оттенок» текста «прозрачный» для фона «прорезей».

Двойной эффект: фоны и псевдоэлементы

::before/::after «до» и «после» «в» элементе: плашки, стрелки, кавычки-«обводки». С absolute — «углы», «линии», «оверлеи». «Псевдоэлементы» — «лишние» «дети» без HTML: «богатство» оформления без разметки.

Маски и обрезание: clip-path

clip-path вырезает «фигуру»: круг, многоугольник, «впадины». «Аватар-квадрат→круг», «панель-волна», «карта-полигон». Маскирование «иконной» «геометрии» без записей изображений. «Художественность» — «берёт» из «форм».

Указатель курсора: cursor и аллюзии

cursor меняет «курсор»: pointer, grab, help, not-allowed. «Сообщение» о «действии». Не «все» элементы «кликабельны» — это «честный» индикатор. cursor: grab «зовет» перетащить «панель». «Личное дело» — «ваши» «курсоры».

Счётчики CSS: нумерация своими руками

counter-reset + counter-increment «нумеруют» элементы без списков. «Главы» статей, «шаги», «лекции» — «по позиции» в DOM. Показ — через ::before { content: counter(...) }. «Серийные» числовые метки — «логикой» стилей.

ol { counter-reset: step; }
ol li::before { counter-increment: step; content: counter(step); }

Глубокие счётчики: вложенные главы

Вложенные счётчики «нумеруют» иерархию: «3.2-подпункт», «тетрадь-уровень». counter(item, upper-roman) — «римские» уровни. «Учебные» разделы «нумеруются» автоматически. «Многоуровневая» нумерация «стихами» CSS.

Украшение маркера: ::marker в стилях

::marker «оформляет» маркер списка СЕПАРАТ от текста пункта. Цвет, размер, символ — для li. «Акцентные» маркеры «звездочки», «галочки» в ul. «Нумерация» и «буллеты» становятся «дизайнерами».

Позиция маркера: list-style-position

inside — маркер «в» тексте (строки рядом); outside — «слева» (классика). Выбор влияет на «выравнивание» переносов строк. «Длинных» пункты «outside» «читабельнее». «Настройка» позиции — «мелочь» «порядка».

Стили вложенных списков

Вложенный ul «наследует» счётчик/маркер — «рисует» вторым уровнем. «Отступ» вложенности + «светлее» маркер «второго» уровня. «Меню» и «оглавления» — «двухярусные» списки по-стилю. «Различайте» уровни «нагрузкой» «маркеров».

Оформление списка определений

dl > dt+dd: «термин» — «впору» строкой, «определение» — «отступом». «Колоночный» сосуд dt — «имена», dd — «значения». «Списки пар» «по стихам» без таблиц. «Термины-значения» «дыхают» «ровными» строками.

Хлебные крошки: список в навигации

Крошки «набор» ссылок в li: «домашняя > раздел > статья». ul-список + css «разделители» через li+li::before. «Стек» позиции «пути» на сайте. «Крошки» — «семантика» «и» «ситуация» «размера».

Практика: зебра и разделители списка

Соберите «длинный» список «документов»: строки-пункты с «зеброй» и «разделителями». hover — «подсветка» строки. «Строчный» список-справочник «читается» «быстро» — «гигиена» «представлений». «Практика» «строк» «и» «стихов».

Практика: интерактивный чек-лист

Чек-лист: label + checkbox; :checked «отмечает» пункт «зачёркнутым». «Состояние» CSS без JS. Прогресс «галочек» «визжит» наведением по «вводному». «Классическое» «домашнее» «чтение» «формы» CSS.

Практика: галерея с фильтрами

Галерея: «чёрно-белые» превью + hover-«цвет» и «масштаб». transition «мягко» «дожимает». «Эффект» «усиления» «наведения» — «щечки» фотогалереи. filter + transform «в паре» — «простой» «шедевр» CSS.

Фокус внутри: :focus-within

:focus-within — «внутри блока хоть одно поле в фокусе». «Подсвечивает» всю карточку-группу. «Форма» целиком «выделяется» при фокусе в поле. «Родитель» «чувствует» «дитя» — «умная» «реактивность» стилей.

Связь блоков: :target и переход «к якорю»

:target стилизует «приземление» якоря: #раздел «в URL» → стиль «цели». «Подсветка» текущей части, «свой» класс «развёрнутого» FAQ. «Лёгкая» «навигация-состояние» без JS. «Ссылка+цель» — «дуэт» «состояний».

Псевдокласс корня и подобия

:root, :any-link(ссылку общего), :defined — «повседневность» «небольших» состояний. :any-link «ловит» «a» «и» «area». «Псевдоклассы-инструменты» «живут» «тихо», но «точны»: «используйте» «их» «между» строчками «больших» приёмов.

Заполнение форм: :autofill-стили

Браузер «автозаполняет» поля — меняет фон. :autofill «переигрывает» стиль «заполненного». Фон «подсветить», «проверить». С «transition» — «внимание» на «заполнено». «Подсказка» юзеру: «это» уже «заполнил» браузер.

Атрибуты состояния: placeholder-shown

:placeholder-shown — поле «ещё в подсказке» (не заполнено). «Своя» рамка/метка «пустого» и «полного». «Лейбл» «подымается» при вводе — «эффект float-label» на CSS+JS. «Состояние» «пустоты» «управляемо».

Выбор текста: user-select

user-select: none «запрещает» выделение: «кнопки», «иконки», «интерфейсные» метки. Текст «контента» — «выбирается» всегда. «Двойное» исключение — «защита» от «косого» «переизбрания» на «элементах». С «дозой»: «не» «лишайте» контент.

Стили указателя: pointer masterclass

pointer-events: none «отключает» события CSS: «прозрачная» мишень. «Ховер» «насквозь», «клик» «уходит» ниже. Для «оверлеев-декор» и «подсказок». «Отключённая зона» «не ловит» «наведения» — «задача» «юзабилити» изучена.

Переходы: transition базовая ось

transition «сглаживает» смену состояния: свойство длительность. hover-«плавность» вместо «скачка». transition: all .3s — «быстрая», но «дорогая» привычка: «изберите» свойство. «Анимация интерфейса» — «воспитанный» «переклик».

.btn { transition: background .2s, transform .2s; }

Кривые движения: animation-timing

timing-function — «пейс» анимации: ease, linear, cubic-bezier. «Отскок» в конце — «жизнерадостность»; «плавный» in-out — «профессионализм». «Несколько» кривых — «МИКРОпейс» интерфейса. «Мерность» движения — «вкус» интерфейса.

Анимации: @keyframes и повтор

@keyframes описывает «кадры» состояния; animation «запускает» цикл. «Пульс», «маятник», «поток точек» — «жизы» элементам. paus, infinite, delay — «расписание». «Анимация» — «акцентная» «доза»: не «всё» сразу.

Практика: счётная лестница глав

Пронумеруйте «главы» урока counters: «01», «02» на плашке перед заголовком. «Серийность» — автоматически, вставки «не ломают». «Счётчики» «на практике» — «изящный» «инструмент» учебных страниц.

Практика: выпадающее меню на hover

Двухуровневое меню: вложенный ul скрыт; при hover «раскрывается» абсолютом. transition «плавно» появляется. «Мышь», «клавиатура» — «фокус» продумать. «Выпадашка» «без JS» — «чистый» урок позиционирования.

Практика: тэги-«пилюли» с псевдоэлементами

«Пилюли» тегов: плашка, скругление, «крестик» ::after-умножитель. «Убирание» на «клик» — JS, но «вид» — CSS. «Список тегов» — «существо» розеток «стилей» из «мелочей» псевдоэлемента.

Практика: аккордеон-«детяли» форма

details/summary + CSS: «плюс» меняется при open (свой selector), стрелка rotate. «Аккордеон» без JS-событий. «Ответ» «в» flow — «скользящая» высота? «Анимация» — «признак» сложный; «без» неё — «данные» «живут».

Практика: карточка профиля со счётчиками

Профиль: аватар-круг, «статы» «подписчики-посты-лайки» в ряд на счётчиках. content: counter — «числа» стилизованные. «Карточка» — «сборник» приёмов: псевдо, счётчики, тени. «Свой» «кабинет» «врисован» CSS-ом.

Практика: герой-баннер со слоями фона

Баннер: фото-фон, градиент-«плёнка», заголовок «по центру». Слои фона в одном background. «Виньетка» с radial-цветом. «Главный» «первый» экран «собран» «из» «слоёв» в одной «финикии».

Практика: переключатель «тёмная тема»

Переменные: светлые/тёмные значения в двух наборах. Переключатель (JS) «вешает» класс на html: .theme-dark — «переклассирование» кастомных свойств. «Одна» страница «вторая» «ипостась» через переменные.

Практика: живой прогресс-бар

progress «элемент» + CSS-«стиль» «зоны заполнения» (::-moz, ::-webkit). Или div-«полоса»: ширина через var(--p). «Прогресс» «загрузки» — «данные» «передают» JS. «Визуал» «из» «элементов»-«полос» — «базовый» knockout.

Оценка качества CSS: расширенный лист

Проверьте: селекторы «плоские»; специфичность «низкая»; переменные «общие»; анимации «дешёвые»; фоны «со слоями»; статы «без важных». «Расширенный» чек — «профессиональный» взгляд на «свои» стили.

Контрольная работа по уроку 5

Соберите «интерактивный тарифный» блок: три карточки, hover-акценты, счётчик «экономии», «выбранная» метка через :checked/класс, «тёмная» версия через переменные. Контрольная «сливает» «всё» «продвинутое» CSS-урока.

Границы и скругление углов: продолжение

border-radius с двумя парами: «верх-лево ниж-право». Разные «углы» — decarde «тёплая» карточка: larger верх, меньше — низ. «Дизайн»-детали «в углах» «читаются» тонко. «Размеры двух значений» — «точность» эстетов.

Внутренняя тень: inset-эффекты

box-shadow: inset 0 0 10px — «впадина» внутри площадки. «Углубления» карт, «сонеты» кнопок, «лотки» форм. Внешняя тень + inset — «и порог, и русло». «Глубина» «вдавливания» — «третий» язык стилей.

Линейный фокус: отзыв «в глубину»

focus-chains: «переход» фокуса по «своей» лестнице элементов — «с организованным» выделением. «Глубокая» форма «непродуманная» — «клик» «теряется». «Фокус-эффект» (focus-visible + outline offset 4) — «здоровье» интерфейса.

Почему flex решает многие «мозги»

Выравнивания «ряды/столбцы» — «сложных» каскадов больше нет: flex «правит» на родителе. Переменное «разложение», «сжатие» — автопорядок. «Пробел» inline-block «исчезает». «Лягушки» центрирования «господствуют» с flex.

Выравнивание базовой линии: align-items

align-items: baseline — элементы «по строке» своих текстов. Титры и «цифры» правее и левее «одной линии». Более «типографично», чем center при разном «размере»… «Выравнивание по базе» — точный «порядок» «значений».

Висячие и вариативные размеры: гибкая норма

flex/dim «без» фиксаций: базовые 8–12 «отступов», «резина» майна. min-width карточек + wrap — «самоадаптация». «Без» «жёстких» «неделимых» ширин — «одноколонно» на телефоне. «Гибкая норма» — «разумение топологии», не «метры».

Логика прозрачности: opacity и «стекло»

opacity «всё» гасит сразу: фон текст детей вместе. «Гаснущие» элементы — «затухание» целое. Внимание: композиционный «stink» на stack-сложности. «Стекло» (backdrop-filter: blur) — «модными» панелями без «поверх» «pic»…

Измерители производительности стилей

«Тяжёлые» приёмы: blur на «больших» слоях, «deep»-вложенность, «анимации» «их» recomposition. «Лёгкие»: transform/opacity-анимации, «плоские» селекторы. DevTools «Performance» «покажет» «пики». «Профилируйте», когда «замечаете» «тупит».

Проверка совместимости: caniuse-рефлекс

Новые фичи — «проверяйте» caniuse.com: поддержка браузерами. Устаревшие (годы) — «перепроверь». «Полифилы» — «по нужды». «Свежая» фича «без» проверки — «риск» «партий» на старых. «Рефлекс» — «профессия» онлайн.

Структура файла стилей: удобство масштаба

Файл «крупный» — «разделы» с комментариями; «огромный» — «по-частям» (reset, базовые, компоненты). Правило: «все» селекторы «живут» в «своих» разделах. «Порядок» файлов = «каскад» ожидания. «Структура» — «сила» командных стилей.

Итоги урока 5: селекторы — сила и порядок

Урок «доводит» CSS: точные селекторы, специфичность-арифметика, псевдоклассы и псевдоэлементы, счётчики, эффекты. Стили стали «умными» и «реактивными». Дальше — «сетки» и «раскладка» страниц.

Частые засады продвинутого CSS

«Засады»: специфичность «бум», «пропавший» псевдо (не то выбран), «мусор после» счётчика, «важно» в «глубине». «Симптом» — «не сработало»: добавьте «план» «лев карт». «Отладка» «по звену» — «привычка» экспертов.

Закрепление: псевдоклассы по памяти

Назовите «без» подсказки: состояния (hover, focus, active), структурные (first-child, nth), «подтверждения» (:not, :is). По два «примера» «на каждый». «Словарь» псевдоклассов — «рефлекс» выбора «инструмента».

Домашнее задание: интерактивная визитка

Соберите «визитку-интерактив»: карточка-профиль с «тайной» (hover-поворот), счётчик «проектов», «тёмная» версия кнопкой, «фокус-кольца». Всё «из» продвинутого CSS-урока. «Визитка» — «собственность» «портфолио» новичка.

Дальше: раскладка Flexbox (урок 6)

Шаг вперёд — Flexbox: оси, выравнивания, «рост/сжатие». Дата-set карточки, шапки, меню — «флекс» «подручный» работник. Урок 6 — «повседневные» «раскладки» «здесь» и «сейчас».

Эксперименты в песочнице: безопасно

CodePen/JSFiddle — «песочница» без проекта: «пробуйте» селекторы и эффекты. «Форк» чужих пенов — «чтение» стилей «людей». «Песочница» — «полигон»,а не «экзамен». «Смелость» экспериментов «зреет» здесь.

CSS-окружение: препроцессоры и постпроцессоры

SCSS/Less — переменные, вложенность, миксины «до» CSS. PostCSS — «автопрефиксеры», «новые» фичи «вниз». Готовыми «плечами» «инструменты» «строят» «конвейер». Сначала база — потом «хром». «Словарь» у «строителей» глубже «сака».

Дизайн-системы: дисциплина «генов»

Переменные + компоненты-классы = «зачаток» дизайн-системы. «Имена» классов «единые», «свойства» «через» переменные. «Согласованность» меняется «одним корнем». «Системы» — «эволюция» «вкуса» средней команды.

Будущее CSS: оглядка на тренды

CSS становится «сильнее»: контейнерные запросы, :has, subgrid, «стили по разметке». Меньше «JS-полумостов» — «стиль» умеет сам. «Учите базу», а «новинки» «дочитывайте» по «release notes». «Тренды» «не отменяют» «основы».

Заключение урока 5: контроль над стилем

Продвинутый CSS «данный»: точность выбора, «живая» реакция, «чувствительные» методы. Маяки перехода — к «раскладке». «Лестница» состояний: hover, фокус, выбор — «держит» «интерфейс» «в руках» верстальщика.

Заголовок 5000: презентация со связкой <progress aria-label> + <time> (атрибут aria-relevant)

Задание 5000 на тему «презентация». Урок пары: <progress aria-label> и <time>, атрибут «aria-relevant» и «aria-label». Практика: расписание группы. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: крупный курсор в кастомном фокусе. Проверьте «тяните фокус после действия». Доступность «презентация» читается как имя, затем пояснение.

Заголовок 5001: презентация со связкой <fieldset> + <th scope> (атрибут aria-pressed)

Задание 5001 на тему «презентация». Урок пары: <fieldset> и <th scope>, атрибут «aria-pressed» и «aria-invalid». Практика: вопрос-ответ модуля. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: начало: фокус на первую ошибку. Проверьте «озвучьте переход без мыши». Доступность «презентация» читается как имя, затем пояснение.

Заголовок 5002: чат со связкой <caption> + <main> (атрибут aria-label)

Задание 5002 на тему «чат». Урок пары: <caption> и <main>, атрибут «aria-label» и «aria-expanded». Практика: страница оплаты. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: фокус виден в рамке 3px. Добавьте «в режиме вкладок доберитесь до цели». Доступность «чат» читается как имя, затем пояснение.

Заголовок 5003: заказ со связкой <select> + <legend> (атрибут aria-required=true)

Задание 5003 на тему «заказ». Урок пары: <select> и <legend>, атрибут «aria-required=true» и «aria-valuenow». Практика: кабинет ученика. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус виден в рамке 3px. Обеспечьте «убедитесь в уровне заголовка». Доступность «заказ» читается как имя, затем пояснение.

Заголовок 5004: чек-аут со связкой <figure> + <input> (атрибут aria-selected)

Задание 5004 на тему «чек-аут». Урок пары: <figure> и <input>, атрибут «aria-selected» и «role=region». Практика: прогресс-бар ДЗ. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус не застревает в модалке. Обеспечьте «тяните фокус после действия». Доступность «чек-аут» читается как имя, затем пояснение.

Заголовок 5005: курс со связкой <select> + <legend> (атрибут aria-label)

Задание 5005 на тему «курс». Урок пары: <select> и <legend>, атрибут «aria-label» и «aria-expanded». Практика: страница сертификатов. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: фокус не застревает в модалке. Убедитесь «на скринридере проверьте имя». Доступность «курс» читается как имя, затем пояснение.

Заголовок 5006: прогресс со связкой <dl> + <figure> (атрибут role=button)

Задание 5006 на тему «прогресс». Урок пары: <dl> и <figure>, атрибут «role=button» и «aria-activedescendant». Практика: прогресс-бар ДЗ. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: видимая рамка фокуса. Обеспечьте «озвучьте переход без мыши». Доступность «прогресс» читается как имя, затем пояснение.

Заголовок 5007: трек со связкой <ol> + <a> (атрибут aria-label)

Задание 5007 на тему «трек». Урок пары: <ol> и <a>, атрибут «aria-label» и «aria-expanded». Практика: прогресс-бар ДЗ. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: порядок Tab по слоям. Продумайте «на скринридере проверьте имя». Доступность «трек» читается как имя, затем пояснение.

Заголовок 5008: вебинар со связкой <details> + <output> (атрибут aria-pressed)

Задание 5008 на тему «вебинар». Урок пары: <details> и <output>, атрибут «aria-pressed» и «aria-invalid». Практика: страница оплаты. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: порядок Tab по слоям. Свяжите «проверьте сообщение об ошибке». Доступность «вебинар» читается как имя, затем пояснение.

Заголовок 5009: домашнее задание со связкой <select> + <legend> (атрибут aria-relevant)

Задание 5009 на тему «домашнее задание». Урок пары: <select> и <legend>, атрибут «aria-relevant» и «aria-label». Практика: кабинет ученика. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: крупный курсор в кастомном фокусе. Продумайте «в режиме вкладок доберитесь до цели». Доступность «домашнее задание» читается как имя, затем пояснение.

Заголовок 5010: комментарий со связкой <a> + <select> (атрибут aria-expanded)

Задание 5010 на тему «комментарий». Урок пары: <a> и <select>, атрибут «aria-expanded» и «aria-selected». Практика: форма записи на интенсивы. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: порядок Tab по слоям. Обеспечьте «тяните фокус после действия». Доступность «комментарий» читается как имя, затем пояснение.

Заголовок 5011: презентация со связкой <aside> + <progress aria-label> (атрибут aria-describedby)

Задание 5011 на тему «презентация». Урок пары: <aside> и <progress aria-label>, атрибут «aria-describedby» и «aria-controls». Практика: форма записи на интенсивы. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: проговаривание при return. Добавьте «озвучьте переход без мыши». Доступность «презентация» читается как имя, затем пояснение.

Заголовок 5012: регистрация со связкой <progress aria-label> + <time> (атрибут aria-required=true)

Задание 5012 на тему «регистрация». Урок пары: <progress aria-label> и <time>, атрибут «aria-required=true» и «aria-valuenow». Практика: страница сертификатов. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: порядок Tab по слоям. Продумайте «на скринридере проверьте имя». Доступность «регистрация» читается как имя, затем пояснение.

Заголовок 5013: оплата со связкой <aside> + <progress aria-label> (атрибут aria-activedescendant)

Задание 5013 на тему «оплата». Урок пары: <aside> и <progress aria-label>, атрибут «aria-activedescendant» и «aria-keyshortcuts». Практика: карточка вебинара. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: фокус виден в рамке 3px. Свяжите «озвучьте переход без мыши». Доступность «оплата» читается как имя, затем пояснение.

Заголовок 5014: презентация со связкой <a> + <select> (атрибут aria-keyshortcuts)

Задание 5014 на тему «презентация». Урок пары: <a> и <select>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: анкета студента. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: порядок Tab по слоям. Убедитесь «убедитесь в уровне заголовка». Доступность «презентация» читается как имя, затем пояснение.

Заголовок 5015: прогресс со связкой <footer> + <meter> (атрибут aria-activedescendant)

Задание 5015 на тему «прогресс». Урок пары: <footer> и <meter>, атрибут «aria-activedescendant» и «aria-keyshortcuts». Практика: страница тарифов. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: видимая рамка фокуса. Проверьте «на скринридере проверьте имя». Доступность «прогресс» читается как имя, затем пояснение.

Заголовок 5016: рассылка со связкой <input> + <textarea> (атрибут role=tab)

Задание 5016 на тему «рассылка». Урок пары: <input> и <textarea>, атрибут «role=tab» и «aria-atomic=true». Практика: карточка вебинара. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус виден в рамке 3px. Обеспечьте «убедитесь в уровне заголовка». Доступность «рассылка» читается как имя, затем пояснение.

Заголовок 5017: трек со связкой <textarea> + <table> (атрибут aria-controls)

Задание 5017 на тему «трек». Урок пары: <textarea> и <table>, атрибут «aria-controls» и «aria-haspopup». Практика: кабинет ученика. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус виден в рамке 3px. Свяжите «проверьте сообщение об ошибке». Доступность «трек» читается как имя, затем пояснение.

Заголовок 5018: квиз со связкой <main> + <details> (атрибут aria-checked)

Задание 5018 на тему «квиз». Урок пары: <main> и <details>, атрибут «aria-checked» и «aria-required=true». Практика: карточка вебинара. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: видимая рамка фокуса. Убедитесь «на скринридере проверьте имя». Доступность «квиз» читается как имя, затем пояснение.

Заголовок 5019: гайд со связкой <nav aria-label> + <aside> (атрибут aria-activedescendant)

Задание 5019 на тему «гайд». Урок пары: <nav aria-label> и <aside>, атрибут «aria-activedescendant» и «aria-keyshortcuts». Практика: кабинет ученика. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: фокус на ближайший заголовок после валидации. Проверьте «убедитесь в уровне заголовка». Доступность «гайд» читается как имя, затем пояснение.

Заголовок 5020: личные данные со связкой <input> + <textarea> (атрибут role=alert)

Задание 5020 на тему «личные данные». Урок пары: <input> и <textarea>, атрибут «role=alert» и «aria-relevant». Практика: страница тарифов. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: skip-ссылка. Добавьте «убедитесь в уровне заголовка». Доступность «личные данные» читается как имя, затем пояснение.

Заголовок 5021: курс со связкой <dl> + <figure> (атрибут aria-relevant)

Задание 5021 на тему «курс». Урок пары: <dl> и <figure>, атрибут «aria-relevant» и «aria-label». Практика: страница оплаты. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус не застревает в модалке. Продумайте «озвучьте переход без мыши». Доступность «курс» читается как имя, затем пояснение.

Заголовок 5022: рассылка со связкой <details> + <output> (атрибут aria-owns)

Задание 5022 на тему «рассылка». Урок пары: <details> и <output>, атрибут «aria-owns» и «aria-describedby». Практика: вопрос-ответ модуля. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: логичный порядок полей. Обеспечьте «озвучьте переход без мыши». Доступность «рассылка» читается как имя, затем пояснение.

Заголовок 5023: уведомление со связкой <label> + <fieldset> (атрибут aria-current)

Задание 5023 на тему «уведомление». Урок пары: <label> и <fieldset>, атрибут «aria-current» и «aria-hidden=true». Практика: вопрос-ответ модуля. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: фокус виден в рамке 3px. Проверьте «тяните фокус после действия». Доступность «уведомление» читается как имя, затем пояснение.

Заголовок 5024: баллы со связкой <progress aria-label> + <time> (атрибут aria-labelledby)

Задание 5024 на тему «баллы». Урок пары: <progress aria-label> и <time>, атрибут «aria-labelledby» и «aria-current». Практика: страница оплаты. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: фокус не застревает в модалке. Проверьте «на скринридере проверьте имя». Доступность «баллы» читается как имя, затем пояснение.

Заголовок 5025: программа со связкой <textarea> + <table> (атрибут aria-selected)

Задание 5025 на тему «программа». Урок пары: <textarea> и <table>, атрибут «aria-selected» и «role=region». Практика: страница сертификатов. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: начало: фокус на первую ошибку. Проверьте «проверьте сообщение об ошибке». Доступность «программа» читается как имя, затем пояснение.

Заголовок 5026: каталог со связкой <th scope> + <header> (атрибут aria-hidden=true)

Задание 5026 на тему «каталог». Урок пары: <th scope> и <header>, атрибут «aria-hidden=true» и «role=tab». Практика: прогресс-бар ДЗ. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: вкладки и shift+Tab. Добавьте «тяните фокус после действия». Доступность «каталог» читается как имя, затем пояснение.

Заголовок 5027: программа со связкой <figure> + <input> (атрибут aria-keyshortcuts)

Задание 5027 на тему «программа». Урок пары: <figure> и <input>, атрибут «aria-keyshortcuts» и «aria-live=polite». Практика: вопрос-ответ модуля. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: skip-ссылка. Обеспечьте «озвучьте переход без мыши». Доступность «программа» читается как имя, затем пояснение.

Заголовок 5028: личный кабинет со связкой <header> + <footer> (атрибут aria-atomic=true)

Задание 5028 на тему «личный кабинет». Урок пары: <header> и <footer>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: анкета студента. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: стрелки по сворачиваемому меню. Обеспечьте «убедитесь в уровне заголовка». Доступность «личный кабинет» читается как имя, затем пояснение.

Заголовок 5029: профиль со связкой <figure> + <input> (атрибут aria-live=assertive)

Задание 5029 на тему «профиль». Урок пары: <figure> и <input>, атрибут «aria-live=assertive» и «aria-checked». Практика: трек наставника. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: порядок Tab по слоям. Убедитесь «проверьте сообщение об ошибке». Доступность «профиль» читается как имя, затем пояснение.

Заголовок 5030: практика со связкой <main> + <details> (атрибут aria-modal=true)

Задание 5030 на тему «практика». Урок пары: <main> и <details>, атрибут «aria-modal=true» и «aria-live=assertive». Практика: анкета студента. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: видимая рамка фокуса. Проверьте «в режиме вкладок доберитесь до цели». Доступность «практика» читается как имя, затем пояснение.

Заголовок 5031: презентация со связкой <legend> + <caption> (атрибут role=tab)

Задание 5031 на тему «презентация». Урок пары: <legend> и <caption>, атрибут «role=tab» и «aria-atomic=true». Практика: страница оплаты. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус на ближайший заголовок после валидации. Продумайте «проверьте сообщение об ошибке». Доступность «презентация» читается как имя, затем пояснение.

Заголовок 5032: заказ со связкой <a> + <select> (атрибут aria-required=true)

Задание 5032 на тему «заказ». Урок пары: <a> и <select>, атрибут «aria-required=true» и «aria-valuenow». Практика: каталог уроков. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: проговаривание при return. Убедитесь «в режиме вкладок доберитесь до цели». Доступность «заказ» читается как имя, затем пояснение.

Заголовок 5033: регистрация со связкой <table> + <nav aria-label> (атрибут aria-invalid)

Задание 5033 на тему «регистрация». Урок пары: <table> и <nav aria-label>, атрибут «aria-invalid» и «role=alert». Практика: каталог уроков. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: проговаривание при return. Обеспечьте «проверьте сообщение об ошибке». Доступность «регистрация» читается как имя, затем пояснение.

Заголовок 5034: лекция со связкой <fieldset> + <th scope> (атрибут aria-atomic=true)

Задание 5034 на тему «лекция». Урок пары: <fieldset> и <th scope>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: вопрос-ответ модуля. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: крупный курсор в кастомном фокусе. Продумайте «тяните фокус после действия». Доступность «лекция» читается как имя, затем пояснение.

Заголовок 5035: урок со связкой <a> + <select> (атрибут aria-atomic=true)

Задание 5035 на тему «урок». Урок пары: <a> и <select>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: страница тарифов. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: видимая рамка фокуса. Обеспечьте «тяните фокус после действия». Доступность «урок» читается как имя, затем пояснение.

Заголовок 5036: баллы со связкой <label> + <fieldset> (атрибут aria-haspopup)

Задание 5036 на тему «баллы». Урок пары: <label> и <fieldset>, атрибут «aria-haspopup» и «role=button». Практика: страница оплаты. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: проговаривание при return. Убедитесь «проверьте сообщение об ошибке». Доступность «баллы» читается как имя, затем пояснение.

Заголовок 5037: вход со связкой <details> + <output> (атрибут aria-haspopup)

Задание 5037 на тему «вход». Урок пары: <details> и <output>, атрибут «aria-haspopup» и «role=button». Практика: окно чата с куратором. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: фокус не застревает в модалке. Свяжите «в режиме вкладок доберитесь до цели». Доступность «вход» читается как имя, затем пояснение.

Заголовок 5038: запись со связкой <caption> + <main> (атрибут aria-atomic=true)

Задание 5038 на тему «запись». Урок пары: <caption> и <main>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: страница сертификатов. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус на ближайший заголовок после валидации. Обеспечьте «на скринридере проверьте имя». Доступность «запись» читается как имя, затем пояснение.

Заголовок 5039: форма со связкой <a> + <select> (атрибут aria-selected)

Задание 5039 на тему «форма». Урок пары: <a> и <select>, атрибут «aria-selected» и «role=region». Практика: кабинет ученика. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: проговаривание при return. Свяжите «проверьте сообщение об ошибке». Доступность «форма» читается как имя, затем пояснение.

Заголовок 5040: тариф со связкой <output> + <ul aria-label> (атрибут aria-haspopup)

Задание 5040 на тему «тариф». Урок пары: <output> и <ul aria-label>, атрибут «aria-haspopup» и «role=button». Практика: журнал оценок. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: стрелки по сворачиваемому меню. Обеспечьте «в режиме вкладок доберитесь до цели». Доступность «тариф» читается как имя, затем пояснение.

Заголовок 5041: урок со связкой <nav aria-label> + <aside> (атрибут aria-flowto)

Задание 5041 на тему «урок». Урок пары: <nav aria-label> и <aside>, атрибут «aria-flowto» и «aria-labelledby». Практика: расписание группы. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: стрелки по сворачиваемому меню. Убедитесь «тяните фокус после действия». Доступность «урок» читается как имя, затем пояснение.

Заголовок 5042: прогресс со связкой <caption> + <main> (атрибут aria-relevant)

Задание 5042 на тему «прогресс». Урок пары: <caption> и <main>, атрибут «aria-relevant» и «aria-label». Практика: форма записи на интенсивы. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: стрелки по сворачиваемому меню. Продумайте «тяните фокус после действия». Доступность «прогресс» читается как имя, затем пояснение.

Заголовок 5043: квиз со связкой <figure> + <input> (атрибут aria-required=true)

Задание 5043 на тему «квиз». Урок пары: <figure> и <input>, атрибут «aria-required=true» и «aria-valuenow». Практика: лендинг курса. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: порядок Tab по слоям. Убедитесь «проверьте сообщение об ошибке». Доступность «квиз» читается как имя, затем пояснение.

Заголовок 5044: гайд со связкой <dl> + <figure> (атрибут aria-haspopup)

Задание 5044 на тему «гайд». Урок пары: <dl> и <figure>, атрибут «aria-haspopup» и «role=button». Практика: вопрос-ответ модуля. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: начало: фокус на первую ошибку. Продумайте «озвучьте переход без мыши». Доступность «гайд» читается как имя, затем пояснение.

Заголовок 5045: демо со связкой <input> + <textarea> (атрибут role=tab)

Задание 5045 на тему «демо». Урок пары: <input> и <textarea>, атрибут «role=tab» и «aria-atomic=true». Практика: кабинет ученика. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: фокус на ближайший заголовок после валидации. Продумайте «тяните фокус после действия». Доступность «демо» читается как имя, затем пояснение.

Заголовок 5046: форма со связкой <fieldset> + <th scope> (атрибут aria-live=assertive)

Задание 5046 на тему «форма». Урок пары: <fieldset> и <th scope>, атрибут «aria-live=assertive» и «aria-checked». Практика: журнал оценок. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: логичный порядок полей. Добавьте «проверьте сообщение об ошибке». Доступность «форма» читается как имя, затем пояснение.

Заголовок 5047: оплата со связкой <aside> + <progress aria-label> (атрибут aria-flowto)

Задание 5047 на тему «оплата». Урок пары: <aside> и <progress aria-label>, атрибут «aria-flowto» и «aria-labelledby». Практика: анкета студента. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: skip-ссылка. Проверьте «на скринридере проверьте имя». Доступность «оплата» читается как имя, затем пояснение.

Заголовок 5048: запись со связкой <header> + <footer> (атрибут aria-label)

Задание 5048 на тему «запись». Урок пары: <header> и <footer>, атрибут «aria-label» и «aria-expanded». Практика: трек наставника. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: вкладки и shift+Tab. Проверьте «проверьте сообщение об ошибке». Доступность «запись» читается как имя, затем пояснение.

Заголовок 5049: заказ со связкой <ol> + <a> (атрибут aria-pressed)

Задание 5049 на тему «заказ». Урок пары: <ol> и <a>, атрибут «aria-pressed» и «aria-invalid». Практика: форма записи на интенсивы. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: видимая рамка фокуса. Свяжите «тяните фокус после действия». Доступность «заказ» читается как имя, затем пояснение.

Заголовок 5050: корзина со связкой <select> + <legend> (атрибут aria-hidden=true)

Задание 5050 на тему «корзина». Урок пары: <select> и <legend>, атрибут «aria-hidden=true» и «role=tab». Практика: страница оплаты. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: крупный курсор в кастомном фокусе. Свяжите «в режиме вкладок доберитесь до цели». Доступность «корзина» читается как имя, затем пояснение.

Заголовок 5051: модуль со связкой <button> + <label> (атрибут aria-invalid)

Задание 5051 на тему «модуль». Урок пары: <button> и <label>, атрибут «aria-invalid» и «role=alert». Практика: вопрос-ответ модуля. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: фокус виден в рамке 3px. Убедитесь «на скринридере проверьте имя». Доступность «модуль» читается как имя, затем пояснение.

Заголовок 5052: тариф со связкой <footer> + <meter> (атрибут aria-relevant)

Задание 5052 на тему «тариф». Урок пары: <footer> и <meter>, атрибут «aria-relevant» и «aria-label». Практика: расписание группы. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: skip-ссылка. Продумайте «тяните фокус после действия». Доступность «тариф» читается как имя, затем пояснение.

Заголовок 5053: форум со связкой <table> + <nav aria-label> (атрибут role=tab)

Задание 5053 на тему «форум». Урок пары: <table> и <nav aria-label>, атрибут «role=tab» и «aria-atomic=true». Практика: каталог уроков. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: проговаривание при return. Свяжите «проверьте сообщение об ошибке». Доступность «форум» читается как имя, затем пояснение.

Заголовок 5054: корзина со связкой <figure> + <input> (атрибут aria-live=assertive)

Задание 5054 на тему «корзина». Урок пары: <figure> и <input>, атрибут «aria-live=assertive» и «aria-checked». Практика: каталог уроков. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: проговаривание при return. Добавьте «проверьте сообщение об ошибке». Доступность «корзина» читается как имя, затем пояснение.

Заголовок 5055: регистрация со связкой <header> + <footer> (атрибут role=region)

Задание 5055 на тему «регистрация». Урок пары: <header> и <footer>, атрибут «role=region» и «aria-valuetext». Практика: расписание группы. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: skip-ссылка. Добавьте «тяните фокус после действия». Доступность «регистрация» читается как имя, затем пояснение.

Заголовок 5056: курс со связкой <input> + <textarea> (атрибут aria-required=true)

Задание 5056 на тему «курс». Урок пары: <input> и <textarea>, атрибут «aria-required=true» и «aria-valuenow». Практика: журнал оценок. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: логичный порядок полей. Добавьте «в режиме вкладок доберитесь до цели». Доступность «курс» читается как имя, затем пояснение.

Заголовок 5057: демо со связкой <table> + <nav aria-label> (атрибут aria-hidden=true)

Задание 5057 на тему «демо». Урок пары: <table> и <nav aria-label>, атрибут «aria-hidden=true» и «role=tab». Практика: кабинет ученика. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: вкладки и shift+Tab. Обеспечьте «в режиме вкладок доберитесь до цели». Доступность «демо» читается как имя, затем пояснение.

Заголовок 5058: домашнее задание со связкой <time> + <ol> (атрибут aria-owns)

Задание 5058 на тему «домашнее задание». Урок пары: <time> и <ol>, атрибут «aria-owns» и «aria-describedby». Практика: страница сертификатов. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: skip-ссылка. Обеспечьте «озвучьте переход без мыши». Доступность «домашнее задание» читается как имя, затем пояснение.

Заголовок 5059: презентация со связкой <main> + <details> (атрибут role=region)

Задание 5059 на тему «презентация». Урок пары: <main> и <details>, атрибут «role=region» и «aria-valuetext». Практика: анкета студента. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: проговаривание при return. Обеспечьте «озвучьте переход без мыши». Доступность «презентация» читается как имя, затем пояснение.

Заголовок 5060: корзина со связкой <caption> + <main> (атрибут aria-live=polite)

Задание 5060 на тему «корзина». Урок пары: <caption> и <main>, атрибут «aria-live=polite» и «aria-pressed». Практика: страница сертификатов. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: фокус не застревает в модалке. Обеспечьте «убедитесь в уровне заголовка». Доступность «корзина» читается как имя, затем пояснение.

Заголовок 5061: карточка товара со связкой <a> + <select> (атрибут aria-atomic=true)

Задание 5061 на тему «карточка товара». Урок пары: <a> и <select>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: трек наставника. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: видимая рамка фокуса. Проверьте «тяните фокус после действия». Доступность «карточка товара» читается как имя, затем пояснение.

Заголовок 5062: сертификат со связкой <figure> + <input> (атрибут aria-selected)

Задание 5062 на тему «сертификат». Урок пары: <figure> и <input>, атрибут «aria-selected» и «role=region». Практика: карточка вебинара. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: логичный порядок полей. Убедитесь «тяните фокус после действия». Доступность «сертификат» читается как имя, затем пояснение.

Заголовок 5063: форум со связкой <main> + <details> (атрибут aria-required=true)

Задание 5063 на тему «форум». Урок пары: <main> и <details>, атрибут «aria-required=true» и «aria-valuenow». Практика: вопрос-ответ модуля. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: стрелки по сворачиваемому меню. Проверьте «убедитесь в уровне заголовка». Доступность «форум» читается как имя, затем пояснение.

Заголовок 5064: программа со связкой <progress aria-label> + <time> (атрибут role=button)

Задание 5064 на тему «программа». Урок пары: <progress aria-label> и <time>, атрибут «role=button» и «aria-activedescendant». Практика: карточка вебинара. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: фокус виден в рамке 3px. Убедитесь «тяните фокус после действия». Доступность «программа» читается как имя, затем пояснение.

Заголовок 5065: форма со связкой <table> + <nav aria-label> (атрибут aria-labelledby)

Задание 5065 на тему «форма». Урок пары: <table> и <nav aria-label>, атрибут «aria-labelledby» и «aria-current». Практика: страница оплаты. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: вкладки и shift+Tab. Убедитесь «в режиме вкладок доберитесь до цели». Доступность «форма» читается как имя, затем пояснение.

Заголовок 5066: прогресс со связкой <input> + <textarea> (атрибут aria-live=polite)

Задание 5066 на тему «прогресс». Урок пары: <input> и <textarea>, атрибут «aria-live=polite» и «aria-pressed». Практика: страница тарифов. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: фокус виден в рамке 3px. Продумайте «проверьте сообщение об ошибке». Доступность «прогресс» читается как имя, затем пояснение.

Заголовок 5067: вход со связкой <progress aria-label> + <time> (атрибут aria-controls)

Задание 5067 на тему «вход». Урок пары: <progress aria-label> и <time>, атрибут «aria-controls» и «aria-haspopup». Практика: страница тарифов. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: skip-ссылка. Свяжите «на скринридере проверьте имя». Доступность «вход» читается как имя, затем пояснение.

Заголовок 5068: корзина со связкой <input> + <textarea> (атрибут role=alert)

Задание 5068 на тему «корзина». Урок пары: <input> и <textarea>, атрибут «role=alert» и «aria-relevant». Практика: анкета студента. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: логичный порядок полей. Проверьте «в режиме вкладок доберитесь до цели». Доступность «корзина» читается как имя, затем пояснение.

Заголовок 5069: уведомление со связкой <progress aria-label> + <time> (атрибут aria-live=polite)

Задание 5069 на тему «уведомление». Урок пары: <progress aria-label> и <time>, атрибут «aria-live=polite» и «aria-pressed». Практика: карточка вебинара. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: крупный курсор в кастомном фокусе. Добавьте «в режиме вкладок доберитесь до цели». Доступность «уведомление» читается как имя, затем пояснение.

Заголовок 5070: трек со связкой <textarea> + <table> (атрибут aria-pressed)

Задание 5070 на тему «трек». Урок пары: <textarea> и <table>, атрибут «aria-pressed» и «aria-invalid». Практика: расписание группы. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: стрелки по сворачиваемому меню. Проверьте «на скринридере проверьте имя». Доступность «трек» читается как имя, затем пояснение.

Заголовок 5071: корзина со связкой <th scope> + <header> (атрибут aria-selected)

Задание 5071 на тему «корзина». Урок пары: <th scope> и <header>, атрибут «aria-selected» и «role=region». Практика: журнал оценок. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: порядок Tab по слоям. Добавьте «убедитесь в уровне заголовка». Доступность «корзина» читается как имя, затем пояснение.

Заголовок 5072: уведомление со связкой <textarea> + <table> (атрибут aria-selected)

Задание 5072 на тему «уведомление». Урок пары: <textarea> и <table>, атрибут «aria-selected» и «role=region». Практика: лендинг курса. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: крупный курсор в кастомном фокусе. Добавьте «на скринридере проверьте имя». Доступность «уведомление» читается как имя, затем пояснение.

Заголовок 5073: отзыв со связкой <time> + <ol> (атрибут aria-label)

Задание 5073 на тему «отзыв». Урок пары: <time> и <ol>, атрибут «aria-label» и «aria-expanded». Практика: форма записи на интенсивы. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: логичный порядок полей. Свяжите «озвучьте переход без мыши». Доступность «отзыв» читается как имя, затем пояснение.

Заголовок 5074: отзыв со связкой <th scope> + <header> (атрибут aria-activedescendant)

Задание 5074 на тему «отзыв». Урок пары: <th scope> и <header>, атрибут «aria-activedescendant» и «aria-keyshortcuts». Практика: лендинг курса. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: skip-ссылка. Убедитесь «проверьте сообщение об ошибке». Доступность «отзыв» читается как имя, затем пояснение.

Заголовок 5075: расписание со связкой <legend> + <caption> (атрибут aria-expanded)

Задание 5075 на тему «расписание». Урок пары: <legend> и <caption>, атрибут «aria-expanded» и «aria-selected». Практика: страница сертификатов. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: порядок Tab по слоям. Продумайте «убедитесь в уровне заголовка». Доступность «расписание» читается как имя, затем пояснение.

Заголовок 5076: тест со связкой <table> + <nav aria-label> (атрибут aria-hidden=true)

Задание 5076 на тему «тест». Урок пары: <table> и <nav aria-label>, атрибут «aria-hidden=true» и «role=tab». Практика: трек наставника. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: видимая рамка фокуса. Свяжите «тяните фокус после действия». Доступность «тест» читается как имя, затем пояснение.

Заголовок 5077: форма со связкой <output> + <ul aria-label> (атрибут aria-current)

Задание 5077 на тему «форма». Урок пары: <output> и <ul aria-label>, атрибут «aria-current» и «aria-hidden=true». Практика: форма записи на интенсивы. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: стрелки по сворачиваемому меню. Убедитесь «озвучьте переход без мыши». Доступность «форма» читается как имя, затем пояснение.

Заголовок 5078: чек-аут со связкой <main> + <details> (атрибут aria-labelledby)

Задание 5078 на тему «чек-аут». Урок пары: <main> и <details>, атрибут «aria-labelledby» и «aria-current». Практика: форма записи на интенсивы. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: skip-ссылка. Добавьте «на скринридере проверьте имя». Доступность «чек-аут» читается как имя, затем пояснение.

Заголовок 5079: личный кабинет со связкой <header> + <footer> (атрибут aria-hidden=true)

Задание 5079 на тему «личный кабинет». Урок пары: <header> и <footer>, атрибут «aria-hidden=true» и «role=tab». Практика: вопрос-ответ модуля. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: видимая рамка фокуса. Свяжите «убедитесь в уровне заголовка». Доступность «личный кабинет» читается как имя, затем пояснение.

Заголовок 5080: трек со связкой <label> + <fieldset> (атрибут aria-atomic=true)

Задание 5080 на тему «трек». Урок пары: <label> и <fieldset>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: трек наставника. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: skip-ссылка. Свяжите «в режиме вкладок доберитесь до цели». Доступность «трек» читается как имя, затем пояснение.

Заголовок 5081: вход со связкой <button> + <label> (атрибут aria-required=true)

Задание 5081 на тему «вход». Урок пары: <button> и <label>, атрибут «aria-required=true» и «aria-valuenow». Практика: каталог уроков. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: крупный курсор в кастомном фокусе. Убедитесь «на скринридере проверьте имя». Доступность «вход» читается как имя, затем пояснение.

Заголовок 5082: модуль со связкой <figure> + <input> (атрибут aria-relevant)

Задание 5082 на тему «модуль». Урок пары: <figure> и <input>, атрибут «aria-relevant» и «aria-label». Практика: прогресс-бар ДЗ. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: вкладки и shift+Tab. Добавьте «на скринридере проверьте имя». Доступность «модуль» читается как имя, затем пояснение.

Заголовок 5083: демо со связкой <dl> + <figure> (атрибут role=tab)

Задание 5083 на тему «демо». Урок пары: <dl> и <figure>, атрибут «role=tab» и «aria-atomic=true». Практика: анкета студента. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: проговаривание при return. Убедитесь «на скринридере проверьте имя». Доступность «демо» читается как имя, затем пояснение.

Заголовок 5084: вход со связкой <nav aria-label> + <aside> (атрибут aria-labelledby)

Задание 5084 на тему «вход». Урок пары: <nav aria-label> и <aside>, атрибут «aria-labelledby» и «aria-current». Практика: страница оплаты. Заголовки выстраиваются иерархией h1>h2>h3 без пропусков уровня.. Визуальное правило: видимая рамка фокуса. Обеспечьте «тяните фокус после действия». Доступность «вход» читается как имя, затем пояснение.

Заголовок 5085: форум со связкой <fieldset> + <th scope> (атрибут aria-labelledby)

Задание 5085 на тему «форум». Урок пары: <fieldset> и <th scope>, атрибут «aria-labelledby» и «aria-current». Практика: форма записи на интенсивы. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: фокус не застревает в модалке. Проверьте «в режиме вкладок доберитесь до цели». Доступность «форум» читается как имя, затем пояснение.

Заголовок 5086: личный кабинет со связкой <textarea> + <table> (атрибут aria-hidden=true)

Задание 5086 на тему «личный кабинет». Урок пары: <textarea> и <table>, атрибут «aria-hidden=true» и «role=tab». Практика: вопрос-ответ модуля. Декоративные иконки прячут aria-hidden; смысл остаётся в тексте.. Визуальное правило: проговаривание при return. Убедитесь «тяните фокус после действия». Доступность «личный кабинет» читается как имя, затем пояснение.

Заголовок 5087: вход со связкой <a> + <select> (атрибут aria-valuenow)

Задание 5087 на тему «вход». Урок пары: <a> и <select>, атрибут «aria-valuenow» и «aria-owns». Практика: карточка вебинара. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: видимая рамка фокуса. Продумайте «на скринридере проверьте имя». Доступность «вход» читается как имя, затем пояснение.

Заголовок 5088: расписание со связкой <meter> + <dl> (атрибут aria-required=true)

Задание 5088 на тему «расписание». Урок пары: <meter> и <dl>, атрибут «aria-required=true» и «aria-valuenow». Практика: журнал оценок. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: вкладки и shift+Tab. Убедитесь «на скринридере проверьте имя». Доступность «расписание» читается как имя, затем пояснение.

Заголовок 5089: тест со связкой <figure> + <input> (атрибут aria-modal=true)

Задание 5089 на тему «тест». Урок пары: <figure> и <input>, атрибут «aria-modal=true» и «aria-live=assertive». Практика: карточка вебинара. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: фокус виден в рамке 3px. Продумайте «проверьте сообщение об ошибке». Доступность «тест» читается как имя, затем пояснение.

Заголовок 5090: урок со связкой <a> + <select> (атрибут aria-owns)

Задание 5090 на тему «урок». Урок пары: <a> и <select>, атрибут «aria-owns» и «aria-describedby». Практика: прогресс-бар ДЗ. Живые регионы aria-live озвучивают изменения без фокуса.. Визуальное правило: начало: фокус на первую ошибку. Продумайте «проверьте сообщение об ошибке». Доступность «урок» читается как имя, затем пояснение.

Заголовок 5091: личный кабинет со связкой <output> + <ul aria-label> (атрибут aria-controls)

Задание 5091 на тему «личный кабинет». Урок пары: <output> и <ul aria-label>, атрибут «aria-controls» и «aria-haspopup». Практика: анкета студента. Порядок Tab соответствует визуальному чтению; видимая рамка обязательна.. Визуальное правило: логичный порядок полей. Обеспечьте «в режиме вкладок доберитесь до цели». Доступность «личный кабинет» читается как имя, затем пояснение.

Заголовок 5092: расписание со связкой <output> + <ul aria-label> (атрибут aria-atomic=true)

Задание 5092 на тему «расписание». Урок пары: <output> и <ul aria-label>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: страница тарифов. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: порядок Tab по слоям. Убедитесь «в режиме вкладок доберитесь до цели». Доступность «расписание» читается как имя, затем пояснение.

Заголовок 5093: чек-аут со связкой <label> + <fieldset> (атрибут aria-checked)

Задание 5093 на тему «чек-аут». Урок пары: <label> и <fieldset>, атрибут «aria-checked» и «aria-required=true». Практика: трек наставника. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: порядок Tab по слоям. Обеспечьте «убедитесь в уровне заголовка». Доступность «чек-аут» читается как имя, затем пояснение.

Заголовок 5094: домашнее задание со связкой <button> + <label> (атрибут aria-flowto)

Задание 5094 на тему «домашнее задание». Урок пары: <button> и <label>, атрибут «aria-flowto» и «aria-labelledby». Практика: кабинет ученика. Форматив группируют fieldset+legend; у полей видимое label.. Визуальное правило: фокус на ближайший заголовок после валидации. Продумайте «проверьте сообщение об ошибке». Доступность «домашнее задание» читается как имя, затем пояснение.

Заголовок 5095: форма со связкой <footer> + <meter> (атрибут aria-atomic=true)

Задание 5095 на тему «форма». Урок пары: <footer> и <meter>, атрибут «aria-atomic=true» и «aria-modal=true». Практика: расписание группы. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: логичный порядок полей. Проверьте «в режиме вкладок доберитесь до цели». Доступность «форма» читается как имя, затем пояснение.

Заголовок 5096: урок со связкой <fieldset> + <th scope> (атрибут aria-controls)

Задание 5096 на тему «урок». Урок пары: <fieldset> и <th scope>, атрибут «aria-controls» и «aria-haspopup». Практика: окно чата с куратором. Имя у элемента — всегда одно предложение смысла; label и ссылка имени связаны.. Визуальное правило: порядок Tab по слоям. Убедитесь «в режиме вкладок доберитесь до цели». Доступность «урок» читается как имя, затем пояснение.

Заголовок 5097: рассылка со связкой <output> + <ul aria-label> (атрибут aria-haspopup)

Задание 5097 на тему «рассылка». Урок пары: <output> и <ul aria-label>, атрибут «aria-haspopup» и «role=button». Практика: форма записи на интенсивы. Состояние раскрытия передают aria-expanded и aria-контролы честно.. Визуальное правило: крупный курсор в кастомном фокусе. Добавьте «на скринридере проверьте имя». Доступность «рассылка» читается как имя, затем пояснение.

Заголовок 5098: модуль со связкой <th scope> + <header> (атрибут aria-live=assertive)

Задание 5098 на тему «модуль». Урок пары: <th scope> и <header>, атрибут «aria-live=assertive» и «aria-checked». Практика: каталог уроков. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: начало: фокус на первую ошибку. Свяжите «убедитесь в уровне заголовка». Доступность «модуль» читается как имя, затем пояснение.

Заголовок 5099: запись со связкой <time> + <ol> (атрибут aria-relevant)

Задание 5099 на тему «запись». Урок пары: <time> и <ol>, атрибут «aria-relevant» и «aria-label». Практика: страница оплаты. Скринридер прочтёт имя без контекста страницы; ориентиры навигации помогают.. Визуальное правило: видимая рамка фокуса. Проверьте «проверьте сообщение об ошибке». Доступность «запись» читается как имя, затем пояснение.