Zunanja obroba v CSS

Lastnost outline določa zunanjo obrobo elementa. Ta je narisana zunaj roba elementa, zato ne vpliva na širino, višino ali razporeditev elementov v postavitvi strani. Zunanja obroba je posebej uporabna takrat, ko želimo element vizualno poudariti, ne da bi pri tem spreminjali njegovo velikost.

Pomni: Lastnost outline ne zasede dodatnega prostora v postavitvi strani. Zato se razlikuje od lastnosti border, ki je del škatlastega modela elementa.

Outline se zelo pogosto uporablja za prikaz fokusa pri interaktivnih elementih, na primer pri povezavah, gumbih in poljih obrazcev. Pri dostopnosti je pomembno, da vidnega fokusa ne odstranimo brez ustreznega nadomestnega prikaza. Za sodobno prilagajanje fokusa je posebej uporabna kombinacija :focus-visible, outline in outline-offset.

Zunanja obroba outline je narisana zunaj roba elementa

Outline ne vpliva na širino ali višino elementa v postavitvi

Osnovna pravila

outline določa zunanjo obrobo elementa.
Zunanja obroba je narisana zunaj roba elementa.
Outline ne vpliva na razporeditev elementov na strani.
Outline pogosto uporabljamo za prikaz fokusa.
Razmik med robom elementa in zunanjo obrobo določimo z lastnostjo outline-offset.

Pozor: Če zunanjo obrobo odstranimo pri povezavah, gumbih ali vnosnih poljih, mora biti fokus prikazan na drug jasen in dovolj opazen način. Uporabnik mora vedno videti, kateri element je trenutno izbran.

outline-style

Z lastnostjo outline-style določimo slog zunanje obrobe. Za razliko od robov outline ni mogoče nastaviti različno za vsako stran posebej, ampak velja za celoten element.

Vrednost	Pomen
`none`	ni zunanje obrobe
`dotted`	pikčasta zunanja obroba
`dashed`	črtkana zunanja obroba
`solid`	neprekinjena zunanja obroba
`double`	dvojna zunanja obroba
`groove`	utisnjen videz
`ridge`	izbočen videz
`inset`	element deluje vdrto
`outset`	element deluje izbočeno
`inherit`	vrednost podeduje od nadrejenega elementa

Primer:

<p class="solid">To besedilo ima lastnost <em>outline-style: <strong>solid</strong></em></p>
<p class="dashed">To besedilo ima lastnost <em>outline-style: <strong>dashed</strong></em></p>
<p class="dotted">To besedilo ima lastnost <em>outline-style: <strong>dotted</strong></em></p>

.solid { outline-style: solid; }
.dashed { outline-style: dashed; }
.dotted { outline-style: dotted; }

To besedilo ima lastnost outline-style: solid

To besedilo ima lastnost outline-style: dashed

To besedilo ima lastnost outline-style: dotted

Pomni: Če slog zunanje obrobe ni določen, je outline pri mnogih elementih neviden. Zato pri uporabi lastnosti outline-width ali outline-color vedno preverimo tudi slog.

outline-width

Z lastnostjo outline-width določimo debelino zunanje obrobe. Za vrednost lahko uporabimo ključne besede ali natančno debelino.

Vrednost	Pomen
`thin`	tanka zunanja obroba
`medium`	srednje debela zunanja obroba
`thick`	debela zunanja obroba
`debelina`	debelina obrobe, na primer v px, em ali rem
`inherit`	vrednost podeduje od nadrejenega elementa

Primer:

.tanka { outline: thin solid #666666; }
.srednja { outline: medium solid #666666; }
.debela { outline: thick solid #666666; }
.px { outline: 6px solid #666666; }

To besedilo ima tanko zunanjo obrobo.

To besedilo ima srednje debelo zunanjo obrobo.

To besedilo ima debelo zunanjo obrobo.

To besedilo ima zunanjo obrobo debeline 6px.

outline-color

Z lastnostjo outline-color določimo barvo zunanje obrobe. Pogosto je uporabna tudi vrednost currentColor, saj tako zunanja obroba prevzame trenutno barvo besedila elementa.

Vrednost	Pomen
`currentColor`	uporabi trenutno barvo besedila elementa
`barva`	barva zunanje obrobe
`inherit`	vrednost podeduje od nadrejenega elementa

.oranzen { outline: 4px solid #fb9400; }
.podedovan { color: #0a58ca; outline: 4px solid currentColor; }

To besedilo ima oranžno zunanjo obrobo.

To besedilo uporablja outline-color: currentColor.

Pozor: Pri prilagajanju barve fokusa mora biti zunanja obroba dovolj opazna glede na ozadje. Če je kontrast preslab, fokus ni več jasno viden.

outline-offset

Z lastnostjo outline-offset določimo razmik med robom elementa in zunanjo obrobo. Ta lastnost je posebej uporabna pri poudarjanju fokusa, ker outline ni narisan neposredno ob robu elementa.

Vrednost	Pomen
`dolžina`	razmik med robom elementa in outline, na primer `2px` ali `0.2em`
`inherit`	vrednost podeduje od nadrejenega elementa

.odmik {
   border: 3px solid #fb9400;
   outline: 4px solid #888888;
   outline-offset: 6px;
}

Ta odstavek ima določen razmik med robom in outline.

Pomni: Razmik zunanje obrobe od elementa določimo z lastnostjo outline-offset, ne pa z lastnostjo margin.

outline

Lastnost outline uporabljamo kot bližnjico za nastavitev več lastnosti zunanje obrobe:

outline-style
outline-width
outline-color

Vrednosti posameznih lastnosti lahko zapišemo v poljubnem vrstnem redu. Dobra praksa pa je, da najprej določimo debelino, nato slog in na koncu še barvo, ker je tak zapis bolj pregleden. Razmik do elementa po potrebi določimo posebej z lastnostjo outline-offset.

<p class="obroba">Ta odstavek ima lastnosti:<br /><em><strong> 
border: 10px solid #fb9400;<br />
margin: 20px;<br />
padding: 10px;<br />
outline: 10px solid #888888;<br />
outline-offset: 4px;<br /></strong></em></p>

.obroba { 
   border: 10px solid #fb9400;
   margin: 20px;
   padding: 10px;
   outline: 10px solid #888888;
   outline-offset: 4px;
}

Ta odstavek ima lastnosti:
border: 10px solid #fb9400;
margin: 20px;
padding: 10px;
outline: 10px solid #888888;
outline-offset: 4px;

Priporočila

Outline uporabi takrat, ko želiš element poudariti brez vpliva na njegovo velikost in postavitev.
Pri interaktivnih elementih outline ohrani ali ga nadomesti z jasno vidnim fokusom.
Za bolj pregleden prikaz fokusa pogosto uporabi tudi outline-offset.
Pri zapisovanju bližnjice outline je smiselno najprej navesti debelino, nato slog in na koncu barvo.

Pogoste napake

Outline se zamenjuje z robom, čeprav ne vpliva na postavitev elementa.
Pri uporabi outline-width ali outline-color ni določen slog zunanje obrobe.
Vidni fokus je odstranjen brez ustrezne nadomestne rešitve.
Razmik outline od elementa se napačno rešuje z lastnostjo margin namesto z outline-offset.

Nazaj

Naprej