CSS obrisi su više nego granica
Prednost CSS obrisa je zbunjujuće svojstvo. Kada prvi put naučite o tome, teško je razumjeti kako se to i razlikuje od granične imovine. W3C objašnjava da ima sljedeće razlike:
- Obrisi ne zauzimaju prostor.
- Opisi mogu biti ne-pravokutni.
Obrisi ne zauzimaju prostor
Ta je izjava u sebi i sama zbunjujuća. Kako objekt na vašoj web stranici ne može zauzeti prostor na web stranici? Ali ako mislite da je vaša web stranica kao luka, svaka stavka na stranici može biti slojevita na vrhu druge stavke. Vlasnički objekt ne zauzima prostor jer se uvijek nalazi na vrhu kutije elementa.
Kada se obris stavlja oko elementa, on nema utjecaja na način na koji je taj element položen na stranici. Ne mijenja veličinu ili položaj elementa. Ako stavite obris na element, to će zauzeti jednaku količinu prostora kao da niste imali obris tog elementa. To ne vrijedi za granicu. Granica na elementu dodaje se vanjskoj širini i visini elementa. Dakle, ako ste imali sliku širine 50 piksela s ograničenjem od 2 piksela, trebalo bi 54 piksela (2 piksela za svaku bočnu granicu). Ta ista slika s obrascem od 2 piksela trebala bi na vašoj stranici iznositi samo širinu od 50 piksela, a kontura bi se prikazivala preko vanjskog ruba slike.
Opisi mogu biti ne-pravokutni
Prije nego što počnete razmišljati "cool, sada mogu izvući krugove!" Razmisli još jednom. Ova izjava ima drugačije značenje nego što mislite. Kada stavite granicu na element, preglednik tumači element kao da je riječ o jednom velikom pravokutnom okviru. Ako se okvir razdvaja više redaka, preglednik samo otvara rubove jer okvir nije zatvoren. Kao da preglednik vidi granicu s beskonačno širokim zaslonom - dovoljno široko da je granica jedna kontinuirana pravokutnika.
Nasuprot tome, obrisni se entitet uzima u obzir. Ako jedan od navedenih elemenata obuhvaća nekoliko redaka, obris zatvara na kraju retka i ponovno se otvara na sljedećem retku. Ako je moguće, obris će ostati potpuno povezan, stvarajući oblik koji nije pravokutan.
Upotrebe obrta
Jedna od najboljih iskorištenih svojstava obrisa jest označavanje pojmova za pretraživanje. Mnoge web lokacije to čine sa bojom pozadine, ali možete koristiti i obrisni entitet i ne brinite o dodavanju dodatnih razmaka na svojim stranicama.
Vlasnička struktura prihvaća izraz "invert", što čini boju obrisa obrnuto od trenutne pozadine. To vam omogućuje da označite elemente na dinamičnim web stranicama bez potrebe znati koje se boje koriste .
Također možete koristiti obrisni entitet kako biste uklonili točkastu liniju oko aktivnih veza. Ovaj članak iz CSS-trikova pokazuje kako ukloniti iscrtkani obris.