Accessibility: Wskaźnik z użyciem obramowania

0:00Cześć w poprzednich lekcjach omówiliśmy już jak można stylować

0:04wskaźnik fokusu poprzez outline poprzez background i

0:08color oraz wskazaliśmy że faktycznie outline ma problem jeżeli chodzi przecinanie

0:12go ponieważ box model działa w ten sposób że outline jest faktycznie poza nim no

0:17i overflow hidden nam go usunie czyli jeżeli tutaj mamy faktycznie nawigację

0:21no to overflow hidden go usuwa no i

0:25oczywiście tutaj mam jeszcze ten domyślny outline na inputciue ustawiony

0:29ale jeśli chcielibyśmy aby nie ucinało nam owerflowu a nie

0:33chcemy robić jakby całego tła dla labelki no to możemy użyć

0:38bordera do tego czyli na inputcie usuniemy

0:43sobie outline żeby

0:49nie było za łatwo no i teraz możemy ustawić na label

0:53before border-bottom 3

0:57piksele solid i powiedzmy to blue i to usuwamy zapisujemy

1:03i teraz jak się tabujemy to nic nie widać ale jeżeli dam

1:07tutaj boxa-sizing ustawiony na border-box to powinno działać

1:11z tym że nie dałem tutaj przedrostka var żeby użyć zmiennej

1:15css custom properties box-sizing border-box sprawia że wszystkie

1:19kalkulacje będą jakby zawierały w sobie padding i border więc

1:23mamy pewność że nic nam nie będzie tam się rozjeżdżać no i w tym momencie widzimy faktycznie

1:28fajne podkreślenie tego na którym elemencie jesteśmy możemy to troszkę

1:32pogrubić na 4 piksele oczywiście to mogłoby być w remach czy w innej jednostce relatywnej a nie

1:37absolutej jak piksele no i ustalić tym samym color

1:42dla input focus label aby był zgodny z

1:46tym blue color

1:51var blue oczywiście moglibyśmy zrobić sobie zmienną

1:56custom properties gdzieś wyżej na przykład w rootcie czyli tutaj moglibyśmy

2:02sobie tutaj ustawić jakąś nie wiem na przykład focus-color możemy

2:06to w sumie zrobić focus-color i

2:10ustawiamy to na blue no i teraz możemy tego focus-color używać wszędzie nie

2:15musimy tutaj 2 razy dawać blue wystarczy że zrobimy focus-color

2:19i focus-color no

2:23i po tabowaniu faktycznie wygląda to całkiem estetycznie i tak samo na aktywację

2:28poprzez checkbox możemy zmienić ten focus-color na coś innego to jest jedna

2:32z możliwości i border jest o tyle tutaj fajny że możemy faktycznie zrobić border

2:37z różnej strony możemy sobie z border-top ustawić outline nie

2:42wiem czy to ma sens akurat w naszym języku ale być może w chińskim miałoby to sens możemy

2:46też ustawić border na left i wtedy będziemy mięli takie

2:50jakby akapit się z tego robił nie wygląda to za dobrze więc może to nie jest najlepsze rozwiązanie ale

2:55możemy też zrobić po prostu border-top i border-bottom będziemy

3:00mięli takie jakby szyny dookoła elementu na którym jesteśmy no

3:04i oczywiście jeżeli nie będziemy dekorowali tylko jednej strony no to cały jakby border

3:09nam się będzie poświetlał jest to bardzo podobne do tego oulineu z tym że jest po prostu troszkę

3:13węższe ponieważ nie wychodzi poza box-model tylko jest zawarte

3:17jako border no i to jesteś taki minus że jakby zmuszeni jesteśmy wykorzystać

3:21właściwość border na to więc jeżeli nasz element miałby mieć tak czy siak obramowanie

3:25no to nie bardzo możemy użyć tego stylu chyba że faktycznie w

3:30tamtym przypadku nie będzie to problemem możemy też zrobić taki

3:34border za pomocą pseudo elementów tak jak tutaj użyliśmy before no to możemy sobie po prostu

3:38namalować taką kreskę która będzie też symulować ten border nie ma z tym

3:42problemu to co można zrobić jeszcze i to jest chyba najfajniejsza rzecz związana

3:46z wskaźnik statusu według mnie z tym że

3:50też jest jakby wrażliwa na ten overflow hidden na

3:54rodzicu więc opowiem o tym w następnej lekcji i mowa

3:58tutaj o box-shadow na elemencie który ma fokus