Thanks Zoran for this tip. Is it possible, while using this css technique to maintain the mailto: clickable functionality. tag ot any html tag get stripped if put directly in the mailto: prefix.
You're welcome, Alexandre! Yes, it's possible with a bit of JavaScript. I have a follow-up video where I explain how to make it work: ua-cam.com/video/WhwvCAbRJVE/v-deo.html Does this help?
Thank you, Tim, for watching! Yes, it should work the same. 🙂 And if you want to make the email clickable, I have a follow-up video on how to set it up here: ua-cam.com/video/WhwvCAbRJVE/v-deo.html
Thanks for your question! 🙂 This is accessible; the screen reader will read the email correctly as it understands and parses CSS. I've tested it in VoiceOver. The problem with this is that it isn't clickable and therefore usable. I've addressed this in a follow-up video. Here is the link, in case you want to check it out: ua-cam.com/video/WhwvCAbRJVE/v-deo.html
Can the Googlebot determinate the real adress in this case? In my view modern bots are based on the headless chromium framework. ( =load and render css / => puppeteer)
That's a fantastic question, Alfred! 🙏 I think that any bot that parses HTML and CSS can figure out the real address. Still, it's not as simple as just grabbing it from HTML, as the bot has to figure out that the part of the string is in tags which are hidden in CSS. I have't really played around with Puppeteer. Would this be a trivial task?
Yes, you're right, it's better to have a clickable link with mailto in href. But I personally don't find non-clickable emails that can be copied that useless. 🙂
@CSSWeekly ok, could you please give a use case where having a non-clickable email would be beneficial for a user? Keep in ming that we should not forget about accessibility
I don't think there are any use cases where the non-clickable link would be more usable than a clickable one. I always copy-paste emails (mainly because I'm using multiple email clients), so I don't find non-clickable emails less usable. But I'm surely an outlier here. There are some anti-patterns where you want to make it a bit more difficult for users to email you, in which case you'd prefer a non-clickable link. For example, when you want to guide people through a customer support system instead of direct email, as they won't provide all necessary details without additional guidance-but you still are required by law to show the email address. Or when the client wants to receive less authentic emails from users, and they insist you make it as difficult as possible to use the email provided-this really happened to me once. 😀 All that being said, it looks like I messed up and I need to record a follow-up with focus on clickable links. Thanks so much for all your feedback!
This method doesn't work at all. It will hide the mail address from spam bots, but it doesn't allow real users to send an email to you without typing it over by hand. An email address should always be clickable, so users can click on it to write an email.
Yes, it is easier to just click on the link with mailto in href, but you can still copy-paste the email address this way, you don't have to type it manually. I do it quite often and don't find it disruptive. 🤷♂️
You have timestamps in the video, so you can skip to the part that interests you. 😉 And there are nicer ways of giving feedback. Something along the lines of "get to the point sooner" would be constructive, and I'd appreciate it. You don't have to be rude and disrespectful. 🙂
So simple, yet so effective. I'll definitely apply this to my projects.
Thank you so much! I'm thrilled to hear this! 🙂
Nice tip! need to do this asap.
Thanks, Philip! I'm glad to hear this! 🙂
Thanks Zoran for this tip. Is it possible, while using this css technique to maintain the mailto: clickable functionality. tag ot any html tag get stripped if put directly in the mailto: prefix.
You're welcome, Alexandre! Yes, it's possible with a bit of JavaScript. I have a follow-up video where I explain how to make it work: ua-cam.com/video/WhwvCAbRJVE/v-deo.html
Does this help?
Didn't know this method! So simple yet so effective. :)
Thank you, my friend! 🙂
Thanks for sharing Zoran, if your emails are pulled from a directory e.g. should the same principles apply?
Thank you, Tim, for watching! Yes, it should work the same. 🙂
And if you want to make the email clickable, I have a follow-up video on how to set it up here: ua-cam.com/video/WhwvCAbRJVE/v-deo.html
wooow i never though this way. you are genius. thank you
I’m thrilled you think so! Thanks so much for watching and commenting! 🙂
Wow! Thank you very much!
You're very welcome! I'm thrilled you found it helpful! 🙂
how accessible is this method? how do screen readers handle this?
Thanks for your question! 🙂
This is accessible; the screen reader will read the email correctly as it understands and parses CSS. I've tested it in VoiceOver.
The problem with this is that it isn't clickable and therefore usable. I've addressed this in a follow-up video. Here is the link, in case you want to check it out: ua-cam.com/video/WhwvCAbRJVE/v-deo.html
Can the Googlebot determinate the real adress in this case? In my view modern bots are based on the headless chromium framework. ( =load and render css / => puppeteer)
That's a fantastic question, Alfred! 🙏
I think that any bot that parses HTML and CSS can figure out the real address. Still, it's not as simple as just grabbing it from HTML, as the bot has to figure out that the part of the string is in tags which are hidden in CSS.
I have't really played around with Puppeteer. Would this be a trivial task?
document.querySelector(".email").innerText vs. document.querySelector(".email").textContent
Won’t this grab the entire text, including the false/fake part?
wow.. briliant idea
Thanks so much, Radi! 🙏
Great
Thanks so much; it means a lot! 🙏
Nice technique, but now that spam bots know about it, they will start working on it.
Thanks Zoran!
That's very possible, Ahmad! 🙂
Perhaps we should look into obfuscating our CSS as well. 🤣
@@CSSWeekly And next obfuscating what obfuscates our css😁
This will never end🤦♂
Down the CSS rabbit hole we go... 🤪
OMG, LOL. So Easy.
It really is! 🙂
It's a problem that it's not clickable. It's inconvenient and untrackable.
Yes, it would be better if it was clickable, but I don’t mind if I can copy-paste it. 🙂
What exactly do you mean by untrackable?
@@CSSWeekly untrackable as a website event (GA4)
Oh, I haven't thought of this. Thanks so much for all your feedback, Mikael!
in a real world all email links should be clickable. If you have a clickable link, you can't use this "Obfuscation". Video is kinda useless
Yes, you're right, it's better to have a clickable link with mailto in href. But I personally don't find non-clickable emails that can be copied that useless. 🙂
@CSSWeekly ok, could you please give a use case where having a non-clickable email would be beneficial for a user? Keep in ming that we should not forget about accessibility
I don't think there are any use cases where the non-clickable link would be more usable than a clickable one.
I always copy-paste emails (mainly because I'm using multiple email clients), so I don't find non-clickable emails less usable. But I'm surely an outlier here.
There are some anti-patterns where you want to make it a bit more difficult for users to email you, in which case you'd prefer a non-clickable link. For example, when you want to guide people through a customer support system instead of direct email, as they won't provide all necessary details without additional guidance-but you still are required by law to show the email address.
Or when the client wants to receive less authentic emails from users, and they insist you make it as difficult as possible to use the email provided-this really happened to me once. 😀
All that being said, it looks like I messed up and I need to record a follow-up with focus on clickable links. Thanks so much for all your feedback!
This method doesn't work at all. It will hide the mail address from spam bots, but it doesn't allow real users to send an email to you without typing it over by hand. An email address should always be clickable, so users can click on it to write an email.
Yes, it is easier to just click on the link with mailto in href, but you can still copy-paste the email address this way, you don't have to type it manually. I do it quite often and don't find it disruptive. 🤷♂️
Almost 3 mins into the video, still just blabber. Horrible presentation.
You have timestamps in the video, so you can skip to the part that interests you. 😉
And there are nicer ways of giving feedback. Something along the lines of "get to the point sooner" would be constructive, and I'd appreciate it. You don't have to be rude and disrespectful. 🙂