5 ms·
How to use HTML5 to make your CSS look like brainfuck
- CWIZO 16y agoAm 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 :)
- mathias 16y agoThere’s no ‘point’, it’s just awesome that it’s possible, and that HTML5 unifies class and ID restrictions.
- Oystein 16y agoIt 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"
- ars 16y agoIt'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 16y ago>>(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 16y agoHe 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 16y agoThat'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 16y agoI was merely replying to the “PHP does not have access to IDs of HTML elements” statement, but good job on the additional explanation.
- qeorge 16y agoThe 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 16y agoIsn'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/ http://html5doctor.com/html5-custom-data-attributes/
- eli 16y agoIck. I think I'd rather just break my HTML and add random attributes.
- qeorge 16y agoWhy is that better? You can use JSON here. (I say this as someone who used to use random HTML attributes.)
- eli 16y agoI 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 16y agoHTML5 has a proposal for a proper way to do this: http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data http://dev.w3.org/html5/spec/elements.html#embedding-custom-...
- qeorge 16y ago
- csomar 16y agoIt 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 16y agoI 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 16y agoGood 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 16y agoOops! 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).
- 16y ago
- joubert 16y agoHas anybody put brainfuck on their resume?
- mathias 16y agoQ: Any experience with brainfuck? A: No, but if you want, I can write you some CSS that looks just like it!
- nnash 16y agoHow is it that HTML5 never ceases to make me furious with it for changes like this?
- mathias 16y agoHow is being able to use any character you want as a value for an ID attribute a bad thing?
- est 16y agojavascript as brainfuck http://news.ycombinator.com/item?id=1153383 http://news.ycombinator.com/item?id=1153383