---
title: Chrome DevTools dostaly position-area editor, APCA v color pickeru a CSS pro agenty
date: 2026-11-15
edition: 2026-11-15
rubric: Nové nástroje
perex: 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í.
topics: [web-css, kvalita-ui, ai-agenti]
---

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

- [New in DevTools – November 2026](https://developer.chrome.com/blog/new-in-devtools-november-2026/)
- [New to the web platform in October](https://web.dev/blog/web-platform-10-2026)