Protect e-mail address with CSS only

2019-01-30 02:32发布

站内问答 / HTML/CSS
582 11 4

I want to protect my e-mail address on webpages.

But I don't know JavaScript and PHP. I know only HTML and CSS.

So, please help me how to protect my email address with CSS only.

11条回答
姐就是有狂的资本
2楼-- · 2019-01-30 02:52

As you likely know: Obfuscation techniques can't be foolproof and harvester bots will continue to improve. There are a number of arguments against obfuscation.

That being said, here are some additional techniques to the rather interesting ones you already mentioned.

HTML techniques:

  1. Using html comment signs or substituting html entities has some years ago already been shown to be a pretty weak approach.

  2. Using an image instead of text is a pain for most users, including the non-visually impaired as they can't cut and paste. It works well though.

  3. One interesting pure HTML approach that allows for using a hyperlink was suggested a while back.

    <a href="mailto:jhonnotspam@gmail.com?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text 'notspam' from the address before sending your email.">Email me.</a>

CSS techniques: These are of course not fool proof either. Besides what you've mentioned already:

  1. Using CSS display:none is also useful. Bots that simply strip out style tags will include the hidden text in the harvested address.

    jhon<span style="display:none">-anti-bot-bit</span>@gmail.com.

  2. A web icon font could be used to pull in an @ icon and it's possible to do this in a way that won't trip up screen readers. I've not seen a web icon font with an @ icon for obvious reasons, but this would work.

Update: Font Awesome now has an @ icon. Maybe someone suggested it after seeing this post ;-).

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
3楼-- · 2019-01-30 02:54

To disable people to copy it try like:

span.email {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

And HTML:

<span class="email">jack@gmail.com</span>

JSFIDDLE

And to protect against bots use CSS Codedirection:

<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe@zyx
</span>
查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
4楼-- · 2019-01-30 02:57

I would recommend using JavaScript if possible over CSS and JavaScript as it can manipulate the dom. Easily you could do it with code like 

<div onclick="document.write('joe@' + 'joemaller.com')">Email Me</div>

This a simple but not ideal solution.

JFiddle; http://jsfiddle.net/yFKUD/

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
5楼-- · 2019-01-30 02:58

One of the simple and effecting ways of embedding emails in html is by using hex values! for example hex value for john@smith.me is:

%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65

and you can use the following tag in your HTML Code

<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65">email me</a>

This is a really simple and effective way of embedding email in a webpage.

you have hided the "maito:" and the email in this way.

you can use this tool to generate the %64 hex code

you can also use this tool to generate the hex code

查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
6楼-- · 2019-01-30 03:00

It's very simple. You can protect your email address with only HTML & CSS. You don't need to know about PHP or Java script. Try below code.

Simple HTML and CSS code:

<!doctype html>
<html>
<head>
    <title>Protect e-mail with only css</title>
    <style type="text/css">
        .e-mail:before {
            content: attr(data-website) "\0040" attr(data-user);
            unicode-bidi: bidi-override;
            direction: rtl;
        }
    </style>
</head>
<body>

<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>

</body>
</html>

Output of above code:

jhon@gmail.com

Please note:

Here I'm just used two extra attributes.

1) data-user write your e-mail id user name in reverse.

2) data-website write your e-mail id website in reverse.

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
7楼-- · 2019-01-30 03:04

You can combine the two answers above (Ans1 & Ans2) to make the mailto works with the css for usability.

<style type="text/css">
    .e-mail:before {
        content: attr(data-website) "\0040" attr(data-user);
        unicode-bidi: bidi-override;
        direction: rtl;
    }
</style>
<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;%6A%6F%68%6E%40%67%6D%61%69%6C%2E%63%6F%6D">
    <span class="e-mail" data-user="nhoj" data-website="moc.liamg"></span>
</a>

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)