news.shamcode.ru | Да, этот HTML и CSS старый, но всё ещё полезный

Привет, Хабр!

Следя за развитием 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. Присоединяйтесь. Ссылка в профиле.