Min-width

CSS vlastnost min-width určuje minimální šířku prvku.

min-width
hodnoty šířka prvku
délka nastavená šířka nebo větší
procento procento z šířky nadřazeného prvku (tagu), nebo větší
min-content minimální vlastní šířka obsahu, typicky šířka nejužšího slova
max-content maximální vlastní šířka obsahu, tj. šířka nejdelšího řádku
0 minimální šířka není omezena

Šířka prvků je buďto jejich přirozená šířka, 100% dostupné šířky u blokových elementů, nebo šířka určená CSS vlastností width. Vlastnost min-width přináší další způsob, jak šířku prvku předepsat. Uplatní se to zejména v případech, kdy je šířka prvku nastavena procenty nebo závisí na velikosti okna a já zároveň chci, aby nebyla moc mrňavá.

Pokud jsou zadány jak min-width, tak width a jsou v konfliktu, pak min-width přebije width. Min-width vyhraje i nad případným současným nastavením max-width.

Min-width funguje v Exploreru pouze ve standardním módu (přepíná se pomocí doctype). Prohlížeč Chrome (narozdíl od ostatních) trvá na tom, že min-width lze nastavit pouze blokovým prvkům, takže vám nemusí fungovat použití min-width na řádkové prvky nebo například na tabulku. (V takovém případě je potřeba kouzlit s vlastností display.)

CSS vlastnost min-width už se dá používat, protože poslední nepodporující prohlížeč Internet Explorer 6 už de facto zmizel (2011).

Podpora všude

V roce 2021 už jsou i výborně podporovány hodnoty min-content a max-content.

Podpora vlastnosti min-width
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer 7, 8, 9 ano, pouze ve standardním módu  
Mozilla (Firefox, Netscape 6+ atd.) všechny verze  
Opera 7, 8, 9  
Chrome a Safari ano  

Zaměnitelnost

Pokud někde uvidíte zápis @media (min-width: ..., pak se nejedná o použití této CSS vlastnosti. Ve skutečnosti jde o zápis @media query, který se shodou okolností zapisuje velmi podobně.

Jako fakt nevim, čím přemýšleli, když pro dvě úplně různé věci vymysleli stejné klíčové slovo. No nic.

Příklady

Příklad na min-width

Priority při konfliktních nastaveních

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.