Привет, Хабр!
Следя за развитием 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 ООО «МТ ФИНАНС»
ссылка на оригинал статьи https://habr.com/ru/articles/921878/
Добавить комментарий