Accessibility: Wskaźnik z użyciem tła i koloru tekstu

0:00Cześć w tej lekcji opowiem więcej o outline i generalnie innych

0:04mechanikach do tworzenia wskaźnika fokusu w poprzednim

0:08przykładzie zrobiliśmy taki oto outline który pokrywa i checkboxa

0:12i labelkę no i jest całkiem ładnym kontrastowym outlinem

0:16tylko jest jeden z nim problem generalnie outline

0:21ma to do siebie że on nie jest częścią box modelu box model

0:25składa się na to że każdy z elementów ma swój padding

0:29swój margin tak dokładnie wygląda box model no i tutaj mamy

0:33na przykład narysowane że box model składa się z bordera paddingu

0:38oczywiście samej treści no i tutaj jest jeszcze margines

0:43margines jest jakby poza częścią box modelu i tak

0:47samo jest z outlinem outline nie jest w środku box modelu jake

0:51to ma znaczenie ponieważ jeżeli zrobimy overflow hidden to cała treść która

0:55nie będzie zawarta tutaj do bordera zostanie ucięta czyli jeżeli

1:01mamy outline i na rodzicu utniemy to

1:07co z niego wystaje z tego rodzica poprzez overflow hidden to

1:11utniemy sobie outline w tym momencie ten outline tam jest tylko

1:15że jest ucięty poprzez overflow hidden jeżeli zrobiłem overflow visible to jest jako domyślną

1:19wartością no to faktycznie ten outline tu jest jakby

1:23to jest wada kolejna wada domyślnego outlineu i to

1:28jest też wada wszystkich metod pozycjonowania które wymagają

1:32renderowania czegokolwiek poza box modelem danego elementu można

1:36to oczywiście obejść można to obejść na kilka sposobów jednym z nich jest po prostu

1:40użycie koloru więc zrobimy tutaj overthrow hiden żeby

1:45zasymulować taki przypadek takie rzeczy się zdarzają no i zamiast robić tutaj outline

1:49zrobimy inaczej możemy powiedzieć żeby na każdym inpucie

1:54który sfokusujemy dla jego labelki ustawić inny kolor tła

1:58czyli zrobimy sobie tutaj background na niebieski

2:02no i faktycznie to działa z tym że teraz jako

2:07że to jest spozycjonowane absolutnie to nam zakrywa całą treść która tam jest więc możemy

2:11tego beforea przenieść jedną warstwę niżej poprzez z-index i

2:15teraz faktycznie to widać tylko że mamy słaby kontrast ponieważ jest niebieski jako

2:19tło no i biały jako kolor tekstu i to ma bardzo słaby kontrast więc możemy jeszcze zrobić

2:24że na input focus nie tylko labelka będzie zmieniała kolor ale

2:28również leibel tutaj kolor tekstu

2:32będzie się zmieniał czyli zrobimy sobie var black tutaj

2:36zmieniamy kolor na pseudo elemencie before dlatego nie możemy tego koloru zmienić tutaj

2:41zapisujemy odświeżamy i faktycznie w tym momencie

2:45wygląda to całkiem ok i nieważne czy tutaj jest ten overflow hidden czy nie i

2:49tak widzimy który element mamy sfokusowany można pójść nawet

2:53krok dalej i sprawić żeby zaznaczenie elementu pokazywało

2:59że dany element jest faktycznie zaznaczony możemy do tego wykorzystać css custom

3:03properties więc tutaj zadeklarujemy sobie nową zmienną color może

3:07zrobimy to na samej labelce ja

3:12oczywiście tutaj korzystam z stylowania po targach w prawdziwym projekcie stylowali

3:16byście po klasach nie bo tagach natomiast na potrzeby projektu i prostego

3:20tłumaczenia ja tutaj styluję to po targach no i zmieniamy tutaj kolor domyślnie

3:24będzie to kolor biały ponieważ

3:29taki kolor mają nasze labelki no i możemy tutaj ustawić color na

3:33var white jakby nic się nie zmieniło ale dzięki

3:37temu możemy zmieniać po prostu wartość tej zmiennej na focus zapisujemy

3:41i teraz musimy tylko jeszcze jako że tu jest taka sytuacja że

3:45mamy jeszcze dodatkowe selektory no to może tutaj ten kolor jeszcze raz zadeklarować

3:50color zapiszmy dobra

3:55to działa no i teraz na input checked input checked

4:00label będziemy zmieniali color na powiedzmy

4:04zielony zobaczmy co się stanie tutaj

4:10wygrywa nam chyba specyficzność więc to przenieśmy niżej zapiszemy

4:15tak i teraz się to nam zaznacza na zielono tylko

4:19że my nie chcemy zmieniać koloru tutaj tekstu tylko chcemy zmienić kolor

4:24tła czyli tutaj robimy before i tutaj możemy zrobić zamiast background

4:29na blue to zrobić po prostu background na color wpisujemy zobaczymy

4:33co się stanie tutaj nam się usunął tekst a to dlatego bo

4:37zielony nam się jeszcze nie zaaplikował zastanawiam się tylko czemu

4:41tutaj mamy var color powinniśmy prawdopodobnie tutaj zadeklarować

4:46ten color domyślnie jako blue o

4:52i teraz w momencie zaznaczenia faktycznie widzimy że element

4:56jest zaznaczony ponieważ labelka robi się zielona no i możemy

5:00jeszcze zostawić taki dodatkowy zbiór selektorów aby po zaznaczeniu

5:05faktycznie jeżeli się wyfokusujemy z tego elementu on dalej pozostał zielony no

5:09i to wystarczy zrobić na zasadzie ustalenia coloru input

5:13focus label to nam zmieni element na którym obecnie jesteśmy

5:18a my musimy zrobić input checked label również

5:23na color zielony zapiszmy zobaczmy czy to zadziała w

5:27ogóle nie zadziałało tu ustawmy sobie w takim

5:31razie jeszcze raz ten color zapiszmy

5:37no i teraz to oczywiście zadziałało moglibyśmy

5:41tak naprawdę połączyć kilka z tych selektorów w jeden tylko

5:49że tutaj mamy inne deklaracje styli to może to tak zostawmy generalnie co chciałem pokazać nie

5:54trzeba używać javascriptu aby zadeklarować większość takich przypadków

5:58tutaj ten zielony nam się nadpisuje więc to

6:04powinniśmy pewnie tutaj wrzucić to jest walka ze specjalnością

6:09tak no i teraz oczywiście to działa nie musicie używać javascriptu

6:13do takich rzeczy jak właśnie podświetlanie outlineu i nie ma jakby problemu

6:17z tym jeżeli outline nam się ucina bo możemy to ostylować w inny sposób na przykład

6:21poprzez background color używane pseudo elementów czy inne

6:25techniki jeśli chodzi o css custom properties nie jest to temat trudny natomiast

6:30nie chcę za bardzo wchodzić tutaj w ich mechanikę ogólna reguła

6:34jest taka że możemy zadeklarować sobie własną zmienną i użyć jej w

6:38ten sposób w kolejnej lekcji przekażę jak jeszcze w inny

6:42sposób można ostylować wskaźnik skupienia używając do

6:46tego właściwości border oraz box shadow