CSS-Tricks опублікував What’s !important #18: <geolocation>, ::highlight(), named-feature() та інше

На цьому все. Ні, не flex-wrap, а сьогодні новий день, тиждень, місяць, сезон і нове видання What’s important (#18), яке збирає найкращий контент, який CSS-розробники створили за останні пару тижнів чи близько того.

How to create delayed-then-instant tooltips (and why)

Abhishek Jakhar пояснив, чому підказки мають спочатку зʼявлятися із затримкою, а потім миттєво (в основному, щоб ми не активували їх випадково, а коли вони більше не потрібні — щоб вони зникали одразу) і показав, як це реалізувати: https://blog.master.dev/tooltips-need-a-delay-and-then-they-need-to-skip-it/.

Chris Coyier відповів на це сучасною реалізацією, що використовує інтерест-інвокери (interest invokers), які мають два ключові CSS-властивості: interest-delay-start і interest-delay-end. Наразі інтерест-інвокери підтримує тільки Chrome, але це підхід з progressive enhancement: https://blog.master.dev/delayed-then-instant-tooltips-with-html-css-alone/.

Мова про progressive enhancement: Geolocation API завжди був складним через зовнішнє апаратне забезпечення (GPS-спутники, Wi‑Fi мережі, стільникові вишки тощо) і через те, наскільки невтішно змінювати статус дозволів пізніше. <geolocation> вирішує багато з цих питань, але вводить кілька нових особливостей. Наприклад, існують деякі стилістичні обмеження.

Джерело: Piccalilli.

Оскільки наразі його підтримує тільки Chrome, у статті описано, як використовувати <geolocation> разом із поточним Geolocation API, тобто фактично можна застосовувати його сьогодні: https://piccalil.li/blog/a-look-at-the-geolocation-html-element-and-how-it-works/.

MicroLighter: a ::highlight()-based syntax highlighter

Dave Rupert створив невеликий синтаксичний підсвічувач під назвою MicroLighter, використовуючи новий Custom Highlight API. Він також показав, як користуватися MicroLighter: https://daverupert.com/2026/08/microlighter/, а Geoff трохи про це розповідав тут: https://css-tricks.com/microlighter-syntax-highlighter/.

How to get CSS grid information into CSS variables

Temani Afif продемонстрував, як отримати інформацію про CSS grid у кастомні властивості CSS: зокрема кількість рядків і стовпчиків, а також координати (x/y індекси) кожної клітини. Єдиною умовою є те, що стовпчики мають бути рівної ширини, але з розвитком CSS це може змінитися: https://css-tip.com/grid-information/.

Temani також показав, як це можна використати для визначення близькості наведення (hover proximity), що дуже цікаво: https://blog.master.dev/hover-proximity-using-modern-css/.

Dark mode: two-state or tri-state?

Lea Verou висловлюється на користь дво-станного підходу (two-state): https://lea.verou.me/blog/2026/dark-mode-toggles/, тоді як Bramus виступає за тристадійні перемикачі (tri-state): https://www.bram.us/2026/08/18/the-case-for-tri-state-dark-mode-toggles/. Є також підхід «auto-until-overridden» дво-станного режиму, описаний Vale.Rocks: https://vale.rocks/micros/20260810-0330.

An introduction to the class prefix selector

Bramus також представив класовий префікс-селектор (class prefix selector), який, хоч поки не підтримується ніде, дуже простий і корисний. Приклад:

.something-* {
  /* ... */
}

Це чистіше й продуктивніше, ніж селектори атрибутів:

[class^="something-"] {
  /* Matches class="something-xxx" */
}

[class*=" something-"] {
  /* Matches class="xxx something-xxx" */
}

[class*="something-"] {
  /* Matches class="my-something-xxx" */
}

Про те, що Geoff сказав щодо class prefix selector, можна прочитати тут: https://css-tricks.com/resolved-css-class-prefix-selector/.

…and the named-feature() function

Bramus також розповів про функцію @supports named-feature(). Цю функцію підтримує Chrome: вона дає змогу перевіряти підтримку дуже конкретних речей, які інакше було б неможливо визначити, наприклад, чи браузер поважає трансформ при позиціюванні анкорів. Сподіваємося, що це зробить @supports загалом більш здатним: https://www.bram.us/2026/08/27/feature-detecting-undetectable-css-features-with-supports-named-feature/.

How to balance wrapped flex items across rows or columns

У Chrome зʼявилося flex-wrap: balance — це по суті те саме, що text-wrap: balance, але для flex-елементів. Ahmad Shadeed пояснив, що робить flex-wrap: balance і для чого це можна використовувати: https://ishadeed.com/article/flex-wrap-balance/.

New web platform features and updates

• Firefox 154

  • sibling-count() і sibling-index() (тепер Baseline)
  • text-box-trim, text-box-edge і text-box (тепер Baseline)

• Chrome 152

  • autocorrect (тепер Baseline)
  • alpha() (підтримка Safari і Firefox очікується)
  • OpaqueRange (немає підтримки у Safari і Firefox)
  • Підтримка CSSPseudoElement для ::backdrop, ::scroll-marker і ::view-transition (немає підтримки у Safari і Firefox)

Вирушаємо в осінь!

Джерело: CSS-Tricks

🏷 css, html, вебплатформи, браузери, вебстандарти 🕓 2026-09-01