SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard jimbo_dk's Avatar
    Join Date
    May 2005
    Location
    Singapore
    Posts
    1,261
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom Attributes: To use or not?

    When writing unobtrusive JS, it's really convenient to have custom attributes inside of HTML elements. However, this would make the page invalid.

    To get around this, I use an comma separated string inside of the REL and use JS to split it up. However, I'm wondering, what's the worst thing that could happen using custom attributes? It would make a lot of sense semantically to use them too.
    Winners Respond. Losers React.
    Singapore Web Designer

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Gmail uses them extensively and I've seen them used elsewhere several times (can't remember where). I do agree that it can be tempting and seems neater and possibly less error-prone than to use space-separated lists in class or rel attributes. But then again it's easy enough to write bullet-proof hasClass, removeClass and addClass functions to make this a trivial job, removing the need for misusing the rel attribute. The class attribute seems to be vague enough to be used for practically anything, so it seems "OK" to dump loads of hooks into it.

    Although custom attributes seem nice, they're not in the spec and so therefore I feel there's something inherently wrong with them. I'd be interested to hear what the knowledgeable folk have to say about this, and perhaps to gauge just how bad they are by the effusiveness of their responses.

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should be an interesting discussion.

    To be honest though, I don't see why it's necessary to use custom attrs or class/rel to store info. Where would this method be applicable?

    What's wrong with storing element info within corresponding arrays?

    Have I got the wrong end of the stick here?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Nothing wrong with defining your own custom attributes for XHTML. The X is there to indicate that the language is eXtensible and so it is just a matter of creating your own doctype with whatever additional attributes you need. That's a very obtrusive way of doing your JavaScript though since the JavaScript to be completely unobtrusive needs to have nothing special added to the page to allow it to work at all since the ids and classes and parent/child/sibling relationships should already be more than adequate to be able to properly reference any part of the page without needing anything else.

    You can't do it in HTML since the addition of any custom attributes there means you don't have HTML any more since HTML is NOT extensible.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard jimbo_dk's Avatar
    Join Date
    May 2005
    Location
    Singapore
    Posts
    1,261
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies guys. What I'm referring to is a situation where I would have a function that would be used like:

    Code:
    onclick="myfunc(arg1, arg2, arg3, arg4)"

    That's a very obtrusive way of doing your JavaScript though since the JavaScript to be completely unobtrusive needs to have nothing special added to the page to allow it to work at all since the ids and classes and parent/child/sibling relationships should already be more than adequate to be able to properly reference any part of the page without needing anything else.
    This seems to be the way to go ultimately. I wasn't looking at it like that. However, this means addition of a bit more code than normal.
    Winners Respond. Losers React.
    Singapore Web Designer

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Nothing wrong with defining your own custom attributes for XHTML.
    Yes there is: your own custom attributes might clash with new features in some future level of XHTML and thus break in browsers that implement those features. (This has been a real problem for Opera when we implemented Web Forms 2.0 for instance.)
    Quote Originally Posted by felgall View Post
    The X is there to indicate that the language is eXtensible
    It's not open for anyone to extend XHTML. The "extensibility" in "XHTML" refers to using other namespaces -- not to ad-hoc add your own attributes to the XHTML language.
    Quote Originally Posted by felgall View Post
    and so it is just a matter of creating your own doctype with whatever additional attributes you need.
    Creating your own doctype does nothing but wasting your time.

    (X)HTML5 has a solution to the problem that this thread is about: data-* attributes can be used without affecting the validity of the page and without clashing with future native features of (X)HTML. Just do:
    HTML Code:
    <div data-icanhas="cheezburger"></div>
    Code:
    var kthx = div.getAttribute('data-icanhas');
    Simon Pieters

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (BTW, note that stuffing custom data in the rel attribute is subject to conflict with future rel values in (X)HTML, so even though a validator might not complain about it it could lead to the same problems as custom attributes. Using class is probably the safest choice if you're constrained to producing valid HTML4/XHTML1.)
    Simon Pieters

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by zcorpan View Post
    The "extensibility" in "XHTML" refers to using other namespaces -- not to ad-hoc add your own attributes to the XHTML language.
    I never said it didn't need for you to set up a separate namespace. Having multiple namespaces in XHTML is a part of what XHTML is all about which is why there are different DOM commands in JavaScript for XHTML t the ones for HTML so that the appropriate namespace can be identified.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •