Как прятать
- 28 февраля 2024
Когда display: none
, а когда visibility: hidden
? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!
Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище... ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.
display: none
Самый простой и популярный — display: none
, он работает как топор: элемент как будто вырубают из HTML. Его не видно на странице и соседние блоки про него ничего не знают. Просто нет и всё. Его даже скринридеры игоририруют и не читают содержимое — будьте аккуратнее с этим.
/* Вырубает */
.cut-down {
display: none;
}
Что интересно, несмотря на полное вырубание элемента, браузеры всё равно загружают картинку из img с display: none
. Если же картинка указана фоном, то Chrome и Edge её тоже загружают, а Firefox и Safari — нет. Ну, разные у них взгляды на оптимизацию загрузки, что поделать.
Другой способ — visibility: hidden
Он работает, как Кольцо Всевластья: элемент вроде здесь и соседние блоки его чувствуют, но его не видно. И чем это отличается от opacity: 0
? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden
ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.
/* Прячет */
.one-ring {
visibility: hidden;
}
/* Не сработает */
.one-ring:hover {
visibility: visible;
}
У visibility: hidden
есть другая приятная особенность: свойство наследуется, а значит ребёнок невидимого родителя может сменить видимость на visible
. Такой трюк не пройдёт ни с display: none
, ни с opacity: 0
. С ним удобно делать всплывающие меню и подказки.
Иногда нужно, чтобы элемент не мешал дизайну, но при этом не прятался от скринридеров, оставаясь частью содержимого. Ну не нарисовал дизайнер здесь заголовка, а по логике документа он здесь нужен. Вот бы нам что-то вроде display: hidden
или visibility: none
! Это я только что придумал, в природе их не существует.
Недавно в черновике CSS Display третьего уровня появилось свойство box-suppress
со значениями show
, discard
и hide
. Оно отвязывает видимость блока от display
— ведь с обратной стороны от none есть не только block
, но и inline
, flex
, grid
. Значение discard
привычно вырубает элемент, а hide
делает то самое волшебное комбо. Читайте подробнее у Рейчел Эндрю.
/* То, что нужно */
.combo {
box-suppress:
hide;
}
К сожалению, до box-suppress
нам ещё долго ждать. Его не только ещё нет в браузерах, но уже в том черновике — недавно его перенесли в следующий уровень, чтобы закончить текущий вовремя. Так что придётся делать магию самим — следите за руками.
Есть такой паттерн «visually hidden»
или «визуально спрятанный», чтобы прятать элементы из дизайна, но оставлять доступным их содержимое. Про другие нюансы со скринридерами читайте у Тима Райта. Как это работает: вы делаете универсальный служебный класс и добавляете его к элементам, которые нужно доступно спрятать. Обычно его так и называют: visually-hidden
, через дефис.
<h2 class="
visually-hidden">
Важный
за головок,
которого нет
</h2>
Если посмотреть что внутри, то это обычный position: absolute
плюс clip
, который обрезает элемент до нуля. То есть он не влияет на соседей и становится невидимым. Все остальные свойства добавляют универсальности и кроссбраузерности, чтобы класс можно было не глядя шлёпнуть на любой элемент. Подробнее читайте в справке к ally. js Родни Рейма.
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
А вы знали, что любому элементу можно добавить атрибут hidden и он пропадёт?
Теперь знаете! В современных браузерах на этот атрибут повешен тот самый display: none
, который вырубает элемент. Он бинарный как required
или checked
, так что его удобно выставлять через JavaScript. Только не забудьте добавить в стили [hidden] { display: none } для IE 10, Safari 5 и других старых браузеров.
<div hidden>
Вырублен
</div>
// JS
div.hidden = true;
Это почти всё, что вам нужно знать про прятки в CSS. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Псевдоклассы валидации форм: делаем интерфейсы понятнее
Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid
и :invalid
. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.
Кроме того, существуют псевдоклассы :required
и :optional
. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.
- 15 августа 2025

Как сделать первую букву абзаца большой — буквица через ::first-letter
Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS
, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter
, появившийся ещё в спецификации CSS1
в 1996 году.
Идея была проста: дать возможность стилизовать первую букву абзаца или блока текста. В печатных книгах и журналах такой приём назывался «буквица» и использовался сотни лет, чтобы вовлечь читателя в текст. Авторы CSS
вдохновились именно этим приёмом, чтобы приблизить веб к традиционной типографике.
- 12 августа 2025

Лигатуры в CSS: как сделать текст аккуратнее
Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали,
что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки
не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости
и эстетики текста. В вебе ими управляет свойство font-variant-ligatures
.
Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.
Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.

CSS-селекторы. Шпаргалка для новичков
Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора.
- 8 августа 2025

CSS-градиенты в oklch
Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций
linear-gradient()
или radial-gradient()
. Его используют в вебе для фонов, кнопок,
рамок, декоративных элементов и даже в интерактивных эффектах при наведении.
Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.
Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch
.
Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.
- 8 августа 2025

CSS :has() — проверка наличия потомков или соседних элементов
Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним.
Так работает псевдокласс :has()
: он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент.
В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.
- 6 августа 2025

Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения
Функция image()
из модуля CSS Images Level 4 — это «умная» альтернатива url()
, которая умеет больше: задавать
направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh
и даже
рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть.
Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому»
и какие фолбэки использовать уже сейчас.
- 5 августа 2025

Всё самое важное о псевдоклассе :default
Псевдокласс :default
— это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.
Доступно в Baseline в статусе «Widely Available» с 2022-07-15
- 4 августа 2025

Как работает единица измерения em в CSS
Единица em
используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.
Доступно в Baseline в статусе «Widely Available» с 2018-01-29
- 30 июля 2025

Как найти пустые элементы в CSS
Псевдокласс :empty
помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.
- 29 июля 2025