@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!

А ви знаєте, що в CSS існує можливість вибрати і стилізувати порожній елемент? Я теж колись не знав. Ба більше — вважав, що це щось із майбутнього, де існує тільки CSS3. Насправді ця можливість із нами ще з часів CSS2.1 — просто якось тиха і непомітна, без гучних анонсів і трендових статей.

Цікавий факт: CSS2.1 став стандартом у 2011 році — того самого року, коли я розпочав свою карʼєру у веброзробці.

Псевдоклас :empty працює дуже просто: він вибирає елементи, у яких немає жодного вмісту — ні тексту, ні дочірніх елементів. Абсолютна порожнеча. І це справді може бути корисним: наприклад, щоб приховати порожні картки або підсвітити розмітку, яку випадково залишили пустою.

Єдине, що треба пам’ятати: навіть один пробіл, перенос рядка чи непомітний   уже робить елемент непорожнім. :empty спрацьовує тільки тоді, коли в DOM буквально нічого немає.

section:empty {
  outline: 2px dashed red;
}

section:empty::before {
  content: "Тут мало би бути щось важливе.";
  color: crimson;
}

MDN

@babichdev

Зайшло? Лайк, збереження та поширення — найкращі відповіді, чи варто продовжувати.

Коментарі вбивають ютуб. Точніше — їхня відсутність. Точніше — не весь ютуб, а мій канал конкретно.

У ютуба взагалі цікаве уявлення про те, що кому рекомендувати, і активність під відео — не останній в тому фактор. Чим вона менша, тим відео "нецікавіше", і тим швидше ютуб кладе на нього алгоритмічний пісюн.

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

Обіцяю відповісти на усі ваші відгуки!

https://youtube.com/live/DNOe80KVurI

P.S. В описі під відео вже є посилання на репозиторій!

#цього_тижня
Глянули одним оком на @layer і поговорили про порядок застосування стилів.

Дізналися, як не писати padding-left і padding-right за допомогою CSS Logical Properties.

Розглянули, як стилізувати батьківські елементи за допомогою :has та без допомоги JavaScript.

Згадали про :empty та дізналися як вибирати справді порожні елементи.

А ще дивилися прямий етер з лайвкодингом, на якому разом з гостем робили менеджер завантажень на чистому JS.

Підписуйся: @babichdev

***
Усім гарних вихідних та смачної паски! Зустрінемось після свят!

Чи доводилось вам коли-небудь відчайдушно хотіти, аби в природі існував querySelector "навпаки"? А для пошуку потрібного батька не треба було б робити нескінченні while { el.parentElement… }?

Якщо я вам скажу, що таке уже дуже давно існує?

closest() — це метод DOM API, який дозволяє знайти найближчий елемент-предок (або сам елемент), що відповідає заданому CSS-селектору. Він перевіряє спочатку сам елемент, потім піднімається до батька, і так далі догори по DOM-ієрархії до кореня документа.

Якщо елемент знайдено — повертається він. Якщо ні — null.

Ось таким чином можна впевнено ловити клік саме на потрібному елементі, навіть якщо фактично ми клікали десь на його дочірні елементи:

container.addEventListener('click', (event) => {
  const item = event.target.closest('.list-item');
  if (item) {
    item.classList.toggle('selected');
  }
});

Найчастіше closest() допомагає при делегуванні подій через контейнери, при роботі з вкладеними елементами або ж коли потрібно визначити належність елемента до певного блоку.

Цікаво? Постав серденько та пошир цей допис серед друзів. Це дуже цінно для ровитку каналу.

Важливі нюанси:
• Якщо сам елемент підходить — він і повертається.
• Пошук тільки догори (не вниз).
• Якщо немає збігів — повертається null.
• Працює тільки для елементів, що фактично знаходяться в DOM.

Трохи історії: ідея closest() давно використовувалась, до прикладу, у jQuery (версія 1.3, ~2009 рік). Метод $(el).closest(selector) працював за тією ж логікою: спочатку елемент, потім його батьки. У бравзерах closest() зʼявився в стандарті Selectors API Level 2 і підтримується скрізь із 2015 року.

Тож сьогодні це надійний і швидкий спосіб шукати потрібний контекст без зайвого перебору руками.

А ви як, користуєтесь closest, чи досі перебираєте усіх батьків руками? Напишіть обовʼязково в коментарях!

MDN

@babichdev

На полі — заміна! Ну або не на полі, а в DOMі. У будь-якому разі іноді виникає потреба замінити один елемент у DOM на інший — не змінити його вміст, не оновити клас, а саме повністю підмінити.

Поширеним, так би мовити "bulletproof" підходом уже тривалий час є використання методу replaceChild у батьківського елемента:

parent.replaceChild(child, newChild);

Сьогодні ж є куди краший спосіб — replaceWith. Це метод, який викликається напряму на елементі й дозволяє одразу вказати, чим його потрібно замінити:

child.replaceWith(newChild);

Метод працює і для вставки кількох елементів одночасно, наприклад:

child.replaceWith(newChild1, newChild2);

Або навіть просто тексту:

child.replaceWith('Привіт!');

Головне — памʼятати, що replaceWith() видаляє елемент, на якому викликається, і вставляє на його місце все, що передано в аргументах. Якщо цей елемент ще не в DOM — метод не має жодного ефекту.

Використовується він у всіх основних браузерах ще з 2019 року й входить у Baseline, працює стабільно, читається просто. Якщо ви ще досі видаляєте елементи вручну й потім вставляєте нові — спробуйте replaceWith.

До речі, вам уже випадала нагода використати replaceWith у себе, чи ще тримаєтесь за remove і append? Напишіть у коментарях.

Корисно? Цікаво? З вас вподобайка і репост.

MDN

@babichdev

#кандидат_vs_співбесіда
Відповідаєте правильно, але співбесіда все одно неуспішна? Давайте поставлю просте питання: а ви взагалі розмовляєте з інтервʼюєром?

Найпоширеніша помилка — відповідати, як на іспиті. Суха академічна відповідь, без уточнень, контексту чи емоцій. Наче говорить автоматичний перекладач, а не жива людина.

Однак співбесіда — це не інтелектуальний конкурс. Це розмова. Бесіда. Розробники на реальних проєктах обговорюють задачі, уточнюють вимоги, дискутують про підходи. Навіть початківці не мають сидіти мовчки в куточку.

А аби не довелося мовчки в куточку зі сльозами на щоках сидіти мені — постав вподобайку та пошир цей допис. Дякую.

Як і на співбесіді. Якщо вас питають, до прикладу, що б ви використали для такого чи такого лейауту, відповідь «флекс» чи «ґрід» буде абсолютно недостатньою. Варто пояснити, чому саме ви обрали таку відповідь, що вплинуло на ваше рішення. В ідеалі — добре було б зачепити й інші аспекти. Наприклад, пояснюючи вибір флекса, одразу додати, чому не ґрід.

Такий підхід показує не лише знання, а й практичне мислення. Інтервʼюєр чує від вас не сухе визначення терміну, а ваш особистий підхід до задач.

Найкраща відповідь — не ідеальна, а жива, з досвіду та розуміння. Ваша задача — не поставити крапку на початку, а пройтися стежкою думок. Уміння озвучувати свої рішення — одна з найсильніших навичок на співбесіді. Це показує не лише результат, а й шлях до нього. А шлях дуже важливий, адже завтра ви разом будете шукати баг.

Шукають не ідеальних — шукають мислячих.

@babichdev

Хто хоче стати зіркою наступної співбесіди на ютубі? Мерщій подавайте заявки, адже етер планується уже на наступний четвер, 1 травня!

Фронтенд, фулстек, бекенд? Джуни, мідли, синйьори? Радо розгляну усі заявки, і разом з моїм поки що таємним експертом з Brainstack оберемо наступного учасника співбесіди на каналі "Сергій Бабіч та Дивовижний світ веброзробки".

І покваптеся, форма буде відкритою лише добу, до 19:00 завтрашнього дня.

Не проґавте нагоди потрапити в тілівізор! )

ПОДАТИ ЗАЯВКУ НА УЧАСТЬ В ОНЛАЙН-СПІВБЕСІДІ

@babichdev

#раджу почитати
Чи може однопотоковий JavaScript готувати піцу та приймати нові замовлення одночасно? Алла Капля, Backend-розробниця у Weblium, розбирає Promise на живому прикладі піцерії: чому без асинхронности нікуди, як вийгло так, що обіцянки в JS є, а от пробачень нема, та що приховано за кулісами then(), catch() і finally().

Готові поглибити свої знання для наступного інтерв’ю чи реального проєкту? У статті дізнаєтеся, як уникнути callback-хаосу, як працюють стани pending→fulfilled→rejected та де сховались найпоширеніші підводні камені. Цікаво? Тоді запрошую вас до прочитання статті про погляд на Promise очима джуніорки!

З вас — обовʼязкове прочитання статті, вподобайка та коментар під матеріалом!

https://dou.ua/forums/topic/53242

@babichdev

#цього_тижня ми з вами:

В понеділок навчилися швидко й просто знаходити потрібний батьківський елемент за допомогою Element.closest.

У вівторок дізналися, як підміняти DOM елемент іншим елементом, або й багатьма елементами одним махом, використовуючи Element.replaceWith.

В четвер розбиралися, як не треба відповідати на співбесіді, а головне — як треба.

У пʼятницю читали разом статтю від Алли Каплі про Promise.

Підписуйся: @babichdev

***
Гарних вам вихідних, та до наступної зустрічі!

Несподівано — нове відео на каналі!

Під час нещодавнього закритого стриму "Для своїх" трошки поділився думками про вайбкодинг, досвід з Cursor на роботі й не тільки, і про те, яку рутину я вже не уявляю писати власноруч.

З вас перегляд, вподобайки і обов'язковий коментар!

https://youtu.be/tGzJI1tpkPQ

@babichdev

.

#розробка
Скільки разів ми відкладали використання нової можливості лише тому, що “десь у Firefox вона ще не працює”? Або гадали, чи потрібно городити поліфіли, бо умовний Safari має баг? Хочеться писати сучасний код, але не втрачати користувачів. Саме для цього існує поняття Baseline.

Baseline — це набір можливостей вебплатформи, які стабільно підтримуються у Chrome, Firefox, Safari та Edge. Якщо фіча входить до Baseline, її можна безпечно використовувати у продакшн-коді без поліфілів, fallback-стратегій або експериментальних прапорців.

Ідею Baseline у сучасному вигляді запропонувала команда web.dev — проєкт під егідою Google Chrome Developers. Концепцію вперше представили на Google I/O у травні 2023 року. Її мета — дати розробникам чіткий орієнтир, без необхідності вручну перевіряти підтримку кожної технології.

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

Цікаво? Ну, тоді з вас вподобайка та поширення. Вам нескладно, мені приємно.

На перший погляд, може здатися, що Baseline — це просто спрощений аналог caniuse. Але різниця принципова. caniuse показує повну історію підтримки, навіть часткової або умовної. Baseline визначає, що реально можна безпечно використовувати сьогодні без поліфілів і додаткового коду.

Наприклад, псевдоклас :has() зʼявився у Safari ще у 2022 році. Chrome і Edge додали підтримку у 2023-му. Проте Firefox стабільно підтримує :has() лише з початку 2024 року. І лише після цього моменту :has() офіційно увійшов до Baseline і став безпечним для використання у продакшн-проєктах.

Розуміння Baseline дозволяє ухвалювати рішення впевнено, писати чистіший код і будувати сучасні інтерфейси без дублювання стилів або зайвого JavaScript. Замість постійного “а чи не зламається?” — обґрунтоване “так, це вже можна використовувати”.

Офіційні дані Baseline можна перевіряти на web.dev або у відповідних секціях MDN.

@babichdev

#розробка
Чи можна підказати користувачу, що вводити в <input>, не тягнучи в проєкт монструозний автокомпліт? HTML має просту відповідь — <datalist>. Елемент, який надає можливість просто й без особливо додати підказки до інпуту без жодного JavaScript.

<datalist> дозволяє задати перелік <option>, які представляють допустимі або рекомендовані варіанти для введення. На вигляд це просто текстове поле, але щойно користувач починає набирати якийсь текст, бравзер пропонує підказки на основі цього списку.

Принцип роботи простий: у <input> вказується атрибут list, значенням якого є id відповідного <datalist>. Сам <datalist> містить набір <option>, які і пропонуються як підказки:

<input type="text" list="browsers" placeholder="Оберіть бравзер">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Підказки з <datalist> не обмежують введення: користувач усе одно може вписати будь-який текст, навіть якщо його немає серед варіантів. При потребі введення можна обмежити через атрибут pattern або додаткову валідацію.

👍, ✅, 🔔 === ❤️❤️❤️

Слід мати на увазі: вигляд списку підказок у <datalist> не можна стилізувати через CSS — його повністю контролює бравзер. Стилізувати можна лише саме текстове поле <input>. Сам <datalist> є службовим невидимим елементом, і чіпати його через CSS взагалі не варто.

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

<datalist> підтримується стабільно у всіх основних бравзерах вже понад 10 років і офіційно входить до Web Platform Baseline 2023. Це означає, що його можна використовувати без застережень, без перевірок підтримки і без дублювання через поліфіли.

MDN

А ви як, використовували <datalist> у своїх формах, чи відразу тулите кастомні автокомпліти? Напишіть у коментарях — цікаво ж!

@babichdev