Comments (9)
Hi, this feature is actually not supported.
document.createElement("div").style.backdropFilter; // returns undefined in Safari
You can try a minimal example:
<div style="background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/balloon.jpg'); width: 250px; height: 300px; display: flex; justify-content: center; flex-direction: column;">
<div style="backdrop-filter: blur(10px); text-align: center;">
<p>Hello</p>
</div>
</div>
This doesn't work in my Safari 16.3. The reason why the live example below works is because it uses the -webkit-backdrop-filter: blur(10px);
fallback, which is mentioned in the compat table:
Implemented with the vendor prefix: -webkit-
from bob.
Does that not count as support? It just seems strange to me that the demo up top would show an error like that when it's trivial to make it work (just add the prefix).
from bob.
Well, the demo demonstrates the un-prefixed API. It could try to automatically "polyfill" with prefixes, but that would be hard to generalize since you can edit the CSS however you wish. In that case this would be re-purposed as an enhancement request.
from bob.
We could apply autoprefixer for CSS properties used in the initial example and make it work even if the user changes a property value. Making it work for all possible properties would probably significantly increase bundle size, but I think users very rarely edit the example to a completely different property, so it's not really needed.
from bob.
I reckon the bundle size won't be huge (especially since it can be lazy-loaded), but wondering whether it would create more confusions (why something is allegedly not available but still working, etc.)
from bob.
@Josh-Cena 256kb minified. I guess for CSS properties that were entered by the user in a "choice box", we could just apply all vendor prefixes without even checking if they exist, but it wouldn't work for rare cases in which property is implemented under a bit different property name.
from bob.
FWIW we use prefixes manually in examples sometimes: https://developer.mozilla.org/en-US/docs/web/css/box-decoration-break.
I think applying but hiding prefixes (if that is the suggestion) would be very confusing for people.
from bob.
@wbamberg How about if the editor would show either prefixed property or unprefixed property, based on what it supports?
In the backdrop-filter
example, Chrome would show:
from bob.
I think this would be fine. Main thing is that what people see in the editor should be what's actually getting used :).
from bob.
Related Issues (20)
- Wrap localStorage read/write access in try-catch block
- Insufficient color contrast in the interactive examples HOT 1
- Utilize ES6 features HOT 3
- css-examples: Regressions in bob v3
- Invalid CSS after editing isn't highlighted
- CSS editor: ctrl-X ctrl-V doesn't work
- Copy to clipboard from 'Try it' is not working
- Horizontal scrollbar obscures content HOT 2
- Interactive Example Search Box looks broken / not intended HOT 3
- Consider extending feature detections for CSS functions HOT 4
- Interactive examples ignore changes of color schemes when features are not supported HOT 2
- in "try it" section"copy" button is not functioning!! HOT 1
- Remove feature detection and hiding of demo's in unsupported browsers HOT 10
- Code snippet copy button not working HOT 6
- Add a confirmation dialog when pressing "Reset" on the "Try it" live code examples
- Update WASM playground to support the latest features
- Add link to source files
- Testing interactive examples with new BOB changes HOT 10
- Is auto-deployment of new/updated example pages broken? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bob.