---
date: 2026-11-15
slot: den
title: Neděle 15. 11. 2026
lead: Klidná neděle – Chrome DevTools dostaly vizuální editor position-area, APCA kontrast v color pickeru a nástroje pro agenty.
---

## Nové nástroje

- **[Chrome DevTools: position-area editor, APCA v color pickeru a CSS pro agenty](#/a/2026-11-15-devtools-css-pro-agenty)** – Anchor positioning se dá nastavit klikáním v mřížce, color picker navrhuje APCA kontrast a agenti přes `get_css_styles` čtou skutečné styly stránky. Hodí se ti při ladění tooltipů, popoverů a tmavých rozhraní. Příspěvek vyšel 20. 10., funkce se do uživatelů dostávají v listopadu. [zdroj](https://developer.chrome.com/blog/new-in-devtools-november-2026/)

## Návrhy pro tool-stack a workflow

- **[Dej agentovi k ruce DevTools místo screenshotů](#/a/2026-11-15-navrh-devtools-pro-agenta)** – Změna: při ladění UI v kódu připoj agentovi Chrome DevTools pro agenty. Přínos: agent čte skutečné computed styly a pravidla místo hádání ze screenshotu, takže rychleji najde, proč se komponenta liší od návrhu. První krok: otevři v DevTools položku Get Chrome DevTools for agents, připoj ji ke svému agentovi a nech ho vysvětlit styly jednoho tlačítka. Vychází z trendu, že agenti čtou skutečný stav nástrojů (Figma MCP, Framer přes MCP, DevTools). [zdroj](https://developer.chrome.com/blog/new-in-devtools-november-2026/)

## Dnes vyzkoušej

- **Tooltip přes position-area editor (~15 min)** – Vyzkoušíš si anchor positioning bez psaní hodnot z hlavy. 1. Otevři libovolnou stránku s popoverem nebo tooltipem postaveným na CSS anchor positioningu (nebo si udělej jednoduchý `<button>` s `popover` a `position-anchor`). 2. V DevTools v záložce Styles klikni na swatch vedle `position-area` a vyber jinou oblast mřížky. 3. V color pickeru zkontroluj světlý text na tmavém pozadí podle APCA návrhu. Výsledek: tooltip umístěný podle zvolené oblasti a zkontrolovaný kontrast. [zdroj](https://developer.chrome.com/blog/new-in-devtools-november-2026/)