CSS: Nastavte nějaký rozměr jen moderním prohlížečům díky calc()

Občas se mi při kódování CSS stává, že staré prohlížeče (zejména tedy IE 8 a starší) něco zobrazují jinak – něco je nějak širší, vyšší, jinde atd. Způsobů jak to řešit je mnoho, většinou se použije nějaký jiný způsob, místo paddingu se použije margin, prvky se jinak přeskupí atd.  Ale někdy to prostě nejde či by řešení bylo složité.

Třeba teď jsem potřeboval nějakým flexbox prvkům nastavit width: 100%, aby zabraly celou šířku svého flexbox „sloupce“. No ale protože staré prohlížeče nemají flexbox, tak se u nich použije inline-block a tomu kdybych nastavil stejných 100 %, tak zabere celou šířku rodičovského prvku.

Vyřešil jsem to tak, že jsem prvku nastavil width:calc(100%). Tomu staré prohlížeče taky neporozumí, takže prostě ten width nenastaví.

Mimochodem calc je skvělá metoda a dostupná prakticky všude, která má spoustu zajímavých a praktických využití, doporučuji kodérům nastudovat.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *