Boolean (and Empty) Attribute Selectors Fail

[miketaylr]

According to the html5 spec, a boolean attribute like 'autofocus' is not allowed to have a value--it's presence or absence determines that. The appropriate CSS selector would be [autofocus] {border:1px solid red;}, for example.

As a jQuery selector $('[autofocus]') fails in ie6 and ie7--only when using a new html5 attribute. $('[disabled]'), for example, works fine (and is valid html4, btw).

The workaround I've found is an ugly selector like so, for the new fancy boolean attributes:

$("[autofocus=]")

Painful to look at, I know.

Here's the test page:  http://miketaylr.com/test/boolean_selector.html

[miketaylr]

Ugh. My workaround selector got gobbled. It's the boolean attribute set to an empty string, if that makes sense. It's clear in the test page, anyhow.

[scott.gonzalez]

The spec definitely does not say that boolean attributes are not allowed to have a value. autofocus="autofocus" is 100% valid; this always has been, and always will be, the case for boolean attributes.

You can still end up running into this problem with valid code, but there is a clean workaround.

[miketaylr]

Scott, you're right--I misread that part of the spec.

Nonetheless, the real issue here is not with attributes, but with selectors. Considering <input type=text required> as legit markup, and the selector [required] {} as a legit selector in both the CSS2.1 and CSS3 specs--I see no reason that jQuery should force authors to use <input type=text required=required>, as a workaround so they can use [required=required] {}.

Are there any other instances you can point me to where jQuery forces users to use a particular style of (X)HTML?

[foolip]

I wanted this too so I tried fixing the attribute selector in sizzle.js, in a big block of code that looks like this:

return result == null ?

type === "!=" : type === "=" ? value === check : type === "*=" ? value.indexOf(check) >= 0 : type === "~=" ? (" " + value + " ").indexOf(check) >= 0 : !check ? value && result !== false : type === "!=" ? value !== check : type === "^{=" ? value.indexOf(check) === 0 : type === "$=" ? value.substr(value.length - check.length) === check : type === "|=" ?}

value === check

value.substr(0, check.length + 1) === check + "-" :

false;

However, it turns out that while you can make it work for unknown-to-IE attributes to <time pubdate>, <video autoplay>, etc, you will instead break simple selectors like [title]. Reading:  http://tobielangel.com/2007/1/11/attribute-nightmare-in-ie/ and  http://andrewdupont.net/2007/01/10/code-hasattribute-for-ie/ (the comments, the body of the post doesn't have any code for some reason).

Unless a reliable way to distinguish between missing and empty attributes in IE can be found, this just can't be fixed.

[miketaylr]

Closing since there is a valid workaround. :'( If anyone cares to reopen with a patch, feel free.

[paul.irish]

Reopening...

Testcase from deadlyicon  http://jsfiddle.net/B974R/

Perhaps this should be a docs issue? Would be ideal for a real fix though..

[snover]

Attr nodes (from getAttributeNode) have a property specified that allows us to query whether or not an attribute has actually been specified, as opposed to being empty.

[snover]

#7874 is a duplicate of this ticket.

[miketaylr]

Just noticed that the jsfiddle testcase in Paul's comment seems like an entirely different issue. href is a normal attribute, not a boolean one. However, it could be that both issues are symptoms of the same problem in Sizzle.

Also, here's 80 qunit tests that I should have linked to last year, should they come in handy:

 http://miketaylr.com/test/qunit/html5booleans_shallow.html

[john]

This is getting moved to 1.6 for when the $.attr happens.

[stefan.penner@…]

 http://jsfiddle.net/kBK8v/4/

potentially the same problem

var d = $(document),

global = $('[required]').length, first = $('[required]').first().is('[required]');

in IE, global query returns the correct count, but first returns false, rather then true for the single IS call.

[MT]

As far as I can tell, the bug is not related to IE6/7 only. Actually, this takes place in ANY browser with no native querySelector() support (for example Firefox 3.0). So, apparently this is the bug of pure-script implementation of selectors engine of jQuery/Sizzle.

The workaround is acceptable only as temporary solution in a particular cases.

[timmywil]

#8758 is a duplicate of this ticket.

[john]

Nominating ticket for 1.7 discussion.

[mathias]

+1,

[rwaldron]

+1, Sounds like a bug, should be fixed

[jaubourg]

+1, in principle, I'd go for this, but what would be the performance cost across all supported browsers?

[ajpiano]

+1, I'd like to see this fixed, and it will only come up with more frequency until we do

[timmywil]

+1, I imagine unifying jQuery.attr and Sizzle attributes will fix this and perhaps reduce the codebase.

[danheberden]

+1

[paul.irish]

+1

[dmethvin]

+1, Good bug to fix.

[john]

+1, Yeah, timmywil and I will work on getting this fixed.

[scott.gonzalez]

+1, probably needs a configurable whitelist

[addyosmani]

+1

[jzaefferer]

+1, and another +1 for making shim-building easier

[cowboy]

+0

[john]

#9637 is a duplicate of this ticket.

[john]

#7234 is a duplicate of this ticket.

[john]

#6004 is a duplicate of this ticket.

[john]

#7770 is a duplicate of this ticket.

[john]

#7555 is a duplicate of this ticket.

[anonymous]

I have problems related to this with this HTML code in IE7:

<span datetime="'2011-08-19T00:00:00-07:00'">Some Text Here!</span> $("span[datetime]") returns an empty jQuery object.

[timmywil]

Override Sizzle attribute retrieval with jQuery.attr. Fixes #5637, #7128, #9261, #9570, #10178.

Bug fixed on the side: $(window).is('a') was throwing an exception. Fixes #10178.

Changeset: 92405d4f5ffe9ec1f26f280303783014948438c5