Нові можливості CSS, про які варто знати.

Оскільки веб-розробка продовжує еволюціонувати, CSS перетворився з просто мови стилізації на потужний інструмент, здатний створювати складні макети, анімації та інтеракції. Цей посібник досліджує деякі з найінноваційніших і корисних сучасних функцій CSS, які розсувають межі веб-дизайну та розробки. Незалежно від того, чи ви досвідчений розробник, чи тільки починаєте, розуміння цих функцій дасть вам можливість створювати більш ефективні, гнучкі та візуально привабливі вебсайти.

Ми розглянемо ряд властивостей CSS та at-правил, які вирішують загальні проблеми веб-розробки, від скопінгу стилів і оптимізації продуктивності до створення складних анімацій і налаштування типографіки. Тож давайте вирушимо в подорож по передових функціях CSS і дізнаємось, як ці сучасні можливості можуть підвищити ваші навички веб-розробки.

🎯 Scoped Styling та виявлення можливостей

@scope

Правило @scope вводить революційний спосіб керування специфічністю CSS і інкапсуляцією. Воно дозволяє розробникам визначати певний обсяг для селекторів CSS, що робить простішим націлювання на елементи в конкретних піддеревах DOM, не впливаючи на елементи поза цим обсягом.

Як це працює: Правило @scope визначає межу, в межах якої застосовуються певні стилі. Цю межу визначає селектор, а стилі в блоці @scope впливають лише на елементи, які відповідають селектору і є нащадками елемента, що має цей обсяг.

Приклад:

<p>Цей абзац всередині обсягу.</p>
<p>Цей абзац поза обсягом.</p>

У цьому прикладі лише абзац всередині div з id #my-component буде пофарбований у синій колір. Абзац поза ним залишиться без змін.

Використання:
- Компонентно-орієнтовані архітектури: @scope ідеально підходить для стилізації компонентів окремо. Кожен компонент може мати свої власні інкапсульовані стилі, що запобігає конфліктам між компонентами і сприяє повторному використанню коду.
- Треті бібліотеки: Контролюйте стилі сторонніх бібліотек або вбудованих віджетів без побоювання, що їх стилі вплинуть на стилі вашого основного застосунку.
- Великі проекти з кількома розробниками: Знижує ризик конфліктів стилів в командних проектах, дозволяючи розробникам працювати над різними частинами CSS ізоляційно.
- Scoped CSS Модулі: Хоча CSS Модулі та інші рішення на етапі збірки надають подібну функціональність, @scope приносить цю можливість безпосередньо в браузер, спрощуючи робочі процеси та потенційно покращуючи продуктивність.

@supports

Правило @supports в CSS — це механізм виявлення можливостей, який дозволяє розробникам застосовувати стилі умовно, залежно від того, чи підтримує браузер конкретну CSS властивість. Це забезпечує м’яку деградацію і прогресивне вдосконалення, гарантуючи, що сучасні функції використовуються, коли вони доступні, при цьому надаючи стилі запасу для старих браузерів.

Як це працює: Правило @supports перевіряє, чи підтримує браузер задану CSS властивість чи функцію.
Якщо умова оцінюється як true, то стилі всередині будуть застосовані.

Приклад:

@supports (display: flex) {  
 .flex-container > * {  
 text-shadow: 0 0 2px blue;  
 float: none;  
 }  
}

У цьому прикладі стилі всередині @supports будуть застосовуватись лише у випадку, якщо браузер підтримує display: flex, що забезпечує сучасне макетування, одночасно уникаючи проблем у браузерах, що не підтримують цю властивість.

Використання:

• Прогресивне вдосконалення: Застосування сучасних стилів при забезпеченні сумісності зі старими браузерами.
• Виявлення можливостей для нових CSS властивостей: Перевірка підтримки нових CSS властивостей, таких як content-visibility або aspect-ratio.
• CSS Grid та Flexbox фоллбеки: Використання @supports для застосування стилів grid або flexbox лише в разі їх доступності, при цьому надаючи фоллбеки на основі float для старих браузерів.
• Забезпечення сумісності браузерів: Допомагає підтримувати стабільний дизайн на різних користувацьких пристроях.

🚀 Оптимізація продуктивності та рендерингу

content-visibility

Властивість content-visibility є справжньою революцією в оптимізації продуктивності CSS. Вона дозволяє браузерам пропускати рендеринг елементів, поки вони не стануть необхідними, значно покращуючи час завантаження та рендеринг складних або великих макетів.

Як це працює: Коли встановлено значення ‘auto’, content-visibility вказує браузеру, що він може пропустити рендеринг вмісту елемента, якщо він не видимий на екрані. Браузер все одно проводить початкове макетування, але не рендерить вміст, поки він не стане видимим.

Приклад:

section {  
 content-visibility: auto;  
 contain-intrinsic-size: auto 500px;  
}

У цьому прикладі секції, що не знаходяться в межах видимої області, не будуть мати відрендерений вміст, що прискорює початкове завантаження сторінки. Властивість contain-intrinsic-size вказує орієнтовний розмір вмісту, що допомагає запобігти зміщенням макету при завантаженні вмісту.

Використання:

• Довгі списки та стрічки новин: Оптимізація продуктивності безкінечно прокручуваних списків або новинних стрічок шляхом рендерингу лише тих елементів, що наразі видимі на екрані.
• Складні макети: Покращення початкового часу завантаження сторінок зі складними макетами, відстрочуючи рендеринг елементів поза екраном, поки вони не будуть потрібні.
• Вкладки та аккордеони: Запобігання рендерингу прихованих панелей вкладок або аккордеонів до їх активації, що покращує початкове завантаження та інтерактивність.
• Сторінки з великою кількістю зображень: Поєднання content-visibility: auto з техніками лінійного завантаження для подальшої оптимізації завантаження зображень і поліпшення сприйнятої продуктивності.

📐 Контроль макету та пропорції

aspect-ratio

Властивість aspect-ratio в CSS вводить потужний спосіб контролю пропорційних розмірів елементів без необхідності вручну вираховувати ширину або висоту. Вона дозволяє розробникам підтримувати певне співвідношення ширини до висоти для елемента, забезпечуючи стабільне масштабування на різних розмірах екрану та умовах макету.

Як це працює: Коли визначено значення aspect-ratio, браузер автоматично обчислює відсутнє значення ширини або висоти на основі заданого співвідношення.
Це гарантує, що елемент зберігає свої пропорції, навіть якщо змінюється розмір контейнера.

Приклад:

img {  
 display: inline;  
 width: 200px;   
 background-color: #000fff;   
 vertical-align: top;   
 aspect-ratio: 1 / 1;  
}

У цьому прикладі зображення завжди зберігає співвідношення 1:1 (квадратне), що забезпечує його правильне відображення, без розтягування чи спотворення при зміні розміру.

Використання:

• Адаптивні зображення та відео: Забезпечує правильне збереження пропорцій медіа елементів на різних розмірах екранів.
• Мережі макетів (Grid Layouts): Допомагає зберегти постійну консистентність дизайну при роботі з елементами різного розміру.
• Елементи-заповнювачі (Placeholder): Визначає очікувану форму вмісту до його завантаження, запобігаючи зміщенням макету.
• Сталий UI-компонент: Забезпечує, щоб кнопки, картки та інші компоненти зберігали збалансовані пропорції.

🎬 Покращення анімацій та взаємодій

@keyframes

Правило @keyframes є основою анімацій в CSS, яке дозволяє розробникам визначати проміжні кроки в анімаційній послідовності. Ця потужна функція дає змогу створювати складні багатоетапні анімації без використання JavaScript.

Як це працює: @keyframes визначає серію змін стилів, які повинні відбутися в певні моменти часу протягом анімації. Ці ключові кадри можна визначати за допомогою відсотків тривалості анімації або за допомогою ключових слів 'from' та 'to'.

Приклад:

@keyframes slide-in {  
 from {  
 transform: translateX(-100%);  
 opacity: 0;  
 }  

 50% {  
 opacity: 0.5;  
 }  

 to {  
 transform: translateX(0);  
 opacity: 1;  
 }  
}  

.animated-element {  
 animation: slide-in 2s ease-in-out;  
}

У цьому прикладі визначено анімацію ‘slide-in’, де елемент рухається зліва направо, одночасно згасаючи. Анімація потім застосовується до .animated-element.

Використання:

• UI Перехід: Створення плавних переходів для елементів UI, таких як модальні вікна, випадаючі меню або навігаційні пункти.
• Циклічні анімації: Створення безперервних анімацій для індикаторів завантаження, фонових ефектів або декоративних елементів.
• Інтерактивний зворотний зв'язок: Використання анімацій, що спрацьовують за дії користувача, для надання візуального зворотного зв'язку та покращення взаємодії.
• Розповідь та залучення: Створення складних багатоетапних анімацій для керування користувачами через наратив або виділення важливої інформації на сторінці.

@starting-style

Правило @starting-style змінює підхід до створення плавних та передбачуваних переходів у CSS. Воно вирішує типову проблему, коли переходи не починаються з бажаного початкового стану, особливо при роботі з псевдокласами або динамічно доданими класами.

Як це працює: @starting-style дозволяє визначити початкові стилі, які повинні застосовуватись до елемента до початку переходу.
Це забезпечує, щоб переходи завжди починалися з послідовного та передбачуваного стану.

Приклад:

[popover]:popover-open {  
 opacity: 1;  
 transform: scaleX(1);  
 transition: opacity 0.3s, transform 0.3s;  

 @starting-style {  
 opacity: 0;  
 transform: scaleX(0);  
 }  
}

У цьому прикладі, коли спливаюче вікно (popover) відкривається, воно плавно переходить від невидимого і зменшеного розміру до повністю видимого і нормального розміру.

Використання:

• Затримка переходів: Коли перехід спрацьовує після затримки (наприклад, за допомогою transition-delay), @starting-style гарантує, що елемент знаходиться в правильному стані на початку переходу, запобігаючи різким змінам.
• Складні анімації: У анімаціях з кількома етапами або змінами стану, @starting-style допомагає зберегти візуальну консистентність і запобігає непередбачуваним візуальним збоям під час переходу.
• Інтерактивні елементи: Використовуйте @starting-style, щоб створити плавні переходи для інтерактивних елементів, таких як кнопки, меню і модальні вікна, покращуючи взаємодію з користувачем.
• Синхронізовані анімації: Скоординуйте переходи між кількома елементами, гарантуючи, що всі вони починаються з одного і того ж візуального стану, створюючи більш узгоджені анімації.

offset-position

Властивість offset-position, яка використовується разом з offset-path, забезпечує точний контроль над тим, як елемент розміщується вздовж визначеного шляху руху. Це потужне поєднання дозволяє створювати складні, точні анімації, що виходять за межі простих лінійних рухів.

Як це працює: offset-position визначає початкове розташування елемента на його offset-path. Це можна встановити за допомогою різних одиниць або відсотків, що дозволяє точно позиціонувати елемент на будь-якій точці шляху.

Приклад:

.moving-element {  
 offset-path: path("M 0 0 L 100 100 L 200 0");  
 offset-position: 50% 50%;  
 animation: moveAlongPath 4s linear infinite;  
}  

@keyframes moveAlongPath {  
 0% {  
 offset-distance: 0%;  
 }  
 100% {  
 offset-distance: 100%;  
 }  
}

У цьому прикладі елемент рухається по зигзагоподібному шляху, визначеному offset-path. offset-position встановлює початкову точку посередині шляху, а анімація переміщує елемент по всьому шляху за 4 секунди, повторюючи його безкінечно.

Використання:

• Точний контроль анімації: Анімуйте елемент по складному шляху, контролюючи його точне місце розташування на будь-якому етапі анімації.
• Анімації, пов'язані зі скролом: Створюйте анімації, синхронізовані з позицією скролу користувача, дозволяючи ефекти паралакса та інші динамічні взаємодії.
• Інтерактивні ефекти: Використовуйте offset-position з введенням користувача (наприклад, рух миші) для створення інтерактивних анімацій та ефектів.
• Користувацькі курсори: Створюйте користувацькі курсори, що слідують за визначеним шляхом, додаючи унікальність інтерактивності вашого вебсайту.

📏 Масштабування та адаптивні налаштування

image-set()

Функціональна нотація image-set() в CSS є потужним інструментом для керування адаптивними зображеннями. Вона дозволяє браузеру вибирати найкраще зображення з набору варіантів, в основному, залежно від піксельної щільності пристрою.

Як це працює: image-set() надає список джерел зображень разом з їх дескрипторами роздільної здатності.
Браузер потім вибирає найбільш підходяще зображення, враховуючи характеристики пристрою.

Приклад:

.box {  
 width: 400px;  
 height: 200px;  
 background-repeat: no-repeat;  
 background-size: cover;  

 background-image: image-set(  
 url("https://image1.jpg") 1x,  
 url("https://image2.jpg") 2x  
 );  
}

У цьому прикладі пристрої зі стандартною роздільною здатністю завантажать image1.jpg, в той час як пристрої з високою роздільною здатністю (наприклад, Retina дисплеї) завантажать image2.jpg.

Використання:

• Адаптивні зображення: Забезпечте різні роздільні здатності зображень для різних відносин піксельної щільності пристроїв, гарантуючи чіткі зображення на екранах з високим Dpi без надмірних завантажень на стандартних екранах.
• Мистецьке напрямок: Використовуйте image-set() разом із медіа-запитами для подачі різних зображень, враховуючи як роздільну здатність екрану, так і його розмір, дозволяючи більш детально налаштувати дизайн в адаптивних розробках.
• Оптимізація продуктивності: Завдяки подачі правильно розмірених зображень ви значно знижуєте використання пропускної здатності та покращуєте час завантаження, особливо на мобільних пристроях.
• Майбутнє пристроїв: Оскільки нові роздільні здатності екранів з'являються, image-set() дозволяє легко додавати підтримку нових без зміни існуючого розмітки.

🔧 Користувацькі CSS властивості та контроль руху

@property

Правило @property в CSS є потужною функцією в наборі API CSS Houdini. Воно дозволяє розробникам явно визначати та обмежувати користувацькі CSS властивості, надаючи більше контролю та передбачуваності в тому, як ці властивості поводяться.

Як це працює: @property визначає користувацьку властивість з конкретним іменем, синтаксисом, поведінкою спадкування та початковим значенням. Це дає користувацьким властивостям можливість перевірки типів і дозволяє плавно анімувати їх.

Приклад:

@property --my-color {  
 syntax: '';  
 inherits: false;  
 initial-value: #c0ffee;  
}  

.element {  
 background-color: var(--my-color);  
 transition: --my-color 1s;  
}  

.element:hover {  
 --my-color: #bada55;  
}

У цьому прикладі ми визначаємо користувацьку кольорову властивість, яка може плавно переходити і обмежена до допустимих значень кольорів.

Використання:

• Системи дизайну: @property незамінний для створення надійних систем дизайну. Визначте глобальні дизайн-токени для кольорів, відступів, типографіки та іншого, забезпечуючи послідовне стилізування в усьому додатку.
• Тематизація: Легко перемикайте між світлими та темними темами або створюйте повністю кастомізовані теми, змінюючи значення кількох ключових користувацьких властивостей.
• Стилізація компонентів: Ефективно керуйте стилями, специфічними для компонентів, зменшуючи конфлікти стилів і сприяючи повторному використанню коду.
• Адаптивна типографіка: Використовуйте @property разом із медіа-запитами для динамічного коригування розміру шрифтів та інших типографічних властивостей залежно від розміру екрана.
• Анімації та переходи: Плавно анімуйте та переходьте між користувацькими властивостями, створюючи динамічні та привабливі інтерфейси користувача.

📝 Типографіка та форматування тексту

text-wrap

Властивість text-wrap вводить більш детальне управління обгортанням тексту, надаючи можливості, які перевищують традиційну властивість white-space.
Це дозволяє розробникам точно налаштовувати, як текст переноситься і обгортається всередині елементів, покращуючи читаність і візуальну привабливість.

Як це працює: text-wrap надає кілька значень, що контролюють поведінку переносу тексту:

• balance: Спробує збалансувати кількість рядків у абзаці для більш естетичного вигляду.
• pretty: Регулює розриви рядків, щоб уникнути "сиріт" і "вдів", покращуючи загальний потік тексту.
• stable: Гарантує стабільний перенос тексту на різних рендерингах, що корисно для уникнення зміщення макету.

Приклад:

.balanced-text {  
 text-wrap: balance;  
 text-align: justify;   
}  

.pretty-text {  
 text-wrap: pretty;  
}

У цих прикладах клас balanced-text намагатиметься створити рівномірний розподіл тексту по рядках, тоді як клас pretty-text відрегулює розриви рядків для покращеної читабельності.

Використання:

• Заголовки та титули: Використовуйте text-wrap: balance для заголовків, щоб створити візуально привабливі розриви рядків, особливо в адаптивних дизайнах.
• Текст статей: Застосовуйте text-wrap: pretty для довгих текстів, щоб покращити читаність, уникаючи "сиріт" і "вдів".
• Елементи інтерфейсу: Використовуйте text-wrap: stable для елементів інтерфейсу, де стабільний перенос є важливим, таких як меню навігації або текст кнопок.
• Адаптивний дизайн: Комбінуйте різні значення text-wrap з медіа-запитами для оптимізації подачі тексту на різних розмірах екранів.

white-space-collapse

Властивість white-space-collapse надає точний контроль над тим, як обробляється пробільний простір у тексті, дозволяючи згортати, зберігати чи використовувати інші кастомні поведінки. Ця властивість дає більш детальне налаштування порівняно з традиційною властивістю white-space, дозволяючи розробникам точніше налаштовувати подачу тексту.

Як це працює: white-space-collapse визначає, як послідовності пробілів обробляються всередині елемента. Вона має кілька значень:

• collapse: Згортає послідовності пробілів в один пробіл (поведінка за замовчуванням).
• preserve: Зберігає всі символи пробілів.
• preserve-breaks: Зберігає розриви рядків, але згортає інші пробіли.
• break-spaces: Схоже на preserve, але дозволяє розривати в будь-якому пробілі.

Приклад:

.collapsed-spaces {  
 white-space-collapse: collapse;  
}  

.preserved-spaces {  
 white-space-collapse: preserve;  
}  

.preserved-breaks {  
 white-space-collapse: preserve-breaks;  
}  

.break-spaces {  
 white-space-collapse: break-spaces;  
}

Ці приклади демонструють різні способи обробки пробільного простору в текстових елементах.

Використання:

• Приклади коду: Використовуйте preserve або preserve-breaks для відображення фрагментів коду з точною відступами та форматуванням.
• Попередньо відформатований текст: Зберігайте точний whitespace в блоках попередньо відформатованого тексту, гарантуючи, що макет збігається з оригінальним форматуванням.
• Контроль переносу в довгих рядках: Використовуйте break-spaces, щоб дозволити перенос всередині довгих рядків, що не мають природних розривів слів, таких як URL або ключі баз даних.
• Тонка настройка макету тексту: Використовуйте collapse для управління відстанню між словами і рядками, створюючи точніші типографічні налаштування.

Висновок

Сучасні функції CSS, які ми розглянули в цьому посібнику, представляють собою значний крок вперед у можливостях веб-розробки. Від детального контролю, який надають @scope і white-space-collapse, до оптимізацій продуктивності, які забезпечують content-visibility, і творчих можливостей, відкритих за допомогою @property і offset-position, ці функції надають розробникам можливість створювати більш ефективні, гнучкі та візуально привабливі вебсайти.
Розпочніть експерименти з ними вже сьогодні, щоб створювати більш ефективні, візуально приголомшливі та готові до майбутнього веб-застосунки!

Telegram / Instagram / Facebook / Threads / GitHub

Перекладено з: New CSS Features You Should Know