@layer

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

Можна створити шари з іменами reset, base, components, utilities і зафіксувати їхній порядок:

@layer reset, base, components, utilities;

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

Це особливо важливо в масштабних проєктах, де на один елемент можуть впливати стилі з різних джерел — наприклад, базові стилі, компоненти, утиліти або сторонні бібліотеки. Без @layer доводиться або боротися зі специфічністю, або покладатися на порядок підключення, що часто веде до неочікуваних результатів. @layer усуває цю невизначеність.

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

MDN

@babichdev

.

Твій CSS працює тільки тому, що твій користувач теж читає зліва направо. Але що буде, коли доведеться підтримувати арабську, іврит або вертикальний текст?

Сьогодні тема дня — CSS Logical Properties, набір властивостей, що описують просторові характеристики елементів не через фіксовані сторони (left, right, top, bottom), а через напрям потоку контенту: блоковий (block) і лінійний (inline). Вони автоматично підлаштовуються під мовні налаштування: наприклад, працюють справа наліво в арабській або зліва направо в українській — без додаткової логіки.

І замість цього:

padding-left: 1rem;
padding-right: 1rem;

пишемо просто:

padding-inline: 1rem;

Відступ буде з обох боків — але залежно від напрямку тексту. Те саме з вертикальними відступами:

margin-block-start: 1rem;
margin-block-end: 2rem;

Це працює замість margin-top та margin-bottom, адаптуючись під вертикальні або змішані потоки.

Для позиціонування можна замінити left або right на логічну альтернативу:

inset-inline-start: 0;

Це означає «притиснути до початку рядка», незалежно від того, це left у LTR чи right у RTL.

А для вирівнювання тексту:

text-align: start;

Це працює як left або right, залежно від мови інтерфейсу, і допомагає уникнути дублювання стилів у багатомовних проєктах.

Цей підхід значно спрощує підтримку інтерфейсів, які мають адаптуватися до RTL, вертикального письма чи просто бути однаково коректними у глобальних продуктах. Менше дублювання, менше умов, менше edge cases.

Logical properties включають не лише відступи, а й розміри, абсолютне позиціонування, і навіть бордери з їхнім радіусом. Це не синтаксичний цукор над margin-left, а повноцінна система, що базується на напрямку тексту.

До речі, напрямок буває не лише зліва направо чи справа наліво. Є ще вертикальний — згори донизу, наприклад у японській чи китайській розмітці. Якщо ж десь існує система письма з напрямком знизу вгору — напишіть, я такого ще не бачив.

Підтримується в усіх сучасних браузерах. Якщо проєкт має працювати в кількох мовних середовищах — логічні властивості варто починати використовувати вже зараз.

Особисто я користуюсь ними не так, аби давно, але мені ця фіча надзвичайно подобається (хоча зізнаюсь — переважно аби не писати окремо left і right). А ви вже використовуєте logical properties? Якщо ще ні — цікаво, що стримує. Напишіть у коментарях.

MDN

@babichdev

P.S. За вподобайки і поширення буду вдячний як білочка за горішок.

CSS довгий час нагадував традиційну родину: батьки вирішують усе, діти виглядають і поводяться так, як їм скажуть. Але час іде, нащадки виростають, починають сперечатися, обирати власний одяг і переклеювати шпалери в батьківській кімнаті. І от навіть у веброзробці настав момент, коли молодші елементи навчилися вказувати, як жити старшим.

Як ви вже могли здогадатися, сьогодні тема дня — псевдоклас :has(), який фактично додає можливість стилізувати батьківські елементи залежно від того, чи мають вони в собі той чи інший елемент або чи перебуває він у певному стані.

Приклад:

.card:has(input:checked) {
  background-color: #def;
}

Тло .card зміниться, якщо всередині буде увімкнений чекбокс.

Або ще:

form:has(:invalid) {
  border: 2px solid crimson;
}

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

До речі, якщо такі розбори допомагають краще розуміти можливості сучасного CSS — збережіть допис, поставте вподобайку і поширте тим, кому це теж буде цікаво. Це підтримує розвиток каналу. І мені пріятно.

Та справжня сила :has() розкривається у поєднанні з CSS Nesting.

Ось дещо розширений приклад із картинки:

.card {
  section:has(&.active) {
    border: 2px solid gold;
  }

  article:has(&) {
    color: lime;
  }
}

Якщо .card має клас active, тоді батьківський section, що містить цю .card, отримає рамку. А якщо .card просто існує всередині article — то цей article отримає колір тексту lime.

Варто звернути увагу на кілька моментів.

По-перше, ми описуємо це з точки зору самої .card. Саме .card ініціює правило, а не батьківський елемент.

По-друге, & — це посилання на сам елемент .card у вкладеному CSS. Тобто ми можемо всередині одного правила описати, як наявність або стан елемента впливає на зовнішній світ навколо нього.

Тож це правило читається так: "знайди section, який містить нащадка .card із класом active, і знайди article, який містить нащадка .card, незалежно від стану".

Що найголовніше — усе це працює без JavaScript, без дублювання стану і без костильних класів.

Підтримується у всіх сучасних браузерах: Chrome, Safari, Edge, а також у Firefox, починаючи з версії 121.

А ви вже пробували використовувати :has() у своїх проєктах? Якщо ще ні — кліпніть двічі, ми вишлемо когось вас визволяти. Але однак напишіть у коментарях.

MDN

@babichdev

КОРИСНІ ОГОЛОШЕННЯ
з етеру Лайвкодинг! Менеджер завантажень на чистому JS

***
Наймасштабніша зустріч української IT-спільноти: понад 2500 учасників, 120+ спікерів, більше 30 партнерів. На вас чекають доповіді, панельні дискусії, воркшопи в семи треках — від архітектури та розробки до AI, тестування та продакт-стратегій.

Будуть нові треки, секретні зони, круглі столи, афтепаті та інтерактивні стенди.

Квитки вже у продажу — приєднуйтесь!

DOU Day 2025 — зустрінемось у Києві 16–17 травня!
https://dou.ua/goto/w4iy

---
Знайомтеся з Мейлтрап — українською імейл-платформою, створеною під потреби розробників.

Високі показники доставки, SMTP i API з набором найпопулярніших бібліотек та найкраща в галузі аналітика.

Скористайтесь промокодом BABICH і отримайте знижку 20% на усі тарифні плани Мейлтрап: https://l.rw.rw/serhii_babich_3

***
А також не забудьте дати відповідь на Питання від партнера та отримати нагоду виграти мишку MX Anywhere 3 від Logitech!