Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <h2>Содержание</h2>

3 <ul><li><a>1. Фреймворк NES.css</a></li>

4 <li><a>2. Сироты и вдовы в CSS (orphans and widows CSS)</a></li>

5 <li><a>3. Селекторы атрибутов</a></li>

6 <li><a>4. Свойство border-image</a></li>

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

8 <li><a>6. Добавляем расшифровку аббревиатуры</a></li>

9 <li><a>7. Трансформация изображений</a></li>

10 </ul><h2>1. Фреймворк NES.css</h2>

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

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

13 <ul><li>Классы для оформления текста.</li>

14 <li>Кнопки.</li>

15 <li>Селекторы (радио и выпадающие), чекбоксы.</li>

16 <li>Несколько вариантов полей для ввода (инпутов).</li>

17 <li>Контейнеры для оформления разделов страниц.</li>

18 <li>Списки и таблицы.</li>

19 <li>Индикаторы прогресса (прогресс-бары).</li>

20 <li>Значки, иконки.</li>

21 <li>Персонажи игр Nintendo.</li>

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

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

24 <h2>2. Сироты и вдовы в CSS (orphans and widows CSS)</h2>

25 <p>Понятия "сироты" и "вдовы" пришло в CSS из типографской практики. Сирота - строка абзаца, которая перенеслась на новую страницу или колонку. Вдова - слово или строка из нескольких слов в конце страницы. Сироты и вдовы также называют висячими строками. Пример можно увидеть на иллюстрации.</p>

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

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

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

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

30 <h2>3. Селекторы атрибутов</h2>

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

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

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

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

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

36 <h2>4. Свойство border-image</h2>

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

38 <p>Синтаксис такой:</p>

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

40 <p>Остальные свойства необязательные:</p>

41 <ul><li>border-image-slice определяет смещение изображения в рамке.</li>

42 <li>border-image-width управляет толщиной рамки.</li>

43 <li>border-image-outset позволяет сдвинуть рамку за пределы элемента.</li>

44 <li>border-image-repeat контролирует повторение изображения в рамке.</li>

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

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

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

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

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

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

51 <p>Сначала обнуляем отображение маркеров.</p>

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

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

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

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

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

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

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

59 <h2>7. Трансформация изображений</h2>

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

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

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

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

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

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