{"id":14144,"date":"2011-09-06T19:44:20","date_gmt":"2011-09-07T02:44:20","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14144"},"modified":"2013-03-13T14:12:11","modified_gmt":"2013-03-13T21:12:11","slug":"zoom","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/z\/zoom\/","title":{"rendered":"zoom"},"content":{"rendered":"<p>The <code>zoom<\/code> property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in Internet Explorer. Although several other browsers now support zoom, it isn&#8217;t recommended for production sites.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.zoom {\r\n  zoom: 150%;\r\n}<\/code><\/pre>\n<p>The &#8220;supported: values are:<\/p>\n<ul>\n<li><code>percentage<\/code> &#8211; Scale by this percentage<\/li>\n<li><code>number<\/code> &#8211; Convert to percentage and scale &#8211; 1 == 100%; 1.5 == 150%;<\/li>\n<li><code>normal<\/code> &#8211; zoom: 1;<\/li>\n<\/ul>\n<p>If your browser supports it, you&#8217;ll see these images as different sizes:<\/p>\n<pre class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"pCzFl\" data-user=\"chriscoyier\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/pCzFl\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<p>Zoom is an old IE thing. It isn&#8217;t something you should use on live sites. If you want to scale content, use <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/\">CSS Transforms<\/a>. You can also use <a href=\"http:\/\/www.useragentman.com\/IETransformsTranslator\/\" rel=\"noopener\">filters<\/a> if you need <abbr title=\"Internet Explorer versions 6-8\">oldIE<\/abbr> support.<\/p>\n<p>Back in the days of IE6, zoom was used primarily as a hack. Many of the rendering bugs in both IE6 and IE7 could be fixed using zoom. As an example, <code>display: inline-block<\/code> didn&#8217;t work very well in IE6\/7. Setting <code>zoom: 1<\/code> fixed the problem. The bug had to do with how IE rendered its layout. Setting <code>zoom: 1<\/code> turned on an internal property called <a href=\"http:\/\/www.satzansatz.de\/cssd\/onhavinglayout.html\" rel=\"noopener\">hasLayout<\/a>, which fixed the problem.<\/p>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/\"><code>transform<\/code><\/a><\/li>\n<li><a href=\"http:\/\/www.satzansatz.de\/cssd\/onhavinglayout.html\" rel=\"noopener\">More on the zoom hack<\/a><\/li>\n<li><a href=\"http:\/\/developer.apple.com\/library\/safari\/#documentation\/AppleApplications\/Reference\/SafariCSSRef\/Articles\/StandardCSSProperties.html#\/\/apple_ref\/css\/property\/zoom\" rel=\"noopener\">Safari zoom documentation<\/a><\/li>\n<li><a href=\"http:\/\/www.useragentman.com\/IETransformsTranslator\/\" rel=\"noopener\">CSS3 transforms to IE filter converter<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Any<\/td>\n<td class=\"yep\">4.0+<\/td>\n<td class=\"nope\">None<\/td>\n<td class=\"nope\">None<\/td>\n<td class=\"yep\">5.5+<\/td>\n<td class=\"yep-nope\">TBD<\/td>\n<td class=\"yep-nope\">TBD<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Safari also supports <code>zoom<\/code> since version 4. However, it added a new value: <code>reset<\/code>. That tells the browser not to zoom your element on zoom. So your cmd\/ctrl+? It doesn&#8217;t work on elements with <code>zoom: reset<\/code> applied. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The zoom property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in Internet Explorer. Although several other browsers now support zoom, it isn&#8217;t recommended for production sites. .zoom { zoom: 150%; } The &#8220;supported: values are: percentage &#8211; Scale by this percentage number &#8211; Convert to percentage [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13961,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":165586,"url":"https:\/\/css-tricks.com\/snippets\/html\/responsive-meta-tag\/","url_meta":{"origin":14144,"position":0},"title":"Responsive Meta Tag","date":"March 13, 2014","format":false,"excerpt":"I tend to use this: Although I see this is recommended a lot: This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way\u2026","rel":"","context":"With 56 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":330622,"url":"https:\/\/css-tricks.com\/video-screencasts\/200-scroll-to-zoom\/","url_meta":{"origin":14144,"position":1},"title":"#200: Scroll to Zoom","date":"December 10, 2020","format":false,"excerpt":"Fair warning: you aren't going to need this every day! I just happened to be looking at a neat little SVG warping tool that had a feature where my mouse scroll wheel (or trackpad) could be used to zoom the working area in and out. We dug in to play\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/thumb-scroll.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":280309,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/touch-action\/","url_meta":{"origin":14144,"position":2},"title":"touch-action","date":"January 2, 2019","format":false,"excerpt":"The touch-action property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the more widely-used pointer-events property used to control mouse interactions. #element { touch-action: pan-right pinch-zoom; } The touch-action property is useful primarily for interactive UI elements that need slightly different behavior\u2026","rel":"","context":"In \"pointer-events\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14043,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/cursor\/","url_meta":{"origin":14144,"position":3},"title":"cursor","date":"September 5, 2011","format":false,"excerpt":"The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it's only relevant in browsers\/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the\u2026","rel":"","context":"In \"cursor\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311020,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-offset\/","url_meta":{"origin":14144,"position":4},"title":"text-underline-offset","date":"May 18, 2020","format":false,"excerpt":"The text-underline-offset property in CSS sets the distance of text underlines from their initial position. .element { \u00a0 text-underline-offset: 0.5em; } Once you apply an underline for an element using text-decoration with the value of underline, you can say how far that line should be from your text using the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3289,"url":"https:\/\/css-tricks.com\/snippets\/css\/clear-fix\/","url_meta":{"origin":14144,"position":5},"title":"The Clearfix: Force an Element To Self-Clear its Children","date":"August 10, 2009","format":false,"excerpt":"This will do you fine these days (IE 8 and up): .group:after { content: \"\"; display: table; clear: both; } Apply it to any parent element in which you need to clear the floats. For example: You would use this instead of clearing the float with something like at the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14144"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14144"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14144\/revisions"}],"predecessor-version":[{"id":20546,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14144\/revisions\/20546"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13961"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14144"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}