Kurs HTML

Wprowadzenie: Stałe wymiary

W CSS, aby określić rozmiary elementów, marginesy, paddingi, rozmiary czcionek i inne wymiary, używamy **jednostek długości**. Dzielą się one na dwie główne kategorie: absolutne i relatywne.

**Jednostki długości absolutne** definiują rozmiar, który jest stały i niezależny od innych elementów na stronie czy rozmiaru okna przeglądarki. Są one powiązane z fizycznymi jednostkami miary lub, w przypadku pikseli, z rozdzielczością urządzenia wyświetlającego.

Chociaż wydają się precyzyjne, ich użycie w projektowaniu stron internetowych jest często ograniczone ze względu na różnorodność urządzeń i potrzebę responsywności.

Rodzaje jednostek absolutnych

Najczęściej spotykane jednostki absolutne to:

• px (piksel): Najpopularniejsza jednostka absolutna w web designie. Teoretycznie odpowiada jednemu pikselowi na ekranie urządzenia. Jednak w praktyce, na ekranach o wysokiej gęstości (HiDPI, Retina), jeden piksel CSS może odpowiadać wielu fizycznym pikselom urządzenia, aby zachować spójny rozmiar wizualny. Uważany za jednostkę względną do urządzenia wyświetlającego, ale absolutną w kontekście layoutu strony.
• pt (punkt): Jednostka tradycyjnie używana w druku. 1 punkt = 1/72 cala. Rzadziej stosowana w projektowaniu na ekrany.
• cm (centymetr): Jednostka fizyczna.
• mm (milimetr): Jednostka fizyczna.
• in (cal): Jednostka fizyczna. 1 cal = 2.54 cm = 96px (w standardzie CSS).
• pc (pica): Jednostka używana w druku. 1 pica = 12 punktów.

.element {
  width: 300px; /* Szerokość 300 pikseli CSS */
  font-size: 12pt; /* Rozmiar czcionki 12 punktów */
  margin-bottom: 1cm; /* Dolny margines 1 centymetr */
  border-width: 1mm; /* Szerokość obramowania 1 milimetr */
  padding: 0.5in; /* Wewnętrzny odstęp pół cala */
}Kopiuj

Relacje między jednostkami (w standardzie CSS):

• 1 in = 96 px
• 1 in = 72 pt
• 1 in = 6 pc
• 1 in = 2.54 cm
• 1 cm = 10 mm
• 1 pc = 12 pt

Uwaga: Dokładność fizycznych jednostek (cm, mm, in) na ekranie może się różnić w zależności od urządzenia i jego konfiguracji. Przeglądarka próbuje je przybliżyć, bazując na informacji o DPI ekranu, ale nie zawsze jest to idealne odwzorowanie.

Piksel (px) - Król jednostek absolutnych (z zastrzeżeniami)

Piksel (px) jest zdecydowanie najczęściej używaną jednostką absolutną w CSS. Jest łatwy do zrozumienia i daje precyzyjną kontrolę nad rozmiarem elementów na ekranie.

Jednak ważne jest, aby pamiętać, że piksel CSS nie zawsze równa się fizycznemu pikselowi na ekranie. Na nowoczesnych ekranach o wysokiej gęstości (np. smartfony, monitory Retina), przeglądarki skalują piksele CSS, aby elementy wyglądały na podobne rozmiary fizyczne jak na ekranach o standardowej gęstości. Jeden piksel CSS może być renderowany przy użyciu 2, 3 lub więcej fizycznych pikseli (tzw. device pixel ratio).

Mimo tej "względności" do urządzenia, px jest traktowany jako jednostka absolutna w kontekście layoutu strony, ponieważ jego rozmiar nie zależy od rozmiaru czcionki rodzica czy rozmiaru viewportu (jak jednostki relatywne, które poznamy później).

Kiedy używać jednostek absolutnych?

• px:
  • Do definiowania rozmiarów elementów, które mają mieć stały wymiar, niezależnie od kontekstu (np. szerokość głównego kontenera strony, rozmiary ikon, grubość obramowań).
  • Czasami do definiowania rozmiaru czcionki, chociaż jednostki relatywne (em, rem) są często preferowane dla lepszej skalowalności i dostępności.
  • Do precyzyjnego pozycjonowania elementów.
• pt, cm, mm, in, pc:
  • Głównie w **arkuszach stylów przeznaczonych do druku** (@media print), gdzie fizyczne wymiary mają większe znaczenie.
  • Rzadko używane do stylizowania na ekrany, ponieważ ich renderowanie może być nieprecyzyjne, a brak elastyczności utrudnia tworzenie responsywnych layoutów.

Wady jednostek absolutnych (szczególnie na ekranach)

• Brak skalowalności: Rozmiary zdefiniowane w jednostkach absolutnych (zwłaszcza px dla czcionek) mogą być trudne do skalowania przez użytkownika w ustawieniach przeglądarki, co utrudnia dostępność dla osób słabowidzących.
• Problemy z responsywnością: Layouty oparte wyłącznie na jednostkach absolutnych (np. px) są sztywne i nie dostosowują się dobrze do różnych rozmiarów ekranów i urządzeń.
• Nieprecyzyjność jednostek fizycznych: Jak wspomniano, jednostki fizyczne (cm, mm, in, pt) mogą nie być dokładnie odwzorowane na ekranie.

Z tych powodów, w nowoczesnym web designie często preferuje się **jednostki relatywne** (%, em, rem, vw, vh), które pozwalają tworzyć bardziej elastyczne i responsywne layouty. Jednostki absolutne, zwłaszcza px, nadal mają swoje miejsce, ale należy ich używać świadomie.