HTML и CSS из прошлого, которые до сих пор актуальны

Я интересуюсь вёрсткой с момента появления первых версий браузера Google Chrome. Конечно, современному фронтендеру тяжело понять то, что я испытывал с коллегами. Мы именно те разработчики, которые знали кучу рецептов, как починить определённый баг в конкретном браузере.

Но тогда были не только плохие моменты. В этом легаси осталось много хороших возможностей. Только они затерялись с течением времени. Мне же от этого грустно.

По этой причине сегодня пришёл к вам исправлять эту ситуацию. Мы рассмотрим старые возможности HTML и CSS, которые сегодня всё так же полезны.

Давайте посмотрим, что я подготовил.

Множество фонов для свойства background

Когда я начал заниматься вёрсткой, фоновые изображения были элементарными. Можно было применять только одно, а дизайнеры придумывали разные сложные фоны. Приходилось выкручиваться наложением элементов друг на друга.

А потом появилась возможность добавлять множество фонов для одного элемента. Для демонстрации добавим несколько изображений.

.awesome-block {
  /* здесь стили для позиционирования текста */

  min-height: 100dvh;	
  position: relative;
	
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url("sun.svg"), url("background.webp");
}

Современное свойство background может поддерживать неограниченное количество фонов. Браузеры будут применять первое значение самым верхним, а последнее окажется ниже всех. Таким образом, в нашем примере изображение sun.svg будет отображено поверх изображения background.webp.

Если же вам нужно добавить градиент, то они тоже отлично дружат с множественными фонами. Просто укажите его первым, чтобы случайно не потерять.

.awesome-block {
  /* здесь стили для позиционирования текста */

  min-height: 100dvh;	
  position: relative;
	
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: linear-gradient(to top, rgba(15, 63, 122, 0.5), rgba(15, 63, 122, 0.5)), url("sun.svg"), url("background.webp");
}

Немножко пожалуюсь. Как думаете, какой браузер сдерживал всех от использования множества фонов для свойства background?

Конечно, Internet Explorer 8. Помню, все тогда просто плюнули и сказали дизайнерам, что в нём фоны будут обычными. Хорошо, что тогда это прокатило.

Стилизация подчёркивания текста с помощью свойства text-decoration

Очень долгое время я причислял свойство text-decoration к самым простым. Для меня оно просто подчёркивало текст, да и делало это, мягко говоря, некрасиво. А оказывается, оно уже давно изменилось!

Современное свойство text-decoration включает в себя свойства: text-decoration-line, text-decoration-thickness, text-decoration-style и text-decoration-color.

Для демонстрации создам под текстом сплошную линию толщиной 5px и цветом tomato.

.awesome-link {
  text-decoration: underline 5px solid tomato;
}

Мне особенно нравится возможность менять толщину линии. Именно из-за неё мне приходилось использовать свойство border.

Представьте, фронтендеры делили способы создать линию по толщине. Если требовалось использовать стандартную линию, например у ссылок, то можно было использовать свойство text-decoration. Если же линия была чуть толще или отличалась цветом от текста, то уже добавляли свойство border.

Атрибут accept помогает более просто выбрать нужный файл при загрузке

В последний год часто продаю старые вещи. Приходится фотографировать и выкладывать на сайт с объявлениями. Я человек, у которого всегда куча разных файлов на компьютере. По этой причине я всегда трачу много времени, чтобы найти нужные фотографии.

А на сайте с объявлениями этого нет. При загрузке фотографии мне отображаются только изображения. Среди них мне легче найти нужные фотографии для своего объявления.

Я полез смотреть, как же это реализовано, и увидел атрибут accept для элемента input с типом file.

<body>
  <!-- другие элементы -->
  
  <input accept="image/gif,image/png,image/jpeg,image/bmp,image/tiff,image/heic,.gif,.png,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.bmp,.tiff,.tif,.heic" id="js-messenger-attachment-file-input" type="file" multiple="" data-marker="reply/imageInput">
  
  <!-- другие элементы -->
</body>

Вот про какую фичу HTML я точно забыл. Признаю, это моя ошибка.

Атрибут accept уже работал в большинстве браузеров в 2015 году. Его задача очень простая — помочь вам более просто выбрать нужный файл для загрузки. Происходит это за счёт того, что разработчик указывает форматы файлов, которые отобразятся пользователю в диалоговом окне.

В нашем примере перечислены большинство форматов и расширений для изображений.

Значение атрибута может содержать конкретное расширение файла вместе с точкой, а может — строку типа MIME без расширений.

<body>

  <!-- используются MIME-типы --->
  <input type="file" accept="image/png, image/jpeg">

  <!-- используются расширения файлов --->
  <input type="file" accept=".pdf,.doc,.docx">

</body>

Важное уточнение. Атрибут accept не запрещает выбирать файлы другого типа. Пользователь может переключить тип файлов в диалоговом окне.

Например, я переключился на «Все файлы», и браузер стал отображать абсолютно все файлы в директории.

По этой причине необходимо реализовать проверку типов файлов на стороне сервера для обеспечения безопасности и корректной работы приложения.

Разнообразное отображение текста с помощью свойств writing-mode и text-orientation

В моей практике дизайнеры всегда любили отображать текст с изюминкой. Посмотришь на макет и думаешь: «Да, как тебя сверстать-то?» У меня отдельная депрессия была от вертикального текста.

И, конечно, когда я перестал активно верстать, появились свойства writing-mode и text-decoration, которые сводят мою нелюбимую задачу до двух строк кода! Представляете, как мне было обидно?

Свойство writing-mode управляет направлением расположения элементов и текста. Для него мы можем использовать значения horizontal-tb, vertical-rl, vertical-lr, sideways-rl и sideways-lr.

Давайте попробуем применить значение vertical-lr к элементу с текстом.

<body>
  <div class="awesome-block">
    <p>Великолепный текст</p>
  </div>	
</body>

.awesome-block {
  writing-mode: vertical-lr;
}

Браузеры перестроили текст, и теперь он отображён вертикально. Но буквы не подстроились под новое направление. Их нужно также повернуть.

Именно для этой задачи существует свойство text-decoration. Значение upright исправит отображение букв в нашем примере.

.awesome-block {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

Теперь текст отображён вертикально, и он идёт сверху вниз и слева направо. Даже перенос строки работает. Браузеры отобразили слово «Текст» во второй колонке.

Единицы измерения em для декоративной стилизации текста

Когда только появлялась резиновая вёрстка, а потом и адаптивная, в CSS очень популярны были единицы измерения em. Я помню, как пытался с помощью них оптимизировать количество кода, избавляясь от пикселей.

Это потом появились единицы rem. Мне кажется, что современные фронтендеры уже в основном используют их. Я редко встречаю в коде крупных проектов единицы измерения em. Хотя они могут быть полезны в определённой задаче.

Для демонстрации я буду использовать пример из книги Леа Веру «Секреты CSS».

/**
 * Glowing text
 */

body {
	background: #203;
	font: bold 500%/1 Rockwell, serif;
}

a {
	color: #ffc;
	text-decoration: none;
	transition: 1s;
}

a:hover { 
  text-shadow: 0 0 0.1em, 0 0 0.3em; 
}

Мы видим, что есть стили для добавления тени к тексту при срабатывании псевдокласса :hover на ссылке. Автор использует единицы измерения em для установки значения. Почему они, а не единицы измерения px?

Для ответа на этот вопрос нужно задуматься над тем, насколько гибким вы хотите получить код. Например, в теории текст, к которому применяется тень, может отобразиться более крупным или меньшим размером.

/**
 * Glowing text
 */

body {
	background: #203;
	font: bold 500%/1 Rockwell, serif;
}

a {
  color: #ffc;
  text-decoration: none;
  transition: 1s;
  font-size: 0.5rem;
}

a:hover { 
  text-shadow: 0 0 0 8px, 0 0 24px; 
}

Если в этом случае используются пиксели, то браузеры не станут изменять тень, чтобы она соответствовала новому значению свойства font-size. Следовательно, нам нужно будет устанавливать новое значение для свойства text-shadow, чтобы визуальный результат был корректным. А в случае с единицами измерения em браузеры сами рассчитают новое значение для свойства text-shadow.

Заключение

Подведу итог. В этой статье мы рассмотрели:

• возможность использовать множество фонов вместе со свойством background;

• атрибут accept, упрощающий выбор нужного файла при его загрузке;

• как можно отобразить текст вертикально, используя свойства writing-mode и text-orientation;

• какие есть возможности для разнообразного подчёркивания текста свойством text-decoration;

• использование единиц измерения em для декоративных задач по стилизации текста.

Надеюсь, вам было полезно. Коллеги, ещё есть просьба к вам. Пожалуйста, расскажите в комментариях, какие старые возможности HTML и CSS всё ещё полезны, по вашему мнению. С удовольствием прочитаю.

На этом у меня всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих ТГ‑каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.