od Podstaw
9 godz. 11 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerWeb dev nigdy nie stoi w miejscu - włączając w to CSS. Czołowe przeglądarki różną się implementacją różnych funkcjonalności, a coraz to nowe właściwości wchodzące do specyfikacji są w stanie postawić stylowanie do góry nogami. W tym kursie poznasz przegląd różnych technik i technologii które zmienią Twoje patrzenie na CSSa - zdecydowanie na lepsze! Koniec z tworzeniem hacków w JavaScript aby osiągnąć efekty takie jak wykresy kołowe czy płynne przewijanie. Poznasz też różne właściwości CSS które są w stanie przyśpieszyć Twoją witrynę!
Na pewnym etapie rozwoju jako Front-End developer, bądź wraz z rozwojem naszego produktu - standardowe podejście do CSSa może nie wystarczyć. W tym kursie poznasz 5 ciekawych architektur CSSa, poznasz ich podstawowe koncepty oraz moje opinie na ich temat. Dzięki temu, tworząc swój następny projekt, będziesz w stanie stworzyć architekturę CSSa bazując na sprawdzonych fundamentach.
CSS Grid i CSS Flexbox to właściwości które powinien znać każdy Front-end developer. Jeśli nie chcesz spędzać wielu godzin na poznawanie tych technologii z osobna, w tym kursie znajdziesz podstawowe informacje na temat tych dwóch technologii - w pigułce. Poznasz różnice między nimi oraz dowiesz się, co zmieniło się w nich w ostatnim czasie.
Jeśli borykasz się z problemami wydajnościowymi na swojej stronie internetowej, ten kurs wskaże Ci techniki które pomogą Ci zmniejszyć czas ładowania, jak i ogólną wydajność Twojej witryny - czy to początkowe ładowanie, czy klatkująca animacja.
Czy nie wiesz jak zacząć z preprocesorami? Po co są nam one potrzebne? A może nie wiesz jak wpasowują się w obecne trendy tworzenia stron? Ten kurs odpowie na Twoje pytania! Dodatkowo, dowiesz się jak skonfigurować jeden z najbardziej popularnych preprocesorów CSS, oraz poznasz jego kluczowe funkcje czy składnie.Jako dodatek, dowiesz się jak dzielić Twoje zmienne SCSS wraz z Twoim kodem JavaScript!
Animacje CSSowe są już z nami od lat, ale jak konkretnie się za nie zabrać? Co trzeba zrobić, aby rozpocząć przygodę z animacjami? Jeśli nie wiesz, to w zaledwie kilku lekcjach poznasz narzędzia i składnie do tworzenia przejść i animacji ograniczonych tylko przez Twoją wyobraźnię* (i możliwości CSSa)
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End. Przyda się również umiejętność poszerzania pojedynczych zagadnień na własną rękę, ponieważ wiele z poruszanych w tym kursie tematów można by zgłębiać godzinami. Nie zaszkodzi również podstawowa wiedza o JavaScript. Postaram się wprowadzić Cię w różne obszary CSSa potrzebne w codziennej pracy jako Front-End developer. Doświadczeni developerzy znajdą w tym kursie powtórkę najistotniejszych informacji na temat współczesnego CSSa, jak i ciekawe zagadnienia o których często się zapomina.
Część tej lekcji opowiem o aspekt ratio czyli zachowaniu.
Naturalnych wymiarów danego elementu
w sensie aspekt jest przydatny na przykład Jeżeli oglądamy film w 4 3 na przykład na
przykład stare filmy na YouTubie miały zawsze format 4:3.
Dopiero później domyślną formatem dla
YouTube'a dla filmów rzucanych dla YouTube było 16:9.
No i dzięki temu jesteśmy w stanie upewnić się że przypadkiem rozszerzając nasze
elementy na danych rozdzielczość to aspekt nie zostanie zachwiana i przez
to nasze elementy będą rozciągnięte i będą wyglądały po prostu źle.
Więc aspekt CSS się można podzielić na dwie rzeczy właściwość aspekty i.
Media awersji do aspektów.
Zacznijmy od właściwości.
No i powiedzmy że element pierwszy powinien mieć aspekt.
4.
Trzecie i składnia jest bardzo podobna do tej ludowej czyli z Lechem oddzielone.
Wartości od siebie i dzięki temu mamy taki klasyczny telewizor nowy format
i jeśli to piszemy to jak widać tutaj to się zaopiekowała.
Ale co warto nadmienić to
jeśli ten sam element będzie miał zdefiniowane jakąś wysokość czyli np.
hj.
Postawimy na.
400 pikseli.
No to aspekt rejsie nie jest zachowany można powiedzieć że aspekt rejsie jako
właściwość ma najmniejszą siłę w kontekście tego kiedy jest aplikować.
Jeśli chcemy upewnić się aby nasz element niezależnie od tego ile ma np.
treści zawsze zachowywał te nasze aspekty
rejsie no to możemy ustawić tutaj mechanikę na zero
no i wtedy jakby włączamy zupełnie kalkulację tego i nasz element
automatycznie rozszerzy się do takich rozdzielczości jak powinien.
No i jeśli naprawdę nam zależy na tym aby
nic poza to cztery trzecie nie wyszło no to możemy jeszcze dodać over Flow Hidden i
wszystkie te elementy które wyjdą poza naszą szerokość
4 trzecie zostaną po prostu pocięte no i testujemy inne właściwości.
Dla aspekt rejsie czyli tutaj jeżeli damy na 1 1 no to będziemy mieli równy kwadrat.
Tylko że może zostawmy to na drugim.
No i bezpośrednio na każdym kontenerze.
Dwie ostatnie jakiś margines to po prostu
wyglądało troszkę lepiej i miało między sobą jakieś odstępy.
Widocznie ten fioletowy jest kolorem.
Całego kontenera.
No więc generalnie może zrezygnujemy z tego.
W każdym razie
wiemy o co chodzi generalnie aspekt wejścia to jest coś co pozwala nam
definiować rozmiary elementu tak aby były zgodne z tymi aspektami które podamy
jeśli podam na przykład dla elementu numer trzy.
Aspekt.
16:9.
No to będzie to taka klasyczna rozdzielczość dla np.
materiałów na YouTubie. W czasach obecnych chociaż one i tak są
ładowane przez Frame więc to nie powinno mieć znaczenia.
Ale jeśli chcemy np.
zrobić sobie foldery na jakiejś tam dalej
Tube no to możemy ustawić sobie aspekt 16:9 na takim folderze i to nam faktycznie
będzie działało co możemy zrobić dalej to faktycznie wykorzystać ten aspekt
w regułach media czyli jeśli piszemy media i piszemy aspekt.
To ta reguła zostanie zapakowane tylko i
wyłącznie wtedy jeśli nasze urządzenie czyli nasz ww.
port będzie miał rozdzielczość 4 trzecie.
Jest to o tyle problematyczne że musimy mieć dokładnie Cztery Trzecie.
Wysokości i szerokości ponieważ
w innych przypadkach ta reguła nie zostaje zaatakowana więc ciężko byłoby nam tutaj
stworzyć taką regułę Belgrad powiedzmy na czerwonym która będzie faktycznie to
cztery trzecie mała bo po prostu jest ciężko znaleźć ten.
Brak tutaj
moglibyśmy oczywiście próbować to zrobić
ale to co można zrobić zamiast tego to zdefiniować ten aspekt.
Cztery Trzecie.
I wtedy ta reguła zostanie zablokowana.
Jeśli będzie to przynajmniej cztery trzecie stosunku wielkości danych
elementów ja tutaj to testuje na firefox ie bo aspekt najlepiej wspiera Firefoksa.
I faktycznie widzimy że kiedy nasz wół port czyli od słów do góry.
No i faktycznie cała szerokość okna którą jest przeznaczona na przeglądarkę
wspiera te cztery trzecie to zmienia się
kolor i jeśli to cofniemy sobie troszkę za bardzo i stworzymy dodatkowe reguły.
Na przykład.
Max aspekt.
16:9.
I ustawił jakiś inny kolor np.
zielony to to też nam się oczywiście
zaaplikował więc jesteśmy w stanie tworzyć.
Różne reguły w zależności od tego jaki mamy aspekt naszego urządzenia jest tak
naprawdę bardzo przydatne zwłaszcza jeśli chcemy obsługiwać zarówno.
Tryb wyświetlania naszych stron
jak i w portrecie czyli trzymając telefon pionowo bądź poziomo.
I tu warto pamiętać że nie należy mieszać
aspektu właściwości z aspektem media kursem.
No bo jakby obie dotyczą.
Tego samego bytu jakim jest stosunek długości krawędzi.
Jedno służy do wykrywania aspektu
a drugie do nadawania ich na konkretnym elemencie html owym.