CSS: Dostępne jednostki

0:00Lekcji opowiem troszkę o dostępnych

0:02jednostkach CSS owych dostępnych jednostek jest naprawdę bardzo dużo.

0:07Głównie dlatego że CSS rozwijał się na przełomie ponad 20 lat

0:12i generalnie możemy podzielić jednostki CSS na absolutne i względne.

0:19Przykładami jednostek absolutnych jest np.

0:21standardowy pixel czyli standardowe 200 pikseli powiedzmy na 300 pikseli.

0:27Jest jednostką absolutną i oczywiście

0:29wpływają na nią różne rzeczy takie jak szum użytkownika.

0:33Natomiast teoretycznie piksele kojarzone są z pojedynczym piksele na ekranie

0:38natomiast nie jest to akurat prawda piksele są

0:43definiowane jako najmniejsza jednostka w CSS natomiast ona nie

0:47przekłada się na fizyczne piksele na ekranie jeden piksel CSS może np.

0:52zajmować dwa piksele fizyczne.

0:55Innymi przykładami jednostek absolutnych są np.

0:59centymetry milimetry czy cale.

1:02Niewiele osób wie że faktycznie możemy wpisać w sensie wartości w centymetry.

1:08I one niekoniecznie oczywiście na ekranie będą wyświetlał się jak dwa centymetry bo

1:12ciężko byłoby to po prostu zaimplementowane.

1:15O tyle w druku jest to faktycznie całkiem przydatne ponieważ jesteśmy w stanie

1:19zdefiniować jak duży powinien być element gdy go będziemy drukować.

1:24Więc mamy do dyspozycji centymetry milimetry.

1:27Możemy też podawać wartości w Indiach czyli w salach.

1:30Jeżeli.

1:32Naszym klientem docelowym jest ktoś z

1:35Ameryki gdzie systemu medycznego po prostu nie ma a także pointy czy pointy.

1:40Natomiast o tym nie będziemy mówić bo po prostu te specyficzne

1:44jednostki są przydatne przede wszystkim w druku.

1:47Jeśli przyjdzie wam pracować z takim

1:50konkretnym wersją HTML a która jest przeznaczona do druku.

1:55Swoją drogą polecam robić na waszych stronach internetowych to

1:59znaczy tworzyć media kulisy pod na przykład widok do druku to wtedy na

2:04pewno będziecie w stanie znaleźć źródła np.

2:07ja oczywiście też kilka źródeł.

2:09Gdzie będziecie mogli sobie na własną rękę poszerzyć tę wiedzę.

2:12Ciekawsze są w kontekście cyfrowych jednostek jednostki względne.

2:17Jedną z nich są np.

2:19jednostki.

2:21Tak jak pisałem tutaj wcześniej 6 rem na 8

2:24rem to na co przekłada się tak naprawdę REM.

2:27REM jest jednostką względną do Ruta czyli

2:31tłumacząc dosłownie korzenia naszej aplikacji.

2:34W przypadku dokumentów HTML jest to po prostu znacznik HTML.

2:39Czyli jeśli ustawiamy na znaczników HTML.

2:43Bodaj od razu. Czemu nie

2:47found Six.

2:50Powiedzmy na 20 pikseli

2:53czy 22 piksele akurat 20 pikseli miałem ustawiony domyślnie.

2:57No to faktycznie Remy też się skazują.

3:00Czyli Remy są to jednostka względna do HTML a czy body.

3:06Oczywiście Ruta.

3:08I odnosi się do rozmiaru czcionki.

3:10Oczywiście możemy nią stylowo tak samo

3:12szerokość i wysokość nie ma z tym problemu.

3:14Możemy też ustawiać się przy pomocy kremów i Remy są bardzo dobrą jednostką w

3:19kontekście dostępności tą dostępność Oczywiście co jakiś czas

3:23latam ponieważ uważam że jest to po prostu bardzo ciekawe zagadnienie i

3:28wymaga od nas większej świadomości gdy tworzymy nasz kod nawet CSS.

3:34No i jakby siostrzaną jednostką do kremów są MS i my od niemców różnią się tylko tym

3:41że są względne nie wobec Ruta czyli HTML a tylko do.

3:47Swojego nadrzędnego elementu czyli jeśli

3:49na elemencie Box stworzymy sobie drugi element powiedzmy sobie.

3:54DSS.

3:56Tekst czyli tekst wewnętrzny i możemy go

4:00zamknąć panie spanie a ponad tym z panem napisać.

4:05Autor tekst piszemy to bardzo nieczytelne

4:08bo jest białe na jasno niebieskim kontrast jest bardzo

4:11niski więc możemy sobie zwiększyć wystawiamy sobie czarny.

4:15No i może zróbmy z tego z pana drzewa żeby

4:18po prostu się zmienił Display i żeby elementy były jeden pod drugim.

4:21No i super.

4:22No i domyślnie przez dziedziczenie o którym też już oczywiście wspomnieliśmy te

4:27elementy będą miały taki sam fon będą miały 22 piksel jako bazę.

4:31Tutaj nie zmieniamy na boksie.

4:33Moglibyśmy oczywiście to zrobić jako Six i ustawić tutaj powiedzmy półtora RM.

4:42To byłoby półtora razy 22 piksele.

4:45Jeżeli ustawiamy sobie tutaj 1 rem no to będzie to równe 22 piksele.

4:49No i możemy wewnątrz tego boksera tak naprawdę ustawić.

4:52Dlatego Diva czyli boks DF może nie steruje już

4:57bezpośrednio grami nie jest to dobra praktyka będę o tym też mówi.

5:00Dlaczego w kontekście wydajności CSS a

5:04dodamy tutaj boks klasę nazwa klasy oczywiście nie ma znaczenia w

5:09tym przypadku więc ustawiamy boks i ustawiamy Fort Smith.

5:13W tym przypadku na MS Czyli jeśli ustawiamy sobie dwa m.

5:17Będzie to względne rodzica.

5:21Czyli jeśli tutaj autor boks czy zwykły

5:25boks ma ustawione 122 piksele no bo to się dziedziczy.

5:29Do tego boks. No to on będzie dwa razy większy czyli

5:31powinien być 44 piksele i zdecydowanie jest większy.

5:35To jest bardzo przydatne jeżeli chcemy zrobić jakieś np.

5:39adnotację do danego elementu i nie znamy tak naprawdę rozmiaru

5:44czcionki na elemencie wewnątrz którego się znajdujemy no to są po prostu super

5:49wygodne wtedy możemy ustawić sobie mniejszy tekst No i faktycznie

5:53von zostanie pomniejszony względem elementu wewnątrz którego się znajduje.

5:58Więc mm i Remy są

6:00bardzo dobre w kontekście zarządzania rozmiarem czcionki i tak

6:04naprawdę nie znając jego wartości do czego też zachęcam bo

6:08ustawienie rozmiaru czcionki na sztywno czy po prostu rozmiarów

6:12nie jest dobrym sposobem ponieważ użytkownik może zmienić domyślne

6:16preferencje w przeglądarce i tak naprawdę Hard hodują tutaj 16 pikseli

6:22i nawet używając dalej rozmów to dalej jest to rozwiązanie niedostępne ponieważ

6:26ktoś mógł mieć inny preferowany domyślny rozmiar czcionki np.

6:29większe w przypadku jeżeli po prostu

6:32pominięto to i założymy że w większości przeglądarek jest to ok.

6:3516 pikseli z reguły 16 pikseli jako domyślne.

6:40No to nasz interfejs będzie się skandował jeżeli ktoś sobie ustawi inny rozmiar

6:46tekstu to też będzie to wskazywało zgodnie z tym jakie miał preferencje.

6:51O tym też będę mówił przy okazji omawiania maksimów w czasie bo jest taki bardzo

6:55przydatny mix do pisania w ramach nie musimy zupełnie się przejmować wtedy kodem

6:59wynikowi i piszemy praktycznie jak na piksela.

7:02Ale nasz kod jest dostępny dla szerokiej gamy użytkowników.

7:07No i mamy też jeszcze kilka innych

7:09właściwości o których bardzo szybko wspomnę.

7:12Mamy właściwości takie jak.

7:15X czy jest to wysokość litery X w danym kącie z którego korzystamy.

7:22Czyli tutaj jeżeli sobie to powiększa my swoją drogą możemy też zrobić.

7:27To też jest ciekawa.

7:30Rzecz o której nie wszyscy wiedzą możemy

7:33ustawić skale całego Bode czy całego elementu

7:37do celów deweloperskich trans form skal.

7:42Tutaj na 5 ha troszkę przejechałem ustawienie to na boksie samym.

7:47No i oczywiście tutaj to się bo on się

7:50powiększa względem tego jak został umiejscowiony na stronie więc może

7:54ustawiamy dwójkę żeby to wiedzieć więc tutaj X będzie równe

8:00wielkości litery X i możemy to wykorzystywać np.

8:04do ustawiania slajdów limitów.

8:07Jest to generalnie całkiem przydatna rzecz jeżeli chcemy mieć dużą zależność

8:13naszego elementu od faktycznie tekstu i siostrzaną wartością do tego jest ch 1 ch.

8:21Równa się szerokość znaku zero.

8:24Dlaczego to są takie znaki czemu jest akurat X i czemu to jest akurat 0.

8:29Nie mam pojęcia nie interesowałem się szczerze mówiąc na ten temat.

8:32Natomiast wystarczy pamiętać o tym że 1 ch równa się szerokości zera w danym froncie

8:39a 1 x równa się wysokości x w danym momencie.

8:44Te wartości będą bardzo przydatne jeśli

8:46będziemy faktycznie robili boksy które mają mieć określoną szerokość w kontekście

8:51tego jak dużo ma się tam znaleźć tekstu gdzie ten tekst może mieć różną

8:56wielkość w zależności od portu czy preferencji użytkownika.

9:00Oczywiście dochodzą wszelkiego rodzaju procenty Do tego dochodzą

9:05miejsc które są na przykład popularnym formatem jednostek dla kaida

9:11czyli Faction i to są.

9:13Jakby też jednostki względne

9:16wobec tego co znajduje się w kontenerze grilla o tym będę mówił w osobnym dziale

9:20ogrodzie i mówię o tym też dłużej w osobnym kursie na ten temat.

9:25Natomiast te najbardziej.

9:28Problematyczne jednostki takie jak procenty będę omawiał w innym dziale gdzie

9:33opowiem jak wartość procentowa danego elementu zmienia się w zależności od tego

9:38pod jaką właściwością jest użyta i w jakim miejscu jest użyta bo jest to bardzo

9:42ciekawe zagadnienie które na pewno sprawia dużo problemów

9:47początkującym deweloperom i dlatego też większość osób odradza używanie w tym

9:51momencie procentów przynajmniej do tworzenia jachtów bo są po prostu do tego

9:54lepsze jednostki natomiast są jeszcze dwie jednostki o których warto wspomnieć i

10:01które odnoszą się bezpośrednio do portu i o tych opowiemy w kolejnej lekcji jako że

10:06warto poświęcić im odpowiednią ilość czasu.