Вёрстка и доступность
CSS, адаптивность и доступность: как страница выглядит и работает для людей на разных устройствах и с разными возможностями.
Термины словаря
Доступность интерфейса: возможность пользоваться сайтом
Доступность интерфейса — создание сайта, которым могут пользоваться люди с разными возможностями и способами взаимодействия, включая вспомогательные технологии.
Юзабилити: определение и проверка
Юзабилити — удобство выполнения задач в конкретном интерфейсе для определённых пользователей и условий.
Viewport: видимая область страницы и мобильный масштаб
Viewport: определение, практический пример и проверка. Viewport — область, в которой браузер показывает веб-страницу; её размеры влияют на раскладку и адаптивность.
Резиновая вёрстка: ширина под доступное пространство
Резиновая вёрстка — подход, при котором размеры элементов изменяются вместе с доступной шириной, а не ограничиваются одним фиксированным макетом.
Единица vh: размер относительно высоты окна
vh — единица CSS для длины относительно высоты области просмотра. 1vh соответствует одной сотой высоты большого viewport.
Единица rem: размер относительно корневого шрифта
rem — единица CSS, равная размеру шрифта корневого элемента документа. В HTML это обычно элемент html.
Единица em: размер относительно шрифта
em — относительная единица CSS. Для большинства размерных свойств она связана с вычисленным размером шрифта самого элемента.
Z-index: почему один элемент перекрывает другой
Z-index: определение, практический пример и проверка. Z-index — CSS-свойство, задающее уровень наложения элемента в соответствующем контексте наложения.
Блочная модель CSS: из чего складывается размер
Блочная модель CSS описывает области элемента: содержимое, внутренние отступы, границы и внешние отступы.
Наследование CSS: свойства от родителя
Наследование CSS — механизм, при котором некоторые свойства элемента получают значение от родительского элемента, если собственное значение не определено каскадом.
Keyframe: состояния внутри CSS-анимации
Keyframe: определение, практический пример и проверка. Ключевой кадр — заданное состояние элемента в определённой точке последовательности анимации.
Цветовое пространство: определение и проверка
Цветовое пространство — система представления цветов с определёнными координатами и правилами их интерпретации.
Локализация: адаптация сайта для аудитории
Локализация — адаптация продукта под язык, регион и культурные особенности аудитории. Она включает больше, чем перевод отдельных предложений.
Браузер: программа для работы с вебом
Браузер — приложение, которое запрашивает веб-ресурсы, обрабатывает HTML, CSS и JavaScript и показывает страницу пользователю.
Материалы журнала
Lazy loading: что откладывать, а что показывать сразу
Откладывайте загрузку ресурсов, которые не нужны для первого просмотра, но сначала проверьте главное изображение и доступность контента. Ленивая загрузка изображения и загрузка статьи только после клика — разные механизмы.
Mobile-first: что мобильная версия не должна потерять
Сравните содержание, метаданные и доступные ссылки на телефоне и компьютере. Мобильное отображение может быть компактнее, но не должно случайно терять основной материал.
CLS: как найти и исправить скачки страницы
Для исправления CLS найдите элементы, которые смещаются, и событие перед смещением. Частые причины — незарезервированное место, поздние вставки и изменение размеров текста после загрузки шрифта.
Две языковые версии сайта: URL, canonical и hreflang
Запускайте языковые версии как полноценные страницы с согласованной адресацией и взаимными аннотациями. Hreflang не переводит содержание и не заменяет canonical.