How to use HTML5 to make your CSS look like brainfuck

[mathias]

http://mathiasbynens.be/notes/html5-id-class

[CWIZO]

Am I the only one who doesn't see the point in having this kind of names for IDs/classes ? Obfuscation maybe? That, off course, doesn't make much sense with tools like Firebug :)

[Oystein → CWIZO]

It might be useful for programmers in other languages, so they don't have to either come up with english names, less descriptive names ("id1"), transliterating words, or replacing letters with "similar" ones ("O" or "OE" for "Ø")

Funnily enough, I just registered here, trying to use my first name Øystein, and what did ol' hackernews tell me? "Usernames can only contain letters, digits, dashes and underscores"

[mathias → Oystein]

How un-HTML5 of HackerNews!

[graywh → mathias]

How un-Unicode of HackerNews!

[mathias → graywh]

So mine got downvoted? I should have added </sarcasm> there…

[ars → CWIZO]

It's nice to make an id called "school[school_id][4]" to match the name attribute of the input field.

(In case you don't recognize it php will automatically turns names that look like that into an array.)

Or if you are trying to name fields from a multi dimensional array. Say name['foo']['bar'] - you would name the id name_foo_bar

Simple enough, except when you also have an array: name['foo_bar'] - which looks identical to the first one.

Now that you can use other characters besides _ to separate the fields that helps a ton.

[CWIZO → ars]

>>(In case you don't recognize it php will automatically turns names that look like that into an array.)

PHP does not have access to IDs of HTML elements. Or did you mean something else?

[mathias → CWIZO]

He meant the name attributes on form elements.

When a form containing <input type="text" name="foo" value="bar"> is submitted, $_POST['foo'] === 'bar' in PHP. (And it works similarly for other server-side programming languages.)

[IgorPartola → mathias]

That's true, but not at all what he means. He means:

  <input type="text" name="foo[bar][]" value="yaw" />

will result in:

  $_POST['foo'][0] === "yaw";

In other words you can have a form create multidimensional arrays.

[mathias → IgorPartola]

I was merely replying to the “PHP does not have access to IDs of HTML elements” statement, but good job on the additional explanation.

[mathias → CWIZO]

There’s no ‘point’, it’s just awesome that it’s possible, and that HTML5 unifies class and ID restrictions.

[qeorge → CWIZO]

The jQuery metadata plugin makes elegant use of this property of class names.

For example, you can do something like this:

<a href="#hello" class="{name:'George'}" />

and then in jQuery you can retrieve the metadata like so:

$('a').metadata('name'); // returns "George"

Its incredibly useful for associating metadata with DOM elements without breaking the HTML's validity.

[bentruyman → qeorge]

Isn't this what the data-* attributes should be used for though? Storing that kind of stuff in the `class` attribute seems semantically flawed. http://html5doctor.com/html5-custom-data-attributes/

[eli → qeorge]

Ick. I think I'd rather just break my HTML and add random attributes.

[qeorge → eli]

Why is that better? You can use JSON here.

(I say this as someone who used to use random HTML attributes.)

[eli → qeorge]

I find it aesthetically displeasing, and I'm not convinced that abusing the class attribute to store metadata is "more correct" than just adding your own attributes which.

[edd → qeorge]

HTML5 has a proposal for a proper way to do this:

http://dev.w3.org/html5/spec/elements.html#embedding-custom-...

[qeorge → edd]

This works now, in all relevant browsers, which is what I need.

[csomar]

It can be used for obfuscation, making it a little bit harder to decode a CSS, HTML and JavaScript. Also this can be a good compression method. (Assuming you parse CSS and JavaScript)

[IgorPartola → csomar]

I bet it can also be an XSS attack vector. Imagine that there is some piece of jQuery-based code that evaluates selectors based on the ID attribute of a given element (e.g. for this element find all the related ones):

  $('.' + div.attr('id')).each(function() {
      $('body').append($(this); // Moving elements
  });

Now imagine that I give the id attribute the following id: 'nada,<script src="evil.js"></script>'

I suppose this is a bit contrived but still fun.

[mathias → IgorPartola]

Good point! To be perfectly safe, `$div.attr('id')` should be escaped before it’s used. I’m not sure in how many browsers this could be a problem though.

FYI, the `.append` line is missing a closing `)`. Also, you probably don’t want to use `$(this)` in that case, you could just use `this`.

[IgorPartola → mathias]

Oops! Thanks for pointing out the closing ). Both '$(this)' and 'this' work, and I just use the former most of the time. I suppose you are right though since $(this) would take longer. On the other hand, I wouldn't be surprised if the HTML element was immediately converted to a jQuery object by append() before anything else is done anyways.

As for the escaping, how would we do that? jQuery specifically allows something like $('<div/>'). As far as I know, it does not have an escape character to prevent that. My point is that that character would need to be added to jQuery and other libraries that have the same function for fetching DOM elements and creating them. Obviously, in raw JavaScript this is not a problem since there it's two different methods (document.getElementById and document.createElement).

[mathias → IgorPartola]

Isn’t escaping usually done with a backslash (`\`) instead of a forward slash (`/`)? I don’t see how something like `$('<div />');` could interfere with that.

[IgorPartola → mathias]

JavaScript escaping is done with backslashes:

  var str = "Hello \"world\", how\\are you";

But once you have your string composed, jQuery does not as far as I know have a way to escape characters like < and >.

[_zhqs]

Has anybody put brainfuck on their resume?

[mathias → _zhqs]

Q: Any experience with brainfuck?

A: No, but if you want, I can write you some CSS that looks just like it!

[est]

javascript as brainfuck

http://news.ycombinator.com/item?id=1153383

[nnash]

How is it that HTML5 never ceases to make me furious with it for changes like this?

[mathias → nnash]

How is being able to use any character you want as a value for an ID attribute a bad thing?