IT forum Ukraine

Привіт, колеги! Сьогодні поговоримо про те, як додавати контент на сторінку, не захаращуючи HTML-розмітку.

Найпопулярніший спосіб — це псевдоелементи **::before** та **::after**. Вони дозволяють вставити декоративний елемент (іконку, лапки, фон) за допомогою CSS.

[code=css]
.quote::before {
content: '“';
font-size: 2em;
color: #ccc;
}
[/code]

**Сучасні методи додавання елементів:**
1. **Web Components (Shadow DOM):** дозволяють створювати кастомні теги з власною ізольованою структурою.
2. **HTML Templates (<template>):** дозволяють зберігати шматки верстки в HTML, які не рендериться, поки ви не клонуєте їх через JS.
3. **CSS Counters:** генерація номерів списків або розділів прямо в CSS.

Які ви використовуєте нестандартні кейси для ::before/::after? І чи є щось, що ви намагаєтесь зараз замінити на більш сучасні підходи?

Я обожнюю використовувати псевдоелементи для створення складних кнопок. Наприклад, через один лише ::after можна зробити анімований підкреслювач, який виїжджає при наведенні. Це набагато чистіше, ніж додавати зайвий `<span>` у верстку.

До речі, для іконок зараз все частіше використовую **SVG symbols** — це теж крутий метод 'вставки' елементів, який дозволяє перевикористовувати графіку без дублювання коду.

Якщо говорити про майбутнє, то дуже перспективним виглядає **CSS Houdini (Paint API)**. Це дозволить нам писати JS-скрипти, які браузер буде використовувати безпосередньо в процесі рендерингу CSS. Наприклад, ми зможемо створювати кастомні фони або межі, які неможливо зробити стандартними методами.

Також зверніть увагу на функцію `content: url(...)`. Зараз вона працює обмежено, але в майбутньому ми зможемо вставляти складні мультимедійні елементи або навіть інші DOM-вузли прямо через CSS властивість content. Це кардинально змінить підхід до розділення структури та оформлення.

Тільки не забувайте про **Accessibility (A11y)**! Текст, доданий через `::before` або `::after` у властивості `content`, скрінрідери часто ігнорують або читають невірно. Якщо цей контент важливий для розуміння сенсу сторінки (наприклад, номер телефону або важливе попередження), краще додавати його в HTML. Псевдоелементи — це перш за все декор.