Jednostki relatywne

W jednej z poprzednich części kursu CSS poznaliśmy wiele jednostek, które występują w języku CSS. Osoba początkująca z reguły będzie posługiwać się jednostką px, czyli pikselami. Nie jest to żadnym błędem, a nawet jest to zalecane w wielu wypadkach, w wielu właściwościach CSS. Jednak warto poznać czym są jednostki relatywne i co je odróżnia od innych jednostek, które występują w języku CSS, ponieważ umiejętne wykorzystanie jednostek relatywnych może dodać naszej stronie internetowej, nowej, lepszej jakości.

Czasami w regułach CSS możemy zauważyć, że niektóre właściwości CSS są zapisane za pomocą wartości 1em, 2.5em, 2ex, 4ex, 80%, 150% itp.

Pierwsze co nam może przyjść na myśl to stwierdzenie - "Po co te dziwne jednostki em, ex, % zostały tu użyte? Skoro mamy do dyspozycji piksele (px), które określają stałą, niezmienną wartość". Odpowiedzią na to pytanie będzie dalsza treść tej części kursu CSS.

Na początek przyjrzymy się następującemu dokumentowi HTML.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      body {
        font-size:15px;
      }
	  
      h1 {
        font-size:24px;
      }
	  
      p {
        font-size:18px;
      }
	  
      ul {
        font-size:15px;
      }
    </style>
  </head>

  <body>

    <div>
      <h1>To Jest Przykładowy Element H1</h1>

      <p>
        to jest przykładowy tekst umieszczony w elemencie - p
      </p>

      <ul>
        <li>to jest przykładowy element listy HTML</li>
        <li>to jest przykładowy element listy HTML</li>
        <li>to jest przykładowy element listy HTML</li>
      <ul>
    </div>

  </body>
</html>

W kodzie dokumentu HTML, który został przedstawiony powyżej, możemy zauważyć, że wszystkie reguły CSS zawierają w sobie właściwość font-size wraz z wartością wyrażoną w jednostce px, czyli w pikselach.

Po wyświetleniu dokumentu HTML w oknie przeglądarki internetowej zobaczymy następujący rezultat:

To Jest Przykładowy Element H1

to jest przykładowy tekst umieszczony w elemencie - p

  • to jest przykładowy element listy HTML
  • to jest przykładowy element listy HTML
  • to jest przykładowy element listy HTML

Oczywiście wszystko jest ok. Właściwość font-size określa wielkość czcionki tekstu dla poszczególnych elementów HTML.

  • dla elementu body wielkość czcionki tekstu wynosi 15px, bo określa to reguła body { font-size:15px; }
  • dla elementu h1 wielkość czcionki tekstu wynosi 24px, bo określa to reguła h1 { font-size:24px; }
  • dla elementu p wielkość czcionki tekstu wynosi 18px, bo określa to reguła p { font-size:18px; }
  • dla elementu ul wielkość czcionki tekstu wynosi 15px, bo określa to reguła ul { font-size:15px; }

Powiedzmy sobie, że mamy takich różnych reguł CSS z tysiąc. W wielu z nich występuje właściwość font-size wraz z wartością wyrażoną w jednostce px. Załóżmy, że wpadliśmy na pomysł, żeby przygotować naszą stronę internetową w taki sposób, aby wyświetlała się w miarę poprawnie, w urządzeniach z mniejszym ekranem, z mniejszą rozdzielczością. Czcionka tekstu w niektórych elementach HTML może być za duża lub za mała, dla niektórych urządzeń.

Co w takim wypadku? Czy będziemy przeszukiwać wszystkie setki, czy tysiące reguł CSS, w poszukiwaniu właściwości font-size, aby ją zmienić?

Nie musimy, jeżeli już na początku naszego projektu strony internetowej zabezpieczymy się w odpowiedni sposób. Naszym zabezpieczeniem mogą stać się jednostki em, ex lub %. W tym momencie należy przypomnieć sobie pewną regułę, która występuje w języku CSS.

Niektóre właściwości CSS mogą być dziedziczone od przodków przez ich kolejnych potomków... i właśnie taką właściwością jest właściwość font-size.

Czemu to jest takie istotne w tym wypadku?

Ponieważ, gdy jakaś wartość właściwości CSS jest określona za pomocą jednostki em, to przeglądarka internetowa dokonuje pewnego obliczenia danej wartości, bazując na informacji: "Jaka wartość właściwości 'font-size' została określona dla rodzica danego elementu HTML".

Przykład zaprezentowany poniżej wyjaśnia nam nieco więcej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      body {
        font-size:15px;
      }
	  
      h1 {
        width:20em;
        background-color:lightblue;
      }
	  
      p {
        width:20em;
        background-color:gold;
      }
    </style>
  </head>

  <body>

    <div>
      <h1>To Jest Przykładowy Element H1</h1>

      <p>
        to jest przykładowy tekst umieszczony w elemencie - p
      </p>
    </div>

  </body>
</html>

A o to rezultat jaki ujrzymy:

To Jest Przykładowy Element H1

to jest przykładowy tekst umieszczony w elemencie - p

Gdy przeglądarka internetowa "zobaczy" w naszych regułach CSS, że coś ma mieć wartość em (np. width:20em;), dla danego elementu HTML (np. dla elementu h1, czy p), to zostanie dokonane następujące obliczenie...

Pierw przeglądarka internetowa ustali jaka wartość właściwości font-size została określona dla elementu rodzica danego elementu HTML.

Dla elementu div, który jest rodzicem elementów h1 oraz p, nie określiliśmy wspomnianej właściwości font-size, lecz została ona określona dla elementu body i wynosi font-size:15px; a więc element div odziedziczy tą właściwość font-size wraz z wartością 15px, od elementu body.

Po ustaleniu wspomnianej wartości 15px właściwości font-size dla elementu div, przeglądarka internetowa obliczy sobie właściwość width:20em; dla elementu p, w następujący sposób... 20em × 15px = 300px, a więc wartość właściwości width dla naszego przykładowego elementu p będzie równa 300px. Właściwość width określa szerokość danego elementu HTML.

Co w wypadku gdyby element body nie zawierał w sobie właściwości font-size? W jaki sposób przeglądarka internetowa ustaliłaby wartość właściwości font-size?

Odpowiedź na te pytania jest bardzo prosta. Przeglądarka internetowa dokonywałaby obliczeń na podstawie domyślnej wartości właściwości font-size jaka została określona w jej ustawieniach. Przeważnie tą wartością jest wartość 16px.

Dla elementu h1, w naszym przykładzie, wartość właściwości width ma wynosić 20em. Analizując to co zostało napisane w poprzednich akapitach, możemy dojść do wniosku, że przeglądarka internetowa dokona obliczenia w następujący sposób... 20em × 15px = 300px, jednak jest to nieprawdą, w tym wypadku. Ponieważ element h1 domyślnie, posiada w sobie jakąś ustaloną wartość właściwości font-size (może być ona różna, w różnych przeglądarkach internetowych), czyli tak naprawdę nie możemy być pewni, jaka wartość ostatecznie zostanie ustalona dla elementu h1, w przypadku pojawienia się zapisu width:20em;bo może ona być różna, w różnych przeglądarkach internetowych.

Jeżeli chcemy posługiwać się jednostką em i nie chcemy komplikować sobie za bardzo życia (w przypadku gdy wiemy, że dany element ma w sobie jakąś domyślną wartość właściwości font-size, z góry narzuconą przez przeglądarkę internetową), to możemy skorzystać z zapisu, który został przedstawiony poniżej, lub możemy wykorzystać technikę Reset CSS, która służy do usunięcia domyślnych właściwości CSS ze wszystkich elementów występujących w języku HTML.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      body {
        font-size:15px;
      }
	  
      h1 {
        font-size:1em;
        width:20em;
        background-color:lightblue;
      }
	  
      p {
        width:20em;
        background-color:gold;
      }
    </style>
  </head>

  <body>

    <div>
      <h1>To Jest Przykładowy Element H1</h1>

      <p>
        to jest przykładowy tekst umieszczony w elemencie - p
      </p>
    </div>

  </body>
</html>

W regule CSS odpowiadającej za wygląd elementu h1 pojawił się zapis font-size:1em; dzięki czemu domyślna właściwość font-size, jaką posiadał element h1, została nadpisana i wynosi 1em, czyli 15px, bo rodzic elementu h1, czyli element div, odziedziczył właściwość font-size:15px; od elementu body, a przeglądarka internetowa dokonała następującego obliczenia... 1em × 15px = 15px

Od tej pory element h1 będzie posiadał taką samą wartość szerokości jaką posiada element p, bo font-size dla obu elementów jest określana przez przeglądarkę internetową jako wartość 15px, a wartość width dla obu elementów ma wynosić width:20em; czyli w tym wypadku tą wartością będzie wartość 300px, bo 20em × 15px = 300px

A o to rezultat jaki ujrzymy:

To Jest Przykładowy Element H1

to jest przykładowy tekst umieszczony w elemencie - p

Skoro wiemy już w jaki sposób przeglądarka internetowa reaguje na jednostkę em (na jednostkę ex w podobny sposób, lecz jest ona obliczana na podstawie wysokości małych liter czcionki tekstu rodzica interesującego nas elementu HTML, przeważnie jest to wartość w granicy 51% ~ 52% całej wartości wielkości czcionki), to możemy wrócić do reguł CSS, jakie zostały przedstawione w kodzie dokumentu HTML, na początku tej części, czyli:

body {
  font-size:15px;
}

h1 {
  font-size:24px;
}

p {
  font-size:18px;
}

ul {
  font-size:15px;
}

Naszym celem będzie zamienienie wartości właściwości font-size, które są wyrażone w jednostce px, na wartości wyrażone w jednostce em, w regułach CSS odnoszących się do elementów h1, p oraz ul. Po wykonaniu tej czynności, wspomniane elementy HTML, będą uzależnione od wartości właściwości font-size swoich przodków, czyli w tym wypadku elementu div oraz body.

Aby dokonać prawidłowego obliczenia należy podzielić wartość właściwości font-size elementu rodzica (w naszym przykładzie elementu div), przez wartość właściwości font-size elementu dziecka.

  • 24px / 15px dla elementu h1, czyli 1.6em
  • 18px / 15px dla elementu p, czyli 1.2em
  • 15px / 15px dla elementu ul, czyli 1em

Mając prawidłowe wartości możemy zapisać nasze reguły CSS, w następujący sposób:

body {
  font-size:15px;
}

h1 {
  font-size:1.6em;
}

p {
  font-size:1.2em;
}

ul {
  font-size:1em;
}

W rezultacie otrzymamy taki sam efekt, jak podczas gdy właściwości font-size były zapisane za pomocą wartości wyrażonych w pikselach, czyli w px.

To Jest Przykładowy Element H1

to jest przykładowy tekst umieszczony w elemencie - p

  • to jest przykładowy element listy HTML
  • to jest przykładowy element listy HTML
  • to jest przykładowy element listy HTML

Od tej pory wystarczy, że zmienimy wartość właściwości font-size dla elementu body, a wartość czcionki tekstu w innych elementach HTML, które znajdą się w elemencie body, automatycznie zostanie zmieniona.

A tak będą wyglądać nasze elementy HTML, gdy właściwość font-size dla elementu body będzie wynosić 20px...

To Jest Przykładowy Element H1

to jest przykładowy tekst umieszczony w elemencie - p

  • to jest przykładowy element listy HTML
  • to jest przykładowy element listy HTML
  • to jest przykładowy element listy HTML

Kod dokumentu HTML został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      body {
        font-size:20px;
      }
	  
      h1 {
        font-size:1.6em;
      }
	  
      p {
        font-size:1.2em;
      }
	  
      ul {
        font-size:1em;
      }
    </style>
  </head>

  <body>

    <div>
      <h1>To Jest Przykładowy Element H1</h1>

      <p>
        to jest przykładowy tekst umieszczony w elemencie - p
      </p>

      <ul>
        <li>to jest przykładowy element listy HTML</li>
        <li>to jest przykładowy element listy HTML</li>
        <li>to jest przykładowy element listy HTML</li>
      <ul>
    </div>

  </body>
</html>

Jakiś czas temu do języka CSS została dodana jednostka rem, która może nam nieco bardziej ułatwić posługiwanie się jednostkami relatywnymi. To, które wersje najpopularniejszych przeglądarek internetowych interpretują jednostkę rem, możemy śledzić tutaj.

Gdy przeglądarka internetowa "zobaczy", że coś ma mieć wartość wyrażoną w jednostce rem, to dokona obliczenia na podstawie wartości właściwości font-size jaka została ustalona dla elementu HTML, który jest najwyżej w hierarchii elementów dokumentu HTML, czyli tym elementem, jest element html.

Nieco więcej wyjaśni nam przykład umieszczony pod spodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:15px;
      }
	  
      div {
        font-size:20px;
      }
	  
      h1, p, ul {
        font-size:1rem;
      }
    </style>
  </head>

  <body>

    <div>
      <h1>To Jest Przykładowy Element H1</h1>

      <p>
        to jest przykładowy tekst umieszczony w elemencie - p
      </p>

      <ul>
        <li>to jest przykładowy element listy HTML</li>
        <li>to jest przykładowy element listy HTML</li>
        <li>to jest przykładowy element listy HTML</li>
      <ul>
    </div>

  </body>
</html>

Od tej pory wartość właściwości font-size elementów h1, p, ul będzie wynosiła 1rem, czyli 15px, bo właśnie taka wartość została ustalona dla elementu html (w tym wypadku nie ma znaczenia jaka wartość właściwości font-size została ustalona dla elementu div).

To nie koniec tematu jednostek relatywnych. Temat będzie kontynuowany w następnej części tego kursu CSS, w której zajmiemy się jednostką %, czyli procentami.