CSS-ääriviivat ovat enemmän kuin vain raja
CSS- ääriviiva ominaisuus on hämmentävä ominaisuus. Kun ensin tutustut siihen, on vaikea ymmärtää, miten se eroaa etäisyydellä raja-omaisuudesta. W3C selittää, että sillä on seuraavat erot:
- Näkymät eivät vie tilaa.
- Näkymät voivat olla ei-suorakulmioita.
Ääriviivat eivät vie tilaa
Tämä toteamus itsessään on hämmentävä. Kuinka Web-sivustosi kohde ei voi käyttää Web-sivun tilaa? Mutta jos ajattelet, että Web-sivu on kuin sipuli, jokaisen sivun kohteen voi kerrostua toisen kohteen päälle. Ääriviivat omaisuus ei vie tilaa, koska se on aina elementin laatikon päälle.
Kun ääriviiva asetetaan elementin ympärille, sillä ei ole mitään vaikutusta siihen, miten tämä elementti on asetettu sivulle. Se ei muuta elementin kokoa tai sijaintia. Jos laitat ääriviivat elementtiin, se vie yhtä paljon tilaa kuin jos sinulla ei ole ääriviivaa kyseisestä elementistä. Tämä ei tarkoita rajaa. Elementin raja lisätään elementin ulkoreunaan ja korkeuteen. Joten jos sinulla olisi 50 pikseliä leveä kuva, jossa on 2 pikselin raja, se kesti 54 pikseliä (2 pikseliä jokaiselle sivureunalle). Sama kuva, jossa on 2 pikselin ääriviiva, vie sivusi vain 50 pikseliä leveydeltä, ääriviiva näkyy kuvan ulkoreunan yli.
Näkymät voivat olla suorakulmaisia
Ennen kuin ajattelet "viileä, nyt voin piirtää piirejä!" Mieti uudelleen. Tässä lausunnossa on eri merkitys kuin luulisi. Kun laitat rajan elementtiin, selain tulkitsee elementin ikään kuin olisi yksi jättiläinen suorakulmainen laatikko. Jos ruutu jakautuu useampiin riveihin, selain jättää reunat auki, koska laatikkoa ei ole suljettu. Se on kuin jos selaimessa näkyy raja äärettömän laaja näyttö - riittävän leveä, että raja on yksi jatkuva suorakulmio.
Sitä vastoin ääriviivat omaavat reunat huomioon. Jos viivoitettu elementti ulottuu useampiin viivoihin, ääriviiva sulkeutuu viivan päähän ja avataan uudelleen seuraavalla rivillä. Jos mahdollista, ääriviiva pysyy täysin yhdistettynä, jolloin ei ole suorakulmaista muotoa.
Outline-ominaisuuden käyttötarkoitukset
Yksi ääriviivan ominaisuuksista on korostaa hakutermejä. Monet sivustot tekevät tämän taustavärillä, mutta voit käyttää myös ääriviivatarjontaa. Älä myöskään välitä lisäsivujen lisäämisestä sivuillesi.
Ääriviivat-väriominaisuus hyväksyy termi "käänteinen", joka tekee ääriviivat värin käänteiseksi nykyisestä taustasta. Tämän avulla voit korostaa elementtejä dynaamisilla verkkosivuilla tarvitsematta tietää, mitä värejä käytetään .
Voit myös käyttää ääriviivat-ominaisuutta poistamaan pisteviiva aktiivisten linkkien ympärillä. Tämä CSS-Tricksin artikkelissa kuvataan pisteviivan ääriviivan poistaminen.