Skip to main content

Bug Tracker

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 miketaylr comment:1

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.

Changed December 11, 2009 03:30AM UTC by scottgonzalez 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 miketaylr 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 foolip 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 miketaylr comment:5

resolution: → wontfix
status: newclosed

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 paul.irish comment:6

milestone: 1.41.5
resolution: wontfix
status: closedreopened
version: 1.4a11.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 snover 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 snover comment:8

blocking: → 7770

Changed December 26, 2010 05:02PM UTC by snover comment:9

status: reopenedopen

Changed December 31, 2010 06:15PM UTC by snover comment:10

#7874 is a duplicate of this ticket.

Changed January 02, 2011 10:48PM UTC by snover comment:11

priority: majorblocker

Changed January 03, 2011 02:17AM UTC by miketaylr 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:

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

Changed January 17, 2011 04:51PM UTC by john comment:13

milestone: 1.51.6

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

Changed February 03, 2011 12:21AM UTC by stefan.penner@gmail.com comment:14

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.

Changed February 07, 2011 04:58PM UTC by MT 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 timmywil comment:16

#8758 is a duplicate of this ticket.

Changed April 17, 2011 08:39PM UTC by john comment:17

milestone: 1.61.next

Changed May 07, 2011 02:29AM UTC by timmywil comment:18

blocking: 77706358, 7770

Changed May 07, 2011 02:34AM UTC by timmywil comment:19

blocking: 6358, 77706358, 7234, 7770

Changed May 22, 2011 07:27PM UTC by john comment:20

keywords: boolean, selector, html5boolean,selector,html5,1.7-discuss

Nominating ticket for 1.7 discussion.

Changed May 22, 2011 08:53PM UTC by mathias 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.htmlAccording 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 rwaldron comment:22

+1, Sounds like a bug, should be fixed

Changed May 22, 2011 11:53PM UTC by jaubourg 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 ajpiano 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.htmlAccording 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 timmywil 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.htmlAccording 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 danheberden comment:26

+1

Changed May 23, 2011 05:19PM UTC by paul.irish 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.htmlAccording 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 dmethvin comment:28

+1, Good bug to fix.

Changed June 03, 2011 01:17PM UTC by john 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.htmlAccording 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 scottgonzalez comment:30

+1, probably needs a configurable whitelist

Changed June 04, 2011 10:17PM UTC by addyosmani comment:31

+1

Changed June 06, 2011 03:39PM UTC by jzaefferer comment:32

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

Changed June 06, 2011 03:50PM UTC by cowboy comment:33

+0

Changed July 12, 2011 02:37PM UTC by dmethvin 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.htmlAccording 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.next1.7

Changed July 12, 2011 04:15PM UTC by john comment:35

#9637 is a duplicate of this ticket.

Changed July 12, 2011 04:16PM UTC by john comment:36

#7234 is a duplicate of this ticket.

Changed July 12, 2011 04:16PM UTC by john comment:37

owner: johntimmywil
status: openassigned

Changed July 12, 2011 04:17PM UTC by john comment:38

#6004 is a duplicate of this ticket.

Changed July 12, 2011 04:18PM UTC by john comment:39

#7770 is a duplicate of this ticket.

Changed July 12, 2011 04:38PM UTC by john comment:40

summary: html5 boolean attributes fail in IEsBoolean (and Empty) Attribute Selectors Fail

Changed July 12, 2011 04:38PM UTC by john comment:41

#7555 is a duplicate of this ticket.

Changed August 17, 2011 01:27AM UTC by anonymous 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 timmywil comment:43

blocking: 6358, 7234, 77707234, 7770

Changed September 19, 2011 07:43PM UTC by timmywil comment:44

resolution: → fixed
status: assignedclosed

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