Pixel-perfect kódování je přístup, při kterém se výsledná HTML/CSS šablona co nejpřesněji shoduje s grafickým návrhem — na pixel přesně. V praxi to znamená systematickou práci s návrhem, správné nastavení vývojového prostředí a důslednou kontrolu výsledku.
Co znamená pixel-perfect v praxi
Nejde jen o vizuální podobnost. Pixel-perfect šablona znamená:
- Správné rozměry a odsazení — padding, margin a velikosti elementů odpovídají návrhu
- Přesné barvy — použité hodnoty jsou přímo z návrhu, ne odhadem
- Správná typografie — font, velikost, řádkování, tučnost a mezery mezi znaky
- Konzistence napříč zařízeními — na mobilu, tabletu i desktopu odpovídá příslušnému breakpointu návrhu
Postup při kódování z Figma
1. Příprava podkladů
Než začnu kódovat, projdu celý Figma soubor a zaznamenám:
- Použité fonty a jejich varianty
- Barevnou paletu a její CSS proměnné
- Opakující se komponenty a vzory
- Breakpointy pro responzivní chování
2. Nastavení vývojového prostředí
Pracuji v PhpStorm s živým náhledem v prohlížeči. Figma má vestavěný dev mode, který zobrazuje přesné hodnoty CSS přímo u každého elementu — to výrazně urychluje práci.
3. Kódování a průběžná kontrola
Kóduji sekci po sekci. Po každém celku porovnám výsledek s návrhem přes overlay techniku — překrytím screenshotu návrhu přes živý prohlížeč v 50% průhlednosti. Odchylky jsou okamžitě viditelné.
4. Testování napříč prohlížeči
Hotovou šablonu testuji v Chrome, Firefox, Safari a Edge. Na mobilních zařízeních pak v iOS Safari a Android Chrome, kde se chování CSS občas liší.
Nejčastější problémy
Subpixelové vykreslování fontů — různé operační systémy vykreslují fonty odlišně. To, co je pixel-perfect na macOS, může na Windows vypadat jinak. Řeším to pomocí -webkit-font-smoothing: antialiased.
Box-sizing — výchozí content-box v CSS počítá padding mimo šířku elementu. Vždy nastavuji box-sizing: border-box globálně.
Line-height a vertikální centrování — grafici v Figma zadávají line-height jako absolutní hodnotu v px, CSS preferuje bezjednotkové hodnoty. Přepočítávám ručně.
Závěr
Pixel-perfect kódování není o dokonalosti pro dokonalost — je to o respektování práce grafika a dodání výsledku, který odpovídá očekávání klienta. Při správném workflow je dosažitelné konzistentně a bez zbytečného přepracování.
Máte grafický návrh ve Figmě nebo Photoshopu? Kontaktujte mě a probereme vaši zakázku.