Увеличить - CSS-хитрости

Anonim

zoomСвойство в CSS позволяет масштабировать содержимое. Он нестандартный, изначально был реализован только в Internet Explorer. Хотя несколько других браузеров теперь поддерживают масштабирование, это не рекомендуется для рабочих сайтов.

.zoom ( zoom: 150%; )

Поддерживаемые значения:

  • percentage - Масштабировать на этот процент
  • number- Конвертировать в проценты и масштаб - 1 == 100%; 1,5 == 150%;
  • normal - масштабирование: 1;

Если ваш браузер поддерживает это, вы увидите эти изображения разных размеров:

Посмотрите на эту ручку!

Zoom - это старая вещь IE. Это не то, что вам следует использовать на реальных сайтах. Если вы хотите масштабировать контент, используйте CSS Transforms. Вы также можете использовать фильтры, если вам нужна поддержка oldIE.

Еще во времена IE6 зум использовался в основном как средство взлома. Многие ошибки рендеринга в IE6 и IE7 можно исправить с помощью масштабирования. Например, display: inline-blockв IE6 / 7 не очень хорошо работал. Установка zoom: 1устранила проблему. Ошибка связана с тем, как IE отображает свой макет. Параметр zoom: 1включил внутреннее свойство hasLayout, которое устранило проблему.

Поддержка браузера

Хром Сафари Fire Fox Опера IE Android iOS
Любой 4.0+ Никто Никто 5.5+ TBD TBD

Safari также поддерживает zoomначиная с версии 4. Тем не менее, он добавил новое значение: reset. Это говорит браузеру не увеличивать масштаб вашего элемента при увеличении. Итак, ваш cmd / ctrl +? Он не работает с элементами с zoom: resetapplication.