views:

7450

answers:

6

Using Firefox, you can enlarge an entire web page by simply pressing CTRL +. What this does is proportionally enlarge the entire web page (fonts, images, etc).

How can I replicate the same functionality using simply CSS?

Is there something like page-size: 150% (which would increase the entire page portions by x%?)

+4  A: 

If your CSS is constructed completely around ex or em units, then this might be possible and feasible. You'd just need to declare font-size: 150% in your style for body or html. This should cause every other lengths to scale proportionally. You can't scale images this way, though, unless they get a style too.

But that's a very big if on most sites, anyway.

Joey
That would only change the size of my fonts. CTRL+ also proposition widens fixed widths, heights and image sizes as well.
I know, but it's as close as you can get with pure CSS. Also not only your fonts change but everything where the dimensions are specified as a multiple of the font's size. Meaning, everything where you used `%`, `em` or `ex` units.
Joey
That's just not correct. I've tested the solution I listed below (zoom + -moz-transform properties), and it works on FF3.5, IE6+, Safari, and Opera. It scales images as well as text. You can scale pages in CSS.
Jon Galloway
+11  A: 

You might be able to use the CSS Zoom property - supported in IE 5.5+, Opera, and Safari 4, and Chrome (verifed, please check before downvoting).

Firefox is the only major browser that does not support Zoom (bugzilla item here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.

So you could use:

div.zoomed { zoom: 3; -moz-transform: scale(3); }

Jon Galloway
The proprietary zoom property is supported only by IE. http://reference.sitepoint.com/css/zoom#compatibilitysection
David Dorward
David, that reference is very out of date - look at the the browser versions it lists. CSS Zoom is supported in all current major browsers except Firefox. And it's no more proprietary than any of the -moz- CSS extensions.
Jon Galloway
Note: I think the other solutions that have been proposed - such as em and % based scaling - are more "pure" but aren't necessarily practical on most web layouts unless you've built that way from scratch.
Jon Galloway
I've tested Opera 10b2 and it doesn't seem to support it. Firefox nightly behaves oddly (zoomed fragment disappears). IE5/6 are buggy. Works fine in WebKit only.
porneL
I can't argue with that thorough test suite, @porneL. You tested two obsolete versions of IE, didn't mention which Firefox you tested... I tested in all current browsers. Try it.
Jon Galloway
This didn't work for me in Opera 10.10, worked in current versions of the other four major browsers. I used `body { zoom: 0.6667; -moz-transform: scale(0.6667); }`
Kip
thanks jon, great info!in firefox -moz-transform scale indeed works, but depending on your use case you might need to correct the position of the element using -moz-transform-origin (cfr. https://developer.mozilla.org/En/CSS/-moz-transform-origin)
futtta
A: 

As Johannes says -- not enough rep to comment directly on his answer -- you can indeed do this as long as all elements' "dimensions are specified as a multiple of the font's size. Meaning, everything where you used %, em or ex units". Although I think % are based on containing element, not font-size.

And you wouldn't normally use these relative units for images, given they are composed of pixels, but there's a trick which makes this a lot more practical.

If you define body{font-size: 62.5%}; then 1em will be equivalent to 10px. As far as I know this works across all main browsers.

Then you can specify your (e.g.) 100px square images with width: 10em; height: 10em; and assuming Firefox's scaling is set to default, the images will be their natural size.

Make body{font-size: 125%}; and everything - including images - wil be double original size.

e100
I don't understand, if I say body{font-size: 62.5%; font-size: 125%} - how would that define 1em to be 10px. Could the browser simply ignore the first font-size declaration and then simply make 125% = 10px?
Wouldn't* the browser simply....
I think you misunderstood. you wouldn't do both at the same time. 62.5 x2 = 125... to show how you can scale things by adjusting the value.
Ape-inago
Yep. I should have said 'then if you use Javascript to set body {font-size: 125%} all page elements will double in size'.
e100
+1  A: 

I think its impossible to do that purely with CSS - you may need you get your hand dirty with Javascript to make sure the job gets done properly.

Amir
I think this is true, if you want your display to scale to look the same whether viewed on an iPhone or 10000x10000 stadium display
Morri
+1  A: 

Jon Tan has done this with his site - http://jontangerine.com/ Everything including images has been declared in ems. Everything. This is how the desired effect is achieved. Text zoom and screen zoom yield almost the exact same result.

Andy Ford
+1  A: 

CSS will not be able to zoom on demand, but if you couple CSS with JS, you could change some values to make a page look bigger. However, as it has been said, this feature is standard nowadays in modern browsers: no need to replicate it. As a matter of fact, replicating it will slow down your website (more things to load, more JS or CSS to parse or execute and apply, etc.)

xav0989