CSS: Fallback styles

0:00Cześć! W tej lekcji opowiem o fallback styles'ach,

0:02czyli tak naprawdę stylach, które są aplikowane jako fallback,

0:06jeżeli dana wartość nie jest tutaj wspierana.

0:08Tak naprawdę nie będę tutaj mówił jeszcze o Supports czy Autoprefixach,

0:13czy po prostu prefixach, ponieważ skupię się tylko i wyłącznie na

0:17tym jak CSS działa i generalnie nadpisuje reguły, których nie rozumie.

0:22W tym przykładzie stworzyliśmy sobie

0:25prosty div - sekcję z tekstem, która zawiera w sobie dwa elementy:

0:29jedno to jest "Hello world!", to jest to, co widzimy na ekranie,

0:32no i drugie to jest "I'm still here!", które jest

0:34ukryte wizualnie za pomocą specjalnej klasy visually-hidden.

0:38To jest taka bardzo popularna klasa w kontekście dostępności,

0:41natomiast jest ona dobra do wytłumaczenia generalnie idei fallback styles-ów.

0:46Tutaj widzimy, że jest dla

0:50reguły clip dwa razy wpisana wartość. Jedna jest specyficzna dla Internet

0:56Explorera 6 i 7, natomiast następne są dla pozostałych przeglądarek.

1:02No i dlaczego to generalnie w ten sposób działa?

1:04Bo jeżeli CSS natrafi na linijkę, której nie rozumie, czy na wartość, której nie

1:09rozumie dla właściwości, którą zna, ona zostanie po prostu zignorowana.

1:12W związku z czym na początku dajemy te najbardziej

1:16specyficzne, konkretne zasady, które będą działały na wąskiej gamie

1:22urządzeń, czyli zostaną zaaplikowane na wąskiej gamie urządzeń, a dalej dajemy te

1:28ogólne, lepiej wspierane wersje składniowe czy po prostu wartości,

1:33które zostaną i tak złapane przez nowe przeglądarki, ponieważ to zostanie nadpisane

1:39tak samo jak byśmy stworzyli po prostu dla tego naszego diva regułę background red,

1:45no to oczywiście tak długo jak jest tutaj ten red

1:48no to ten box będzie czerwony, natomiast

1:50jeżeli dodamy poniżej linijkę blue, no to ten red-czerwony został zignorowany.

1:57Dlatego też nowe przeglądarki ignorują po prostu tę wartość, bo tę rozumieją.

2:02Czyli jeżeli nasza przeglądarka nie rozumiałaby background blue z jakiegoś powodu,

2:07no to wtedy background red by tak czy siak było zaaplikowane. I tego typu fallback styles są

2:15używane tak naprawdę wszędzie. Jestem pewien, że widzieliście takie reguły,

2:19na przykład przy prefixach danych przeglądarek, czy

2:23po prostu właśnie w takich helper classach jak np.

2:26visually-hidden, czy innego typu, które po prostu

2:29muszą działać na jak najszerszej gamie produktów,

2:33w związku z czym

2:34mamy tutaj tą duplikację reguł i wartości różnych. I nie jest to nic złego,

2:41to jest naturalna część

2:43jakby tego jak przeglądarka działa i jak sieć w kontekście stron WWW

2:49działa w chwili obecnej, a konkretnie CSS.

2:53Niektórzy mogą spytać "a po co w takim razie to tutaj

2:57zamieszczać, jeżeli nie interesuje nas IE6, IE7". Oczywiście nie musimy.

3:01Natomiast jeżeli naszym wymaganiem jest wspieranie starszych przeglądarek, no to

3:05takie sztuczki CSSa też się korzysta z nich.

3:10Oczywiście ma to swój jakiś impact, czyli

3:13skutek co do wydajności, ponieważ, po pierwsze, ta reguła musi zostać, każda linijka

3:20musi zostać przeinterpretowana przez silnik CSSa kilkukrotnie, no bo tutaj ta

3:26reguła zostaje tak naprawdę wyrzucona na wszystkich innych przeglądarkach. Jest to

3:30naprawdę mikro skala, więc prawdopodobnie nie musicie się tym przejmować.

3:33Prawdopodobnie można zaoszczędzić o wiele więcej wydajności w innych miejscach.

3:38Natomiast jeżeli faktycznie IE6, IE7 nie jest

3:40nam potrzebne, to możemy się tej linijki pozbyć.

3:43A nawet jeżeli ta linijka musi tutaj zostać, no to

3:46kompresja GZIP czy Brotli w tym momencie tak czy siak sprawi, że te dwie

3:52linijki zostaną skompresowane naprawdę wydajnie i tak naprawdę nie będzie tutaj

3:57dużej różnicy bajtów w końcowym k-loadzie, który zostanie wysłany do przeglądarki.

4:01Więc to, co chciałbym żebyście wynieśli z

4:03tej lekcji, to przede wszystkim to jak działa CSS, czyli CSS,

4:07to co wspominałem na początku tego kursu,

4:09będzie nadpisywał reguły w zależności od tego, gdzie one będą w kaskadzie,

4:15w zależności od tego specificity, bądź po prostu w zależności od source orderu

4:20i dlatego fallback styles dajemy w taki, a nie inny sposób,

4:24ponieważ rozumiemy ten mechanizm i chcemy wykorzystać go na naszą korzyść.