CSS: Preferencje użytkownika

0:00Cześć w tym dziale opowiem ci o sensie na miarę lat dwudziestych

0:05dwudziestego pierwszego wieku i zaczniemy ten dział mówiąc o kulisach

0:12o mediach kulisach mówiliśmy już na samym początku tego kursu.

0:14No i oczywiście jak wiesz możemy tworzyć reguły typu media.

0:20I podawać tutaj różne warunki dla których

0:23dany blok kodu ma się aplikować na przykład

0:26podany na 600 pikseli i wtedy ta reguła

0:29kodu którą sobie tutaj wystawimy powiedzmy Fu Ground Lite no to ona się zapisuje

0:36dopiero jeżeli port będzie miał przynajmniej 600 pikseli.

0:39To co możemy robić media kulisami a jest troszkę mniej

0:44znanym faktem chociaż już od paru lat a przynajmniej roku możemy to robić.

0:50Są różne.

0:53Reguły dotyczące preferencji użytkownika czyli np.

0:57możemy stworzyć style w zależności od tego

1:00jakich użytkownik preferuje kolorystykę systemu.

1:03Czyli jeśli tutaj piszemy preferuje kolarskim.

1:08To możemy podać dwie właściwości.

1:11Pierwszą z nich jest targ a drugą z nich jest.

1:14I w zależności od tego jakie ustawienia w systemie ma użytkownik np.

1:19na makro można wejść w system preferencji

1:21czyli ustawienia systemowe zakładkę General.

1:24I tutaj możemy wybrać.

1:27Preferowany.

1:29Styl systemu albo jasny albo ciemny albo automatyczny w zależności od pory dnia.

1:35Ja mam ustawiony domyślnie ciemny.

1:38Czy jeśli tutaj ustawie sobie

1:41preferuje kolarskim Dark i tutaj zamiast korzystać z klasy i z którą już wcześniej

1:47też pokazywała przy okazji innych lekcji no to mogę po prostu przenieść tę regułę.

1:56Bezpośrednio do tego media Borisa.

2:03Troszkę poprawić cięcia może cały plik nawet.

2:10I po napisaniu faktycznie widzimy że nasz styl zmienił się na ciemny a domyślnie bez

2:17tej reguły będzie jasne więc nie ma jakby konieczności ustawiania bezpośrednio

2:23liter. Jeżeli obsługujemy jedną właściwość to

2:25druga właściwość będzie automatycznie obsługiwana.

2:28Jeśli chcemy zrobić konkretne jakieś.

2:31Właściwości jeżeli ktoś jawnie prosi o

2:34styl jasny no to oczywiście też możemy to zrobić.

2:37No i teraz tylko żeby to zaprezentować ja zapisuje te style z powrotem.

2:41I tutaj jeśli zmienię teraz Pires na Litwę

2:44to oczywiście cały mój system zmienia się na lekki.

2:47No i tutaj też zmieniło mi się na białe tło nic nie musieliśmy otwierać

2:51przeglądarki to się dzieje automatycznie czyli ja wracam znowu na Dark.

2:55No i znowu są ciemne.

2:57To jest jedna z nowych reguł.

3:00Media preferują kolarskim mamy również preferuje Radio Zet które pozwala nam

3:07warunkowo włączać bądź wyłączać dalsze animacje

3:11czyli generalnie pytamy użytkownika czy chciałby mieć zredukowany ruch na naszej

3:17stronie internetowej więc to mogą być albo animacje ALBO WIDEO.

3:20Tutaj możemy bardzo dużo rzeczy robić to jest po prostu informacja od użytkownika

3:24jakie preferuje ustawienia w kontekście ruchu.

3:29I jeśli to będzie wartość.

3:32No to możemy ustalić jakieś style zróbmy sobie na body Beck Ground red.

3:38I jako że ja nie mam tego ustawionego no to moje tło nie jest czerwone.

3:42Jeśli chcielibyśmy to zrobić na maksa to

3:44możemy zmodyfikować to przy pomocy zakładki Access reality.

3:50Tutaj jest taka zakładka w której możemy

3:51zrobić naprawdę dużo i w sekcji Display mamy opcję Red już motion czyli jaka to

3:56zaznaczenie to widzimy że faktycznie ta reguła została ratyfikowana.

4:01Natomiast atakowanie czerwonego tła

4:03do naszej strony kiedy ktoś prosi o mniej ruchu nie jest oczywiście prawidłowym

4:09zachowaniem więc możemy stworzyć prostą regułę która wyłączy nam te animacje które

4:14sobie tutaj stworzyliśmy jak widzimy ta gazetkę nam się obraca.

4:18Jest to zdefiniowane tutaj mamy Animation

4:21spin i tutaj za pomocą ki frejmów stworzyliśmy tą animację.

4:25Ona jest tutaj tak zachowana żeby od zera do pięciu procent robiła pełny obrót a

4:30potem po prostu czekała przez jakiś czas do stu procent.

4:33I tutaj Animation które jeśli jest

4:34ustawione na 7 sekund czyli co każde 7 sekund.

4:37Ten element będzie nam się obracał jeśli stworzymy sobie tutaj regułę.

4:43Gwiazdka.

4:45Tranzytem.

4:48Tutaj też postawiliśmy sobie tranzytem po najechali.

4:52No to ustawiamy tranzytowym na.

4:56Nie możemy tutaj już żyć spokojnie

4:58important a ponieważ jest to taka zmiana której nic nie powinno napisać

5:03jeżeli ktoś nasz użytkownik preferuje

5:07zmniejszony ruch tego ruchu nie powinno być już nigdy.

5:10Nawet jeżeli Bardzo tego potrzebujemy no

5:12bo to jest preferencje użytkownika więc tutaj nie ma problemu z używaniem

5:16important a i tak samo Animation nam możemy ustawić na non.

5:21Albo po prostu ustawić Animation Durajczyk na zero.

5:24Generalnie ważne jest to żeby po prostu animacje przestały działać.

5:27Jeżeli to zapisujemy po import to faktycznie widzimy że

5:32ta gazeta nam się nie będzie ruszała tutaj chwilkę poczekamy żeby te 10 sekund minęło

5:37i gazeta miałaby się normalnie możliwość obrócić.

5:40Jak widzimy nie rusza się i to właśnie dzięki tej regule preferuje red.

5:46Jest tutaj też wartość preferencji i to jest faktycznie jakby domyślną wartość

5:51gdzie możemy tę animację włączać ale jako że my globalnie ustawiamy tę animację no

5:57to nie ma sensu tworzyć tej reguły media osobno więc jak wyłącza tutaj red.

6:03No to po chwili powinno

6:04znowu zacząć działać i faktycznie nasza gazeta znowu się obraca.

6:10Ostatnim.

6:12Media kursem który dotyczy ustawień

6:14użytkownika który faktycznie możemy używać na naszych stronach www jest inwektyw.

6:19I to jest reguła która działa tylko i

6:20wyłącznie na urządzeniach Apple'a czyli na safari.

6:24Jeśli tutaj sobie zrobimy regułę media

6:27internet kolor Inwest to jesteśmy w stanie oscylować w

6:31stronę w momencie kiedy ktoś odwrócił kolory na swoim monitorze to był taki też

6:35trik który pozwalał użytkownikom symulować dark mode.

6:40Jeżeli faktycznie nie było w systemie jeszcze takiej opcji więc niektórzy

6:44użytkownicy faktycznie będą mieli odwrócone kolory w swoim systemie i możemy

6:48to faktycznie oscylować czyli ja tutaj zwróciłem kolory.

6:51Oczywiście mój system wygląda teraz

6:53zupełnie inaczej niż do tej pory bo wszystko miałem w ciemnej kolorystyce.

6:57Teraz się to wszystko odwróciło więc jest

6:59białe no i jestem w stanie tutaj napisać sobie na przykład

7:04sektor którymi jeszcze raz odwróci i i przywróci do normalnego stanu.

7:08Na przykład obrazki bo tutaj widzimy że ten.

7:12Obrazek który reprezentuje panoramę Warszawy jest odwrócony.

7:15Jeśli piszemy TUTAJ i MG filtr o którym już mówiliśmy INVEST 1.

7:23Piszemy.

7:24To nasza Panorama powinna być naturalnego

7:27swojego koloru zobaczymy czy to faktycznie coś się zablokowało.

7:32Tak wygląda normalnie możemy w sumie stworzyć dwa obrazki tylko na próbę.

7:36Piszemy bo jestem ciekaw czy się

7:39zaaplikował bo widzę że tutaj chyba to nie ma znaczenia.

7:43Ustaw ma na MG First Child.

7:49Tylko i wyłącznie tego ile warta.

7:54Widocznie albo to jest jeszcze klasyk zobaczymy klasyk.

7:58Tak i w tym momencie on nam chyba nie odwrócił tego.

8:03Wydaje mi się że to powinno działać na pewno to działało na safari.

8:06W każdym razie nie działa też na żadnej

8:08innej przeglądarce w związku z czym jeżeli zależy wam na sterowaniu

8:12stron internetowych w momencie kiedy użytkownik faktycznie odwraca kolory no to

8:16możecie użyć do tego media Lisa inny kolor.

8:20No i z założeniem że tutaj to będzie działało tylko i wyłącznie na safari.

8:25Więc tutaj przywróciły filtr INVEST 1.

8:28No i tutaj możemy usunąć ten drugi.

8:32Element MG.

8:35Oczywiście media kursów jest więcej.

8:38To są tylko te które są wspierane najlepiej przez przeglądarki.

8:42Jest też sporo takich które wspierane przez przeglądarki nie są to np.

8:47preferencje Data które będzie w stanie.

8:51Zwracać nam wartość czy użytkownik woli oszczędzać dane w kontekście tego jak np.

8:58dużo danych jest przesyłane z jego

9:00urządzenia mobilnego i oczywiście do tego też mamy dostęp z

9:03drzewa skryptu więc jesteśmy w stanie doładować bądź nie doładować niektórych

9:07treści takich jak obrazki czy wideo czy generalnie do.

9:13Dynamicznie.

9:16Wsparciem niestety tej właściwości jest kiepsko.

9:18Tak samo jak.

9:21Tak samo jak preferuje red Just Transparency.

9:23No to będzie to działał analogicznie do tego co tutaj zrobiliśmy z polskim.

9:29I jeżeli ktoś

9:31klika sobie że preferuje mieć zmniejszoną czystość no to

9:36będziemy mogli też na naszych elementach zmniejszać uroczystość czyli np.

9:42wyłączać opaski.

9:45Analogicznie mamy również kontrast oraz Little level i to są takie

9:49media kulisy które być może w przyszłości będą lepiej wspierane.

9:53Tutaj odsyłam do CSS Custom Properties aby sprawdzić czy faktycznie.

9:59Support level jest już odpowiedni dla tego aby go używać.

10:03No i jeszcze dodatkowo jako ciekawostkę

10:05chciałem pokazać Custom media czyli reguła która w przyszłości pozwoli nam

10:10teoretycznie definiować break pointy czy inne media serwisy takie jak np.

10:16prof. Orłowski.

10:18W takiej jakby CSS Custom Properties czyli

10:21takie zmienne nadawać temu nazwę żeby to było te mniejsze.

10:24No i to też możemy zaimplementowane za pomocą Platinum post CSS.

10:29Czyli czegoś co po prostu będzie nam JavaScript.

10:33Publikowała takie zachowanie i docelowo jeżeli faktycznie wsparcie dla

10:37Custom media będzie już wystarczająco dobre wtedy ten post CSS a możemy usunąć i

10:43korzystać z naszego kodu tak jakbyśmy korzystali z niego od samego początku.

10:48Więc to są media kulisy z których możemy korzystać w 2020 roku i naprzód.

10:53No i oczywiście będzie ich więcej w związku z czym zachęcam do

10:57eksperymentowania i faktycznie dodawania takich reguł na wasze strony internetowe

11:01ponieważ jest to po prostu lepszy user experience jeśli strona respektuje np.

11:07twój preferowany.

11:09Kolor systemu i w środku nocy gdy cały system mamy ciemny.

11:15Strona po prostu nie razi nas białym ekranem po oczach.