The CSS vlastnost osnovy je matoucí vlastnost. Když se o tom poprvé dozvíte, je těžké pochopit, jak se dokonce vzdáleně liší od vlastnosti border. W3C vysvětluje, že má následující rozdíly:
- Obrysy nezabírají místo.
- Obrysy mohou být neobdélníkové.
Obrysy nezabírají místo
Toto tvrzení samo o sobě je matoucí. Jak může objekt na vaší webové stránce nezabírat místo na této webové stránce? Pokud si však myslíte, že je vaše webová stránka jako cibule, každá položka na stránce může být navrstvena na jinou položku. Vlastnost outline nezabírá místo, protože je vždy umístěna v horní části rámečku prvku.
Když je obrys umístěn kolem prvku, nemá to žádný vliv na to, jak je tento prvek rozložen na stránce. Nezmění velikost ani polohu prvku. Pokud na prvek vložíte obrys, bude to zabírat stejné množství prostoru, jako kdybyste obrys daného prvku neměli. To neplatí pro a okraj. Okraj na prvku se přidá k vnější šířce a výšce prvku. Takže pokud jste měli obraz to bylo 50 pixelů široké, s 2-pixelovým okrajem, to by trvalo až 54 pixelů (2 pixely pro každé boční ohraničení). Stejný obrázek s obrysem 2 pixely by na vaší stránce zabral pouze šířku 50 pixelů, obrys by se zobrazil přes vnější okraj obrázku.
Obrysy mohou být neobdélníkové
Než začnete přemýšlet „super, teď můžu kreslit kruhy“, přemýšlejte znovu. Toto tvrzení má jiný význam, než si myslíte. Když vložíte ohraničení prvku, prohlížeč interpretuje prvek, jako by to bylo jedno obří obdélníkové pole. Pokud se pole rozdělí na několik řádků, prohlížeč ponechá okraje otevřené, protože pole není uzavřené. Je to, jako by prohlížeč viděl hranici s nekonečně širokoúhlým obrazem - dostatečně širokým, aby toto ohraničení bylo jeden souvislý obdélník.
Naproti tomu vlastnost obrys bere v úvahu hrany. Pokud obrysový prvek zahrnuje několik řádků, obrys se zavře na konci řádku a znovu se otevře na dalším řádku. Pokud je to možné, obrys také zůstane plně propojený a vytvoří obdélníkový tvar.
Použití vlastnosti osnovy
Jedním z nejlepších použití vlastnosti outline je zvýraznění hledaných výrazů. Mnoho webů to dělá s barvou pozadí, ale můžete také použít vlastnost obrys a nemusíte se starat o přidání dalších mezer na své stránky.
Vlastnost outline-color přijímá výraz „invertovat“, díky čemuž je barva obrysu inverzní k aktuálnímu pozadí. To vám umožní zvýraznit prvky na dynamických webových stránkách, aniž byste museli vědět co jsou použity barvy.
Vlastnost obrys můžete také použít k odstranění tečkované čáry kolem aktivních odkazů. Tento článek od Triky CSS ukazuje, jak na to odstraňte tečkovaný obrys.