CSS outline-ominaisuus on sekava ominaisuus. Kun opit siitä ensin, on vaikea ymmärtää, miten se eroaa edes etäisesti rajaomaisuudesta. W3C selittää sen olevan seuraavat erot:
- Ääriviivat eivät vie tilaa.
- Ääriviivat voivat olla suorakaiteen muotoisia.
Ääriviivat eivät vie tilaa
Tämä lausuma on sinänsä hämmentävä. Kuinka Web-sivusi objekti ei vie tilaa Web-sivulla? Mutta jos luulet Web-sivusi olevan kuin sipuli, jokainen sivun kohde voi olla kerrostettu toisen kohteen päälle. Ääriviiva-ominaisuus ei vie tilaa, koska se sijoitetaan aina elementin laatikon päälle.
Kun ääriviivat sijoitetaan elementin ympärille, sillä ei ole mitään vaikutusta siihen, miten kyseinen elementti sijoitetaan sivulle. Se ei muuta elementin kokoa tai sijaintia. Jos laitat elementtiin ääriviivan, se vie yhtä paljon tilaa kuin jos sinulla ei olisi kyseisen elementin ääriviivoja. Tämä ei päde a rajalla. Elementin reunus lisätään elementin ulkoleveyteen ja korkeuteen. Joten jos sinulla olisi kuva se oli 50 pikseliä leveä, 2 pikselin reunalla, se vie 54 pikseliä (2 pikseliä kullekin sivureunalle). Sama kuva, jossa on 2 pikselin ääriviiva, vie vain 50 pikseliä sivullasi, ääriviivat näkyvät kuvan ulkoreunan yli.
Ääriviivat voivat olla suorakaiteen muotoisia
Ennen kuin alat ajatella "hienoa, nyt voin piirtää ympyröitä", ajattele uudelleen. Tällä lausunnolla on erilainen merkitys kuin luulisi. Kun asetat elementille reunuksen, selain tulkitsee elementin ikään kuin se olisi yksi jättiläinen suorakulmainen laatikko. Jos ruutu jakautuu usealle riville, selain vain jättää reunat auki, koska ruutua ei ole suljettu. Näyttää siltä, että selain näkisi reunan äärettömän laajakuvanäytöllä - riittävän leveällä, jotta se olisi yksi jatkuva suorakulmio.
Sen sijaan ääriviivaominaisuus ottaa huomioon reunat. Jos hahmoteltu elementti kulkee useita rivejä, ääriviivat sulkeutuvat rivin loppuun ja avautuvat uudelleen seuraavalla rivillä. Jos mahdollista, ääriviivat pysyvät myös täysin yhteydessä luoden suorakaiteen muotoisen muodon.
Outline-ominaisuuden käyttö
Yksi ääriviivat-ominaisuuden parhaista käyttötavoista on hakutermien korostaminen. Monet sivustot tekevät tämän taustavärillä, mutta voit käyttää myös ääriviivat-ominaisuutta äläkä huolehdi ylimääräisten välien lisäämisestä sivuillesi.
Outline-color-ominaisuus hyväksyy termin "invert", mikä tekee ääriviivan väristä nykyisen taustan käänteisen. Tämän avulla voit korostaa elementtejä dynaamisilla verkkosivuilla tarvitsematta tietää mitä värejä käytetään.
Voit myös käyttää jäsennysominaisuutta poistaa katkoviivan aktiivisten linkkien ympäriltä. Tämä artikkeli CSS-temppuja näyttää kuinka poista katkoviiva.