Způsobuje vizuální zvětšení nebo zmenšení prvku. Zadává se v procentech nebo jako násobek zvětšení.
Zoom dlouho byla nestandardní, špatně podporovaná CSS vlastnost, která ale po mnoha peripetiích v prohlížečích v roce 2025 funguje dobře.
Prohlížeč | Podpora | Poznámka |
---|---|---|
Internet Explorer | ano | |
Firefox | už ano | lze nahradit zápisem transform: scale(2) |
Webkit (Chrome, Safari) | ano | též podporuje -webkit-tranform: scale(2) |
Dlouhodobě se zvětšování namísto vlastnosti zoom používala spíše vlastnost vlastnost transform s hodnotou scale(násobek), protože fungovala. K vlastnosti transform: scale() také vzniklo synonymum, vlastnost scale. Transform: scale(x) a scale: x fungují identicky, akorát se jinak zadávají.
Pokud se použijí vlatnosti tranform nebo -něco-tranform, je nutno počítat s tím, že se to nechová stejně jako vlastnost zoom. Rozdíl je v tom, že transform si vyhradí místo v dokumentu a pak jenom s prvkem něco udělá. Zoom se chová očekávatelněji: prostě prvek zvětší (zmenší) a vyhradí mu i větší (menší) místo.
zoom | transform: scale() a scale |
---|---|
upraví velikost prvku a okolní obsah posune | jenom zvětší / zmenší prvek a okolního obsahu si nevšímá, může ho i překrýt |
Osobně používám zoom pouze na řešení zvětšování klikacích map v mobilním zobrazení. Můžete to vidět třeba na mém webu Kanárské ostrovy, ale musíte si tam najít CSSko.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.