Re:Uses for CSS Custom Properties
by wolfgang42 on Wednesday December 18, 2019 @12:44PM
(#21827288)
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.
Re:Uses for CSS Custom Properties
by true_religion on Wednesday December 18, 2019 @12:05PM
(#21826883)
You can intercept copy and paste using JavaScript.
i use this for simple e-mail spam protection: https://stackoverflow.com/a/41566570/1216595