CSS: Focus styles

0:00Z tej lekcji opowiem krótko o Fokus Steinbach czyli tak naprawdę wskaźnikach

0:04indyka torach tego gdzie znajdujemy się na stronie internetowej w kontekście

0:10położenia tutaj w tym przykładzie mam prosty pole tekstowe.

0:14Możemy tutaj oczywiście dodać tekst.

0:16Możemy też dać odpowiednie tabelki co z

0:19punktu widzenia dostępności będzie o wiele lepszym rozwiązaniem.

0:22No i przede wszystkim jesteśmy w stanie to

0:25pole tekstowe oczywiście kliknąć no i możemy w nim pisać bez żadnego problemu.

0:30Tutaj nie wiem czy to zauważyliście.

0:31Po kliknięciu przycisku pojawia się tutaj taka ramówka i to jest tzw.

0:36Out Line. Auto znajduje się na wszystkich elementach

0:39które są Fokus owalne czyli na przykład na linach elementach formularzy.

0:45Przyciskami.

0:47Bramkach i tym podobne.

0:51Często jest tak że tworząc nasze leje żółty ten uklad nam wydaje się

0:56przeszkadzać bo generalnie nie ma tego tutaj obramowanie a ktoś klika

1:01i niestety tutaj się robi takie brzydkie obramowanie

1:05niebieskie w zależności od przeglądarki to może wyglądać gorzej lepiej no i

1:09generalnie można to usunąć za pomocą polecenia Out Line i wpisując tutaj.

1:14Natomiast jest to najbardziej niedostępna opcja w kontekście nawigacji klawiaturą

1:18jaka jest ponieważ jeżeli będzie więcej takich przycisków

1:22no to nie będziemy mieli za bardzo informacji na którym obecnie się

1:26znajdujemy tutaj jest jeszcze ta karetka która się porusza ale jeżeli byłoby to np.

1:31przyciski czy radio batony no to nie

1:33wiedzieli byśmy zupełnie gdzie się znajdujemy.

1:36W związku z czym

1:38możemy tutaj sobie ustawić Display Flex i Flex direction.

1:44Kolumn żeby to troszkę wyglądało lepiej Elaine.

1:49Center piszemy.

1:52No i faktycznie po dodaniu jeszcze marginesu.

2:01Ten element będzie tutaj rejestrowany jako lista jesteśmy w stanie się negować

2:05jak zrobić alternatywę dla Ukrainą ponieważ nie powinniśmy usuwać.

2:10To zdecydowanie nie to możemy go oscylować

2:13w taki sposób aby to faktycznie pasowało do naszej strony.

2:16Możemy zrobić auto np. orderem.

2:18Nie musi to być faktycznie auto.

2:20Możemy zrobić sobie Border

2:23i ustawić go tylko i wyłącznie na import który obecnie ma Fokus sterować.

2:30Elementy które mają obecnie Fokus możemy za pomocą pseudo klasy Fokus.

2:35Jeśli zrobimy sobie np.

2:36grunt bo to też jest prawidłowa forma wskaźnika Fokus no to możemy sobie np.

2:41pokonywać dany element na szaro.

2:43Jeżeli on jest zaznaczony i to faktycznie

2:45widać że ten element jest w jakimś stopniu aktywny.

2:49Auta nic sobie usunąć nie ma nic złego w usuwaniu aut.

2:52Jeżeli dostarczamy

2:55alternatywy ale usuwanie aut bez dostarczania tej alternatywy jest błędem

3:00deweloperskim i naprawdę nie powinniście tego robić więc tutaj możemy ustawić sobie

3:04Border powiedzmy na 02 a solid i koloru zielonego.

3:12I faktycznie elementy które teraz będą zaznaczone będą miały ten border.

3:16To nam oczywiście skacze więc możemy użyć

3:18takiego trików który po prostu sprawi że domyślnie Border będzie przezroczysty.

3:24No i po

3:26zaznaczenie zmieni po prostu kolor na taki zielony wskazując gdzie jesteśmy.

3:30Możemy też oczywiście wstawić niebieski co

3:33jest takim bardziej naturalnym kolorem ale możecie dostosowywać

3:37kolorystykę do waszych stron internetowych bez problemu.

3:41Są też triki kredytowe aby wykrywać tylko i wyłącznie Out Line.

3:46Wtedy jeżeli

3:48został on nadany poprzez nawigację klawiaturą a nie poprzez nawigację myszką

3:52bo jeżeli faktycznie na widujemy się myszką to być może nie jest to aż tak

3:56potrzebna funkcjonalność w większości przypadków.

3:59No i na przykład można przy nawigacji klawiaturą dodać jakąś klasę

4:04i włączyć takie specjalne Style do nawigacji klawiaturą.

4:09Są też do tego właściwości CSS owe np.

4:12możemy zrobić na body

4:16albo na jakimś kontenerze jeżeli zamkniemy sobie tego.

4:21Tę grupę płotów diva i nazwiemy go kontener.

4:28I tutaj sobie to przeklina.

4:31To oczywiście też mogła być lista chyba w tym wypadku nie numerowane.

4:35No i to zmienimy sobie też na kontener.

4:38Jeżeli zrobimy.

4:42Dodatkowo kontener Fokus.

4:46Pewien.

4:49No to jesteśmy w stanie np.

4:50zmienić tło tego kontenera na jakieś inne.

4:54W przypadku kiedy zaznaczyć dowolny z tych impulsów

4:57czyli tak jakby skierujemy rodzica a nie element który obecnie ma Fokus czyli w

5:02momencie kliknięcia na to cały nasz podświetlenie.

5:04Być może tutaj zmiana Belgradu nie jest wskazana ale moglibyśmy tutaj różne inne

5:09właściwości użyć aby to ładnie ja o tym mówię w moim kursie akcji Sygnity

5:15mam też swojego blog posta na mojej stronie

5:19który ja też oczywiście umieszcza w

5:20źródłach do tego kursu i tam mówię o wskaźniku windykacji Fokus u.

5:27W bardzo obszernym przykładzie.

5:30A w specyfikacji CSS jest jeszcze taka

5:32opcja jak Fox i Fokus robi dokładnie to co powiedziałem

5:37czyli pozwala aplikować style tylko wtedy kiedy ten Fokus powinien zostać nadany.

5:43I to już determinuje przeglądarka.

5:46Czyli jeśli byśmy sobie zrobili tutaj Fokus.

5:50Które nie działa jeszcze niestety dobrze i ma bardzo słabe wsparcie jeżeli sobie

5:54piszemy w Canal+ to Fokus nie jest jeszcze wartością.

6:00Z której możecie korzystać śmiało na

6:02produkcji jest tak naprawdę ona wspierana tylko na Firefox i to jeszcze pod

6:06most Fokus Ring czyli nie oficjalną nazwą Fokus wizjer.

6:09Tutaj widzę że w Chrome 86 to podobno doszło.

6:13Natomiast jak widać globalne wsparcie jest bardzo słabe

6:18no i to Fokus with Bull będzie w stanie w przyszłości teoretycznie aplikować.

6:22Fokus style tylko do elementów które powinny ten Fokus mieć bo zostały

6:28sformułowane za pomocą klawiatury czy innych narzędzi poza myszką.

6:32Więc to tyle w kontekście Fokus stawów nie będę już tutaj przedłużał.

6:35Jeżeli jesteś zainteresowany tematem dostępności i Fokus

6:38odsyłam Cię do mojego artykułu bądź do mojego kursu o dostępności na platformie.

6:44Do zobaczenia w kolejnej akcji.