Jednostki CSS – czy używasz ich poprawnie?
Wiele właściwości, takich jak font-size, width, height itd. przyjmuje jakąś miarę, która jest określana przez jednostki CSS. Stąd jest to temat właściwie podstawowy dla każdego fronta, jednak zawsze wprowadza wiele zamieszania. Dlaczego? A bo jest ich mnóstwo! I tu nasuwają się pytania, czemu właściwie jest ich tyle? Czy nie moglibyśmy używać wszędzie pikseli? A jeśli nie, to skąd w takim razie mamy wiedzieć, których używać? I czy używamy ich poprawnie? A może inne nadawałaby się lepiej? Na to wszystko sobie zaraz odpowiemy!
Jednostki CSS — podział
Otwierając dokumentację pierwsze, co się rzuca w oczy, to podział na jednostki CSS: absolutne i relatywne. Pierwsze z nich to takie, które nie odnoszą się do żadnego innego rozmiaru i mają stałą wartość. I tak w wśród nich znajdziemy: cm, mm, Q, in, pc, pt, px. Natomiast jak możesz się domyślać jednostki relatywne to takie, których miara jest określana względem czegoś innego, np. font-sizu, rozmiaru innego elementu, czy viewportu. Zaliczamy do nich: em, ex, ch, rem, lh, vw, vh, vmin, vmax. Czy to znaczy, że używamy ich wszystkich? Na szczęście nie 🙂 .
Czemu używamy jednostek relatywnych?
Jak pewnie wiecie, rozdzielczość monitorów określa się poprzez liczbę pikseli wyświetlanych na ekranie. Stąd, jeśli chcemy, by coś miało dokładnie zadaną wielkość, określamy ją właśnie w pikselach. Co w takim razie ze stosowaniem pikseli dla właściwości font-size? Okazuje się, że nie jest to do końca najlepsze rozwiązanie, gdyż ustawiając je na sztywno, możemy nadpisać preferencje użytkownika.
Pewnie nie wszyscy zdają sobie sprawę, ale każdy z nas może z łatwością zmienić w ustawieniach przeglądarki rozmiar font-sizu, który chcemy, by nam się w niej wyświetlał (dla Chrome, spróbujcie wejść na adres: chrome://settings/fonts ). Dzięki temu, jeśli dana strona nie ma ustawionego font-sizu na sztywno, to zadziałają wtedy wartości, które sobie ustawiliśmy. W przeciwnym razie weźmie te zadeklarowane w CSSie.
Dodatkowo dla własności takich jak szerokość, czy wysokość jakiegoś elementu, często piksele się nie nadają, bo chcemy by był on responsywny, tj. dostosowywał się do wielkości okna przeglądarki. Czego w takim razie używać i w jakich sytuacjach?
Co lepsze: em czy rem?
Przyjęło się mówić, że zamiast pikseli najlepiej stosować em lub rem, gdyż są one responsywne. Można zmienić jedną wartość, do której się odnoszą i reszta elementów, które były względem niej ustawiane również się zmieni. Zacznijmy od em, jest to jednostka relatywna do font-sizu bezpośredniego rodzica danego elementu i to przez niego się przelicza. Dajmy na to przykład!
See the Pen
Em unit by frontowisko (@frontowisko)
on CodePen.
Na pierwszy rzut oka wszystko fajnie! Uzależniliśmy sobie rozmiar dziecka od rodzica. To samo możemy zrobić dla marginesów i paddingów. Jednak za tym wszystkim czai się pewne niebezpieczeństwo. Dostrzegacie je?
See the Pen
Em unit2 by frontowisko (@frontowisko)
on CodePen.
Wiecie jak to dalej się potoczy? O ile nie będziecie miały/mieli zagnieżdżonych elementów, to używanie emów sprawdzi się bardzo dobrze. Często używa się ich, aby dostosowywać właśnie paddingi i marginesy w zależności o font-sizu, np. dla elementu button, czy paragrafów. Oczywiście od wszystkiego są wyjątki! Znajdą się i inne przypadki, gdzie mogą znaleźć swoje zastosowanie. Jednak font-size wydaje się nie najlepszy, lepszą opcją może się okazać stosowanie remów 😉 .
Rem to inaczej „root em”. Jak nazwa mówi, remy odnoszą się do font-sizu, ale elementu root, którym jest tag <html>. I tak jak wspomniałam, jeśli element ten nie ma ustawionego font-sizu, to bierze on font-size zdefiniowany w przeglądarce, który zazwyczaj domyślnie wynosi 16px.
See the Pen
Rem unit by frontowisko (@frontowisko)
on CodePen.
Jak sobie radzić z remami?
Jedyny problem z remami jest taki, że 1rem = 16px. I nie spotkałam się, żeby projekty dawane od grafików były w czym innym niż piksele. Co sprowadza nas do ciężkiej matematyki, bo ile to jest, np. 25px w remach? 25px : 16px = 1.5625rem. Jest to na pewno męczące, żeby za każdym razem coś takiego wyliczać.
Za starych czasów (hehehe, teraz mówię jak jakiś dziad) używało się pewnego tricka. Trick polegał na tym, żeby 1rem równał się 10px. Zwyczajnie lepiej ludziom idzie myślenie w systemie dziesiętnym, żadnej matmy, jedynie przesuwanie przecinka. Jak to zrobić? 16px = 100%, więc 10px to 62.5%, stąd na elemencie html można często było spotkać font-size ustawiony właśnie na 62.5%.
html {
/* 10px */
font-size: 62.5%;
}
body {
/* 16px */
font-size: 1.6rem;
}
h1 {
/* 30px */
font-size: 3rem;
}No i super! Oto nam chodziło, mamy remy i łatwe liczenie. Jestem pewna, że wielu ludzi nadal właśnie tak sobie z tym radzi, w końcu takie informacje z internetu po prostu nie znikają. Jednak i ten trick ma pewien mankament. Zakładamy, że użytkownik ma ustawione w preferencjach przeglądarki wartość 16px. Co natomiast jeśli jest ona inna, np. 20px?
html: 0.625 x 20px = 12.5px
body: 1.6 x 12.5px = 20px
h1: 3 x 12.5px = 37.5px
Nie o takie wartości nam chodziło. Czy jest na to jakaś rada? Wygląda, że nie za bardzo. Jedna to zmiana myślenia na remowe, a inna to po prostu użycie css variables <3 i zdeklarowanie zmiennych według ich pikselowych odpowiedników. Jeśli znacie jeszcze jakieś rozwiązania, to koniecznie dajcie znać w komentarzu! 🙂
Jednostki procentowe i viewportu
Mowa tutaj o: %, vh, vw, vmin, vmax. Tego typu jednostki przydają się do określania szerokości i wysokości naszych elementów, ale również przesuwania elementów i animacji. Należy jednak najpierw zrozumieć, czym się one się różnią.
Jak łatwo się domyślić jednostki viewportu są relatywne do viewportu, czyli szerokości lub wysokości naszego urządzenia lub okna przeglądarki. W takim razie, jeśli chcę, żeby coś zajmowało połowę szerokości ekranu, to ustawiam mu 50vw i voilà, gotowe! Dzieje sę to, dlatego że jednostka ta oznacza 1% obecnego rozmiaru szerokości, bądź wysokości, na którym zostaje wyświetlana.
To co na pewno odróżnia je od procentów to to, że biorą całą szerokość – razem ze scrollbarem. Stąd jeśli np. chcemy zrobić jakiś overlay, popup z całym przyciemnionym tłem, menu mobilne, które zajmie cały ekran telefonu, to jednostki vh i vw są tym, czego warto wtedy użyć. Chociaż ich zastosowań znajdzie się więcej.
Źródło: własne
Co z vmin i vmax? Tu sprawa jest tyci bardziej skomplikowana. Viewport minimum (vmin) odpowiada najmniejszemu rozmiarowi viewportu dla używanego urządzenia, a viewport maximum (vmax) największemu. Tym samym raz może to być zależne od szerokości, a raz od wysokości. Przykład? Tworzymy jakiś kontener, który ma zajmować 50vmax. Mając urządzenie z ekranem 1200px szerokości i 800px wysokości, to szerokość jest większa od wysokości. Stąd bierze 50 jednostek z 1200px, czyli nasz kontener będzie miał 600px. Jeśli natomiast używamy, np. telefonu o szerokości 450px i wysokości 800px, to większą wartość ma wysokość. Dlatego też nasz kontener weźmie 50 jednostek z 800px, co nam daje 400px.
Źródło: MinMaxing: Understanding vMin and vMax in CSS
Jeśli chodzi o procenty, to są one relatywne do ich rodzica. Jeśli zatem ustawimy sobie kontener na 500px, a jego dziecku damy 50%, to wiadome jest, że zajmie dokładnie 250px. Procenty również bardzo często wykorzystuje się w operacjach transform: translateY(-50%) wraz z left: 50% , aby ustawić jakiś element dokładnie na środku.
See the Pen
Viewport Units and Percentage by frontowisko (@frontowisko)
on CodePen.
Do czego nie używać procentów? Do paddingów i marginesów. Bardzo często u osób początkujących widziałam w kodzie, że próbowali właśnie tam wcisnąć %, ale to może prowadzić do nieoczekiwanych zachowań. Nasz element przez padding może zrobić się baaaardzo mały albo przez margines może wystrzelić go w kosmos, tzn. poza okno. Dlatego używajcie tego, tylko jeśli wiecie, co robicie 😀 .
A co z innymi jednostkami, takimi jak ex i ch? Właściwie to nigdy ich nie używałam. Są mało przydatne i nie widzę za bardzo praktycznego zastosowania do nich, gdyż związane są z wielkością fonta. Takie ex bierze wysokość danej litery, czyli jak „X” ma wysokość 10px, to 1ex = 10px. Podobna rzecz dzieje się z ch tylko dotyczy ona szerokości liter.
To jakich jednostek CSS używać?
Na to jest jedna odpowiedź: to zależy 😀 . Zazwyczaj się je miesza, w zależności od tego, co chcemy uzyskać. Musimy zadać sobie pytanie, czy chcemy by dany wymiar był na sztywno? Tak? Użyj pikseli. Jak nie, to do jakiego wymiaru ma się on dostosowywać?
Sam CSS pozwala nam na sprawne mieszanie różnych jednostek, ponieważ pojawiły się takie właściwości CSS, jak min(), max(), clamp() czy raczej już wszystkim znane calc(). W samej dokumentacji MDN można zobaczyć, np. zdeklarowanie font-size, jako font-size: clamp(1rem, 2.5vw, 2rem); . Co znaczy mniej więcej tyle, że chcemy, żeby minimalnie font-size wynosił 1 rem, maksymalnie 2rem, ale preferowana wartość to 2.5vw 😀 . Dzięki temu na pewno można tworzyć według potrzeb bardzo elastyczne layouty.
I co, znałyście/ znaliście je wszystkie? Czego używacie najczęściej albo co Wam się popsuło przez użycie niepoprawnie jednostki? Zapraszamy do komentowania! 🙂
Jak zawsze przy piątku życzymy smacznej kawusi 😀 .
