Селекторы атрибутов, ностальгический фреймворк, сироты и вдовы: 7 необычных приёмов и инструментов HTML/CSS
2026-02-26 15:06 Diff
https://ru.hexlet.io/blog/posts/selektory-atributov-nostalgicheskiy-freymvork-siroty-i-vdovy-7-neobychnyh-priyomov-i-instrumentov-html-css

Практически каждый веб-разработчик регулярно или время от времени работает с вёрсткой. Эта статья для начинающих верстальщиков и будущих программистов. В ней вы найдёте несколько необычных и редких инструментов и приёмов HTML/CSS.

Содержание

1. Фреймворк NES.css

Дети 90-х с ностальгией вспоминают 8-битную графику игр из консолей Nintendo. Видимо, японскому разработчику B.C.Rikko не хватает игрушек из прошлого. Он создал CSS-фреймворк NES.css, с помощью которого каждый желающий может стилизовать сайт или отдельную страницу под винтажную графику.

Сложно представить деловой сайт с оформлением в стиле Nintendo. Тем не менее в фреймворке NES.css есть минимальный набор компонентов и инструментов, необходимых для создания полноценной страницы. Вот некоторые инструменты и возможности фреймворка:

  • Классы для оформления текста.
  • Кнопки.
  • Селекторы (радио и выпадающие), чекбоксы.
  • Несколько вариантов полей для ввода (инпутов).
  • Контейнеры для оформления разделов страниц.
  • Списки и таблицы.
  • Индикаторы прогресса (прогресс-бары).
  • Значки, иконки.
  • Персонажи игр Nintendo.

Обратите внимание, в фреймворке есть компоненты, но нет модульной сетки. Ее можно определить самостоятельно. Также можно воспользоваться любым готовым решением.

Фреймворк NES.css можно подключить к проекту с помощью npm или Yarn, а также через CDN. Подробную информацию смотрите в репозитории фреймворка на GitHub.

2. Сироты и вдовы в CSS (orphans and widows CSS)

Понятия «сироты» и «вдовы» пришло в CSS из типографской практики. Сирота — строка абзаца, которая перенеслась на новую страницу или колонку. Вдова — слово или строка из нескольких слов в конце страницы. Сироты и вдовы также называют висячими строками. Пример можно увидеть на иллюстрации.

Сироты и вдовы ухудшают читабельность текста и уменьшают визуальную привлекательность страницы. В вебе проблема сирот и вдов решается с помощью CSS-свойств orphans и widows.

Свойство orphans применяется к блочным элементам, например, p или div. Определяет количество строк абзаца, которые должны остаться на предыдущей странице.

Свойство widows также применяется к блочным элементам. Определяет количество строк абзаца, которые переносятся на новую страницу.

Обратите внимание, Firefox не поддерживает свойства orphans и widows. Поддержку в других браузерах можно проверить с помощью сервиса Can I use: orphans и widows. Свойства orphans и widows входят в число Paged media, которые определяют внешний вид веб-страницы для печати.

3. Селекторы атрибутов

Почти все начинающие верстальщики знают, что к элементам можно обращаться через классы, идентификаторы и теги. Опытные специалисты применяют ещё и селекторы атрибутов.

Очень простой практический пример: с помощью селектора по атрибуту можно выделить на сайте все страницы с пустым атрибутом alt.

Это может пригодиться для внутренней оптимизации сайта: быстрого поиска фото с незаполненным атрибутом alt.

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

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

4. Свойство border-image

С помощью свойства border-image можно задать рамку элемента, в которой будет отображаться изображение.

Синтаксис такой:

Свойство border задает рамку, которая будет отображаться, если изображения нет или его невозможно загрузить. Свойство border-image-source определяет источник изображения рамки. В нем можно указать URL изображения или CSS-градиент.

Остальные свойства необязательные:

  • border-image-slice определяет смещение изображения в рамке.
  • border-image-width управляет толщиной рамки.
  • border-image-outset позволяет сдвинуть рамку за пределы элемента.
  • border-image-repeat контролирует повторение изображения в рамке.

Чтобы сделать градиентную рамку, укажите градиент в свойстве border-image-source.

Свойство border-image поддерживают основные современные браузеры. Подробнее об использовании свойства читайте в справочнике MDN.

5. List-style-image vs. background-image (добавляем изображения в качестве маркеров списка)

Задать изображение в качестве маркера списка можно с помощью свойства list-style-image.

Но при таком подходе появляется проблема: маркеры вертикально смещаются относительно элементов списка.

Выравнивание с помощью vertical-align в этом случае не работает. Поэтому изображения в качестве маркеров списка удобнее задавать с помощью background-image.

Сначала обнуляем отображение маркеров.

Теперь добавляем фоновое изображение к элементам списка.

В свойстве background-image указан URL изображения, свойство background-repeat в данном случае отменяет повторение фонового изображения. Свойство line-height задает высоту строки. Этот показатель должен коррелировать с размером фонового изображения. Свойство padding-left позиционирует текст относительно фонового изображения.

6. Добавляем расшифровку аббревиатуры

Очень простой инструмент, с помощью которого удобно расшифровывать акронимы и аббревиатуры в тексте.

Справка: аббревиатура — слово, образованное из первых букв нескольких слов, например, США; акроним — вид аббревиатуры, который произносится слитно, а не по буквам, например, комсомол. Задать расшифровку для аббревиатуры можно с помощью тега abbr.

Тег добавляет к тексту подсказку, которая всплывает при наведении курсора.

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

7. Трансформация изображений

Свойство transform применяется к разным элементам страницы. Но чаще всего его используют для работы с изображениями. Например, transform: rotate() позволяет повернуть фотографию. Это может потребоваться при верстке сложных макетов.

Свойство transform: skewX() наклоняет изображение на заданный градус по вертикали.

Свойство transform: skewY() наклоняет изображение на заданный градус по горизонтали.

Свойства transform: translateX() и transform: translateY() сдвигают изображение на заданное число пикселей по вертикали и горизонтали.

Современные браузеры поддерживают свойство transform. Подробную документацию смотрите в справочнике MDN.

Подборка необычных инструментов вёрстки остается открытой. Пишите в комментариях о необычных приёмах и техниках, с которыми вы сталкивались во время обучения или работы.