Zoom - Trucos CSS

Anonim

La zoompropiedad en CSS le permite escalar su contenido. No es estándar y se implementó originalmente solo en Internet Explorer. Aunque varios otros navegadores ahora admiten el zoom, no se recomienda para sitios de producción.

.zoom ( zoom: 150%; )

Los valores “admitidos: son:

  • percentage - Escalar por este porcentaje
  • number- Convertir a porcentaje y escala - 1 == 100%; 1,5 == 150%;
  • normal - zoom: 1;

Si su navegador lo admite, verá estas imágenes en diferentes tamaños:

¡Mira este bolígrafo!

Zoom es una vieja cosa de IE. No es algo que deba usar en sitios activos. Si desea escalar el contenido, use CSS Transforms. También puede usar filtros si necesita soporte antiguo.

En los días de IE6, el zoom se usaba principalmente como un truco. Muchos de los errores de renderizado tanto en IE6 como en IE7 podrían solucionarse con el zoom. Como ejemplo, display: inline-blockno funcionó muy bien en IE6 / 7. La configuración zoom: 1solucionó el problema. El error tenía que ver con la forma en que IE representaba su diseño. La configuración zoom: 1activó una propiedad interna llamada hasLayout, que solucionó el problema.

Soporte del navegador

Cromo Safari Firefox Ópera ES DECIR Androide iOS
Alguna 4.0+ Ninguno Ninguno 5.5+ TBD TBD

Safari también soporta zoomdesde la versión 4. Sin embargo, se añade un nuevo valor: reset. Eso le dice al navegador que no haga zoom en su elemento. Entonces, ¿su cmd / ctrl +? No funciona en elementos con zoom: resetaplicado.