I found that some jQuery Plugin, in their css rule uses 'zoom' descriptor, I even Look into w3c website and found that it is used to magnify but how can I actually implement it? Or I have to Define some viewport? And how do I define such viewport ? Or i am wrong about the whole stuff ?
is it possible to use it like
a {
zoom:1;
}
a:hover {
zoom:2;
}
Zoom is not included in the CSS specification, but it is supported in IE, Safari 4, Chrome (and you can get a somewhat similar effect in Firefox with -moz-transform: scale(x) since 3.5). See here.
So, all browsers
zoom: 2;
zoom: 200%;
will zoom your object in by 2, so it's like doubling the size. Which means if you have
a:hover {
zoom: 2;
}
On hover, the <a> tag will zoom by 200%.
Like I say, in FireFox 3.5+ use -moz-transform: scale(x), it does much the same thing.
Edit: In response to the comment from thirtydot, I will say that scale() is not a complete replacement. It does not expand in line like zoom does, rather it will expand out of the box and over content, not forcing other content out of the way. See this in action here. Furthermore, it seems that zoom is not supported in Opera.
This post gives a useful insight into ways to work around incompatibilities with scale and workarounds for it using jQuery.
Surprised that nobody mentioned that zoom: 1; is useful for IE6-7, to solve most IE-only bugs by triggering hasLayout.
This property controls the magnification level for the current element. The rendering effect for the element is that of a “zoom” function on a camera. Even though this property is not inherited, it still affects the rendering of child elements.
Example
div { zoom: 200% }
<div style=”zoom: 200%”>This is x2 text </div>
CSS zoom property is widely supported now > 86% of total browser population.
See: http://caniuse.com/#search=zoom
document.querySelector('#sel-jsz').style.zoom = 4;
#sel-001 {
zoom: 2.5;
}
#sel-002 {
zoom: 5;
}
#sel-003 {
zoom: 300%;
}
<div id="sel-000">IMG - Default</div>
<div id="sel-001">IMG - 1X</div>
<div id="sel-002">IMG - 5X</div>
<div id="sel-003">IMG - 3X</div>
<div id="sel-jsz">JS Zoom - 4x</div>
Only IE and WebKit support zoom, and yes, in theory it does exactly what you're saying.
Try it out on an image to see it's full effect :)
zoom is a css3 spec for the #viewport descriptor, as described here
http://dev.w3.org/csswg/css-device-adapt/#zoom-desc
used to zoom the entire viewport ('screen').
it also happens to zoom individuals elements in a lot of browsers, but not all.
css3 specifies transform:scale should be used to achieve such an effect:
http://www.w3.org/TR/css3-transforms/#transform-functions
but it works a little different than the 'element zoom' in those browsers that support it.
As Joshua M pointed out, the zoom function isn't supported only in Firefox, but you can simply fix this as shown:
div.zoom {
zoom: 2; /* all browsers */
-moz-transform: scale(2); /* Firefox */
}
Related
I have a css file with a class with zoom: 1.
I get the following error on the browser console.
This page uses the non-standard "zoom" property. Instead, you can use calc (), or "transform" together with "transform-origin: 0 0".
How do you convert the property from zoom to transform or calc?
ThankYou
You can find a description and recommendation on the MDN web docs:
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
recommendation:
The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.
demo:
div.t1 {
zoom: 0.5;
}
div.t2 {
transform:scale(0.5);
transform-origin: 0 0;
}
<div class="t1">Hello World</div>
<div class="t2">Hello World</div>
There is a print setting (Scale) in Chrome that I would like to emulate.
In IE11, I have added in the css and that seems to fix it but not in Chrome.
#page {
size: A4 portrait;
margin: 1mm 1mm 0 5mm;
}
In Chrome, I have to manually change the scale to 50 to fix it. I have tried in css
zoom: 50%
transform: scale(0.5);
UPDATE
Now I know why it is working in IE11. Nothing to do with setting the A4 size.
Looks like IE has a 'Shrink to Fit' settings that's turned on by default.
I don't think there is a way to do in CSS.
Finally found the answer.
It is because of the bootstrap css.
I implemented the fix below and it seems to work for now.
https://github.com/twbs/bootstrap/issues/12078
You cannot provide zoom in #page. However you can set zoom to parent container inside #media print. You can do something like this
#media print: {
.container: {
zoom: 50%;
}
}
Here container class is applied to parent, so when you print it entire screen will be scaled to 50%.
As per documentation #page only support size, marks and bleed. More details available over here https://developer.mozilla.org/en-US/docs/Web/CSS/#page.
For more details about using print css you can read beautiful blog by Racheal Andrew. https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
You can check pen here https://codepen.io/sandipnirmal/pen/ajWWgp.
Following are screenshots:
Chrome Scaling:
Media Print with zoom: 50%
Those are User settings you are trying to manipulate and you cannot alter the Scale.
Try this out:
#media print {
body {transform: scale(.5);}
table {page-break-inside: avoid;}
}
I have the following div:
<div id="views" style="margin-top:34px; margin-left:35px;">
// code...
</div>
this works perfect for me in all explorers but in safari in order to work perfect I need to set margin-top: -40 px; Any idea which is the easiest way to do this? I mean to make is select browser and if safari to apply margin-top: -40 px;
You could try to set specific vendor prefixes (although chrome and safari are both webkit)
this way you could set different styles for different browsers.
Vender Specific Prefix
Or the much more difficult way... detecting the browser and assigning CSS
Browser Detection
You should post some code though, I feel this problem your having could be avoided in a much more graceful manner.
Take out your inline styles.
Detect the browser by JavaScript,
add a class of .safari to the body tag if Safari is detected, then have your general
and Safari specific styles like this:
CSS:
#views {
margin-top:34px;
margin-left:35px;
}
.safari #views {
margin-top:-40px;
margin-left:35px;
}
Safari styles will be applied to Safari due to higher CSS specificity.
Most of us know the simple opacity CSS rule, but recently I stumbled upon filter which can have opacity(amount) as it value - among other things. But what exactly is the difference between the two?
filter: opacity() is similar to the more established opacity property; the difference is that with filter: opacity(), some browsers provide
hardware acceleration for better performance. Negative values are not
allowed.
filter: opacity() applies transparency.
A value of 0% is completely transparent. A value of 100% leaves the
input unchanged. Values between 0% and 100% are linear multipliers on
the effect. This is equivalent to multiplying the input image samples
by amount. If the “amount” parameter is missing, a value of 100% is
used.
Source: https://css-tricks.com/almanac/properties/f/filter/
/*
* -----------
* filter: opacity([ <number> or <percentage> ])
* -----------
*/
.filter-opacity {
filter: opacity(0.3);
height: 5rem;
width: 5rem;
background-color: mediumvioletred;
}
/*
* -----------
* standard opacity
* -----------
*/
.just-opacity {
opacity: 0.3;
height: 5rem;
width: 5rem;
background-color: lawngreen;
}
<div class="filter-opacity">
filter-opacity
</div>
<div class="just-opacity">
just-opacity
</div>
I've found some difference between them both, especially in the Chrome browser.
If we set the CSS opacity property to an iframe tag, then we'll not be able to click any links inside this frame (I guess, it's a protection from clickjacking attack) while filter: opacity(0) allows us to click any links. I don't know, maybe it's an omission from Chrome developers' side.
filter in CSS had some different runs, namely for FireFox and MSIE.
In MSIE 5.5 on through 7, filter, also known as Alpha Filter, actually makes use of MSIE's DX Filter (no longer supported). However, in order to be more CSS2.1 compliant, in IE8 MS introduced -ms-filter to replace filter. The syntax is different in that the value of -ms-filter must be encased in quotes. Eventually, IE9 brought deprecation to this method and as of IE10, it is no longer used.
Another interesting note here, if you're wanting full compatibility for older IE, then you must make sure use of filter and -ms-filter must be very specific. For example, the following does not work in IE8 running IE7 compat mode:
element {
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
-ms-filter must come before filter in order to get more out of older IE compatibility.Like so:
element {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
FireFox made use of filter as an experiment gone awry. I believe the original idea was to mock what IE was doing in using the Direct X engine. There was even a browser specific version, as there was for most browsers at one time. Eventually, HTML5/CSS3 announced use of the filter namespace and it now has a new purpose.
As of CSS3, filter now has a whole new meaning! Firefox docs stay open as if they plan to expand on this, though I've yet to see it (however they do crash JS if your CSS is not to its liking now!). Webkit (which will probably become standard in next update to CSS3) has started to implement filter to the point you can almost "photoshop" images for your site!
Since filter is changing so much, opacity would be the preferred method to use, however, as you can see, to be completely cross-browser compatible means being very thorough.
Browser specific alternates:
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: "progid:DXCLASS.Object.Attr(value)";
See Also:
What's compatible with opacity?
What's compatible with the newer filter?
keep in mind, not the same as Older IE's filter
I have a problem with this website: http://paulverhaeghe.psychoanalysis.be
In every browser the menu displays as expected, but the menu is not visible in ie8 on WindowsXP. I have already changed z-index but no difference.
I've looked a thousand times, but can't find anything. Maybe you have a more clear vision.
Every help is welcome!
Thanks in advance.
Greetings,
Tim
Ok, I solved it. Really stupid. One of my divs was placed in an other style-sheet (skin.css used for a javascript carousel) (dreamweaver sometimes uses an other style-sheet when working in designmodus). Probably ie8 didn't pick this line of code up: "display: block; position: absolute;". Another example of the importance of "clean coding" :).
Douglas, thanks for your help!
I think I may have an idea after viewing in a few different browsers.
I noticed in your css that you used 'opacity'. This is not a cross browser solution.
IE compatibility note
If you want opacity to work in all IE versions, the order should be:
.opaque {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
filter: alpha(opacity=50); // second!
}
From: http://www.quirksmode.org/css/opacity.html
some other things to try also:
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}