Predefiniowane słowa kluczowe
Jednym z najprostszych sposobów jest definiowanie rozmiaru czcionki za pomocą predefiniowanych słów kluczowych. Atrybut font-size może uzyskiwać wartości takie jak xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.
W odróżnieniu od pozostałych słowa kluczowe smaller i larger ustawiają rozmiar relatywny w stosunku do definicji font-size dla nadrzędnego obiektu HTML:
<div style="font-size: medium"> <p> Lorem ipsum dolor sit amet, <span style="font-size: larger"> consectetur adipisicing </span> elit, sed do eiusmod tempor incididunt </p> </div>Słowa kluczowe pozwalają zachować zgodność strony z wieloma przeglądarkami, są bowiem poprawnie implementowane przez praktycznie wszystkie z nich. Nie oferują jednak szczególnie subtelnej kontroli nad typografią, ponieważ wybór predefiniowanych rozmiarów jest dość ograniczony. Co więcej sposób ten nie nadaje się do ustalania rozmiarów innych, poza fontami, elementów strony.
em
Jednostka em jest konstrukcją dosyć abstrakcyjną i początkowo trudną do zrozumienia. 1em jest równa obecnemu rozmiarowi czcionki danego elementu.
Jeśli taki rozmiar nie został jawnie zadeklarowany w CSS dokumentu, to domyślnie wynosi on dla większości przeglądarek 16px. Jeśli ustawisz rozmiar czcionki na 20px, to w efekcie 1em = 20px. Historycznie wartość "EM" opiera się na szerokości wielkiej litery M.
W czasach gdy królowała przeglądarka IE6 stosowano jednostkę em gdyż jako jedyna podlegała skalowaniu. Dzisiaj wszystkie popularne przeglądarki (MSIE od wersji 7.0) nie mają już z tym żadnych problemów, dlatego skalowalność tekstu nie jest już argumentem za jej stosowaniem.
Em służy do ustalania rozmiaru nie tylko czcionek, jest jednostką miary którą można wykorzystać do definiowania innych rozmiarów (wysokość, szerokość, etc). Stosuje się ją obecnie tam, gdzie potrzebna jest elastyczność definiowanych rozmiarów, co oznacza, że kiedy zmienisz rozmiar czcionki automatycznie kaskadowo zmienią się rozmiary wszystkich elementów, o ile tylko zdefiniowane były w em. Em przydaje się też tam, gdzie potrzebujesz bezpośrednio powiązać szerokość obiektu z rozmiarem czcionki.
Najbardziej popularną metodą w pracy z em jest ustawienie rozmiaru czcionki w ciele dokumentu na 62,5% (10px). Korzystanie z 10 jako mnożnika jest znacznie łatwiejsze niż przy użyciu 16. W ten sposób, aby uzyskać rozmiar czcionki np. 22px wystarczy ustawić font-size: 2.2em.
Korzystanie z em jako podstawowej jednostki niesie ze sobą też pewne pułapki.
Nie zawsze wartość rozmiar w em da się przeliczyć na piksele z odpowiednią dokładnością. Na ekranie monitora wszystkie elementy są wyświetlane zawsze przy użyciu pikseli, a więc każda jednostka ostatecznie i tak musi być przeliczona na piksele. Czasami może się okazać, że przeliczona wartość nie jest liczbą całkowitą, a ponieważ pikseli ekranowych nie można podzielić, to nastąpi automatyczne zaokrąglenie. Nie ma jednak żadnej pewności, w jaki sposób zostanie to wykonane: w dół, w górę, czy zgodnie z zasadami matematyki, a czasem nawet jeden piksel różnicy może być granicą dobrej czytelności tekstu.
Kolejne niebezpieczeństwo to fakt "kaskadowości" em. Każda wartość em jest wyliczana w stosunku do rozmiaru rodziców w drzewie DOM. Jeśli używasz em jest tak prostej zamiany na wartości pikseli, może to powodować problemy. Na przykład, możesz ustawić font-size twoich "P" (akapit) i "span" na 1.4em. W momencie, gdy w treści strony umieścisz <span> wewnątrz <p> to faktyczny rozmiar czcionki wewnątrz elementu span zostanie wyliczony jako 1.4 x 1.4, a wyświetlony tekst znajdujący się wewnątrz <span> będzie znacznie większy niż tekst akapitu.
Nie odradzam korzystania z jednostek em, gdyż są w niektórych sytuacjach niezastąpione. Na pewno jednak trzeba wiedzieć kiedy należy ich unikać.
%
To jak działają procenty jest dość oczywiste. Jeśli rodzic w drzewie DOM strony ma rozmiar czcionki 20px a dziecko ma rozmiar czcionki 50%, to efektywny rozmiar zostanie wyliczony na 10px. Procenty mają tę sama naturę co jednostki em, a więc są względne oraz "kaskadowalne". Tak więc % dzielą wszystkie wady i zalety jednostek em.
pt
Jednostka pt została zaczerpnięta wprost z typografii "papierowej" i odnosi się wprost do rozmiaru widocznego na wydruku. 72pt = jeden cal. Ponieważ na ekranie nie faktyczny rozmiar tego co widzimy zależny jest w pełni od ustawionej rozdzielczości ekranu oraz ew. ustawień aplikacji, to stosowanie jednostek takich jak pt (oraz cal, milimetr, centymetr) nie ma kompletnie sensu.
Jednostki pt stosuje się w arkuszach CSS tylko dla elementów które mają być drukowane (przy użyciu klauzuli @media print).
in, mm, cm
Podobnie jak pt tradycyjne jednostki miary (cal, milimetr, centymetr) stosujemy tylko do definiowania wyglądu wydruków. W CSS 1in = 2.54cm.
px
Piksele są naturalną miarą wielkości dla wszystkiego co jest wyświetlane na monitorze. Jeśli potrzebujesz precyzyjnego sterowania rozmiaru czcionki czy dowolnego innego obiektu to określenie wartości w px jest doskonałym wyborem. Na ekranie komputera nie ma nic bardziej dokładne od pojedynczego piksela. Pikseli należy unikać jedynie definiując wygląd wydruków. Problemy ze skalowaniem tekstu którego rozmiar został podany w pikselach, należą już do przeszłości - aktualne wersje wszystkich popularnych przeglądarek bez problemu sobie z tym radzą.
Inne jednostki
Poza podstawowymi specyfikacja CSS definiuje także kilka innych, zwykle mniej używanych ale wartych wymienienia jednostek:
- rem - "root em", bardzo ciekawa i warta zapamiętania jednostka. Równa się wartości "font-size 'na elementu głównego strony. Rozmiar rem elementów potomnych jest wyliczany relatywnie do font-size elementu głównego, nie zaś elementu nadrzędnego jak dla em.
- ex - jednostka "relatywna" podobna do em, wartościowo równa tzw. x-height czcionki. X-height równa się zwykle wysokości małej litery x, ale jeśli czcionka bieżącego elementu nie zawiera litery x, to x-height mimo to może być wyliczony na podstawie odpowiedniej metryki zdefiniowanej dla czcionki, ewentualnie na bazie wielkości litery o. Jeśli i to nie jest możliwe, zakłada się że 1ex=0.5em.
- ch - jednostka "relatywna" bazująca na wysokości cyfry 0 (U+0030)
- pc - jednostka absolutna, 1pc = 12pt
- vw - (viewport) jednostka "procentowa" mająca potężne możliwości, niestety na razie zaimplementowana całościowo tylko w Chrome. 1vw zdefiniowana jest jako "1% of width of the initial containing block".
- vh - podobnie jak wyżej, 1vh jest równa 1% szerokości bloku zawartości.
- vmin - jak wyżej, vmin jest wartością mniejszej z liczb vh lub vw.
Konwersja wartości wyrażonych w różnych jednostkach
Często zdarza się, że potrzebujemy przeliczyć wartości wyrażone w różnych jednostkach miary dostępnych w CSS. Aby nie robić tego "na piechotę" proponuję skorzystać z kalkulatora który zamieściliśmy na naszej stronie internetowej:
http://www.windroos.pl/strony/kalkulator-jednostek-css.php
Brak komentarzy:
Prześlij komentarz