> 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.
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.
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.
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.:
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).
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.
16 comments
[ 3.4 ms ] story [ 42.4 ms ] threadI don't think I've ever actually checked, but 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.
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.
i use this for simple e-mail spam protection: https://stackoverflow.com/a/41566570/1216595
* 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.:
¹If they’re running JS, they can also just tell Selenium to intercept navigation and then click every link on the page.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.