
Привет, Хабр!
Следя за развитием HTML и CSS, очень сложно запомнить всё. Я заметил это, ведя свой канал и общаясь с коллегами. Многие люди не знают про возможности HTML и CSS, которые были внедрены в браузеры 6 лет назад или раньше.
Только их возраст не является недостатком. Они всё ещё полезны в современной разработке. По этой причине я собрал их в небольшой список и на основе его написал эту статью. Надеюсь, найдёте для себя что-то полезное.
Давайте посмотрим, что я подготовил.
▍ Свойство box-decoration-break для стилизации многострочного текста
Мне нравится классная типографика. Я всегда стараюсь находить возможности улучшить её. И меня удивляет, что многие не слышали про свойства box-decoration-break
. А оно помогает улучшить отображение ссылок, находящихся в тексте.
Рассмотрим, как по умолчанию они отображаются в подготовленном примере.
<body>
<p>Мне всегда нравились красивые и удобные интерфейсы. Желая сделать лучше для пользователя, я потратил не один день. Так я начал <a href="https://habr.com/ru/companies/ruvds/articles/912980/"> коллекционировать HTML и CSS лайфхаки.</a> Они улучшают впечатление пользователя от интерфейса. В итоге у меня получился внушительный список</p>
</body>
a:not([class]) {
background-color: #fae0ff;
padding-inline: 4px;
text-underline-offset: 4px;
color: currentColor;
}

При переносе ссылки на новой строке фон обрезается. Он ровно под первой буквой. А сейчас я покажу, как можно этого избежать.
a:not([class]) {
/* стили для стилизации ссылки */
box-decoration-break: clone;
}

Вот теперь фон и на второй части ссылки отображается как надо. А не какой-то там обрубок. Всё благодаря значению clone
.
Кроме свойства background
, его можно использовать вместе со свойствами border
, border-image
, box-shadow
, clip-path
, margin
и padding
. Мне кажется, они помогут реализовать самые креативные идеи дизайнера.
Свойство box-decoration-break
появилось в Google Chrome в 2012 году. Массовое использование было доступно с 2020 года.
▍ Включение переноса слов свойством hyphens
Перенос слов — обычное дело. А замечали, как браузеры его делают? Я очень долгое время вообще не задумывался об этом. А в этой области есть забавный момент.
Давайте посмотрим на пример. Я сделал блок с текстом.
<body>
<div class="awesome-block" lang="ru">
<p>Мне всегда нравились красивые и удобные интерфейсы. Желая <span>сделать</span> лучше для пользователя, я потратил не один день. Так я начал коллекционировать HTML и CSS лайфхаки, которые улучшают <span>впечатление</span> пользователя от интерфейса. В итоге у меня получился <span>внушительный</span> список.</p>
</div>
</body>

Вы заметили, что браузеры переносит полностью слова? Хотя некоторые слова могли бы частично поместить на предыдущей строке. Например, слова «сделать», «впечатление» и «внушительный».
Такой перенос слов можно изменить. Существует свойство hyphens
. Оно подсказывает браузеру, как переносить слова. Например, значение auto
заставит их анализировать текст и разбивать слова так, как мы привыкли.
body {
hyphens: auto;
}

Теперь текст с переносами. Визуально он более равномерный. Правда, мне непривычно его видеть таким. А как вам? Поделитесь, пожалуйста, в комментариях.
Свойство hyphens
появилось в мобильном браузере Safari в 2011 году. В 2022 году подтянулись остальные.
У меня есть ещё важное сообщение. При использовании свойства нужно следить за текущим языком текста. Он должен совпадать с тем значением, которое объявлено в атрибут lang
. Это нужно, чтобы браузер знал, по каким правилам переносить слова.
Я делал демо, используя сайт Codepen, где основной текст английский и используется значение en
для атрибута lang
. По этой причине я добавил ещё один атрибут lang
со значением ru
для блока с текстом. Без этого перенос слов не будет работать.
▍ Элемент для изменения цвета UI браузера
Многие знают элемент <meta>
в контексте адаптации проекта под поисковые системы. Только он полезен и в других задач. Например, с помощью него можно изменить цвет в верхней части браузера на мобильных устройствах.
Сразу перейду к примеру. Я нашёл пример, где разработчики используют элемент, установив значение цвета #222
.

<meta name="theme-color" content="#222">
На своём мобильном телефоне верхняя часть браузера стала темно-чёрной.

Значение theme-color
появилось в 2014 году для браузера Google Chrome на платформе Android. Для iOS его можно использовать с 2021 года. Также стоит сказать, что браузер Firefox всё ещё не поддерживает его. Но это не вызывает критичных ошибок. Браузер отображает стандартную панель.
▍ Свойство quotes добавляет правильные кавычки
Однажды я лазил по коду Хабра. Чисто случайно я наткнулся на правило, в котором использовалось свойство quotes
.
:lang(ru) {
quotes: "«" "»";
}
К своему стыду, я вообще не понял, что делает этот код. Начал разбираться. Оказывается, свойство quotes
помогает задать вид кавычек. Например, для русского языка кавычки-ёлочки «», а для английского кавычки-лапки “”.
Объявленное значение будет автоматически использоваться для текста, обёрнутого в элемент <q>
, или при указании значений open-quote
или close-quote
для свойства content
.
:lang(ru) {
quotes: "«" "»";
}
.quote::before {
content: open-quote;
}
.quote::after {
content: close-quote;
}
А я вручную расставлял кавычки. Но ничего, теперь буду использовать только свойство quotes
.
Самое удивительное для меня, что оно поддерживается с 3 версии браузера Firefox. А это 2008 год! В остальных — с 2015 года.
▍ Отключение встроенной в браузеры валидации атрибутом novalidate
Формы не существуют без валидации. Даже в браузерах есть стандартная. Именно из-за неё мы можем увидеть системное уведомление об ошибке.
Многим она не нравится. Но мало кто знает, что её можно отключить. Просто надо использовать атрибут novalidate
.
<body>
<!-- встроенная валидация отключена, потому что чаще всего её реализуют самостоятельно -->
<form novalidate>
<div class="field">
<label class="field__label" for="login">Логин</label>
<input class="field__input" id="login" type="text">
</div>
<div class="field">
<label class="field__label" for="password">Пароль</label>
<input class="field__input" id="password" type="password" minlength="4" required>
<span class="field__hint">Пароль должен быть больше 3 символов</span>
</div>
<button>Войти</button>
</form>
</body>
Больше сообщение не будет показано. Но тут есть важный момент. Атрибут не отменяет работу псевдо-классов :valid
или :invalid
. Они продолжат работать, а значит, мы можем писать стили, опираясь на них.
Атрибут появился в браузерах Google Chrome и Firefox в 2011г. В 2017 году все остальные их догнали.
▍ Значение all для свойства user-select позволяет выделить фрагмент текста
Вы можете знать свойство user-select
в задаче отмены выделения текста у кнопок. Когда разработчики объявляют значение none
. Только у свойства есть ещё полезные значения.
Давайте рассмотрим пример. Я открою свою статью на Хабре. Далее попробуем выделить значение system-ui
с помощью мышки, кликнув по нему два раза, или нажмём и удержим палец, если у вас сенсорный экран.

Выделилось только первая часть до дефиса. Но мне хочется, чтобы выделилось полностью значение вместе с дефисом и второй частью. Именно здесь будет полезное значение all
для свойства user-select
.
Давайте попробуем использовать его. Я сделаю это прямо в инструментах разработчика. Для этого нужно найти элемент, который содержит значение, и к нему добавить свойство. У нас это элемент <code>
.

Снова попробуем выделить значение system-ui
.

Мне кажется, значение супер полезное. Такие данные, как электронная почта, теперь можно выделять за одно движение. Класс!
Значение all
существует с 2006 года. Браузер Firefox его реализовал. Другие браузеры догнали его только в 2022 году.
▍ Настройка изменения ширины и высоты элемента с помощью свойства resize
При вёрстке поля для ввода многострочного текста мы используем элемент <textarea>
. По умолчанию пользователь может бесконечно растянуть его по горизонтали и вертикали.
Конечно же, вёрстка поедет. Появится горизонтальная прокрутка.
<body>
<form>
<div class="field">
<label class="field__label" for="login">Логин</label>
<input class="field__input" id="login" type="text">
</div>
<div class="field">
<label class="field__label" for="msg">Введите сообщение</label>
<textarea class="field__textarea" id="msg"></textarea>
</div>
<button>Отправить</button>
</form>
</body>
.field__label {
display: block;
}
.field__textarea {
min-height: 100px;
max-height: 250px;
}

Чтобы такого не происходило, нам поможет свойство resize
. И нет, мы не будем использовать значение none
, чтобы отключить поведение. Мы сделаем так, чтобы элемент расширялся только по вертикали.
Добавим значение vertical
.
.field__label {
display: block;
}
.field__textarea {
min-height: 100px;
max-height: 250px;
resize: vertical;
}

Значение vertical
можно было использовать с 2016 года. У меня не получилось найти информацию, в каких браузерах оно первым появилось. А сам я не помню. Если знаете, напишите, пожалуйста, в комментариях.
▍ Заключение
Подведу итог. В этой статье мы рассмотрели:
как использовать элемент
<meta>
для изменения цвета в верхней части браузера на мобильных устройствах,свойство
box-decoration-break
, позволяющее стилизовать ссылки с учётом переноса текста,изменение переноса текста с помощью свойства
hyphens
,настройку расширения элемента
<textarea>
с помощью свойстваresize
,автоматическое добавление правильных кавычек, используя свойство
quotes
,атрибут
novalidate
отключает встроенную в браузер валидацию,значение
all
для реализации выделения текста.
Буду рад прочитать, какие старые возможности HTML и CSS всё ещё полезны. Напишите, пожалуйста, их в комментариях. На этом я прощаюсь. Спасибо за чтение!
P. S. Помогаю больше узнать про CSS в своём ТГ-канале CSS isn't magic. Присоединяйтесь. Ссылка в профиле.
© 2025 ООО «МТ ФИНАНС»
SolidSnack
Я если честно почти каждый день что-то новое (для себя) открываю в html и css, уже мысль подходит что надо за жизнь хотя-бы раз всю спецификацию прочитать, чтобы не ловить инсайды)
Kwisatz
К сожалению, это не поможет, например, когда работал с печатью, оказалось что хром в этой части соблюдает стандарт почти никак. Или sticky который для thead в хроме до сих пор не работает и не будет судя по тому что разрабы сознательно отказались изза того что у них чтото пошло не так (за давностью лет забыл что именно)
Adyavor
Работает sticky для thead в хроме.
Kwisatz
Точно спасибо, таки исправили в 2021, при это полная поддержка в сафари с 2014, а ff 2018