Rectangle 27 10

Instead of homegrowing a custom renderer for every single individual component, you could also just create a single RenderKit wherein you provide a custom ResponseWriter wherein the startElement() method is overriden to check the element name and/or component instance and then write additional attributes accordingly.

Here's a kickoff example of the HTML5 render kit:

public class Html5RenderKit extends RenderKitWrapper {

    private RenderKit wrapped;

    public Html5RenderKit(RenderKit wrapped) {
        this.wrapped = wrapped;
    }

    @Override
    public ResponseWriter createResponseWriter(Writer writer, String contentTypeList, String characterEncoding) {
        return new Html5ResponseWriter(super.createResponseWriter(writer, contentTypeList, characterEncoding));
    }

    @Override
    public RenderKit getWrapped() {
        return wrapped;
    }

}
public class Html5ResponseWriter extends ResponseWriterWrapper {

    private static final String[] HTML5_INPUT_ATTRIBUTES = { "autofocus" };

    private ResponseWriter wrapped;

    public Html5ResponseWriter(ResponseWriter wrapped) {
        this.wrapped = wrapped;
    }

    @Override
    public ResponseWriter cloneWithWriter(Writer writer) {
        return new Html5ResponseWriter(super.cloneWithWriter(writer));
    }

    @Override
    public void startElement(String name, UIComponent component) throws IOException {
        super.startElement(name, component);

        if ("input".equals(name)) {
            for (String attributeName : HTML5_INPUT_ATTRIBUTES) {
                String attributeValue = component.getAttributes().get(attributeName);

                if (attributeValue != null) {
                    super.writeAttribute(attributeName, attributeValue, null);
                }
            }
        }
    }

    @Override
    public ResponseWriter getWrapped() {
        return wrapped;
    }

}
public class Html5RenderKitFactory extends RenderKitFactory {

    private RenderKitFactory wrapped;

    public Html5RenderKitFactory(RenderKitFactory wrapped) {
        this.wrapped = wrapped;
    }

    @Override
    public void addRenderKit(String renderKitId, RenderKit renderKit) {
        wrapped.addRenderKit(renderKitId, renderKit);
    }

    @Override
    public RenderKit getRenderKit(FacesContext context, String renderKitId) {
        RenderKit renderKit = wrapped.getRenderKit(context, renderKitId);
        return (HTML_BASIC_RENDER_KIT.equals(renderKitId)) ? new Html5RenderKit(renderKit) : renderKit;
    }

    @Override
    public Iterator<String> getRenderKitIds() {
        return wrapped.getRenderKitIds();
    }

}

And register it as follows in faces-config.xml:

<factory>
    <render-kit-factory>com.example.Html5RenderKitFactory</render-kit-factory>
</factory>

The JSF utility library OmniFaces has also such a render kit, the Html5RenderKit (source code here) which should theoretically also work fine on PrimeFaces components. However, this question forced me to take a second look again and I was embarrassed to see that the component argument in ResponseWriter#startElement() is null in <p:inputText> (see line 74 of InputTextRenderer, it should have been writer.startElement("input", inputText) instead). I'm not sure if this is intentional or an oversight in the design of the PrimeFaces renderer or not, but you could use UIComponent#getCurrentComponent() instead to get it.

passthrough
<f:passThroughAttribute>
<html ... xmlns:p="http://java.sun.com/jsf/passthrough">
...
<h:inputText ... p:autofocus="true" />
<h:inputText ...>
    <f:passThroughAttribute name="autofocus" value="true" />
</h:inputText>

Great, this looks much nicer than the per component solution. I'm sure specific use cases could make arguments either way. If I get time I'll try this out as it seems it would be much quicker than homegrowing all the components.

The UIComponent#getCurrentComponent(FacesContext) seems to be the signature, so in the context of the startElement method that is not available. I saw in your Omnifaces commit you used Components.getCurrentCompnent() which doesn't required the context, although that is an OmniFaces class that is not available just in PrimeFaces. At that point It'd be more dangerous for me to have to also override any component that might be passing null to startElement. Do you suggest I pull in OmniFaces or is there some other way?

The Components#getCurrentComponent() form OmniFaces just delegates to UIComponent#getCurrentComponent(). You're not clear on if you've tested it or not, but it works for me.

Do I have a different version of JSF then? The only getCurrentComponent method I'm seeing on javax.faces.component.UIComponent requires a FacesContext parameter.

No, I actually mean this one. Sorry, I've a habit of omitting the arguments in Foo#bar() if there's only one method anyway.

jsf - Adding custom attribute (HTML5) support to Primefaces (3.4) - St...

html5 jsf primefaces
Rectangle 27 21

Using data-* attributes in the head

While your example may work, note that the keyword application-name is for Web applications only.

application-name

No need for a meta element.

<!DOCTYPE html>
<html>
<head
    data-details="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" 
    data-policyId="1234567890"
    data-partyId="0987654321"
    data-emailAddress="user@email.com"
    data-error="49"
    data-subsessionid="bffd5bc0-a03e-42e5-a531-50529dae57e3">
</head>

You could create a vocabulary, but thats not required for local use.

<!DOCTYPE html>
<html>
<head itemscope>
  <meta itemprop="details" content="52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]" />
  <meta itemprop="policyId" content="1234567890" />
  <meta itemprop="partyId" content="0987654321" />
  <link itemprop="emailAddress" href="mailto:user@email.com" /> <!-- or use a meta element if you dont want to provide a full URI with "mailto:" scheme -->
  <meta itemprop="error" content="49" />
  <meta itemprop="subsessionid" content="bffd5bc0-a03e-42e5-a531-50529dae57e3" />
</head>

The script element can be used for data blocks. You can choose any format that suits your needs. Example with plain text:

<!DOCTYPE html>
<html>
<head>
  <script type="text/plain">
    details = 52:AS6[rxSdsMd4RgYXJgeabsRAVBZ:0406139009]
    policyId = 1234567890
    partyId = 0987654321
    emailAddress = user@email.com
    error = 49
    subsessionid = bffd5bc0-a03e-42e5-a531-50529dae57e3
  </script>
</head>

When trying the <meta itemprop="key" content="value" /> method, do not forgot to set itemscope in the head tag. Otherwise it fails validation on the w3c validator stating "The itemprop attribute was specified, but the element is not a property of any item.". Took me some time to figure that one out!

html5 - Best practice for meta data in a html document? - Stack Overfl...

html html5 meta-tags w3c-validation
Rectangle 27 223

From an HTML 4 perspective, attributes are an SGML construct. Their limits are defined in the SGML Declaration of HTML 4:

The value in question here is "ATTSPLEN" which would be the limit on an element's attribute specification list (which should be the total size of all attributes for that element). The note above mentions that fixed limits should be avoided, however, so it's likely that there is no real limit other than available memory in most implementations.

HTML 5 seems to be different, as the spec says, "This version of HTML thus returns to a non-SGML basis."

Later on, when describing how to parse HTML 5, the following passage appears (emphasis added):

The algorithm described below places no limit on the depth of the DOM tree generated, or on the length of tag names, attribute names, attribute values, text nodes, etc. While implementors are encouraged to avoid arbitrary limits, it is recognized that practical concerns will likely force user agents to impose nesting depth constraints.

html5 - Is there a limit to the length of HTML attributes? - Stack Ove...

html html5 custom-data-attribute
Rectangle 27 223

From an HTML 4 perspective, attributes are an SGML construct. Their limits are defined in the SGML Declaration of HTML 4:

The value in question here is "ATTSPLEN" which would be the limit on an element's attribute specification list (which should be the total size of all attributes for that element). The note above mentions that fixed limits should be avoided, however, so it's likely that there is no real limit other than available memory in most implementations.

HTML 5 seems to be different, as the spec says, "This version of HTML thus returns to a non-SGML basis."

Later on, when describing how to parse HTML 5, the following passage appears (emphasis added):

The algorithm described below places no limit on the depth of the DOM tree generated, or on the length of tag names, attribute names, attribute values, text nodes, etc. While implementors are encouraged to avoid arbitrary limits, it is recognized that practical concerns will likely force user agents to impose nesting depth constraints.

html5 - Is there a limit to the length of HTML attributes? - Stack Ove...

html html5 custom-data-attribute
Rectangle 27 19

If I understand your question correctly, is it the fact that the required attribute appears to have default behaviour in Safari that's confusing you? If so, see: http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

required is not a custom attribute in HTML 5. It's defined in the spec, and is used in precisely the way you're presently using it.

EDIT: Well, not precisely. As ms2ger has pointed out, the required attribute is a boolean attribute, and here's what the HTML 5 spec has to say about those:

Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

And that is why we shouldn't make up custom attributes or properties on standard objects.

@Restuta go to about:flags to disable this in Chrome. Firefox, I'm not sure.

Required attribute HTML5 - Stack Overflow

html5
Rectangle 27 101

The seamless attribute no longer exists. It was originally pitched to be included in the first HTML5 spec, but subsequently dropped. An unrelated attribute of the same name made a brief cameo in the HTML5.1 draft, but that too was ditched mid-2016:

So I think the gist of it all both from the implementor side and the web-dev side is that seamless as-specced doesnt seem to be what anybody wanted to begin with. Or at least its more than anybody actually wanted. And anyway like @annevk says, its seems a lot of its since been overcome by events in light of Shadow DOM.

In other words: purge the seamless attribute from your memory, and pretend it never existed.

The attribute is in draft mode at the moment. For that reason, none of the current browsers are supporting it yet (as the implementation is subject to change). In the meantime, it's best just to use CSS to strip the borders/scrollbars from the iframe:

iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

There's more to the seamless attribute than what can be added with CSS: part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe (acting as though the embedded document was one big nested inside the element, for example).

Lastly, versions of Internet Explorer (8 and earlier) require additional attributes in order to remove the borders, scrollbars and background colour:

<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>

Naturally, this doesn't validate. So it's up to you how to handle it. My (picky) approach would be to sniff the agent string and add the attributes for IE versions earlier than 9.

overflow: hidden; -- not sure that makes any sense in this context. i think seamless is supposed to literally make it a part of the parent document; as such, it's more like being maximised (bottom/top/left/right set to 0, if the iframe is the only element in the document), and it would have appropriate scrolling, as part of the parent document, with all parts of iframe readable. overflow: hidden won't do that at all -- it'll only make the iframe document unreadable.

> part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe // You should go tell that to the guys at Mozilla, because sadly bug #631218 doesnt seem to mention any of it. Maybe you can add the link to where in the specification it says that. I would really like to see that being implemented.

HTML5 iFrame Seamless Attribute - Stack Overflow

html5 iframe attributes
Rectangle 27 101

The seamless attribute no longer exists. It was originally pitched to be included in the first HTML5 spec, but subsequently dropped. An unrelated attribute of the same name made a brief cameo in the HTML5.1 draft, but that too was ditched mid-2016:

So I think the gist of it all both from the implementor side and the web-dev side is that seamless as-specced doesnt seem to be what anybody wanted to begin with. Or at least its more than anybody actually wanted. And anyway like @annevk says, its seems a lot of its since been overcome by events in light of Shadow DOM.

In other words: purge the seamless attribute from your memory, and pretend it never existed.

The attribute is in draft mode at the moment. For that reason, none of the current browsers are supporting it yet (as the implementation is subject to change). In the meantime, it's best just to use CSS to strip the borders/scrollbars from the iframe:

iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

There's more to the seamless attribute than what can be added with CSS: part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe (acting as though the embedded document was one big nested inside the element, for example).

Lastly, versions of Internet Explorer (8 and earlier) require additional attributes in order to remove the borders, scrollbars and background colour:

<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>

Naturally, this doesn't validate. So it's up to you how to handle it. My (picky) approach would be to sniff the agent string and add the attributes for IE versions earlier than 9.

overflow: hidden; -- not sure that makes any sense in this context. i think seamless is supposed to literally make it a part of the parent document; as such, it's more like being maximised (bottom/top/left/right set to 0, if the iframe is the only element in the document), and it would have appropriate scrolling, as part of the parent document, with all parts of iframe readable. overflow: hidden won't do that at all -- it'll only make the iframe document unreadable.

> part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe // You should go tell that to the guys at Mozilla, because sadly bug #631218 doesnt seem to mention any of it. Maybe you can add the link to where in the specification it says that. I would really like to see that being implemented.

HTML5 iFrame Seamless Attribute - Stack Overflow

html5 iframe attributes
Rectangle 27 101

The seamless attribute no longer exists. It was originally pitched to be included in the first HTML5 spec, but subsequently dropped. An unrelated attribute of the same name made a brief cameo in the HTML5.1 draft, but that too was ditched mid-2016:

So I think the gist of it all both from the implementor side and the web-dev side is that seamless as-specced doesnt seem to be what anybody wanted to begin with. Or at least its more than anybody actually wanted. And anyway like @annevk says, its seems a lot of its since been overcome by events in light of Shadow DOM.

In other words: purge the seamless attribute from your memory, and pretend it never existed.

The attribute is in draft mode at the moment. For that reason, none of the current browsers are supporting it yet (as the implementation is subject to change). In the meantime, it's best just to use CSS to strip the borders/scrollbars from the iframe:

iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

There's more to the seamless attribute than what can be added with CSS: part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe (acting as though the embedded document was one big nested inside the element, for example).

Lastly, versions of Internet Explorer (8 and earlier) require additional attributes in order to remove the borders, scrollbars and background colour:

<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>

Naturally, this doesn't validate. So it's up to you how to handle it. My (picky) approach would be to sniff the agent string and add the attributes for IE versions earlier than 9.

overflow: hidden; -- not sure that makes any sense in this context. i think seamless is supposed to literally make it a part of the parent document; as such, it's more like being maximised (bottom/top/left/right set to 0, if the iframe is the only element in the document), and it would have appropriate scrolling, as part of the parent document, with all parts of iframe readable. overflow: hidden won't do that at all -- it'll only make the iframe document unreadable.

> part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe // You should go tell that to the guys at Mozilla, because sadly bug #631218 doesnt seem to mention any of it. Maybe you can add the link to where in the specification it says that. I would really like to see that being implemented.

HTML5 iFrame Seamless Attribute - Stack Overflow

html5 iframe attributes
Rectangle 27 223

From an HTML 4 perspective, attributes are an SGML construct. Their limits are defined in the SGML Declaration of HTML 4:

The value in question here is "ATTSPLEN" which would be the limit on an element's attribute specification list (which should be the total size of all attributes for that element). The note above mentions that fixed limits should be avoided, however, so it's likely that there is no real limit other than available memory in most implementations.

HTML 5 seems to be different, as the spec says, "This version of HTML thus returns to a non-SGML basis."

Later on, when describing how to parse HTML 5, the following passage appears (emphasis added):

The algorithm described below places no limit on the depth of the DOM tree generated, or on the length of tag names, attribute names, attribute values, text nodes, etc. While implementors are encouraged to avoid arbitrary limits, it is recognized that practical concerns will likely force user agents to impose nesting depth constraints.

html5 - Is there a limit to the length of HTML attributes? - Stack Ove...

html html5 custom-data-attribute
Rectangle 27 7

A small note on custom attributes: HTML5 allows all kind of custom attributes, as long as they are prefixed with the particle data-, i.e. data-my-attribute="true".

And these work fine in older browsers (except youll need your own code to access their values, rather than the new API), so theyre a better choice than making up your own attributes (as they wont clash with any official attributes added in the future).

Actually, custom attributes can literally be anything. Those prefixed with "data-" will appear in the element.dataset object, however, as well as other advantages (for instance, jQuery will automatically be able to grab the value of any "data-" prefixed custom attribute using the .data() method, i.e. .data("myAttribute") = value of data-my-attribute). Using shorter custom attributes can sometimes be useful for making custom CSS3 selectors.

Required attribute HTML5 - Stack Overflow

html5
Rectangle 27 149

The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is "text/javascript".

<script src=yourpath.js></script>

Note that you don't have to worry about pre-HTML5 browsers, all of them always considered JavaScript to be the default script language.

<script src=yourpath.js />

So I'm reading up on the quote omission link you reference, and, a few lines down, in the Double-quoted attribute value syntax section, the example is <input name="be evil">. Does this make the consortium the arch nemesis of Google?

It is not needed for javascript. It doesn't mean it is useless... I still hope Chrome will include <script type="text/dart"> ..... </script> one day (I can dream, right?)

I'm not sure about not using quotes just yet though. Also, a lot of IDEs will shit a brick without the quotes.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

Do HTML5 Script tag need type="javascript"? - Stack Overflow

html5
Rectangle 27 150

The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is "text/javascript".

<script src=yourpath.js></script>

Note that you don't have to worry about pre-HTML5 browsers, all of them always considered JavaScript to be the default script language.

<script src=yourpath.js />

So I'm reading up on the quote omission link you reference, and, a few lines down, in the Double-quoted attribute value syntax section, the example is <input name="be evil">. Does this make the consortium the arch nemesis of Google?

It is not needed for javascript. It doesn't mean it is useless... I still hope Chrome will include <script type="text/dart"> ..... </script> one day (I can dream, right?)

I'm not sure about not using quotes just yet though. Also, a lot of IDEs will shit a brick without the quotes.

Do HTML5 Script tag need type="javascript"? - Stack Overflow

html5
Rectangle 27 17

You can use min and max attributes of HTML5 input date

<input type="date" name="bday" min="2014-05-11" max="2014-05-20">
$(function(){
    var dtToday = new Date();

    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();

    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();

    var maxDate = year + '-' + month + '-' + day;    
    $('#txtDate').attr('max', maxDate);
});

Explanation max attribute of HTML5 input date takes month and day in double digit format.

Ex: 5 (Month) is not valid whereas 05 (Month) is valid Ex: 1 (Day) is not valid whereas 01 (Day) is valid

if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

@ Chirag but if we use max date like this we have to change it every time neah instead can't we use something like new Date () ( which we use to restrict future dates in JQuery ) to this max attribute

@ Chirag ..friend here if you add max date as 2014-05 -20 then suppose if user fill a form on 2014-06-01 then at that time we can't use max date as this date neah so it's better if there is a option that it restrict user to enter future date according to the current date in his/her pc

@Erandi Check edited answer, now you can provide dynamic date runtime using jquery attr() method. I think this update should solve your query

@ Chirag ...wow nice explanation .Thanks a lot for your help :) (Y)

html5 - Restrict future dates in HTML 5 date input - Stack Overflow

html5
Rectangle 27 104

XML doesn't allow leaving tags open, so it makes <br> a bit worse than the other two. The other two are roughly equivalent with the second preferred for compatibility with older browsers. Actually, space before / is preferred for compatibility sake, but I think it only makes sense for tags that have attributes. So I'd say either <br/> or <br />, whichever pleases your aesthetics.

To sum it up: all three are valid with the first one being a bit less "portable".

Edit: Now that we're all crazy about specs, I think it worth pointing out that according to dev.w3.org:

Start tags consist of the following parts, in exactly the following order:

Optionally, a "/" character, which may be present only if the element is a void element.

HTML is not actually XML, just pretty close to it.

Yes, it's not. But / is a common denominator here. HTML5 specifically allows the use of /: "Optionally, a "/" character, which may be present only if the element is a void element".

helloworlder, I'd say that HTML5 specification is close to being XML-conformant.

I'd just like to add that on both XML and HTML the ML stands for Markup Language. The reason there is so much overlap between them is that they were both originally defined using SGML (Standardised Generalised Markup Language) but not many people remember it now...

html5 - HTML 5: Is it
,
, or
? - Stack Overflow

html html5
Rectangle 27 13

A hidden attribute is a boolean attribute (True/False). When this attribute is used on an element, it removes all relevance to that element. When a user views the html page, elements with the hidden attribute should not be visible.

<p hidden>You can't see this</p>

Aria-hidden attributes indicate that the element and ALL of its descendants are still visible in the browser, but will be invisible to accessibility tools, such as screen readers.

<p aria-hidden="true">You can't see this</p>

This is not entirely correct (even the official documentation is a bit hazy here). An element with aria-hidden="true" is still visible in the browser, but will be invisible to accessibility tools, such as screen readers.

aria-hidden is used to hide the element from people using your website with accessibility tools.

html5 - What's the difference between HTML 'hidden' and 'aria-hidden' ...

html5 wai-aria
Rectangle 27 104

XML doesn't allow leaving tags open, so it makes <br> a bit worse than the other two. The other two are roughly equivalent with the second preferred for compatibility with older browsers. Actually, space before / is preferred for compatibility sake, but I think it only makes sense for tags that have attributes. So I'd say either <br/> or <br />, whichever pleases your aesthetics.

To sum it up: all three are valid with the first one being a bit less "portable".

Edit: Now that we're all crazy about specs, I think it worth pointing out that according to dev.w3.org:

Start tags consist of the following parts, in exactly the following order:

Optionally, a "/" character, which may be present only if the element is a void element.

HTML is not actually XML, just pretty close to it.

Yes, it's not. But / is a common denominator here. HTML5 specifically allows the use of /: "Optionally, a "/" character, which may be present only if the element is a void element".

helloworlder, I'd say that HTML5 specification is close to being XML-conformant.

I'd just like to add that on both XML and HTML the ML stands for Markup Language. The reason there is so much overlap between them is that they were both originally defined using SGML (Standardised Generalised Markup Language) but not many people remember it now...

html5 - HTML 5: Is it
,
, or
? - Stack Overflow

html html5
Rectangle 27 149

You can retrieve values of custom (or your own) attributes using getAttribute. Following your example with

<div id="geoff" data-geoff="geoff de geoff">

I can get the value of data-geoff using

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

See MSDN. And although it is mentioned there that you need IE7 to get this to work, I tested this a while ago with IE6 and it functioned correctly (even in quirks mode).

Totally, this isnt actual support of HTML5 data attributes. Does sound like a way to utilise them though.

Correct this doesn't support the API of data putting things in a collection or whatever (nobody supports this yes). However, as shown by get/Set Attribute you can get the main use of data- attributes immediately in any minimally DOM aware browser. You probably also could monkey patch browsers if you are so inclined to make the missing collections. From my recent book experiments it is clear that data- attributes are usable now and are far superior to the current common scheme of overloading the class attribute value to contain style info and random meta data.

You probably also could monkey patch browsers if you are so inclined to make the missing collections. Yeah, thats the nice thing about JavaScript as compared to CSS: because its a programming language, you can fix compatibility issues yourself.

I'm actually amazed this answer still gets so much credit, especially as IE 6 should be considered "dead", according to many web developers.

@Marcel: I think quite a few sites still have IE 6 as a non-negligible part of their audience. Maybe in another 10 years we wont have to worry any more.

javascript - Do HTML5 custom data attributes “work” in IE 6? - Stack O...

javascript internet-explorer html5 internet-explorer-6 custom-data-attribute
Rectangle 27 148

You can retrieve values of custom (or your own) attributes using getAttribute. Following your example with

<div id="geoff" data-geoff="geoff de geoff">

I can get the value of data-geoff using

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

See MSDN. And although it is mentioned there that you need IE7 to get this to work, I tested this a while ago with IE6 and it functioned correctly (even in quirks mode).

Totally, this isnt actual support of HTML5 data attributes. Does sound like a way to utilise them though.

Correct this doesn't support the API of data putting things in a collection or whatever (nobody supports this yes). However, as shown by get/Set Attribute you can get the main use of data- attributes immediately in any minimally DOM aware browser. You probably also could monkey patch browsers if you are so inclined to make the missing collections. From my recent book experiments it is clear that data- attributes are usable now and are far superior to the current common scheme of overloading the class attribute value to contain style info and random meta data.

You probably also could monkey patch browsers if you are so inclined to make the missing collections. Yeah, thats the nice thing about JavaScript as compared to CSS: because its a programming language, you can fix compatibility issues yourself.

I'm actually amazed this answer still gets so much credit, especially as IE 6 should be considered "dead", according to many web developers.

@Marcel: I think quite a few sites still have IE 6 as a non-negligible part of their audience. Maybe in another 10 years we wont have to worry any more.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Do HTML5 custom data attributes “work” in IE 6? - Stack O...

javascript internet-explorer html5 internet-explorer-6 custom-data-attribute
Rectangle 27 97

validity.tooShort

Update: HTML5 has been stable and Chrome has minlength and validity.tooShort enabled by default since version 40.

Not implemented in the validator yet either: validator.w3.org/check

Firefox 44 and still not implemented.

minlength

Is there a minlength validation attribute in HTML5? - Stack Overflow

html5 html5-validation
Rectangle 27 96

validity.tooShort

Update: HTML5 has been stable and Chrome has minlength and validity.tooShort enabled by default since version 40.

Not implemented in the validator yet either: validator.w3.org/check

Firefox 44 and still not implemented.

minlength

Is there a minlength validation attribute in HTML5? - Stack Overflow

html5 html5-validation