Wstęp do CSS - część trzecia
Rozmiary
Miary relatywne
W CSS istnieje kilka jednostek miar, które określają wielkość elementu pod względem elementu nadrzędnego. Te jednostki powinny być stosowane przede wszystkim. Dzięki stosowaniu jednostek relatywnych można zapobiec zjawisku "rozjeżdżania się" strony w większych rozdzielczościach lub w powiększeniu. Jeśli wszystko będzie relatywne, to zmiana wielkości punktu odniesienia przez przeglądarkę (powiększenie tekstu) spowoduje przeliczenie wszystkich wielkości, dzięki czemu stosunki wielkości obiektów zostaną takie same.
Relatywnymi miarami w CSS są: em, ex i piksele - px. Piksele jednak są zależne od urządzenia, na którym dokument jest wyświetlany. Zmiana wielkości piksela jest raczej niemożliwa, przez co skalowalność dokumentu jest bardzo ograniczona, a wręcz niemożliwa. Skalowalny dokument, czyli taki, który w większych rozdzielczośćiach wygląda prawie identycznie (pod względem rozmiarów faktycznych, tzn. widocznych) jak w rozdzielczościach mniejszych. Mam na myśli tutaj oczywiśćie monitor. Natomiast dwie pierwsze jednostki są jak najbardziej zależne od użytkownika. Jednostka em to wielkość czcionki elementu nadrzędnego, ex natomiast to wielkość małej litery x w czczionce elementu nadrzędnego. To, że są one wielkościami czcionek, nie oznacza, że nie mogą zostać użyte do określenia rozmiarów elementów "nietekstowych". Bardzo wygodne jest użycie ich do określenia wielkości kontenerów zawierających tekst. Wtedy jest pewność, że po zmianie wielkości czcionki tekst nie zostanie wyświetlony poza kontenerem ponieważ wielkość konteneru też się zmieni.
Miary absolutne
Miary absolutne nie są zależne od innych elementów. W CSS miarami absolutnymi są: cale - in (ang. inch, 25,4 mm), centymetry - cm, milimetry - mm, punkty - pt (ang. points, 1/72 cala) oraz pika - pc (12 punktów). Właściwie większość z tych jednostek jest rzadko używana. Czasami można spotkać użycie punktów. Mimo wszystko ich zastosowanie powinno być ograniczone tylko do miejsc, gdzie są niezbędne.
Poprawny zapis miar
Miary są zapisywane "sposobem amerykańskim", tzn. zamiast przecinka (obowiązującego w Polsce) jest używana kropka. Ważne jest również, żeby jednostka nie była oddzielona od wartości. Spacja w CSS oznacza, że następuje kolejna wartość. Sama jednostka nie może być wartością.
Poprawny zapis:
margin: 1em 2em 4.5em 4.45ex;
Zapis niepoprawny:
margin: 1pr 2 em 4,5pc 2,5;
W przykładzie zapisu niepoprawnego można wyróżnić kolejno błędy: pierwszy - literówkę, nie istnieje jednostka pr; drugi - brak jednostki; trzeci - sama jednostka nie jest wartością, należy usunąć spację pomiędzy dwójką i em; czwarty - użycie przecinka zamiast kropki; piąty - brak jednostki.
Istnieje również spór o zero. Wiele osób twierdzi, że zapis 0px jest błędny i powinno się zapisywać samo zero, bez jednostki. Przecież zero pikseli = zeru centymetrów = zeru cali itd... W rzeczywistości zapis jednostki za zerem nie jest błędny. Specyfikacja CSS level 2 wyraźnie stwierdza, że zapis jednostki po zerze jest opcjonalny, czyli jeśli jednostka za zerem jest zapisana to nie jest to błąd. Brak jednostki również nie jest błędem, a wręcz jest "poprawniejszym" od zapisu z jednostką.
Ponieważ wcześniej tego nie zrobiłem, muszę wspomnieć jeszcze o procentach. Procent jako taki nie jest miarą, więc nie mogłem opisać procentów w opisie miar relatywnych. Ich działanie zna chyba każdy i wie, że wielkość określona procentem jest zależna od wielkości punktu odniesienia. Procenty działają więc jak miary relatywne. Symbolem procentów w CSS jest oczywiście %.