Usługi
Portfolio
Programowanie
Autor
FotogaleriaObrys, lepiej znany jako outline jest właściwością stylu elementu. Szerzej o tej właściwości w kursie Pawła Wimmera.
Przykład obrysu linku na stronie wyszukiwarki google
Otóż wspomniany obrys ma tę cechę że nie wpływa na szerokość elementu (jak np. border). Nie oznacza to jednak, że jego narysowanie nie wymaga miejsca. I tu pojawia się problem, gdyż taki obrys potrafi zepsuć szablon strony, którego wymiary są obliczone co do piksela.
Działający przykład takiego zdarzenia zaobserwować można na przykładowej (swoją drogą bardzo ciekawej) stronie.
Kliknięcie w link zamykający okienko spowodowało fokus tego (ustawienie aktywnym) oraz obrysowanie. Obrysowanie nie zmieściło się w zadanej wysokości i nastąpiło pojawienie się paska przewijania. Efekt jest bardzo nieestetyczny.
Element (link) przed obrysowaniem
Element po obrysowaniu.
W założeniu, obrys jest rozwiązaniem pomocnym w ustaleniu który element na stronie jest aktywny (fokusowany). Jest to bardzo przydatne w przypadku wypełniania formularzy na stronie. Stąd usunięcie go (które zaraz opiszę) jest działaniem zmniejszającym użyteczność.
Jak usunąć obrys dla wszystkich elementów na stronie? Wystarczy jedna reguła CSS
*:focus {
outline: none;
}
Nasuwa się logiczny wniosek, aby obrys pozostawić dla wybranych elementów, tak aby nie zmniejszać użyteczności strony. Safari ma to zaimplementowane fabrycznie. W tej przeglądarce jedynie niektóre fokusowane elementy mają obrys. Poniżej częściowy przykład jak zaimplementować w innych przeglądarkach działanie analogiczne do Safari.
*:focus {
outline: none;
}
input:focus, label:focus {
outline: 1px dotted #000000;
}
