惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
GRAHAM CLULEY
S
Security @ Cisco Blogs
P
Proofpoint News Feed
Cisco Talos Blog
Cisco Talos Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
Cyber Attacks, Cyber Crime and Cyber Security
T
Tor Project blog
WordPress大学
WordPress大学
Project Zero
Project Zero
S
Schneier on Security
P
Proofpoint News Feed
小众软件
小众软件
P
Privacy International News Feed
美团技术团队
L
LangChain Blog
Know Your Adversary
Know Your Adversary
J
Java Code Geeks
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
The Register - Security
The Register - Security
N
Netflix TechBlog - Medium
Microsoft Security Blog
Microsoft Security Blog
Engineering at Meta
Engineering at Meta
I
InfoQ
量子位
Vercel News
Vercel News
博客园 - 三生石上(FineUI控件)
Spread Privacy
Spread Privacy
D
DataBreaches.Net
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
U
Unit 42
P
Privacy & Cybersecurity Law Blog
C
Cybersecurity and Infrastructure Security Agency CISA
T
The Blog of Author Tim Ferriss
Latest news
Latest news
K
Kaspersky official blog
MongoDB | Blog
MongoDB | Blog
L
LINUX DO - 热门话题
Simon Willison's Weblog
Simon Willison's Weblog
云风的 BLOG
云风的 BLOG
S
Securelist
AWS News Blog
AWS News Blog
F
Fortinet All Blogs
T
Threat Research - Cisco Blogs
Stack Overflow Blog
Stack Overflow Blog
Scott Helme
Scott Helme
Help Net Security
Help Net Security
Y
Y Combinator Blog
宝玉的分享
宝玉的分享
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
T
Tenable Blog

Mathias Bynens

A horrifying globalThis polyfill in universal JavaScript JavaScript engine fundamentals: optimizing prototypes JavaScript engine fundamentals: Shapes and Inline Caches Asynchronous stack traces: why await beats Promise#then() ECMAScript regular expressions are getting better! Unicode property escapes in JavaScript regular expressions ES2015 const is not about immutability Valid JavaScript variable names in ES2015 Unicode-aware regular expressions in ES2015 Dear Google, please fix plain text emails in Gmail PBKDF2+HMAC hash collisions explained JavaScript has a Unicode problem Processing Content Security Policy violation reports Hiding JSON-formatted data in the DOM with CSP enabled Loading JSON-formatted data with Ajax and xhr.responseType='json' Reserved keywords in JavaScript How to support full Unicode in MySQL databases How to speedrun Dropbox’s Dropquest 2012 Unquoted font family names in CSS Unquoted property names / object keys in JavaScript Valid JavaScript variable names in ES5 CSS character escape sequences JavaScript’s internal character encoding: UCS-2 or UTF-16? The smallest possible valid (X)HTML documents JavaScript character escape sequences JavaScript foo.prototype.bar notation Ambiguous ampersands How I detect and use localStorage: a simple JavaScript pattern Unquoted attribute values in HTML and CSS/JS selectors The end-tag open (ETAGO) delimiter Using the oninput event handler with onkeyup/onkeydown as its fallback Everything you always wanted to know about touch icons In defense of CSS hacks — introducing “safe CSS hacks” AirPlay video support in iOS Safari — a bookmarklet Completing Dropbox’s Dropquest 2011 in 60 seconds Using CSS without HTML How to create simple Mac apps from shell scripts Using setTimeout to speed up window.onload Bulletproof JavaScript benchmarks Thoughts on Safari Reader’s generated HTML How to enable Safari Reader on your site? The XML serialization of HTML5, aka ‘XHTML5’ The id attribute got more classy in HTML5 The three levels of HTML5 usage The HTML5 document.head DOM tree accessor Bulletproof HTML5 <details> fallback using jQuery Displaying hidden elements like <head> using CSS Inline <script> and <style> vs. external .js and .css — what’s the size threshold? Using Showdown/PageDown with and without jQuery
HTML element + attribute notation
Mathias · 2011-08-04 · via Mathias Bynens

HTML element + attribute notation

Published · tagged with CSS, HTML

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 the download classname (but it isn’t!). You could interpret it as JavaScript and assume a is a reference to an HTMLAnchorElement object, download being 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 placeholder attribute on <input> elements, but do not support the placeholder attribute on <textarea> elements.

Becomes…

Safari 4 and Opera 11.00 support input@placeholder, but not textarea@placeholder.

Leave a comment

Comment on “HTML element + attribute notation”

Name *

Email *

Website

Your input will be parsed as Markdown.

Spammer? (Enter ‘no’) *