CSS: Odczytywanie atrybutów HTML
od Podstaw
9 godz. 11 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerCzego się nauczysz
- Najważniejsze koncepcje CSS
- Praktyczne przykłady zastosowania
- Kompendium wiedzy o nowych technikach
- Preprocesory CSS
- Flexbox oraz Grid
- Podstawy tworzenia animacji
- Architektura CSS
- I wiele więcej!
CSS na miarę lat 20 XXI wieku
Web 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ę!
Architektura CSS
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.
Tworzenie layoutów przy współczesnych metodach pozycjonowania
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.
Przyśpiesz swoją stronę
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.
Preprocesory CSS
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!
Fundamenty animacji w CSS
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)
Dla kogo jest ten kurs?
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.
W tej lekcji opowiem o utrzymywaniu
atrybutów HTML owych z poziomu CSS a mamy do tego specjalny atrybut ATR.
Generalnie mówmy jaki przykład teraz będziemy robili.
Powiedzmy że chcielibyśmy aby nasz baton który tutaj oscylował na szybko ma klasę
Action w skrócie On ma tutaj jakiś ukryty tekst który jest wpisany w atrybut data.
No i oczywiście samą swoją zawartość Halo.
No i jest on instalowany na takiej
zasadzie że mamy kolor zielony nie ma obramowanie zaokrąglone rogi ustawiamy Fon
jest jakiś margines od góry po przejechaniu myszką będzie
kursor typu point czyli taka ławka no i uroczystość się
zwiększa jest o połowę przezroczysty w stosunku do tego jak jest normalnie.
Więc co możemy zrobić za pomocą ATR.
Przede wszystkim jesteśmy w stanie zrobić coś takiego jak użyć tego np.
w pseudo elementach.
Generalnie przede wszystkim bo
właściwość ATR czyli funkcja przyjmuje tylko i wyłącznie wartość
atrybutów atrybutem odczytać na danym elemencie czyli nie jesteśmy w stanie
odczytać z Action czegoś z innego elementu.
Jeżeli byśmy tutaj sobie wpisali jakiś data Oder
i tak dalej wykrzykuje no to tego Data Action nie czytamy bo to działa tylko na
atrybuty zdefiniowane na tym elemencie który tę klasę posiada.
Więc jeśli piszemy data tip.
Piszemy.
No to widzimy że jest Hidden Text on się
dodał na początku naszego Batmana ponieważ jest to Bee FOR.
Jeżeli zrobiliśmy sobie afera no to on by się dodał na końcu.
No i generalnie koniec końców to jest całe zastosowanie jakie
nam daje w tym momencie nie jesteśmy w stanie użyć tej właściwości na przykład
żeby po kolorowej sobie element czyli tutaj sobie ustawić powiedzmy red.
I ustawić sobie powiedzmy.
Kontent na jakąś ostateczną treść.
Logo i kolor.
Na wartość tego atrybutów no niestety po prostu się nie da zrobić
jak napiszemy no to zobaczymy że nasz tak
dalej jest czarny bo po prostu w ten sposób nie działa.
Więc wróćmy do tej opcji no i do czego to
można zastosować tak naprawdę niewiele jest zastosowań
a niestety nigdy nie doczekał się
rozszerzonego swojego wsparcia tym terminem mówił w dziale.
Co czeka w specyfikacji CSS.
Jedyne co możemy z tym zrobić to powiedzmy ustawić sobie domyślnie na ekran Display.
Ustawić go jako pozycjonowanie.
Absolutne
zrobić na prezesie relacji.
Po przejechaniu na naszego Action możemy
pokazać ten pseudo element after czyli display in line blog piszemy
i widzimy że faktycznie normalnie tego tekstu nie ma po
przejechaniu dochodzi nasz tekst tylko musimy się go jeszcze pozbyć z.
Tego elementu przy.
Absolutnie. No i jak to piszemy.
No to faktycznie widzimy że ten Hidden tekst nie rozszerzy nam już Box a ponieważ
jest wystrzelony z tego klasycznego filmu o czym już mówiłem
no i jesteśmy w stanie powiedzmy po kolorowi go w ten sam sposób.
Jak nasz baton to ustawić na powiedzmy
na sztywno sobie zapisać wysokość tego balona.
W sumie czemu nieustanny Box Sailing Border box czyli sprawdzamy że
CSS sam będzie za nas robił kalkulację co do wysokości i szerokości
White ustawiamy mu na powiedzmy 3 ramy zobaczymy jak to będzie wyglądało.
Troszkę jest ciasny może powiedzmy 5 gramów teraz wygląda chyba całkiem ok
troszkę jest ciasno po bokach ale generalnie jest to więc teraz możemy sobie
to pięć gemów zapisać do zmiennej chce się.
Baton.
Tutaj wystawiają 5 kremów.
Tutaj.
Korzystamy z tej samej zmiennej.
Baton hejt piszemy.
No i jesteśmy w stanie teraz zrobić tutaj.
Minus tą szerokość którą sobie zadeklarowali.
Czyli jeżeli zrobimy funkcję kalek
dzięki której możemy obliczać różne wartości i użyjemy wiary.
Baton.
I to sobie
podejmiemy.
Napiszemy to po najechać myszką.
Ten element powinien nam się tutaj cofnąć i zobaczmy co się stało.
Czemu to nie wyszło.
Tutaj musimy właśnie to jest też ciekawa rzecz którą może się Wam przydać.
Jeżeli macie sytuację że chcecie zdemaskować element który pokazuje się
tylko i wyłącznie Hoover no to możecie te style zamrozić.
Przy pomocy tej zakładki w kursach i zaznaczyć sobie tutaj Hoover wtedy
zawsze ten element będzie miał Hoover nawet jeżeli będziecie jechali myszką po
różnych sekcjach strony o tym też mówi Piotr Palacz w swoim kursie.
O narzędziach deweloperskich.
No i generalnie zobaczmy co tutaj się stało.
Ten trop ma tutaj taką wartość ta zmienna
wyszła jak jedziemy na nią myszką albo sporo.
Możemy sobie sprawdzić no to to się nam liczyło ale
nie ustawiło się to tak jakbyśmy się tego spodziewali no zobaczmy to zero.
Jak to będzie wyglądać.
Czyli ten element jest już tutaj.
Zobaczmy czy możemy w ogóle odjąć bezpośrednią Custom Properties.
Chyba nie.
Czy my jesteśmy w stanie w ogóle coś odjąć od Custom Properties.
Wydaje mi się że kulki działały z klasą sami zrobimy sobie test
powyżej 200 pikseli no i on tam nam teraz gdzieś zniknął.
W związku z czym wydaje mi się że to powinno działać.
Zróbmy może mniejsze wartości. 10.
Definitywnie to działa
a zastanawiam się dlaczego w takim razie zero minus to nie zadziałało.
Chyba że zadziałało ale po prostu tego tekstu nie widzimy bo on.
Nie ma ustawionego
kto by Tuska całą.
Definitywnie nam to nie wychodzi.
W każdym razie moglibyśmy tutaj tego użyć
teoretycznie do tego aby ustawić sobie tutaj minus 3 m.
I on powinien nam wskoczyć teraz wyżej.
Możemy teraz dodać do tego jeszcze jakąś wartość bezpieczną jeszcze raz całkiem.
I powiedzmy Brema jako taką.
Odległość bezpieczną jeszcze troszkę dodajmy żeby to wyglądało trochę lepiej.
No i pozycjonowanie go.
W osi poziomej tak aby był równy czyli Left 0 RAID 0 Marcin.
W Cerro auto.
Zapisujemy.
No i faktycznie mamy tutaj ten jeden tekst już wysoko nad nami.
Może 1 rem to jednak było trochę za dużo 6 rozmów spróbujemy.
Bardzo wysoko.
Nie widzę tej różnicy za dobrze ale niech będzie powiedzmy że tak.
Taki jest egzamin którego oczekujemy.
Six ustawiamy na jednostkę względną
pół EMA czyli to będzie zależne od tego jaki tekst ma w środku.
Faktycznie von ma i możemy ustawić w.
Na.
Powiedzmy.
2.
Czy to nie będzie trochę za mało.
Trochę chyba za mało.
5 rozmów Reading.
Tutaj 5.
I to powinno być ok.
.
No i oczywiście jesteśmy w stanie też sobie ustawić na 02 a.
No i to co możemy teraz zrobić to dodać do tego.
Taką strzałę żeby widać było że faktycznie usuną tylko piasek z tego żeby nie było
żeby to nam się opaski nie propagował.
Elementy które są wewnątrz niego
możemy ewentualnie ustawić po prostu by grunt na jakiś z.
Dalszą część uroczystości czyli powiedzmy
Yellow Green bo to jest ta wartość bezpośrednia z
której korzystamy w naszym Properties i tutaj ustawić po prostu uroczystość.
Efekt będzie taki sam ale nie będzie nasz tip.
Też się poszerzył.
No i CSS.
Zrobiłem sobie dawno temu taki malutki
przeciek który pozwala mi stworzyć twój kącik w samym sosie.
Opowiadałem też o tym na kanale na YouTubie hoduje.
Także jeśli to konkretne zagadnienie będzie was interesowało to zapraszam tam
i możemy ustawić może właśnie takie wartości.
żeby pseudo rynek nam się pokazał
ustawiamy kontent na puste display in line blok.
No i faktycznie ten element powinien nam się już gdzieś pokazać
więc możemy tak samo go pozycjonowanie.
Absolutnie oczywiście nie jest to najlepsze podejście ale chodzi tylko o
zastosowanie tego ATR które faktycznie może być przydatne.
Więc jeżeli zrobimy absolutnie tutaj w ten sposób.
Kolejna Aqua.
Piszemy.
Action for zobacz się teraz znajduje.
No to tutaj ten bufor ma zero pikseli szerokości.
Co to jest faktycznie potrzebne nam
ponieważ my chcemy aby ten element na podstawie burdelu nam się wędrował.
Może to jest kwestia indeksu ustaw.
Indeks niejeden.
Niestety nie.
Zobaczmy co tutaj chodzi.
50 pikseli to jest kwestia rozmiaru
to na jakieś inne wartości np.
na.
10 kremów.
10 rozmów.
20 rozmów to jest bardzo dużo to już się powinno wyświetlić.
Jeżeli faktycznie nie ma żadnej brakującej
właściwości content Display poza absolutnie.
Być może tutaj w 0 0 troszkę przeszkadza.
Ciężko mi powiedzieć.
Zobaczymy czy jak się tego pozbędziemy.
Za definitywnie ten element zajmuje
przestrzeń ale kolor na myślenie czyli po prostu to jest może kwestia tego
że nie mamy takiego Custom Properties a chyba wydaje mi się że to jest problem.
Szybko S.S. Oczywiście tutaj.
To jest bezpośredni kolor którego używamy
poprzez Custom Properties ale nazwa zmiennej która do tego się dobiera.
No to jest Blue więc tutaj to jest mój błąd.
No i faktycznie to działa tak jakbyśmy tego chcieli.
Zobaczymy czy ten tekst był nam potrzebny.
Możemy go zostawić dlaczego nie
zmienimy te faktycznie wartości na coś malutkiego żeby ten.
Element.
Nam się pokazał taki kącik jeśli zrobimy go z powrotem na Green.
Pozycja jemy go tak samo albo mniej więcej
podobnie jak pozycjonowanie naszego partnera czyli tutaj gdzieś jest nasz to
oczywiście możemy sobie to tutaj przenieść.
Zostawmy sobie to.
Piszemy.
Możemy zrobić jeszcze raz forum.
Tj.
180 stopni aby ten drugi kącik był do góry nogami.
W tym momencie trans form literówki.
No i po najechać myszką oczywiście teraz to się nam tu nie zgadza więc możemy to
sobie jeszcze cenzurować tak jak sobie tam to robiliśmy.
W poprzednim pseudo elemencie.
I pozostaje trochę.
Obniżyć ten element może czterema będzie akurat zobaczmy.
Może trochę mniej.
Tak i faktycznie mamy tego typa tylko
powinniśmy faktycznie fora też pokazywać jedynie.
W sytuacji kiedy ktoś choruje na nasz element.
Więc to już będzie działać tylko szybko kończę i Display non hold
zapisujemy. Nie ma tempa.
Wyjeżdżamy na niego myszką pojawia się nam
tutaj jeden tekstem który jak wyjeżdżamy z tego elementu znika.
Generalnie to jest jedno z przykładowych
użyć i chyba tylko jedyne użycie funkcji ATR.
Przede wszystkim dlatego bo nie możemy użyć go w żadnej innej właściwości CSS
owej nie działa ona z kolorem z 7 do tego możemy użyć CSS Custom Properties
tak naprawdę i przekazywać sobie je poprzez.
Tutaj atrybut Still. Jeśli np.
napiszemy sobie zmienną Green.
I wystawiłem tutaj kolor Aqua.
No to cały ten komponent będzie miał inny kolor.
W związku z czym tak naprawdę jesteśmy w stanie zastąpić funkcję ATR CSS Custom
Properties i nie ma w tym najmniejszego problemu.
Dlatego też wydaje mi się że ATR nie będzie miał rozwijany i tej składni w
przyszłości ale to co chciałem powiedzieć o tym konkretnym rozwiązaniu nie jest ono
dobre z punktu widzenia dostępności ponieważ po pierwsze tego nie możemy
sforsować jeżeli zrobimy nawigację klawiaturą czy klikamy no to oczywiście on
się tutaj podkreśli że ma aktywny stan ale ten tutaj pokazuje się tylko i wyłącznie
na Hoover więc musimy być w stanie poruszać myszką żeby go zobaczyć.
A jeżeli.
Nie widzimy bądź mamy problemy z
chodzeniem no to niestety Screen liderem tego nie przeczytają.
W związku z czym też będzie to problematyczne
w związku z czym
ten przykład to nie jest coś co ja chciałbym żebyście robili na stronach WWW
ponieważ nie jest to rozwiązanie dostępne ani samo.
Nie ma jako tako większych zastosowań jeżeli faktycznie zależy nam na tym aby
nie korzystać z skryptu no to jesteśmy w stanie to zrobić ale
nie polecam ponieważ JavaScript został do tego stworzony.
Ten Hack tak naprawdę nie jest dostępny i
dlatego też nie jest dalej rozwijany a z CSS Custom Properties już są.
W związku z czym unikali się tego
rozwiązania ale to właśnie tak działa funkcja ATR.