i have a problem with image-set property when i use it with an avif file as first option to render in Microsoft Edge. The fallback doesn't work( as you know, Edge doesn't support avif type yet ) and Edge load the avif file even if can't support it. Is there a way to make the fallback works properly??
Note: I am using autoprefixer in my gulp file so it isn't a prefix problem.
.speaker__imagen { background-image: url(../img/bg_1.png); background-image: image-set( url(../img/bg_1.avif) 1x, url(../img/bg_1.webp) 1x, url(../img/bg_1.png) 1x ); }
I want to leave the image-set property without taking off the avif option from the render option's list
The fallback is the "fallback" to image-set/-webkit-image-set, so apparently it does not work if image-set/-webkit-image-set works even though .avif is not supported in Edge. Interestingly, Edge and Chrome share the same prefix -webkit so you'll have to treat them as the same.
Actually, you can use type() to provide alternative image formats, which should work in a more favorable way than background-image: url() as the fallback. However, type() has not been supported on Chrome and Edge yet since in the doc they said :
our implementation has not been per the spec, as only URL values were
accepted for the image, and only resolutions with 'x' as a unit were
accepted.
Additionally, Edge's support for .avif may be on the way because we have a new command line flag --enable-features=msEdgeAVIF on Edge Canary, which means the Dev Team may have been testing the implementation.
Related
I want to use .avif and .webp for images on my website, remembering that I need provide fallback for unsupported browsers. Docs https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set()#using_image-set_to_provide_alternative_formats suggest that -webkit-image-set should help:
background-image: url("/public/header-fallback.jpg");
background-image: -webkit-image-set(url('/public/header.avif') type('image/avif'), url('/public/header.webp') type('image/webp'), url('/public/header.jpg') type('image/jpeg'));
This works in Firefox (avif is skipped and webp is used) but Chrome gives me Invalid property value (entire style is ignored and 'header-fallback.jpg' is used). Why?
It's seems that chrome not fully supports image-set
our implementation has not been per the spec, as only URL values were accepted for the image, and only resolutions with 'x' as a unit were accepted.
source
To make it work with chrome try remove the type and add 1x instead
url('https://url.avif') 1x
I've got this SCSS code:
.gradient-text {
color: mix(#cea427, #fbe758); // Fallback to average of 2 colors
background: -webkit-linear-gradient(0deg, #cea427, #fbe758);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Fiddle
At first I just wanted to make this code work in webkit-based browsers and then add different approach for firefox, but I've found out that at least latest nightly firefox runs this code too, even if it's vendor-prefixed for webkit.
I won't worry if there was only one property, which can be either supported by firefox or not. But having 2 properties makes me nervous about the situation where only one of them is working. For example, supported -webkit-linear-gradient and unsupported -webkit-background-clip will work vastly different from my expectations. So, is there any way I can check browser support for multiple CSS rules and gracefylly switch to fallback if at least one of them is missing?
And also, is there any list of foreign vendor prefixes support (like -webkit- prefix support in FF)?
In these sort of situations, I always find it very helpful to check MDN. In this case, you can check the articles for linear-gradient, background-clip and -webkit-text-fill-color. Near the bottom, there is always a section titled Browser compatibility. It lists, in a table, browsers that support the CSS rules and in footnotes goes into specifics. For example, about the -webkit-text-fill-color, it says that
[1] This feature is implemented behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.
This should answer your question on why the -webkit- prefixed version is supported, and since when. Also note that at the top, the article mentions
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.
So: ye be warned.
In this particular case, you might be able to get away with what you want to do, at least in Firefox and Chrome. Other browsers... that's trickier.
Your other question is if you can gracefully switch to a fallback when a rule is not supported. Unfortunately, this is not possible in pure CSS. It is possible to write rules that specifically target Chrome or Firefox though, but I would advise against using those. You could maybe check for support using JavaScript, but that is something I wholeheartedly advise against.
Finally, "is there any list of foreign vendor prefixes support (like -webkit- prefix support in FF)?" Sort of. Again, MDN is usually very complete and up-to-date. Hope that helps.
I have a custom cursor working on Chrome and Firefox by using the CSS property, cursor. However, on Microsoft Edge, the cursor seems to have an offset. I have to aim above my custom cursor a bit in order to select items accurately.
Is there something I can do to fix this? Or is this some sort of limitation?
Edit: I should mention that I'm using a custom image as my cursor.
In both IE and Edge only .cur files are supported, see https://msdn.microsoft.com/en-us/library/aa358795(v=vs.85).aspx. (Edge supports other formats but not the interaction point definition as you mentioned in your comment to Martin Beeby's answer, rendering those pretty useless.) The .cur file allows you to define the interaction point. Just google for ".cur editor" and choose the editor that suits you to create a .cur file.
Since other browsers do support the definition for the interaction point, but not the .cur format, you must define two cursor properties in your css, the first with the .cur file and the second with a .png or other format and the interaction point definition. IE and Edge will ignore the second and for other browsers the .cur file will be overwritten, that way it'll work cross-browser.
div {
cursor: url(path/to/cursor.cur), auto; /*IE and Edge*/
cursor: url(path/to/cursor.png) 4 12, auto; /*Chrome, FF, etc.*/
}
One side note, be sure to read this (http://blog.stchur.com/2006/11/02/ie-bug-dealing-with-css-custom-cusors/) article. It's about a relative path bug in IE 6 & 7, but the bug is still around in IE 11. The bug seems resolved in Edge though (at least when I tried recently). So you need to fiddle a bit with the path to the .cur file to get it working on both IE and Edge. See the workarounds mentioned in the article.
In CSS you can pass in coordinates which specify the interaction point.
Perhaps adding these will help solve your issue?
/* Using URL and coordinates */
cursor: url(cursor1.png) 4 12, auto;
In order to draw with CSS3 using the box-shadow property combined with a border-radius:50% (to make circles), I would like to detect if the browser supports or not this percentage value for border-radius.
For example, Safari 5.1+ only supports it.
Is there a way to detect this or do I have to check the browser name and its version. The drawback for this second solution is of course that I have to know and list all the browsers and versions that pose problems.
Thanks!
You can use the Modernizr JS library to detect this feature; it'll detect support of CSS3 border-radius (among many many other things) and add a class .borderradius in browsers that do support it (and have JS activated, obviously)
If you don't want to load this resource, you can look at the source code on GitHub.
EDIT: better yet, you can custom build Modernizr to only test for this property and it'll give you a 2kB uncompressed script.
By checking Don't minify source below the custom code, you'll have a way smaller code to read, if that's your intent.
This tutorial shows a css blur example with
img {
+filter: blur(30px);
}
then goes on to mention "Note: + stands for vendor prefix". Why is a plus sign used here instead of a vendor prefix such as "-webkit-"?
It's shorthand copied from this authoritative tutorial site. On HTML5Rocks however they didn't neglect putting the correct hover on there, stating "Please apply relevant vendor prefix".
As such, +filter should indeed correctly be written as:
filter:blur(30px);
-o-filter:blur(30px); /* rather obsolete since Opera switched to Webkit */
-ms-filter:blur(30px);
-moz-filter:blur(30px);
-webkit-filter:blur(30px);
The origin is the Compass extension to SASS which allows this syntax as a real shorthand for vendor specific rules.
As you can see on this site however only Webkit currently supports filters. As such you can also ignore the -o- prefix for features that won't be added to Presto anymore anyway.