width

Ak chceme prvku povedať aký má byť široký, použijeme vlastnosť width

 

CSS width – čo to je a čo o ňom reálne vieme

Čo vlastne width robí

Ak chceme prvku povedať aký má byť široký, použijeme vlastnosť width.

Inými slovami: „Tento element má zaberať presne toľkoto miesta na šírku.“

Najčastejšie sa používa na: layout (kontajnery, karty, sekcie), obrázky, formuláre, komponenty (card, slider, sidebar…).

Základná syntax

.ukazka {
  width: 150px;
}

Ak chceme urobiť responzívne správanie, zvyčajne nepridávame len width, ale riešime aj maximá a minimá (k tomu sa dostaneme).

Najčastejšie hodnoty width

px – pevná šírka

.ukazka {
  border: 1px solid #a50000;
  width: 150px;
}

 

Presná hodnota, nezávislá od rodiča, zle reaguje na mobiloch

Použitie: ikonky, modaly, fixné UI prvky

% – percento z rodiča

.ukazka {
  border: 1px solid #a50000;
  width: 50%;
}

 

Počíta sa z rodičovského elementu, reaguje na zmenu layoutu, časté v grid/layoutoch

Percentuálna width sa počíta z najbližšieho rodiča, ktorý má vypočítateľnú šírku – často je to block element, ktorý sám zaberá 100 % rodiča (napr. body).

vw – šírka viewportu

.ukazka {
  border: 1px solid #a50000;
  width: 100vw;
}

 

100vw = celá šírka obrazovky,  často spôsobí horizontálny scroll (kvôli scrollbarom)

Používaj opatrne, najmä mimo hero sekcií.

auto – nech rozhodne obsah / layout

.box {
  width: auto;
}

  • defaultná hodnota

  • Šírka sa riadi layoutom (block element = 100 % rodiča)

  • Často kombinovaná s max-width

ch – šírka znaku

ch – je jednotka založená na šírke znaku „0“, ktorá sa prakticky používa na obmedzenie dĺžky riadku textu.

1ch je šírka znaku „0“ (nula) v aktuálne použitej font-family, nie počet znakov. Meria sa v pixeloch, ale relatívne k fontu.

.p {
  max-width: 65ch;
}

-tým negarantuješ presne 65 znakov v riadku, ale „Riadok má byť približne taký široký, ako keby sa doň zmestilo ~65 monospace znakov.“

A to chceme pre čitateľnosť.

Dôležitý rozdiel: monospaced vs proporčné písmo

Monospaced font (napr. Courier New)- každý znak má rovnakú šírku, 65ch ≈ 65 znakov v riadku

Proporčné fonty (Arial, Inter, Roboto…), i je úzky, W je široký, medzery majú vlastnú šírku. Takže, počet znakov v riadku kolíše, ale optická dĺžka riadku je stabilná

 

Responzívna klasika (odporúčaný vzor)

 

.ukazka {
  border: 1px solid #a50000;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

 

 

 

význam: na mobile = 100 %,  na veľkom monitore = maximálne 400px, centrovanie cez margin: auto

Toto je zlatý štandard webov.

Menej známe, ale veľmi užitočné hodnoty

fit-content

.ukazka {
  border: 1px solid #a50000;
 width: fit-content;
}

 

 

 

Šírka sa prispôsobí obsahu. Ideálne pre: badge, štítky, malé tlačidlá

Podpora: dobrá, ale stále pozor pri starších browseroch
(can i use: OK pre moderný web)

min-content a max-content

 

.ukazka {
  border: 1px solid #a50000;
  width: min-content;
}

 

 

min-content → zbalí obsah na minimum

max-content → roztiahne podľa obsahu bez zalamovania

Použitie: tabuľky, labely, špeciálne layouty.

Moderné kombinácie (veľmi odporúčané)

clamp() – responzívna šírka bez media queries

.ukazka {
  border: 1px solid #a50000;
  width: clamp(300px, 50%, 800px);
}

 

Čítaj takto:  minimum: 300px, ideál: 50 %,  maximum: 800px

 

 

Mentálny model (dôležité)

 

Keď riešiš width, vždy si polož otázku:  „Od čoho sa táto šírka počíta?“

  • px → od ničoho (pevná)

  • % → od rodiča

  • vw → od okna

  • auto → od layoutu

  • fit-content → od obsahu

Krátke zhrnutie

 

  • width určuje šírku prvku

  • najčastejšie sa kombinuje s max-width

  • moderný web = percentá + clamp + max-width

  • nové hodnoty (fit-content, clamp) sú už bezpečné

  • vw používať opatrne