
Uses for CSS Custom Properties - Liriel
https://css-irl.info/7-uses-for-css-custom-properties/
======
codyb
Wow, that’s really neat, I never thought of using css variables in this
manner. Although, to be fair, I never knew they were called custom properties
either.

CSS and HTML are pretty powerful as a duo these days, I’ve been doing some
freelance work with no JavaScript lately and you really can knock some pretty
sweet features right out of the park from collapsible menus, animations,
validations with regex’s (and many predefined types like url and email).
Combined with grid, flexbox, and the easily read semantic elements I’d say
this is the best vanilla web development has ever been.

------
cyptus
usign css attr() for getting html data- attributes is also very interesting.

i use this for simple e-mail spam protection:
[https://stackoverflow.com/a/41566570/1216595](https://stackoverflow.com/a/41566570/1216595)

~~~
wolfgang42
As others have noted, this is a neat-looking solution but breaks a lot of
things. In addition to copy/paste:

* Middle-clicking to open my webmail in a new window

* “Right-click > Copy link address” because my browser doesn't know about my email client

* Possibly screen readers (I don’t know this one for certain)

* Keyboard accessibility: I can tab onto the link, but Enter doesn’t activate it

* Probably some other things I haven’t thought of

Since you’re requiring JavaScript anyway, here's a better solution that
doesn't decrease resistance to scrapers¹ and fixes the above problems by
turning all of your .cryptedmail tags into proper links that work the way
users expect them to.:

    
    
        document.querySelectorAll('.cryptedmail').forEach(a => {
            const email = `${a.dataset.name}@${a.dataset.domain}.${a.dataset.tld}`
            a.href = `mailto:${email}`
            a.innerText = email
        })
    

¹If they’re running JS, they can also just tell Selenium to intercept
navigation and then click every link on the page.

~~~
cyptus
sure this breaks the copy and right-click implementation, but most of the
users dont need it and will just do a normal click to get in touch. If this is
the pain i need to go to receive zero spam mails from page-crawlers, i go for
it. Advantage to img-solution is full use of css fonts and text aligns. Also
any js-solution which would render the plain email into the DOM will receive
spam, as crawlers do already execute js before parsing (also think of SPA).

------
egfx
This is cool. You can also tool around with
[https://gif.com.ai](https://gif.com.ai) to bring out creative use cases of
such properties.

------
aldoushuxley001
Wish they had a section that detailed the browser support for them as well, as
that seems to be the major drawback.

~~~
leepowers
[https://caniuse.com/#feat=css-variables](https://caniuse.com/#feat=css-
variables)

~~~
egfx
>93% support doesn’t seem much of a drawback.

------
ape4
\--l looked like C++ pre-decrement on first read.

~~~
pintxo
Anyone knows the reasoning for using `--` as the prefix for variables?

~~~
philo23
Presumably they can't just use one dash to avoid clashes with vendor prefixes
(-moz-, -webkit- etc.)

I don't think I've ever actually checked, but I always assumed valid CSS
property names can only be alpha-dash strings.

~~~
have_faith
> I always assumed valid CSS property names can only be alpha-dash strings

They are, although they also aren't allowed to start with a number. But like
most things on the web you're not supposed to do some browsers will still let
you get away with it.

