Side navigation
#5637 closed bug (fixed)
Opened December 10, 2009 10:12PM UTC
Closed September 19, 2011 07:43PM UTC
Last modified March 08, 2012 05:26PM UTC
Boolean (and Empty) Attribute Selectors Fail
Reported by: | miketaylr | Owned by: | timmywil |
---|---|---|---|
Priority: | blocker | Milestone: | 1.7 |
Component: | selector | Version: | 1.4.4 |
Keywords: | boolean,selector,html5,1.7-discuss | Cc: | |
Blocked by: | Blocking: |
Description
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
Attachments (0)
Change History (44)
Changed December 10, 2009 10:14PM UTC by comment:1
Changed December 11, 2009 03:30AM UTC by comment:2
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.
Changed December 19, 2009 02:52AM UTC by comment:3
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?
Changed January 24, 2010 07:35PM UTC by comment:4
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.
Changed October 26, 2010 02:45AM UTC by comment:5
resolution: | → wontfix |
---|---|
status: | new → closed |
Closing since there is a valid workaround. :'( If anyone cares to reopen with a patch, feel free.
Changed December 06, 2010 08:29PM UTC by comment:6
milestone: | 1.4 → 1.5 |
---|---|
resolution: | wontfix |
status: | closed → reopened |
version: | 1.4a1 → 1.4.4 |
Reopening...
Testcase from deadlyicon http://jsfiddle.net/B974R/
Perhaps this should be a docs issue? Would be ideal for a real fix though..
Changed December 08, 2010 11:06PM UTC by comment:7
_comment0: | `getAttributeNode` has a property `specified` that allows us to query whether or not an attribute has actually been specified, as opposed to being empty. → 1291849624645107 |
---|
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.
Changed December 14, 2010 06:22AM UTC by comment:8
blocking: | → 7770 |
---|
Changed December 26, 2010 05:02PM UTC by comment:9
status: | reopened → open |
---|
Changed December 31, 2010 06:15PM UTC by comment:10
#7874 is a duplicate of this ticket.
Changed January 02, 2011 10:48PM UTC by comment:11
priority: | major → blocker |
---|
Changed January 03, 2011 02:17AM UTC by comment:12
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:
Changed January 17, 2011 04:51PM UTC by comment:13
milestone: | 1.5 → 1.6 |
---|
This is getting moved to 1.6 for when the $.attr happens.
Changed February 03, 2011 12:21AM UTC by comment:14
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.
Changed February 07, 2011 04:58PM UTC by comment:15
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.
Changed April 03, 2011 07:16PM UTC by comment:16
#8758 is a duplicate of this ticket.
Changed April 17, 2011 08:39PM UTC by comment:17
milestone: | 1.6 → 1.next |
---|
Changed May 07, 2011 02:29AM UTC by comment:18
blocking: | 7770 → 6358, 7770 |
---|
Changed May 07, 2011 02:34AM UTC by comment:19
blocking: | 6358, 7770 → 6358, 7234, 7770 |
---|
Changed May 22, 2011 07:27PM UTC by comment:20
keywords: | boolean, selector, html5 → boolean,selector,html5,1.7-discuss |
---|
Nominating ticket for 1.7 discussion.
Changed May 22, 2011 08:53PM UTC by comment:21
description: | 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 → 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 |
---|
+1,
Changed May 22, 2011 10:26PM UTC by comment:22
+1, Sounds like a bug, should be fixed
Changed May 22, 2011 11:53PM UTC by comment:23
+1, in principle, I'd go for this, but what would be the performance cost across all supported browsers?
Changed May 23, 2011 01:52AM UTC by comment:24
description: | 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 → 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 |
---|
+1, I'd like to see this fixed, and it will only come up with more frequency until we do
Changed May 23, 2011 02:54AM UTC by comment:25
description: | 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 → 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 |
---|
+1, I imagine unifying jQuery.attr and Sizzle attributes will fix this and perhaps reduce the codebase.
Changed May 23, 2011 03:27PM UTC by comment:26
+1
Changed May 23, 2011 05:19PM UTC by comment:27
description: | 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 → 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 |
---|
+1
Changed May 23, 2011 09:15PM UTC by comment:28
+1, Good bug to fix.
Changed June 03, 2011 01:17PM UTC by comment:29
description: | 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 → 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 |
---|
+1, Yeah, timmywil and I will work on getting this fixed.
Changed June 03, 2011 02:19PM UTC by comment:30
+1, probably needs a configurable whitelist
Changed June 04, 2011 10:17PM UTC by comment:31
+1
Changed June 06, 2011 03:39PM UTC by comment:32
+1, and another +1 for making shim-building easier
Changed June 06, 2011 03:50PM UTC by comment:33
+0
Changed July 12, 2011 02:37PM UTC by comment:34
description: | 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 → 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 |
---|---|
milestone: | 1.next → 1.7 |
Changed July 12, 2011 04:15PM UTC by comment:35
#9637 is a duplicate of this ticket.
Changed July 12, 2011 04:16PM UTC by comment:36
#7234 is a duplicate of this ticket.
Changed July 12, 2011 04:16PM UTC by comment:37
owner: | john → timmywil |
---|---|
status: | open → assigned |
Changed July 12, 2011 04:17PM UTC by comment:38
#6004 is a duplicate of this ticket.
Changed July 12, 2011 04:18PM UTC by comment:39
#7770 is a duplicate of this ticket.
Changed July 12, 2011 04:38PM UTC by comment:40
summary: | html5 boolean attributes fail in IEs → Boolean (and Empty) Attribute Selectors Fail |
---|
Changed July 12, 2011 04:38PM UTC by comment:41
#7555 is a duplicate of this ticket.
Changed August 17, 2011 01:27AM UTC by comment:42
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.
Changed September 12, 2011 02:46AM UTC by comment:43
blocking: | 6358, 7234, 7770 → 7234, 7770 |
---|
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.