Outline
CSS vlastnost outline je určena pro obtahování prvků. Někdy outline překládám také jako vnější rámeček.
Příklad obtáhne všechny tagy <div> po vnějším obvodu oranžovou čárou silnou 2px:
div {outline: 2px solid orange;}
Outline je velmi podobná CSS vlastnosti border, což je rámeček.
| outline | border |
|---|---|
| obtažení, které nezabírá místo | rámeček, který má své rozměry |
| outline se nikdy nepočítá do šířky objektu | border se může počítat do šířky (záleží na vlastnosti box-sizing) |
| outline může překrývat jiné okolní objekty | border okolní prvky o svou šířku odsune |
| anglicky "čára mimo", "čára kolem" | anglicky rámeček, hranice |
S trochou poezie by se mohlo říct, že outline je absolutně pozicovaný rámeček okolo prvku. Ale není absolutně pozicovaný, to byla poezie. Prostě se jenom nepočítá do žádného box-modelu. Z anglického názvu vlastnosti plyne, že to je čára mimo, tedy něco jako obtažení prvku. Jako kdybych vzal fixu a přes okolí nakreslil další rámeček. Outline může klidně překrývat jiné prvky. Pokud má prvek margin, napřed se samozřejmě zobrazuje přes margin. Když je prvek moc blízko okraje viditelné plochy prohlížeče, tak se outline nemusí na té straně zobrazit.
Pokud má prvek nastavený i border, outline border nepřekrývá. Kreslí se kolem.
Použití outline
Já vlastnost outline rád používám v situacích, kdy potřebuju něco orámovat, ale rozhodně nechci, aby to orámování na stránce cokoli ovlivnilo. Je to typicky vhodné při debugu stránky nebo při uživatelských akcích, které mají zvýraznit některé prvky, ale nemají riskovat, že stránka bude poskakovat byť třeba o pixel.
Někdy je lepší namísto outline používat vlastnost box-shadow, tedy stín prvku. To se hodí zejména v případech, kdy je potřeba udělat okolní rámeček kulatý. Outline totiž je vždy obdélník, neumí kulaté rohy. Box-shadow se zakulatí přirozeně jako stín a navíc se umí zakulatit i víc, protože respektuje nastavení kulatých rohů přes vlastnost border-radius.
Protože se outline může teoreticky zobrazit přes úplně jiný prvek a překrýt ho, je dobrý zvyk nastavovat outline poloprůhlednou barvu, aby skrze outline bylo vidět. To se dělá zápisem barvy rgba(), kde čtvtá hodnota je stupeň průhlednosti. Příklad:
input:focus {outline: 10px solid rgba(255,165,0,0.5)}
V příkladu je rgba(255,165,0,0.5) poloprůhledná oranžová barva. Poloprůhlednost dělá to "a" v rgba a poslední číslíčko nastavené na 0.5.
Výchozí outline každého objektu je none = žádné obtažení. Když se nenastaví barva, bude outline černá. Když se nenastaví šířka outline, bude 3px. Outline-style se nastavit musí, jinak se outline nevykreslí.
Nelze mít různé strany outline
Outline určuje naráz vlastnosti všech čtyř stran obtažení. Na rozdíl od border nedokáže outline nastavit různě různé strany. Po všech okrajích bude outline stejně tlustá i barevná. Žádné vlastnosti outline-left, outline-top, outline-right ani outline-bottom neexistují. V případě takové potřeby doporučuju zneužít box-shadow.
Zápis všech vlastností najednou
Outline určuje všechny vlastnosti obtažení najednou. Jsou to vlastnosti Outline-width, Outline-style a Outline-color (v tomto pořadí). Návody na tyto dílčí vlastnosti nemám rozepsané, protože jsou téměř identické s vlastnostmi Border-width, Border-style a Border-color.
Příklad ekvivalentního zápisu vlastností outline-*
Následující tři zápisy vedou ke stejnému efektu:
div {outline: 1px solid orange; }
div {outline-width: 1px; outline-style: solid; outline-color: orange; }
Souhrnným zápisem přes outline se nedá napsat outline-offset (nebo to jenom neumím).
Outline-offset
Další CSS vlastnost outline-offset nastavuje vzdálenost outline od prvku. Dovoluje mezi okrajem prvku a outline mít prázdné místo a outline nakreslit až někde dál.
div {outline: 1px solid orange; outline-offset: 10px;}
Vtipný efekt vzniká při nastavení outline-offset na zápornou hodnotu. Outline se potom podle očekávání nakreslí uvnitř prvku. V takovém případě výrazně doporučuji poloprůhlednou barvu.
Podpora
V dnešních prohlížečích (2021) je podpora velmi dobrá a už dlouho s vlastností outline nejsou žádné problémy.
Outline-offset nefunguje v IE 11, což mi už nepřijde důležité.
Naopak jediné IE 11 jako jediný prohlížeč podporoval u outline-color barvu invert, která invertovala barvu všeho, co bylo pod outline. Dnešní prohlížeče (2021) barvu invert nepodporují.
Příklady
Docela často si při ladění vzhledu stránky nechávám zobrazovat čárkované okraje objektů. Rámečky buněk tabulek oranžově, tagy div šedě:
div {outline: 1px dashed gray}
td {outline: 1px dashed orange}
Pokud se neuvede třetí hodnota (pro barvu), vezme se výchozí barva písma: následující zápis orámuje všechny odstavce <p> černou barvou (pokud budou černým písmem).
p {outline: 1px solid}
Na takové testování je lepší používat outline než border, protože šířka border se někdy započítává do šířky a border také "odtlačuje" případné okolní prvky.
Poloprůhledné outline
Nic jako outline-opacity neexistuje (aspoň ne v roce 2021), ale outline se může nechat vykreslit poloprůhlednou barvou:
div {outline: 16px dotted rgba(0,64,255,0.5); }
Další příklady na outline s poloprůhlednými barvami a záporným outline-offset.
Napsáno v únoru 2021
Reklama
