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>
Related
I'm building a site locally (so I can't show it here) that has elements that apply mix-blend-mode: screen; when hovered on. They're images within slides in a slideshow that I'm using Slick for. When I implement Slick to run the slides, the blend mode stops applying when hovering over the elements. From what I found last night, this is a common issue with Slick.
https://community.shopify.com/c/Technical-Q-A/Mix-blend-mode-breaks-after-scolling-Brooklyn-theme/td-p/593470
The person in the above link seems to have the same issue, but the proposed solution didn't work for me because I'm not using the slick theme, and therefore not using theme.scss.
It seems as though transform: inherit !important; might be the solution, but I'm not sure how to implement it as I don't understand how the transform is being overridden by Slick.
css 3d transforms break mix blend mode, fortunately slick still runs ok without it
but you need to add this to your CSS
.slick-slider .slick-track,
.slick-slider .slick-list {
transform: inherit !important;
}
and the no-transform rule to the js initializer
$(".slider").slick({
useTransform: false
});
Is there any disadvantage in this example?
.class {
max-height: 500px;
max-height: 50vh;
}
I want to do this because if vh is not supported in some browser, that browser will apply max-height: 500px; and ignore the line of vh.
This is absolutely fine. They are cascading, so the last (supported) style with the same level of importance always wins. It is a common case to override some CSS Rules with another class, so the browser has multiple instances of the same property to choose. So why shouldn't this be allowed in the same class? I can see no disadvantages, except for the extra line of code, but if you have to support old browsers, you need a fallback.
I'm assuming you know that 500px will not always be the same width/height as 50vw/vh, so yeah, a disadvantage would be, that it may looks different in older browsers. But from a syntactic view, there is nothing wrong.
I think there is a link which can help you.
How to write css fallbacks for vh vw
If browsers encounter a property or a value that they don't understand, they ignore it and move on.
It's okay to provide a fallback for browsers that doesn't support vh or vw.
h1 {
font-size: 36px; /* Some tweener fallback that doesn't look awful */
font-size: 5.4vw;
}
There is nothing wrong in it, if Modernizr have this check already use it to check for unsupported browsers.
The metrics which you are using depends upon your window and object size. Consider both while using px and vh at the same time.
No,
The vh will have priority (cause it's the last max-height in your css file) but only if it's supported in the current browser.
But vh is supported in a lot of browser (93.19%) :
https://caniuse.com/#search=vh
So for me it's okay and I never hear about a bad use of multiple same properties in one class
Yes. There is a disadvantage. 50vh depend on viewport of the device and its equal to the 50% of viewport where as the 500px is the pixel value of device both are not equal at the same time.
secondly, if the browser support both the last one is executed i.e. 50vh.
I hope you get my point. For any query please comment. All the best.
I want to be able to rotate, in CSS via an attribute i.e.
<my-object data-angle="225"></my-object>
The CSS I have so far is
transform:rotate(attr(data-angle)deg);
But this throws an error, what is the correct syntax?
I'm not holding out any hope that they'll ever fully implement according to the standard that Asim points out, but the good news is that you can achieve nearly the same thing with Custom Properties aka CSS variables
There's a Javascript API for DOM elements to get and set these variables
el.style.setProperty('--foo', 'my custom property value')
or you can even set it directly in the HTML if you don't mind the inline style attribute:
<div style='--foo:"my custom prop val";'>
Here's an example (your mileage with this snippet may vary depending on your browser's support for custom properties):
:root {
--rotation: 5deg;
}
.rotate {
padding: 0.2em;
transition: transform .2s;
will-change: transform;
}
.rotate:hover {
transform: rotate(var(--rotation));
}
.more {
--rotation: 15deg;
}
<button class='rotate'>rotation</button>
<button class='rotate more'>more rotation</button>
<button class='rotate' style='--rotation: 30deg;'>yet more rotation</button>
That's not possible in current browsers out there. But the spec says:
The attr() CSS function is used to retrieve the value of an attribute
of the selected element and use it in the style sheet. It can be used
on pseudo-elements too and, in this case, the value of the attribute
on the pseudo-element's originated element is returned.
The attr() function can be used with any CSS property, but support for
properties other than content is experimental.
So it will be supported in near future.
Here's the MDN doc.
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.
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 */
}