UX/UI Radar Read in English
Nové nástroje

Chrome DevTools dostaly position-area editor, APCA v color pickeru a CSS pro agenty

Chrome DevTools přidávají vizuální editor pro position-area, návrhy APCA kontrastu v color pickeru a nástroj get_css_styles pro agenty. Hodí se při ladění tooltipů, popoverů a tmavých rozhraní.

Pokud ladíš hotové rozhraní v prohlížeči, DevTools jsou pořád nejrychlejší cesta, jak zjistit, co se ve skutečnosti vykresluje. Listopadový přehled týmu Chrome (příspěvek nese datum 20. 10. 2026, funkce se podle něj dostávají k uživatelům v listopadu po vydání Chrome 155 a 156) přidává několik věcí, které ocení i designér.

Co je nového

  • Vizuální editor position-area: v záložce Styles klikneš na swatch vedle deklarace a v mřížce vybereš oblasti kolem kotvy. Nastavíš obě osy najednou nebo zvlášť a přepneš klíčové slovo self.
  • Anchor positioning pomůcky: u popoveru jde v DOM stromu přes adorner najít implicitní kotvy a overlay ukazuje margin, padding, border a content boxy kotvených prvků.
  • Vlastní vlastnosti se třemi pomlčkami: ---theme-color se dá prohlížet i upravovat.
  • Color picker: u světlého textu na tmavém pozadí nabízí APCA návrhy kontrastu a barvy mimo gamut převádí na oklab() a oklch() bez hodnot NaN.
  • DevTools pro agenty: nástroj get_css_styles vrací computed i matched styly včetně dědičnosti, pseudo-elementů, @keyframes, @position-try, @property a @function, stránkovaně. V hlavním menu přibyla položka Get Chrome DevTools for agents s návodem k nastavení.
  • Device Mode: zoom a škálování se ukládají pro každé emulované zařízení.

Web.dev k říjnu 2026 navíc uvádí, že Chrome 155 přinesl margin-trim (ořízne okrajové marginy bez :first-child a :last-child) a Chrome 156 funkci random(). Vše ověř v cílových prohlížečích, než to nasadíš.

Proč je to důležité

Anchor positioning nahrazuje JavaScript pro tooltipy, menu a popovery, ale hodnoty position-area se špatně pamatují. Vizuální editor zkrátí cestu od nápadu k výsledku a hodí se i při předávání: designér může ukázat vývojáři přesně vybranou oblast. APCA návrhy pomáhají u tmavých rozhraní, kde se poměr kontrastu podle WCAG 2 chová nepřesně; pro splnění právních požadavků ale zůstává platný WCAG poměr, takže APCA ber jako doplněk. A nástroje pro agenty zapadají do trendu, kdy agent čte skutečný stav stránky místo screenshotu.

Jak začít

  1. Aktualizuj Chrome na verzi, kde je funkce dostupná (podle příspěvku Chrome 155 a novější).
  2. Otevři stránku s popoverem, v Styles klikni na swatch u position-area a zkus jinou oblast.
  3. V color pickeru vyzkoušej světlý text na tmavém pozadí a porovnej APCA návrh.
  4. Pokud používáš agenta, otevři Get Chrome DevTools for agents a postupuj podle návodu.

Zdroje