Разработка

Селекторы атрибутов, ностальгический фреймворк, сироты и вдовы: 7 необычных приёмов и инструментов HTML/CSS

Селекторы атрибутов, ностальгический фреймворк, сироты и вдовы: 7 необычных п... главное изображение

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

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

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

пример оформления страницы с помощью NES.css

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

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

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

NES.css в действии

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

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

Понятия «сироты» и «вдовы» пришло в 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;
}

пример border-image

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

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

border-image-source пример

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

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

вертикальное выравнивание в CSS

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

.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 позиционирует текст относительно фонового изображения.

тег acronym

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

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

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

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

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

пример img transform rotate

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

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

пример img transform skewX

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

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

img {
  transform: rotate(15deg);
}

пример img transform skewY

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

img {
  transform: skewX(10deg);
}

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

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

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


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

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Javascript, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →