Uses for CSS Custom Properties | Hacker News Reader

Uses for CSS Custom Properties

css-irl.info

59 pointsLiriel16 comments

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.

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

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.

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).

You can not copy the email address, it will be copied backwards. Then you might as well show a image with the address because you already lost the ability to copy and paste.

You can intercept copy and paste using JavaScript.

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

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

https://caniuse.com/#feat=css-variables

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

It's only IE 11 that doesn't support it, you can probably drop that now depending on your customer base.

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

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

They talk about reasons for choosing `--` here: https://www.xanthir.com/blog/b4KT0

TL, DR: There was discussion of using properties that look like `$foo` to define variables, but if they used `$foo` for variables, they would be unable to use it for future "variable-like" things. CSS custom properties behave differently from CSS pre-processor variables and they wanted to make that clear. Additionally, it’s to provide a way for custom properties to be used in any preprocessor.

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.

> 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.

Reply on news.ycombinator.com