CSS: Polyfille

0:00Lekcji opowiem o chwilach czyli tak naprawdę czymś co

0:04sprawia że nasze przeglądarki są w stanie zinterpretować kod którego normalnie by

0:11nie rozumiała czyli tak jakby mini programy które sprawiają że składnia

0:17przyszłości czy składnia po prostu która jest dla tej przeglądarki nieosiągalna

0:23staje się możliwa poprzez właśnie File File są często JavaScript.

0:28Natomiast żeby korzystać z filii nie

0:31musisz tego skryptu znać wystarczy że będziesz ładować odpowiednie paczki

0:36w zależności od swoich potrzeb do przeglądarki.

0:39Tutaj zrobiłem przykład gdzie.

0:43W liście Tajner mamy dodatkowo jakieś

0:45import z Domyślną wartością 1 ten kontener jest pozycjonowanie na

0:50giełdzie i ma dodatkowo funkcjonalność taką że jeżeli wewnątrz tego kontenera

0:56jest Fokus czyli użytkownik faktycznie kursował wszedł w jakiś element wewnątrz

1:02tego kontenera czyli w tym przypadku my czujemy spód wewnątrz kontenera.

1:07Możemy to zrobić za pomocą myszki możemy to zrobić za pomocą klawiatury

1:10to wtedy tło tego kontenera ma się zmienić na taki kolor zielony.

1:16Jest to generalnie całkiem popularne

1:20użycie w Słowenii jest bardzo dobrą rzeczą jeżeli chodzi o dostępność

1:24ponieważ możemy w bardzo jawny sposób opisywać co chcemy osiągnąć.

1:30Natomiast jak widać ma co prawda 92 proc.

1:33globalnego wsparcia jeżeli chodzi o rynek

1:35przeglądarek ale dalej Internet Explorer starsze Safari.

1:40No niestety tego wpływie na nie rozumieją.

1:44No i co w takiej sytuacji.

1:45Fokus given to jest faktycznie funkcjonalność.

1:49Którą ciężko innymi.

1:52CSS nowymi właściwościami produkować w

1:55taki sposób żeby było to po prostu wydajne i wygodne w użytkowaniu.

1:59W związku z czym

2:00stworzono chwilę nie tylko do CSS a również do szefa skryptu

2:04które umożliwiają nam pisać nasz kod w ten sposób a kod wynikowi który zostanie

2:09przesłany do przeglądarki będzie miał jakieś dodatkowe linijki które będą

2:15zachowywały się w taki sam sposób jak Fokus.

2:17No i takim najlepszym na ten moment

2:20narzędziem według mnie do robienia polecili autor refleksu o

2:24których już wcześniej wspomniałem w poprzedniej elekcji jest post CSS post CSS

2:29to jest takie narzędzie które jakby pasuje cały nasz kod czyli patrzy na niego

2:36i według tych naszych wytycznych które my

2:38podamy będzie dodawał dodatkowe Hanki czyli tak jakby fragmenty kodu na

2:44jego koniec czyli do końca pliku będziemy mieli dodatkowy kod.

2:49Jeżeli przekonujemy ten kod z naszego

2:52edytora tekstu i go sobie my tak naprawdę nie musimy za dobrze widzieć.

2:58Byle tylko post CSS nam to wygenerował no to widzimy że faktycznie jest różnica

3:02między tym kodem a tym który tutaj sobie wyświetli.

3:06Czyli o ile CSS gnida nie da się tak łatwo z pola filmować ponieważ jest to bardzo

3:12skomplikowane narzędzie i jest bardzo mocne są do CSS widać ale z ich działaniem

3:18bywa różnie i na pewno nie są najlepsze dla

3:20performance u ale Fokus jest o tyle prostym rozwiązaniem

3:25że możemy je za pomocą skryptu produkować i co tutaj się stało

3:29widzimy że faktycznie mamy wszystkie nasze reguły które były w czasie kontener

3:34a reguła Focus słowem jest zmieniona na nazwę naszej klasy.

3:38I tutaj szukanie atrybutów Focus on na nim czyli jakby.

3:45Ten sektor zbiera nam taką sytuację.

3:49Tutaj ten atrybut może być pusty może mieć jakąś wartość.

3:53Tak naprawdę nie ma to znaczenia to zależy

3:54od implementacji danego paliwa i co to nam daje.

3:58Otóż jeżeli my używamy post CSS a to my

4:01tak czy siak ładuje JavaScript na naszą stronę.

4:04Oczywiście część nowych rzeczy może dziać się na ekranie

4:08czyli poza przeglądarką ale część z nich będzie działa się na froncie i tutaj np.

4:14w tym wypadku są dodawane style przez post CSS my tego tutaj w naszym przykładzie nie

4:20robimy ponieważ nie figuruje CSS tylko tłumaczymy pojęcie CSS.

4:26Jest to budowany skrypt JavaScript owy który nadaje event Energy NATO

4:32czy jakiś element został sformułowany podczas tego gdy był wewnątrz drzewa o

4:40klasie kontener czyli tak naprawdę dowolnego elementu o tej klasie.

4:44Więc ta wartość jest dynamicznie dodawana

4:47przez filtr którego ładuje się tak samo jak ładuje gwary czy wóz czy inne

4:52framework z których korzystamy więc my się nie musimy przejmować ale

4:56warto jest po prostu wiedzieć że File CSS owe będą do ładowania dały nam

5:01dodatkowy kod tak aby przeglądarka była w stanie wygenerować to o co nam chodzi.

5:07Ale w większości przypadków nie musimy się

5:09tym osobiście zajmować ponieważ Polish File robią to za nas.

5:13No i oczywiście w najlepszym scenariuszu

5:15film w ogóle nie musimy ładować tylko możemy je na żądanie doładować i w

5:20zależności od tego jeśli dana funkcjonalność CSS się nie jest wspierana

5:24czyli jeśli byśmy zrobili tak jak wcześniej próbowaliśmy support.

5:28I tutaj sektor kontener focus on.

5:35No to oczywiście.

5:37Ten fragment kodu jest trochę powtarzalny nie musimy tego

5:42robić w ten sposób ale jeśli skorzystamy z support na froncie poprzez JavaScript bo

5:47do tego IP dostaniemy flagę True All Falls czyli prawda lub fałsz czy.

5:54To jest wspierane no to możemy dynamicznie doładować.

5:59Takie rzeczy według mnie najlepiej robić przy pomocy CSS a jest to naprawdę dobrze

6:03trafione narzędzie jest ono na rynku już od dobrych paru lat.

6:06Szczerze mówiąc nie wiem czy są do tego dobre alternatywy.

6:11Oczywiście jest też modernizm.

6:12Ale modernizm zajmuje się troszkę czymś innym.

6:16Na post CSS ma też swoje ekwiwalent do

6:18post HTML a czy do innych serwer rajdowych rozwiązań w związku z czym Colin Firth.

6:26To co chciałbym żebyście wynieśli z tej lekcji to przede wszystkim to że istnieją.

6:31Można z nich korzystać.

6:32Są nawet jakieś automatyczne narzędzia online do których możecie

6:37sklecić KOD i po prostu kopiować tylko pamiętajcie żeby samą bibliotekę w tym

6:42przypadku CSS też tam załadować i brać pod uwagę to że jeżeli przeglądarka

6:47nie wspiera danych funkcjonalności a my koniecznie chcemy z tej funkcjonalności

6:51skorzystać no to będą musiały zostać ładowane dodatkowe płyty.

6:57I tym zakończę dział odnośnie folwark strzelców.

7:03Po filii czy klauzuli support wrócimy do niego jeszcze przy okazji omawiania

7:08wydajności CSS a w szerszym rozumieniu niż tylko ładowanie tekstu czy.

7:15Upewnić się że nasze strony działają na różnych środowiskach.

7:19Uruchomienie nowych dzięki i do zobaczenia w kolejnej akcji.