Better Email Links: Featuring CSS Attribute Selectors
Published by Chris Coyier
What is an CSS Attribute Selector?
CSS provides a way to style elements based specifically on attributes of the link, rather than the type of element alone. For example, you already know that you can style a header element:
h1 { color: blue; }But you can actually get much more specific and style only header elements that have a title attribute:
h1[title] { color: blue; }You can take it even further, and only style header elements that have specific values of attributes:
h1[title="Go Home"] { color: blue; } /* Has the exact value "Go Home" in the title attribute */
h1[title~="Go Home"] { color: red; } /* Has the value "Go Home" somewhere in the title attribute */
h1[title^="Go Home"] {color: green; } /* Value of the title attribute starts with "Go Home" */
What is unique about Email Links?
An email link differs from all other links because it always begins with "mailto:", which is the command the browser uses to notify the operating system that the user wants to send an email to a specific email address with the default email program. We can use this similarity between links to our advantage, so that we can apply CSS styling to only email links.
Here is the rub:
a[href^="mailto"] { color: blue; }That will target all links with an href that begins with "mailto".
Finishing the styling
Now that we have those links targeted, we can do more than just make them blue. We can also make use of another powerful CSS technique, the "content" property. The content property literally allows you to add content to page elements, even content that you have pulled right from it's own attributes! Using a psuedo-selector, you specify where you wanted the content added, before or after.
Let's get fancy and pull the title attribute from our links and append them after the link itself, on the links hover state:
a[href^="mailto"]:hover:after { content: attr(title); }That will work, but it's going to append that text right after the link, so let's make sure the formatting looks good and add a little spacing and a > character to seperate the link from text that will be added on rollover:
a[href^="mailto"]:hover:after { content: " > " attr(title); }Beautiful!
[VIEW EXAMPLE]
Why is this better?
- Just listing the email address itself as the link doesn't imply "action". I think it's abrupt when you click a link and it launches your mail client without any warning.
- By naming your link something like "Send Email" - you are implying that action
- Best of both worlds, now you can name your link "Send Email", but also show the email address.
- Forward-Enhancing (and backwords-compatible). This technique will only work in good modern browsers, but it degrades well. Older browsers will just see the link and it will work fine.
Comments
this code have error in IE.
Such a great tips thanks a lot! I am definitely going to use this technique to warn users when a link goes to an external page or open a new window.
A shame for ie users but well… if you have a good browser you get the good features isn’t it? ;)
Definitely a fail in IE 6 (Win 2K). I see what you mean when I view the example in FF.
IE does not currently support attribute selectors.
This code also fails in IE 7
Thanks guys, I did mention at the end of the article that this is a forward-enhancement technique that only works in good browsers =)
The cool part is that it doesn’t break in IE, you just don’t get the fun.
The fact that the email still functions correctly is good. I have it in practice now on my current site as most of my visitors thankfully use FF.
I know this will be frowned upon by most any semantic/standards minded programmers but..
to hopefully help with spam I opted to use this without supplying my mailto link with a title and instead completely added the email address in the add content css command.
if youre worried about it not rendering in IE right you could always reverse this and use the link text to say the email address and then add content through css BEFORE the text to say “send email” then it proveds the pleasant transition before clicking, gives a call to action, and kinda has the best of both worlds.
I don’t like using the content attribute. CSS is for style, not content.
I have never seen this used before!
I like so thanks Chris :)
If you want to make it work in IE you may want to use this JS library:
dean.edwards.name/IE7/
Hey thanks for that link Rob, I REALLY gotta try that, seems pretty brilliant.
Nice one, thanks !
#8, Style is a broad term all to often believed to be attributed only to static content. The author presents an interesting method to increasing visibility and meaning via the ‘content’ attribute. While the use of ‘content’ typically implies an alteration of data, this approach merely reveals previously defined data (the anchor’s title).
I won’t argue whether its semantic, but the utility of this approach is what’s most interesting. I would like to see what other creative ways designers implement this.
Attribute selectors are very cool. If IE8 could implement these correctly that would be dandy!
For some reason it does not work in my Firefox 2.
Ok, the extention Better Gmail 2 for Firefox has conflict with this effect. :(
Nice idea, but doesn’t work in my IE
thanks good resource
These selectors are indeed awesome but definitely more useful in other cases, simply because email links are more recognizable when they look like email links (so “jd@example.com†is a better link name than “send mailâ€). This hasn’t really changed since 2002 (and earlier days). Showing the email address behind some text (like in your example) looks like an alternative, but here it isn’t really accessible for keyboard users, and trying to copy the email address will reveal yet a specific usability problem.
Nice article. In the TITLE attribute of the link I use “launches your email program” as a hint to the user. I have also used little mail icons as background images placed at the end of the link as another visual clue.
Personally I HATE it when some link does something unexpected… like launching a PDF.
Thank you,
Jim Summer
Jacksonville Web Design
tentonweb.com/
Thank you for that link Rob, I will try it in my next project !!
Holger
This can be made to work — better — in IE 7 than in Firefox.
No offense to you FF fans, but I spend MUCH more time trying to get CSS to work predictably in FF than I must spend for any other browser – and again, no offense intended but “Them’s that rule the marketplace gets to set the standards…”
But it’s still a good trick.
Great Tip/Trick, thanks for posting.
@Tinker:
If you write your CSS to the standards specs, you’ll see that Firefox does exactly what it should do. You are using non-standard CSS that works for IE. It is hard to make cross-browser compatibility work, but I’d rather code for FF than IE.
“I don’t like using the content attribute. CSS is for style, not content.”
But what’s being revealed in this example is still part of the content – it’s in the HTML as part of the title attribute. The CSS is merely controlling the presentation of what’s already in the HTML. I take your point about CSS being for presentation and not content, but the content property is part of the CSS spec, so why not make use of it when you can?
I agree with comment #25.
This sample does not actually look at the content (as is the text between HTML tags), but rather the attribute of the A tag. I believe this to be valid behavior from a CSS point-of-view, just as using the style attribute when applying different CSS code to HTML tags of the same type.
Indeed, the functionality is there, and since it does prove itself valuable, why not make use of it? I, for one, will start using now that I know that it exist. The only problem is when IE will start supporting it…
Here is another use – for printing. Instead of seeing just the underlined text that is a hyperlink, the print would also display the actual URL of the link, just after the printed hyperlink… works in Firefox, no effect in IE6… have not tested in IE7.
This would print URLs to hyperlinks within the main content div only, surrounded by « and ».
#content a:after {
content:” «” attr(href) “»”;
}
Thank you,
Jim Summer
Jacksonville Web Design