0

In a PHP file which outputs an HTML form, I am wondering if I can use new HTML5 tags, for example the email input type. Will oldest browsers show some error or should I somehow discriminate with PHP, through USER_AGENT for example, and render: 

<input type="text" />

instead of 

<input type="email" />

in old browsers (BTW, the same question would apply to the DOCTYPE itself, I guess). Which is the most appropriate according to specifications?

Deepesh Kakani
  • 5,114
  • 1
  • 16
  • 35
Cesar
  • 484
  • 4
  • 14
  • 2
    Possible duplicate of this: http://stackoverflow.com/questions/18223540/which-html5-tags-can-i-use-without-worrying-about-browser-compatibility – Imrul.H Mar 17 '16 at 11:11
  • 2
    Input types of an unknown type in older browsers are always rendered as type=text. But you're probably better off asking yourself if it's really worth the effort. All current browsers substantially support HTML5 which has been around for a while now, and browsers that don't support it well are probably too risky to continue in use anyway. I'd just embrace the new standard, catering to old browsers only encourages users to not upgrade. – GordonM Mar 17 '16 at 11:18

2 Answers2

1

In case there is a library that could help you to use the "new tag" on older browsers HTML5 Shiv

Lorenzo Belfanti
  • 974
  • 3
  • 15
  • 42
  • Doing anything more than including the HTML5 Shiv (and possibly https://github.com/scottjehl/Respond) in the year 2016 is wasting time for something that affects less than 5% of users. If you waste time on the 5% the other 95% will not get features that will keep them around quickly enough. – apokryfos Mar 17 '16 at 11:21
  • @apokryfos - It really depends on who will use website – Lorenzo Belfanti Mar 17 '16 at 11:24
  • Even in the most niche use cases, HTML5Shiv and Respond should be enough. However if it's indeed such a niche case then don't use HTML 5 at all. – apokryfos Mar 17 '16 at 11:34
1

Fortunately for us, a workaround exists that allows old browsers to recognize these new elements allowing them to be styled, and thus giving us full use of these new semantic tags. It’s a tool called HTML5Shiv. As noted on the linked Google page, “shiv” and “shim” are interchangeable terms in this context. But how did we go from IE not even acknowledging the existence of this element, to now being able to use it? The trick is that calling document.createElement("section") will suddenly cause IE to recognize the section element. No one knows why, but it works and you don’t even need to use the node returned by that function. But you need to make sure to call it early on in your website before any of those elements are used, otherwise it won’t work. You will need to call it for each and every new HTML5 elements like the following code:

"abbr article aside audio bdi canvas data datalist details figcaption figure "+ "footer header hgroup main mark meter nav output progress section " + "summary template time video" .replace(/w+/g, function(a){ document.createElement(a) });

Notice we’re using the replace method of the string object to succinctly iterate over each contiguous length of characters matched by the regular expression and executing the callback function for each character block which in turn calls createElement. Here on in, we’ll call this method, “shivving the document”, so that the document can render the new HTML5 elements.

And its better to you use newer versions of browsers unless you're reaserching something with old browsers! :D

Thanking you!

Aron Dwight
  • 36
  • 1
  • 6