Właściwość konspektu CSS jest mylącą właściwością. Kiedy po raz pierwszy się o tym dowiesz, trudno zrozumieć, jak bardzo różni się on od właściwości granicy. W3C wyjaśnia, że ma następujące różnice:
- Kontury nie zajmują miejsca.
- Kontury mogą być nieprostokątne.
Kontury nie zajmują miejsca
To stwierdzenie samo w sobie jest mylące. W jaki sposób obiekt na Twojej stronie nie zajmuje miejsca na stronie internetowej? Ale jeśli uważasz, że twoja strona internetowa przypomina cebulkę, każdy element na stronie może być ułożony na wierzchu innego przedmiotu. Właściwość outline nie zajmuje miejsca, ponieważ zawsze jest umieszczana na wierzchu ramki elementu.
Kiedy kontur jest umieszczony wokół elementu, nie ma żadnego wpływu na to, jak ten element jest ułożony na stronie. Nie zmienia rozmiaru ani pozycji elementu. Jeśli umieścisz kontur na elemencie, zajmie on taką samą ilość miejsca, jakbyś nie miał obrysu tego elementu. Nie dotyczy to granicy. Granica na elemencie jest dodawana do zewnętrznej szerokości i wysokości elementu. Więc jeśli miałbyś obraz o szerokości 50 pikseli i 2-pikselowej granicy, zajmowałby on 54 piksele (2 piksele na każdą krawędź boczną). Ten sam obraz z 2-pikselowym obrysem zajmowałby tylko 50 pikseli szerokości na twojej stronie, a kontur byłby wyświetlany poza zewnętrzną krawędzią obrazu.
Kontury mogą być nieprostokątne
Zanim zaczniesz myśleć "fajnie, teraz mogę rysować kółka", pomyśl jeszcze raz. To stwierdzenie ma inne znaczenie, niż mogłoby się wydawać. Po umieszczeniu obramowania na elemencie, przeglądarka interpretuje element tak, jakby był jednym ogromnym prostokątnym prostokątem. Jeśli pole zostanie podzielone na kilka linii, przeglądarka pozostawia tylko krawędzie otwarte, ponieważ pole nie jest zamknięte. Wygląda to tak, jakby przeglądarka widziała granicę z nieskończenie szerokim ekranem - wystarczająco szerokim, by ta granica była jednym ciągłym prostokątem.
Natomiast właściwość konspektu bierze pod uwagę krawędzie. Jeśli zakreślony element obejmuje kilka linii, kontur zamyka się na końcu linii i ponownie otwiera się w następnej linii. Jeśli to możliwe, kontur pozostanie w pełni połączony, tworząc nieprostokątny kształt.
Korzystanie z właściwości konturu
Jednym z najlepszych zastosowań właściwości outline jest podświetlanie wyszukiwanych haseł. Wiele witryn robi to z kolorem tła, ale możesz także użyć właściwości konturu i nie martwić się o dodanie dodatkowych odstępów na swoich stronach.
Właściwość outline-color akceptuje pojęcie "invert", co sprawia, że kolor konturu jest odwrotnością bieżącego tła. Pozwala to wyróżnić elementy na dynamicznych stronach internetowych, nie wiedząc, jakie kolory są używane.
Możesz także użyć właściwości outline, aby usunąć linię przerywaną wokół aktywnych łączy. Ten artykuł z CSS-Tricks pokazuje, jak usunąć kropkowany kontur.
