search

metafizzy / outlayer

:construction_worker: the brains & guts of a layout library
163 stars 63 forks source link

document.querySelector needs escaped with fractions #24

Closed kevinsperrine closed 9 years ago

kevinsperrine commented 9 years ago

More of an FYI than an issue, but when using outlayer (via Masonry) with grid classes that use fractions (ie. desk-1/3) the fraction needs to be escaped for it to work properly. Otherwise, Chrome (and maybe others) throw a SyntaxError.

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element': '.desk-1/3' is not a valid selector.

I'm able to get around it by using the selector '.desk-1\\/3'

desandro commented 9 years ago

Thanks for reporting this.

Typically, class attributes should be alphanumeric, plus - and _.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_)

If you want to use other characters, you can escape them when using querySelector. @mathiasbynens wrote up a proper article about it.

Closing as this is not specific to Masonry or Outlayer.