Recently, a popular new addition was made to the HTML spec: anchors may now have a download attribute. That’s not what this post is about though — instead, I’d like to go over some of the different notations people used to refer to this new element + attribute combo in tweets and blog posts.
When discussing specific attributes to specific elements, it’s kinda verbose to write out e.g. “the download attribute of the <a> element” all the time. Think about it — that text alone takes up ⅓ of a tweet. Thankfully, there are some useful short notations we can use.
- Recently I’ve seen people use
a.download, which I find very confusing. It looks like a CSS selector for<a>elements with thedownloadclassname (but it isn’t!). You could interpret it as JavaScript and assumeais a reference to anHTMLAnchorElementobject,downloadbeing its property, but that’s a bit of a stretch. - CSS syntax could be used as well:
a[download]. The problem is everyone recognizes this as a CSS selector, and it may not be obvious that you’re talking about the actual HTML element and its attribute (not in a CSS context). - Similarly, you could just use HTML syntax:
<a download>— but then it may look like you’re talking about the code snippet itself, rather than the general combination of this particular attribute with a specific element. - As far as I know, the most popular notation used for this purpose is XPath syntax:
a/@download. No one really uses XPath anymore, so people immediately assume you’re talking about the combination of an HTML element with an attribute, and not the XPath selector itself. Everybody wins. - As Jan pointed out, there’s a simpler variation of the previous notation:
a@download. It’s not XPath anymore, but it’s still pretty clear what it stands for. It looks pretty, too.
Instead of reinventing the wheel, let’s just stick to the XPath syntax or its simplified variation for this, ok?
Example
This short notation can be very useful at times — not only to shorten text, but also to make it more readable. Check it out:
Safari 4 and Opera 11.00 support the
placeholderattribute on<input>elements, but do not support theplaceholderattribute on<textarea>elements.
Becomes…
Safari 4 and Opera 11.00 support
input@placeholder, but nottextarea@placeholder.
Comments
Paul wrote on :
I concur :)
Niels Matthijs wrote on :
Could be that no-one uses XPath anymore, but a whole lot of people won’t even know about XPath in the first place, making the XPath notation quite incomprehensible for people seeing this the first time around. I prefer the CSS notation as it is widely recognized and a css selector is after all just a translation of a specific HTML path.
Also,
[]is easier to type than/@:pMathias wrote on :
Niels Matthijs:
I wouldn’t say it’s completely incomprehensible, but I get your point. Hey, that’s why I wrote this post :) The people need to know!
Niels Matthijs wrote on :
I have no prior experience with XPath and when I would encounter
tag/@attributefor the first time I’m sure I wouldn’t know what the meaning behind the notation could be. If you can make it into a standard though, that’d be fine :)Just wondering, but does XPath have the same reach as CSS selectors for defining HTML path notations? Like how does it symbolize a class link (
a.download), child nodes (.parent>.child) and such? The power of CSS notations is that it’s all there, because it’s made that way to interact with HTML.Federico wrote on :
Niels Matthijs: XPath is even better (I believe it even has a
.child<.parentselector), but I barely know of its existence, let alone how to read an XPath, and I think many are on the same boat.Wolf wrote on :
I understand your point but now you’re just making things harder. If you’re talking about attributes on elements who not type that? Just because Twitter only supports 140 characters doesn’t mean we have to go find shortcuts for everything.
Mathias wrote on :
Wolf:
I completely agree. Note that I’m not inventing any new shortcuts here; I’m merely documenting the XPath notation, which has been used for years now for this exact purpose (and not just on Twitter), so that hopefully people will learn to recognize and use it rather than come up with new notations.
Jan! wrote on :
Why not
a@download? That notation has been around for several years now, I believe. (I think I first saw it on bugzilla.mozilla.org.)Mathias wrote on :
Jan!: Thanks for bringing that short and sweet XPath-inspired notation to my attention — to be honest, I hadn’t seen it before. Post updated!
Joss wrote on :
What about
a:download?Or does that fall into the trap of looking too much like CSS?
I'm thinking along the lines of
option:selected…Eli Grey wrote on :
I use
a.@download, which is E4X JS and very similar to XPath, but makes more sense semantically in my opinion.niu tech wrote on :
+1 for
<a download>or<a download="">! It’s the most readable, since it’s plain HTML. Much more people will recognize<a href="">thana/@href.