Дивовижний світ веброзробки
Дивовижний світ веброзробки — тепер і в твоєму телеграмі. Анонси відео з YouTube-каналу «Сергій Бабіч та Дивовижний світ веброзробки», стріми, авторські статті та цікаві знахідки.
youtube.com/@babichweb
З питань реклами та інтеграцій: @babich_ss
youtube.com/@babichweb
З питань реклами та інтеграцій: @babich_ss
TGlist reytingi
0
0
TuriOmmaviy
Tekshirish
TekshirilmaganIshonchnoma
ShubhaliJoylashuv
TilBoshqa
Kanal yaratilgan sanaКвіт 15, 2025
TGlist-ga qo'shildi
Квіт 17, 2025Muxrlangan guruh
Rekordlar
23.04.202523:59
547Obunachilar18.04.202523:59
200Iqtiboslar indeksi10.04.202518:37
427Bitta post qamrovi17.04.202523:59
427Reklama posti qamrovi22.04.202514:52
12.21%ER17.03.202518:37
116.03%ERR
23.04.202505:33
На полі — заміна! Ну або не на полі, а в DOMі. У будь-якому разі іноді виникає потреба замінити один елемент у DOM на інший — не змінити його вміст, не оновити клас, а саме повністю підмінити.
Поширеним, так би мовити "bulletproof" підходом уже тривалий час є використання методу
Сьогодні ж є куди краший спосіб —
Метод працює і для вставки кількох елементів одночасно, наприклад:
Або навіть просто тексту:
Головне — памʼятати, що
Використовується він у всіх основних браузерах ще з 2019 року й входить у Baseline, працює стабільно, читається просто. Якщо ви ще досі видаляєте елементи вручну й потім вставляєте нові — спробуйте
До речі, вам уже випадала нагода використати
MDN
@babichdev
Поширеним, так би мовити "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
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.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
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. За вподобайки і поширення буду вдячний як білочка за горішок.
15.04.202511:43
@layerЦе директива, яка дозволяє розбивати CSS на логічні шари й точно задавати порядок їх застосування. На відміну від класичної каскадної моделі, де все залежить від специфічності або того, який файл підключили пізніше,
@layer дає змогу керувати каскадом декларативно.Можна створити шари з іменами reset, base, components, utilities і зафіксувати їхній порядок:
@layer reset, base, components, utilities;Після цього, незалежно від місця розташування стилів у файлі чи в пакеті, браузер чітко знає, в якій послідовності їх застосовувати.
Це особливо важливо в масштабних проєктах, де на один елемент можуть впливати стилі з різних джерел — наприклад, базові стилі, компоненти, утиліти або сторонні бібліотеки. Без
@layer доводиться або боротися зі специфічністю, або покладатися на порядок підключення, що часто веде до неочікуваних результатів. @layer усуває цю невизначеність.Працює з будь-якими CSS-фреймворками, підтримується в усіх сучасних браузерах. У поєднанні з
@import або підключенням стилів із різних джерел дає хорошу основу для модульного й передбачуваного CSS.MDN
@babichdev
.
Ko'proq funksiyalarni ochish uchun tizimga kiring.
