02 August 2018 09:00
CSS - PRO TIPS - CSS element() function - [: -moz-element()]Vincent De Oliveira
element() brings CSS design to a new level, in an easily way. Few ideas that comes to my mind (some that I've already used since the last 4 years):
- when you have to deal with duplicated content in advanced effects
- live thumbnails of previous/next slides in a slideshow
- live zoom over an image, for example in an e-commerce product page
- animated background, using CSS Animations or by referencing a video, canvas or SVG
- faking backdrop-filter or filter()
- watermark with multiples backgrounds from Lea Verou idea
- and anything you’re currently thinking of ;)
Few things we can note:
- prefixed for now in Firefox: -moz-element()
- impact on rendering performance when using multiple reference. Not as bad as CSS filters, but still something you have to consider
- there’s a CanIUse support page
- Issue Chromium
- Issue WebKit
- No mention from IE Platform Status
1
(1 marks)