In some way it escaped my information till lately that the CSS component() perform is supported in Firefox. In reality, it has been for an excellent whereas (though it nonetheless wants a prefix). “What’s the component() perform?”, I hear you cry. It’s a approach to render a HTML component as a picture worth to be used in our CSS. The instance given on MDN is utilizing a picture rendered on a <canvas> as a background picture. That’s a reasonably cool use case, though the CSS Paint API already permits us to create a paint worklet and use it in our CSS – try this tutorial by Temani Afif. Maybe that’s one purpose why browser help appears to have stalled?
component() as masks
What I’m all for is having the ability to use any component, significantly as a masks for one more. An instance is a textual content component, corresponding to a heading. We are able to apply the component as a masks by referencing its ID:
img {
mask-image: -moz-element(#masks);
}What’s cool about masking is it behaves in a lot the identical manner as a background. We are able to apply properties corresponding to mask-size, mask-repeat, and so forth. to get the impact we wish.
On this demo I’m utilizing a heading (with a gradient utilized) as a picture masks.
See the Pen
Masking one component with one other by Michelle Barker (@michellebarker)
on CodePen.
Accessibility
There are some apparent points right here, not least round accessibility. What’s one of the best expertise for somebody utilizing a screenreader? If the textual content masks is repeated a number of occasions, wouldn’t it be higher to have a number of parts? Or preferable to make use of aria-hidden to cover the component from a screenreader solely, and describe the ensuing impact in another manner (aria-label or aria-labelledby, as an illustration). An <h1> won’t be the correct selection right here, anyway. The solutions to those questions will invariably rely on context, differing from challenge to challenge.
The opposite concern is visually hiding the unique component. As we’re utilizing it as a masks, we’d not need the unique on show. You may be accustomed to utilizing a utility class to visually cover parts, whereas guaranteeing they’ll nonetheless be learn by screenreader software program:
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
peak: 1px;
overflow: hidden;
place: absolute;
white-space: nowrap;
width: 1px;
}(Scott O’Hara has some extra info on this, and different strategies for hiding content material.)
This received’t work for this case, because it’ll render the component — and due to this fact our masks — invisible! Within the demo, I’ve plumped for hiding it offscreen:
h1 {
place: absolute;
left: -100%;
}Animation
One other attention-grabbing use case might be utilizing an animated component as a masks. Nevertheless, the efficiency is fairly poor, as we are able to see from this demo. However it’s significantly better when used as a transition:
See the Pen
Masking a component with an animated component by Michelle Barker (@michellebarker)
on CodePen.
Do we’d like component()?
It’s price stating that we are able to obtain a variety of these results at the moment with SVG. However as somebody who enjoys nothing higher than tinkering with CSS, I’d like to see widespread help for component(), for artistic coding if nothing else, and there are little doubt loads of use instances I haven’t but thought of.
Vincent De Oliveira has an glorious write-up from some time again, together with some artistic examples. A few of the demos look like damaged in trendy browsers, however there are movies, and it’s nice to get some inspiration for what might be attainable.
There are at the moment a number of points famous within the specification, however it might be nice to see a few of these get resolved and the spec transfer ahead.
