Skip to content
loading...
Cover image for 🎩 JavaScript Enhanced SCSS mixins! 🎩 - CSS element() function polyfill

🎩 JavaScript Enhanced SCSS mixins! 🎩 - CSS element() function polyfill

adam_cyclones profile image Adam Crockett github logo Updated on ・1 min read  

JavaScript Enhances Scss mixins (5 Part Series)

1) 🎩 JavaScript Enhanced SCSS mixins! 🎩 - CSS element() function polyfill 2) 🎩 JavaScript Enhanced SCSS mixins! 🎩 - Using canvas for unique UI special effects 3) 🎩 JavaScript Enhanced SCSS mixins! 🎩 - Making CSS scopes with CSS variables. 4) 🎩 JavaScript Enhanced Scss mixins! 🎩 - Intelligent Accessibility with css variables 5) 🎩 JavaScript Enhanced Scss mixins! 🎩 concepts explained

I was sad to see that its been 8yrs and only Firefox supports css element().

Fortunately with the help of some clever scss and css variables. I have been able to implement a polyfill. There are some limitations and I would not call it performant but its not the worst I have ever seen.

I will see if I can get a better version working with the Paint Api.

You might be thinking, this is useless?

well compositing live blur effects would be fairly simple using this approach, something I have sort of done before in other pens but not as elegantly as this.

twitter logo DISCUSS
Discussion
markdown guide
Classic DEV Post from Jun 26 '19

The 7 most important software design patterns

Software design patterns provide templates and tricks used to design and solve recurring software problems. Here are the 7 most important.

Adam Crockett profile image
I work at ForgeRock as a Front End Engineer, I play with all sorts really. Lately WASM is my toy of interest.