Селекторы атрибутов, ностальгический фреймворк, сироты и вдовы: 7 необычных приёмов и инструментов 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. Определяет количество строк абзаца, которые должны остаться на предыдущей странице.

div {
  orphans: 3;
}

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

div {
  widows: 3;
}

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

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

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

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

img[alt=""] {
    border: 3px dotted red;
}

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

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

a[href="https://ru.hexlet.io/"] {
    color: red;
}

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

input[type="text"] {
    background-color: yellow;
}

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

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

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

.jack-sparrow {
    border: 50px solid transparent;
    border-image-source: url(adventure.jpg);
}

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

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

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

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

.jack-sparrow {
    border: 50px solid transparent;
    border-image-source: linear-gradient(yellow, red);
    border-image-slice: 9;
}

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

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

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

ul {
  list-style-image: url(smile.png);
}

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

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

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

ul {
  list-style-type: none;
}

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

li {
  background-image: url(smile.png);
  background-repeat: no-repeat;
  line-height: 30px;
  padding-left: 35px;
}

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

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

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

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

<abbr title='Соединённые Штаты Америки'>США</abbr>

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

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

<acronym title='коммунистический союз молодежи'>Комсомол</acronym>

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

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

img {
  transform: rotate(15deg);
}

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

img {
  transform: skewX(10deg);
}

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

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

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

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