| Summary: | Support for type() function in image-set | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Oliver Williams <oliverwilliams345> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | ntim, rreno, sabouhallawa, simon.fraser |
| Priority: | P2 | ||
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Safari definitely supports the type function, it's just that it chooses to use the PNG, which might be the wrong choice fwiw. The standard doesn't specify how a User Agent is supposed to choose an image from all the supported options. The way the algorithm is implemented right now in WebKit (no guarantees it's going to stay this way forever) we happen to choose the last image in your example set. If you really want webp in this scenario you can swap the order of the image-set-options (arguments) and WebKit will choose the webp image. Step two of the algorithm says we should remove duplicate resolutions from the set but then you'd get the webp as written but the png if you changed the order of the image-set-options. I'm not sure that's really correct either though it would have given you the image you expected in this example. So in summary yes we do support type() but it's left up to the User Agent which image it chooses from the given set. You shouldn't rely on any specific image being chosen from the set of supported images as browsers are free to choose whichever one they want after filtering. As of today our algorithm will pick either the first image whose given MIME type is supported and whose resolution is greater or equal to the device resolution or the last valid image in the given set. The spec explicitly mentions the use case I am talking about: https://www.w3.org/TR/css-images-4/#example-0c5931ca Safari does opposite of other browsers, which is clearly a web compat issue. The proper behaviour is implemented in Firefox stable and Chrome Canary. Ah ok I see what the issue is. The example in the spec is relying on us ignoring duplicate resolutions we have already seen in the set. Thanks for your report. *** This bug has been marked as a duplicate of bug 257100 *** |
CanIUse claims that Safari Technology Preview fully supports image-set(). This is inaccurate as Safari still does not support specifying a type: body { background-image: image-set( "house.webp" type("image/webp"), "house.png" type("image/png") ); } Safari will use the png even though it supports webp.