Дивовижний світ веброзробки - Telegram Channel Posts

Мир сегодня с "Юрий Подоляка"

View

Труха⚡️Україна

View

Николаевский Ванёк

View

Мир сегодня с "Юрий Подоляка"

View

Труха⚡️Україна

View

Николаевский Ванёк

View

Дивовижний світ веброзробки

06.05.202506:56

Дивитись можна, чіпати не можна?
Часто виникає потреба “вимкнути” якийсь елемент, щоб він узагалі жодним чином не реагував на дії користувача: ні на кліки, ні на фокус. Зазвичай це або pointer-events: none, або event.preventDefault(), чи якісь інші трюки. А то й усе вкупі з tabindex="-1".

Однак в HTML уже давно існує спосіб надійно позбавити елемент будь-якої інтерактивности, а ба більше — викинути його з accessibility tree, “заховавши” від очей скринрідерів.

Це атрибут inert, який відображає однойменну властивість DOM-елемента:

Що в JS робиться ось так:

document.getElementById('my-content').inert = true;

Якщо зробити елемент інертним, то весь його вміст стане повністю й остаточно неактивним для користувача, а також повністю зникне з радарів скринрідерів. І так, “розінертити” дочірні елементи не вийде — атрибут inert не має значення false, і інертність завжди наслідується.

І ви не будьте інертними — ставте вподобайки та поширюйте допис.

inert входить до Baseline з 2023 року й підтримується всіма основними браузерами. Проте, у Safari (очікувано) є один нюанс: текст усередині inert-елемента все ще можна знайти при пошуку по сторінці (Cmd+F).

Чи можна його використовувати вже? Абсолютно так. За винятком цього невеликого бага, inert працює однаково й передбачувано в усіх браузерах, дозволяючи одним-єдиним атрибутом уникнути потреби городити купу костилів лише для того, щоб користувач не міг клікнути або табнутись у якийсь елемент.

Цим фактом особливо спішу з вами поділитись, бо сам дізнався про inert, обираючи тему для наступного допису.

А для вас це теж новина?

MDN

@babichdev

02.05.202515:39

#анонс
Пані та панове, оголошую про стрим "Для своїх" уже цієї неділі!

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

А ще позбираємо кошти на ЗСУ, а я розіграю серед усіх донатів невеличкий подарунок, тож не проґавте.

І готуйте свої власні питання, звичайно ж!

Реєструйтеся, бо це стрим виключно для своїх!

https://streamyard.com/watch/ETWnhSxUVGrN

30.04.202506:50

Що ви зазвичай робите, коли треба сабмітнути форму? Дайте вгадаю. У вас є кнопка, на яку повішено onClick, і десь усередині в кращому випадку викликається form.submit(). В гіршому дані ви збираєте ручками. І валдуєте ручками. Зізнайтеся. Навіть якщо ви користуєтесь бібліотекою для форм, структура приблизно та сама.

Ну а якщо ваша кнопка знаходиться не всередині форми, а поза нею, то, відчуваю, я правий на всі 100%. Бо фреймворки привчили нас не думать, а вирішувати усі задачі в один звичний спосіб, хоча завжди існують гнучкіші підходи.

Як і існують можливості самої платформи, як то вбудоване HTML API, чи ті ж фокуси з CSS. До прикладу, як вирішити питання з кнопкою поза формою, щоб на неї не вішати взагалі ніяких обробників? Елементарно:

<form>…</form>

Ви просто вказуєте кнопці атрибут form зі значенням id відповідної форми, і ця кнопка тепер буде сабмітить цю форму з будь-якого куточка документу. Тож вам лишається, як і пасує, слухати лише подію submit цієї форми, не турбуючись, як саме вона відбувається.

Про вподобайки і поширення не буду просить. Бо ви і самі у мене молодчинки і все знаєте

І таких прикладів безліч. У HTML є <details> і <summary>, які дають розкривні блоки без жодного JS — ідеальні для табів, акордеонів, спойлерів. Є <dialog> із декларативним станом. Є form.reset(), який робить саме те, що написано. Просто, надійно, без костилів.

Тому кожного разу, коли рука тягнеться до addEventListener, зупиніться. Може, цей сценарій уже реалізовано в HTML або CSS — просто ви про нього не знали. Або знали, але забули. Чи забили.

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

P.S. Це не про You Might Not Need JS, який безбожно вже застарів, це про здоровий ґлузд та знання платформи, якою ви користуєтесь щодня.

🔥 Дивовижний світ веброзробки

26.04.202515:05

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

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

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

https://youtu.be/tGzJI1tpkPQ

@babichdev

.

24.04.202506:01

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

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

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

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

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

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

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

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

@babichdev

18.04.202510:02

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

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

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

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

https://youtube.com/live/DNOe80KVurI

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

05.05.202506:43

Бачили вже нову "магічну" фічу у React 19 — View Transition? А знали, що це усього-навсього обгортка над цілком собі бравзерним API? Як ні, то я вам трошечки зараз розповім.

У всіх бравзерах, окрім, очевидно, Firefox, можна користуватися не таким уже й новим View Transition API, яке, по суті, дозволяє створювати красиві анімації переходу між станами сторінки без застосування складних бібліотек.

Під капотом усе настільки просто, що аж трохи нудно. Коли ви ініціюєте View Transition, бравзер просто робить знімок поточного вигляду сторінки, потім — нового стану (після оновлення DOM або переходу на інший документ), і між цими двома “картинками” програє анімацію.

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

Це можна зробити або за допомогою CSS, задаючи анімацію як усій сторінці, так і певним її регіонам:

.fade {

Або за допомогою JavaScript:

document.startViewTransition(() => {

React у цьому плані нічого кардинально нового не вигадує. Він просто пропонує синтаксичний “цукор” у вигляді функції startViewTransition та експериментального компонента unstable_ViewTransition. По суті — той самий document.startViewTransition() під капотом.

import { unstable_ViewTransition as ViewTransition } from 'react';

Попри те, що View Transitions поки підтримуються лише в Chromium-бравзерах — таких як Chrome, Edge чи Opera — це не причина уникати їх використання. У бравзерах без підтримки (наприклад, Firefox) анімації просто не спрацюють, якщо задавати їх через CSS, ну а для JS треба просто перевіряти підтримку фічі. Тобто функціональність залишається незмінною, а View Transitions виступають як прогресивне покращення. Їх можна сміливо впроваджувати вже зараз, не хвилюючись про деградацію UX.

За вподобайки й поширення окремо нагадати, чи самі все знаєте?

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

🔗 MDN
🔗 Smooth transitions with the View Transition API
🔗 React <viewtransition>

@babichdev

.

02.05.202505:30

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

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

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

https://youtu.be/rZSydNEcrR4

P.S. Цієї неділі на закритому стримі "Для своїх" дам свою відповідь на цю відповідь, розкажу з чим згодний, а з чим ні. Чекайте на анонс згодом.

@babichdev

29.04.202515:07

#анонс
Час співбесід на каналі "Сергій Бабіч та Дивовижний світ веброзробки"!

Цього четверга до мене на канал завітає Олександр Лаврусенко — розробник, чий шлях почався ще у шкільні часи, провів його через embedded, а сьогодні приводить його на співбесіду рівня Senior Frontend у прямому етері. Три тижні верстки, перша робота, ковід, фронтенд — усе як ми любимо. Як вдалося? Дізнаєтесь під час етеру.

Однак головне питання інше: чи витримає він співбесіду на рівень Senior наживо?

🗓 Четвер, 1 травня
⏰ 19:00
📺 Співбесіда рівня Frontend Senior | Олександр Лаврусенко
▶️ https://youtube.com/live/7H9awN1D02k

Ставте вподобайки, тисніть дзвіночок, аби не пропустити — і до зустрічі в прямому етері!

***
Етер виходить за підтримки Brainstack — української IT-компанії, яка створює прибуткові продукти у нішах Parental Control, Wellness та AI. У команді — 350+ фахівців, а 82% менеджерів виросли всередині завдяки менторству, світчингу та реальному карʼєрному росту.

Хочеш будувати бізнеси без ілюзій?
👉 choko.link/brainstack

26.04.202506:00

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

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

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

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

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

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

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

23.04.202505:33

На полі — заміна! Ну або не на полі, а в 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

17.04.202518:04

КОРИСНІ ОГОЛОШЕННЯ
з етеру Лайвкодинг! Менеджер завантажень на чистому 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!

04.05.202514:58

Стрим для своїх доступний у записі, можете переглядати.

Збирали кошти на користь ЗСУ, а я особисто від себе розіграв невеличкий подарунок серед усіх донатів.

Гайда теревенити!

01.05.202518:03

КОРИСНІ ОГОЛОШЕННЯ
з етеру Співбесіда рівня Senior Frontend наживо з Олександром Лаврусенко.

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

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

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

***
А також не проґавте нагоди виграти конструктор LEGO Technic Ford GT 2022 від партнерів сьогоднішнього етеру — компанії Brainstack.

Яка версія EcmaScript вийшла після EcmaScript 3?

Відповідь давайте у форму: https://forms.gle/U3hUSJN4ByNGjQTZ9

***
І не забудьте залишити під відео свій коментар! Рівень душності не обмежується ;)

@babichdev

29.04.202506:06

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

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

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

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

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

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

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

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

MDN

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

@babichdev

25.04.202506:33

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

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

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

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

@babichdev

22.04.202506:58

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

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

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

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

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

container.addEventListener('click', (event) => {

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

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

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

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

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

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

MDN

@babichdev

17.04.202515:55

Чистий JS, ніякої магії і виключно крафтовий код на противагу вайбовому — саме це чекає на вас уже за пʼять хвилин у мене на ютубі!

А ще подарунки від партнера, куди ж без них. Долучайтеся до нас з Олегом на прямому етері з лайвкодингу!

https://youtube.com/live/DNOe80KVurI

03.05.202508:06

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

— Дізналися, що таке Baseline та як він допомагає розробникам обирати сучасні технології;

— Побачили, як можна швидко зробити підказки дл поля вводу за допомогою datalist;

— Поговорили про нативні API HTML-елементів та чому не варто все робити через onClick;

— Святкували першу тисячу підписників, а поділився з вами своїми підписками на класні джерела знань;

— Дивилися етер зі співбесідою рівня Senior Frontend з Олександром Лаврусенко

— А потім дивилися відповідь Нікіти Галкіна на моє відео про вайбкодинг;

Це був насичений тиждень, дякую вам за нього!

P.S. А завтра буде Стрим для своїх. Обовʼязково приходьте, буде цікаво, а ще й корисно, бо збиратимем гроші для ЗСУ. А я розіграю подарунок серед усіх, хто задонатить. До зустрічі!

01.05.202506:24

1000!
Ми перетнули позначку в 1000 підписників — і хочеться відзначити це маленьким подарунком. А який подарунок тут має справжню вагу? Правильно — знання.

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

Frontend Focus
Розсилка, зосереджена на новинах про фронтенд загалом. Таке собі "Все про все", і часто перетинається з іншими, більш спеціалізованими листами, однак як точка входу до дайджесту новин підходить чудово.

CSS Weekly
Новини CSS, приколи CSS, статті про CSS. Це очевидно, тому нема сенсу пояснювати, про що ця розсилка.

JavaScript Weekly
Так само, не бачу причин детально розписувати, про що цей лист. Новини, статті, релізи — усе в одному місці.

React Status
Все про React. Оскільки я зараз працюю в основному з реактом, то й приділяю йому дещо більше уваги, ніж тому ж Angular. Але це не значить, що геть за ним не слідкую.

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

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

web.dev
Віднедавна також я почав напряму читати блоґ від web dev, в якому публікуються дуже корисні зведення нових фіч, оновлення Baseline та інші цікаві новини.

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

***
Це мій список — але створіть свій. Знайдіть авторів, які вам пасують. Підписуйтесь на ті розсилки, які вас розвивають. А може, колись заведете й власну — і вже вас хтось згадає в такому ж дописі.

Вподобайка, поширення, примус знайомих до підписки — усе це надзвичайно цінно для мене та каналу.

Підписуйтесь і на мене:
⚙️@babichdev
.

28.04.202505:53

#розробка
Скільки разів ми відкладали використання нової можливості лише тому, що “десь у 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

24.04.202516:00

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

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

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

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

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

@babichdev

19.04.202506:29

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

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

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

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

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

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

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

17.04.202511:13

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

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

Приклад:

.card:has(input:checked) {

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

Або ще:

form:has(:invalid) {

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

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

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

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

.card {

Якщо .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

Shown 1 - 24 of 26

Citations

Citations