Дивовижний світ веброзробки
22.04.202506:58
Чи доводилось вам коли-небудь відчайдушно хотіти, аби в природі існував
Якщо я вам скажу, що таке уже дуже давно існує?
Якщо елемент знайдено — повертається він. Якщо ні — null.
Ось таким чином можна впевнено ловити клік саме на потрібному елементі, навіть якщо фактично ми клікали десь на його дочірні елементи:
Найчастіше
Важливі нюанси:
• Якщо сам елемент підходить — він і повертається.
• Пошук тільки догори (не вниз).
• Якщо немає збігів — повертається null.
• Працює тільки для елементів, що фактично знаходяться в DOM.
Трохи історії: ідея
Тож сьогодні це надійний і швидкий спосіб шукати потрібний контекст без зайвого перебору руками.
А ви як, користуєтесь
MDN
@babichdev
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
А ще подарунки від партнера, куди ж без них. Долучайтеся до нас з Олегом на прямому етері з лайвкодингу!
https://youtube.com/live/DNOe80KVurI
19.04.202506:29
#цього_тижня
Глянули одним оком на @layer і поговорили про порядок застосування стилів.
Дізналися, як не писати padding-left і padding-right за допомогою CSS Logical Properties.
Розглянули, як стилізувати батьківські елементи за допомогою :has та без допомоги JavaScript.
Згадали про :empty та дізналися як вибирати справді порожні елементи.
А ще дивилися прямий етер з лайвкодингом, на якому разом з гостем робили менеджер завантажень на чистому JS.
Підписуйся: @babichdev
***
Усім гарних вихідних та смачної паски! Зустрінемось після свят!
Глянули одним оком на @layer і поговорили про порядок застосування стилів.
Дізналися, як не писати padding-left і padding-right за допомогою CSS Logical Properties.
Розглянули, як стилізувати батьківські елементи за допомогою :has та без допомоги JavaScript.
Згадали про :empty та дізналися як вибирати справді порожні елементи.
А ще дивилися прямий етер з лайвкодингом, на якому разом з гостем робили менеджер завантажень на чистому JS.
Підписуйся: @babichdev
***
Усім гарних вихідних та смачної паски! Зустрінемось після свят!
17.04.202511:13
CSS довгий час нагадував традиційну родину: батьки вирішують усе, діти виглядають і поводяться так, як їм скажуть. Але час іде, нащадки виростають, починають сперечатися, обирати власний одяг і переклеювати шпалери в батьківській кімнаті. І от навіть у веброзробці настав момент, коли молодші елементи навчилися вказувати, як жити старшим.
Як ви вже могли здогадатися, сьогодні тема дня — псевдоклас
Приклад:
Тло
Або ще:
Форма сама підсвітиться, якщо хоча б одне поле буде помилковим. Це працює без жодних додаткових класів, без скриптів, без ручної синхронізації стану. Просто CSS.
Та справжня сила
Ось дещо розширений приклад із картинки:
Якщо
Варто звернути увагу на кілька моментів.
По-перше, ми описуємо це з точки зору самої
По-друге,
Тож це правило читається так: "знайди section, який містить нащадка .card із класом active, і знайди article, який містить нащадка .card, незалежно від стану".
Що найголовніше — усе це працює без JavaScript, без дублювання стану і без костильних класів.
Підтримується у всіх сучасних браузерах: Chrome, Safari, Edge, а також у Firefox, починаючи з версії 121.
А ви вже пробували використовувати :has() у своїх проєктах? Якщо ще ні — кліпніть двічі, ми вишлемо когось вас визволяти. Але однак напишіть у коментарях.
MDN
@babichdev
Як ви вже могли здогадатися, сьогодні тема дня — псевдоклас
: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
18.04.202510:02
Коментарі вбивають ютуб. Точніше — їхня відсутність. Точніше — не весь ютуб, а мій канал конкретно.
У ютуба взагалі цікаве уявлення про те, що кому рекомендувати, і активність під відео — не останній в тому фактор. Чим вона менша, тим відео "нецікавіше", і тим швидше ютуб кладе на нього алгоритмічний пісюн.
Тому я дуже-дуже-дуже сильно попрошу вас залишити коментар з відгуком про учорашній лайвкодинг, а якщо ви його ще не переглянули, то це варто неодмінно зробити. І залишити коментар.
Обіцяю відповісти на усі ваші відгуки!
https://youtube.com/live/DNOe80KVurI
P.S. В описі під відео вже є посилання на репозиторій!
У ютуба взагалі цікаве уявлення про те, що кому рекомендувати, і активність під відео — не останній в тому фактор. Чим вона менша, тим відео "нецікавіше", і тим швидше ютуб кладе на нього алгоритмічний пісюн.
Тому я дуже-дуже-дуже сильно попрошу вас залишити коментар з відгуком про учорашній лайвкодинг, а якщо ви його ще не переглянули, то це варто неодмінно зробити. І залишити коментар.
Обіцяю відповісти на усі ваші відгуки!
https://youtube.com/live/DNOe80KVurI
P.S. В описі під відео вже є посилання на репозиторій!
16.04.202517:47
Твій CSS працює тільки тому, що твій користувач теж читає зліва направо. Але що буде, коли доведеться підтримувати арабську, іврит або вертикальний текст?
Сьогодні тема дня — CSS Logical Properties, набір властивостей, що описують просторові характеристики елементів не через фіксовані сторони (left, right, top, bottom), а через напрям потоку контенту: блоковий (block) і лінійний (inline). Вони автоматично підлаштовуються під мовні налаштування: наприклад, працюють справа наліво в арабській або зліва направо в українській — без додаткової логіки.
І замість цього:
пишемо просто:
Відступ буде з обох боків — але залежно від напрямку тексту. Те саме з вертикальними відступами:
Це працює замість margin-top та margin-bottom, адаптуючись під вертикальні або змішані потоки.
Для позиціонування можна замінити left або right на логічну альтернативу:
Це означає «притиснути до початку рядка», незалежно від того, це left у LTR чи right у RTL.
А для вирівнювання тексту:
Це працює як left або right, залежно від мови інтерфейсу, і допомагає уникнути дублювання стилів у багатомовних проєктах.
Цей підхід значно спрощує підтримку інтерфейсів, які мають адаптуватися до RTL, вертикального письма чи просто бути однаково коректними у глобальних продуктах. Менше дублювання, менше умов, менше edge cases.
Logical properties включають не лише відступи, а й розміри, абсолютне позиціонування, і навіть бордери з їхнім радіусом. Це не синтаксичний цукор над margin-left, а повноцінна система, що базується на напрямку тексту.
До речі, напрямок буває не лише зліва направо чи справа наліво. Є ще вертикальний — згори донизу, наприклад у японській чи китайській розмітці. Якщо ж десь існує система письма з напрямком знизу вгору — напишіть, я такого ще не бачив.
Підтримується в усіх сучасних браузерах. Якщо проєкт має працювати в кількох мовних середовищах — логічні властивості варто починати використовувати вже зараз.
Особисто я користуюсь ними не так, аби давно, але мені ця фіча надзвичайно подобається (хоча зізнаюсь — переважно аби не писати окремо left і right). А ви вже використовуєте logical properties? Якщо ще ні — цікаво, що стримує. Напишіть у коментарях.
MDN
@babichdev
P.S. За вподобайки і поширення буду вдячний як білочка за горішок.
Сьогодні тема дня — CSS Logical Properties, набір властивостей, що описують просторові характеристики елементів не через фіксовані сторони (left, right, top, bottom), а через напрям потоку контенту: блоковий (block) і лінійний (inline). Вони автоматично підлаштовуються під мовні налаштування: наприклад, працюють справа наліво в арабській або зліва направо в українській — без додаткової логіки.
І замість цього:
padding-left: 1rem;пишемо просто:
padding-inline: 1rem;Відступ буде з обох боків — але залежно від напрямку тексту. Те саме з вертикальними відступами:
margin-block-start: 1rem;Це працює замість 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. За вподобайки і поширення буду вдячний як білочка за горішок.
17.04.202518:04
КОРИСНІ ОГОЛОШЕННЯ
з етеру Лайвкодинг! Менеджер завантажень на чистому JS
***
Наймасштабніша зустріч української IT-спільноти: понад 2500 учасників, 120+ спікерів, більше 30 партнерів. На вас чекають доповіді, панельні дискусії, воркшопи в семи треках — від архітектури та розробки до AI, тестування та продакт-стратегій.
Будуть нові треки, секретні зони, круглі столи, афтепаті та інтерактивні стенди.
Квитки вже у продажу — приєднуйтесь!
DOU Day 2025 — зустрінемось у Києві 16–17 травня!
https://dou.ua/goto/w4iy
---
Знайомтеся з Мейлтрап — українською імейл-платформою, створеною під потреби розробників.
Високі показники доставки, SMTP i API з набором найпопулярніших бібліотек та найкраща в галузі аналітика.
Скористайтесь промокодом
***
А також не забудьте дати відповідь на Питання від партнера та отримати нагоду виграти мишку MX Anywhere 3 від Logitech!
з етеру Лайвкодинг! Менеджер завантажень на чистому 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!
15.04.202511:43
@layerЦе директива, яка дозволяє розбивати CSS на логічні шари й точно задавати порядок їх застосування. На відміну від класичної каскадної моделі, де все залежить від специфічності або того, який файл підключили пізніше,
@layer дає змогу керувати каскадом декларативно.Можна створити шари з іменами reset, base, components, utilities і зафіксувати їхній порядок:
@layer reset, base, components, utilities;Після цього, незалежно від місця розташування стилів у файлі чи в пакеті, браузер чітко знає, в якій послідовності їх застосовувати.
Це особливо важливо в масштабних проєктах, де на один елемент можуть впливати стилі з різних джерел — наприклад, базові стилі, компоненти, утиліти або сторонні бібліотеки. Без
@layer доводиться або боротися зі специфічністю, або покладатися на порядок підключення, що часто веде до неочікуваних результатів. @layer усуває цю невизначеність.Працює з будь-якими CSS-фреймворками, підтримується в усіх сучасних браузерах. У поєднанні з
@import або підключенням стилів із різних джерел дає хорошу основу для модульного й передбачуваного CSS.MDN
@babichdev
.
Ko'rsatilgan 1 - 8 dan 8
Ko'proq funksiyalarni ochish uchun tizimga kiring.