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

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

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

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

https://youtu.be/rZSydNEcrR4

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

@babichdev

КОРИСНІ ОГОЛОШЕННЯ
з етеру Співбесіда рівня 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<form id="form" onSubmit={…}>…</form>
<button type="submit" form="form">
  Зберегти
</button>

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

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

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

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

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

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

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

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

Цього четверга до мене на канал завітає Олександр Лаврусенко — розробник, чий шлях почався ще у шкільні часи, провів його через 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

#розробка
Чи можна підказати користувачу, що вводити в <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

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

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

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

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

https://youtu.be/tGzJI1tpkPQ

@babichdev

.

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

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

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

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

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

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

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

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

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

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

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

@babichdev

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

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

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

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

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

@babichdev

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

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

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

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

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

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

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

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

@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

Чи доводилось вам коли-небудь відчайдушно хотіти, аби в природі існував 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

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

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

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

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

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

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

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

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

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

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

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

https://youtube.com/live/DNOe80KVurI

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

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

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

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

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

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

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

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 довгий час нагадував традиційну родину: батьки вирішують усе, діти виглядають і поводяться так, як їм скажуть. Але час іде, нащадки виростають, починають сперечатися, обирати власний одяг і переклеювати шпалери в батьківській кімнаті. І от навіть у веброзробці настав момент, коли молодші елементи навчилися вказувати, як жити старшим.

Як ви вже могли здогадатися, сьогодні тема дня — псевдоклас :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

Твій 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. За вподобайки і поширення буду вдячний як білочка за горішок.