Schițele CSS sunt mai mult decât o graniță
Proprietatea conturului CSS este o proprietate confuză. Când aflați mai întâi despre aceasta, este greu de înțeles cum este chiar diferit de la proprietatea de frontieră. W3C explică faptul că are următoarele diferențe:
- Schițele nu ocupă spațiu.
- Schițele nu pot fi rectangulare.
Contururile nu ocupă spațiul
Această afirmație, în sine, este confuză. Cum poate un obiect de pe pagina dvs. Web să nu aibă loc pe pagina Web? Dar dacă vă gândiți că pagina dvs. Web este ca o ceapă, fiecare element de pe pagină poate fi stratificat peste un alt element. Proprietatea conturului nu ocupă spațiu, deoarece este întotdeauna plasată pe partea superioară a casetei elementului.
Atunci când este pus un contur în jurul unui element, acesta nu are nici un efect asupra modului în care elementul este prezentat pe pagină. Nu modifică dimensiunea sau poziția elementului. Dacă puneți un contur pe un element, acesta va ocupa același spațiu ca și cum nu aveați o schiță a acelui element. Acest lucru nu este valabil pentru o graniță. O margine a unui element se adaugă lățimii și înălțimii exterioare a elementului. Deci, dacă ai avea o imagine cu lățimea de 50 de pixeli, cu o margine de 2 pixeli, ar fi nevoie de 54 de pixeli (2 pixeli pentru fiecare margine laterală). Aceeași imagine cu un contur de 2 pixeli ar avea o lățime de numai 50 de pixeli pe pagină, conturul ar afișa peste marginea exterioară a imaginii.
Schițele pot fi nerectonale
Înainte de a începe să te gândești "cool, acum pot să atrag cercuri!" Mai gandeste-te. Această afirmație are un înțeles diferit decât ați putea crede. Atunci când puneți o margine pe un element, browserul interpretează elementul ca și cum ar fi o cutie dreptunghiulară gigantică. Dacă caseta se împarte în mai multe rânduri, browser-ul lasă marginile deschise deoarece caseta nu este închisă. Este ca și cum browserul vede frontiera cu un ecran infinit de lat - suficient de larg pentru ca granița să fie un dreptunghi continuu.
În schimb, proprietatea conturului ia în considerare marginile. Dacă un element prezentat se întinde pe mai multe linii, conturul se închide la capătul liniei și se redeschide din nou pe linia următoare. Dacă este posibil, conturul va rămâne complet conectat, creând o formă nectangulară.
Utilizarea proprietății conturului
Una dintre cele mai bune utilizări ale proprietății outline este de a evidenția termenii de căutare. Multe site-uri fac acest lucru cu o culoare de fundal, dar puteți utiliza și proprietatea outline și nu vă faceți griji cu privire la adăugarea de spații suplimentare în paginile dvs.
Proprietatea de culori a conturului acceptă termenul "invers", care face ca culoarea conturului să inverseze fundalul curent. Acest lucru vă permite să evidențiați elemente pe pagini Web dinamice fără a fi nevoie să știți ce culori sunt utilizate .
De asemenea, puteți utiliza proprietatea contur pentru a elimina linia punctată în jurul legăturilor active. Acest articol din CSS-Tricks arată cum să elimini conturul punctat.