CSS: Wspierane właściwości - klauzula Supports

0:00Cześć! W tej lekcji opowiem ci o klauzuli Supports i generalnie jak ona wpasowuje się

0:05w te wszystkie rzeczy, które omówiliśmy już teraz w kontekście progressive enhancement, czyli takiego

0:11krok po kroku ulepszania experience'u, który dostarczamy naszym użytkownikom.

0:16Klauzula supports jest bardzo podobna do

0:21klauzuli media, czyli jak tutaj pisaliśmy media queries na zasadzie media screen and max width

0:32200 pikseli, no to na bardzo podobnej zasadzie możemy pisać

0:36klauzule supports; to są tak zwane feature queries. Media queries

0:40to są te elementy, które pozwalają nam dostosowywać treść do danego urządzenia, a

0:47feature queries sprawdzają poszczególne funkcjonalności przeglądarki, czy ona

0:51faktycznie je wspiera. Składnia jest naprawdę podobna,

0:54czyli zamiast media piszemy supports

0:57i jesteśmy w stanie wpisać na przykład display grid.

1:02I w tym momencie, jeśli powiedzmy przeniesiemy tę regułę

1:08z globalnego scope'u do supports, display grid to wtedy ta reguła,

1:15cały blok kodu, zostanie zaaplikowana wtedy, kiedy

1:20ta zależność jest wspierana przez przeglądarkę.

1:23Mamy do tego też dostęp z poziomu konsoli

1:26narzędzi deweloperskich, no i możemy to przetestować tak naprawdę,

1:30jeżeli zapiszemy teraz, no to nasz kod działa jak powinien, ponieważ

1:33mój Google Chrome wspiera grid'a, więc nie ma problemu - ta zasada się aplikuje.

1:40Możemy to sprawdzić poprzez wspomniane wcześniej CSS features

1:43jako rozszerzenie do DevTools'ów.

1:45Jeżeli tutaj odznaczymy grid layout jako wyłączony "Disabled values 'grid'

1:50and 'inline-grid' of the 'display' property", no to zobaczymy jak nasza strona będzie się

1:56renderowała bez tej reguły. Czyli w tym momencie tak naprawdę

1:59ta reguła nie jest aplikowana w ogóle, czyli tak naprawdę tego

2:04kodu w tym momencie nie ma, ponieważ nasza przeglądarka tego nie wspiera.

2:08Tutaj warto pamiętać, że CSS ma z natury własne mechanizmy,

2:13jak już wspominałem o tym w fallback styles'ach,

2:14i nie zawsze jest sens tak naprawdę korzystać z supports.

2:18Czasami wystarczy po prostu w odpowiednim miejscu wkleić blok kodu odpowiedzialny za grid'a,

2:23w innym za flex'a i tak naprawdę automatycznie fallback do flexa pójdzie,

2:29jeżeli CSS grid nie jest wspierany bez klauzuli supports. Natomiast klauzula

2:33supports jest potrzebna wtedy, jeżeli zależy nam na więcej niż jednym selektorze do

2:39stylowania, bądź chcemy sprawdzić kilka funkcjonalności naraz.

2:43W związku z czym oczywiście możemy chainować pojedyncze

2:47właściwości, tutaj odznaczymy sobie to, żeby z powrotem grid nam działał.

2:52Jeżeli chcemy jeszcze bardziej zawęzić wsparcie dla tej reguły

2:57CSS'owej dla tego sektora, no to możemy sobie napisać tutaj and

3:02display, albo nie display tylko po prostu var

3:09green.

3:11Czy po prostu

3:14green, green i w ten sposób sprawdzamy czy custom properties są wspierane

3:19deklarując bądź odczytując jedną z tych wartości, więc po zapisaniu to dalej

3:24powinno nam to działać, wyświetlać się jako grid, ponieważ obie te właściwości są wspierane.

3:29Jeżeli wyłączymy

3:30grid layout, no to oczywiście to przestanie działać. Nie możemy też wyłączyć,

3:34tak mi się wydaje, że to rozszerzenie nam pozwala na to,

3:40niestety nie ma tutaj żadnej szukajki - jest custom properties.

3:43Jeżeli to wyłączymy to faktycznie tutaj to nie zadziałało.

3:47Podejrzewam, że rozszerzenie po prostu nie obsługuje tylu case'ów, ale

3:50jeżeli byście to uruchomili w przeglądarce Internet Explorer czy Safari starsze,

3:55no to generalnie da się to tak samo chainować jak chainujemy media queries.

3:59Co można jeszcze zrobić w supports? No to oprócz wstawiania klucza wartość,

4:05możemy też zanegować całą regułę, czyli jeżeli chcemy aplikować style

4:11w przypadku jeżeli ten feature nie jest wspierany przez CSS'a,

4:15no to możemy zrobić tutaj na przykład jakiś fallback do grid'a, czyli container,

4:23display flex, nie grid.

4:26Flex-wrap, wrap.

4:30I tak naprawdę to powinno wystarczyć.

4:32I w tym momencie jestem ciekaw, czy to rozszerzenie nam tu zadziała.

4:40Ciekawe, że

4:42zepsuły się tu kolorki nam.

4:44Aha, bo wyłączyliśmy oczywiście custom properties.

4:47Display grid wyłączamy i mamy w fallback do flex'a, który nie wygląda identycznie,

4:53ponieważ grid layout tutaj nam deklaruje 6 kolumn o jednakowej szerokości.

4:58Natomiast tutaj we flex'ie z jakiegoś powodu to się nam zawija na pięć.

5:02Prawdopodobnie dlatego, że mamy tutaj tego

5:04scroll'a i tutaj ten gap 0.2rem'a jeszcze tutaj nam troszkę przeszkadza.

5:09W każdym razie też cechą progressive enhancement,

5:12o którym wspomniałem wcześniej, jest to, że tak naprawdę nasza strona nie musi

5:16wyglądać identycznie na wszystkich urządzeniach.

5:18Chodzi o to, żeby

5:19doświadczenie naszego użytkownika, czyli to jak on się czuje odwiedzając

5:24naszą stronę czy aplikacje, spełniały wymagania produktowe a nie żeby było tzw.

5:30pixel perfect czyli faktycznie piksel do piksela.

5:34Kopiowanie Design od tego co dostaliśmy w pliku od dealera.

5:38Natomiast support is not jest o tyle

5:41rozważany jako zła praktyka że nie działa jeżeli nie ma wsparcia dla samego sportu z

5:47którym możemy oczywiście sprawdzić Canal+ Sport.

5:51No i tutaj widzimy że Löwen nie jest wspierana czyli Internet Explorer w wersji

5:55jedenastej nie ma wsparcie tego miał nie będzie ponieważ ta przeglądarka

6:00już zostanie niedługo porzucona przez Microsoft czy np.

6:02Safari do wersji ósmej.

6:05Też tego wsparcia nie ma w związku z czym jeżeli nie ma wsparcia dla support to ta

6:09reguła zupełnie się nie zaopiekuje czyli jeśli nie ma wsparcia dla gnida.

6:15To nie mamy żadnego full backu ponieważ support nie działa.

6:20Czyli cała ta reguła jest tak naprawdę wtedy ignorowane.

6:23Jeżeli nie wspieramy sport i tutaj tak naprawdę inne style mogłyby

6:28nie działać w taki sposób jakbyśmy się tego spodziewali.

6:32Support is not to jedna ze składni CSS z której możemy korzystać.

6:37Jest też oczywiście support lektor

6:42lektor wówczas lektor

6:46i tak naprawdę w tym możemy podać dowolny

6:49sektor CSS ponieważ niektóre sektory nie są dalej wspierane np.

6:53sektor HS jest dalej na bardzo wczesnym stopniu specyfikacji nie ma żadnej

6:58implementacji w przeglądarkach a jest to bardzo przydatny sektor który

7:03być może w przyszłości ułatwi nam pracę frontem.

7:08Ale możemy to tak naprawdę przetestować na

7:10dowolnym sektorze Jeżeli piszemy tutaj Body not.

7:16Klasa czy na przykład kontener.

7:21Co oczywiście się nigdy nie wykona bo na

7:23klasie kontener nie mamy tego elementu czyli klasa element body.

7:29Nie ma na sobie klasy kontener więc tak naprawdę w sumie jeżeli ten sektor byśmy

7:33zablokowali tutaj to powinno nam zawsze wskoczyć.

7:37Czyli Body not kontener czyli teraz to

7:41jest prawda możemy zrobić to na baty Beck Grand.

7:46Powiedzmy szary.

7:49Jeżeli taki serek to jest wspierane no to faktycznie ta reguła jest aplikować

7:54i możemy tutaj wstawić dowolny lakier to

7:56nie musi być not to może być po prostu Body kropka kontener i tak długo jak te

8:00elementy będą wspierane te style się zapisują co jest naprawdę dobre ponieważ

8:05jeżeli będziemy z tych funkcjonalności przeglądarki korzystać dynamicznie np.

8:10za pomocą skryptu jesteśmy w stanie doładować style na żądanie w zależności od

8:16tego jak urządzenie jest rozwinięte czy wspiera Flex czy wspiera

8:21czy teraz jest Custom Properties klauzula support rozwiązuje te problemy.

8:27Natomiast warto pamiętać o tym że nie

8:29zawsze jest ona konieczna ponieważ może to doprowadzić do publikacji kodu np.

8:34jeżeli nie mamy żadnego innego sterowania

8:36w tym przypadku tylko ten kontener Display GRID.

8:41Jeżeli zrobimy sobie support jeszcze raz Display GRID.

8:47To tak naprawdę te dwa zapisy są sobie

8:49równoważne a mamy więcej znaków przesyłanych do przeglądarki które

8:54przeglądarka musi zinterpretować a te dane muszą zostać wysłane w związku z

8:58czym jest to jakiś tam minimalny ale wciąż wpływ na performance naszych stron WWW.

9:04Więc pamiętajmy o support że jest to

9:07bardzo dobre narzędzie do wykrywania różnic między przeglądarką.

9:11Ale nie zawsze trzeba go używać bo po

9:12prostu natura CSS pozwala niektóre rzeczy ominąć.

9:16Jeśli byśmy chcieli przetestować czy support nam działa

9:20w tej przeglądarce bądź innej to faktycznie możemy użyć rozwiązań takich

9:24jak Brothers czy cross Brother think o których wspomniałem w poprzedniej lekcji.