检查浏览器HTML5与PHP的兼容性

Question

我想使用HTML5中的输入类型或其他功能.但并非所有浏览器都支持这些HTML5功能.

如何检查用户的浏览器是否仅与PHP代码兼容？

顺便说一句,我不喜欢modernizr.我必须弄清楚PHP.

例:

兼容Html5的浏览器:

<input type="date" value="" />

Html5不兼容的浏览器:

<input id="datepicker" type="text" value="" />

Answer 1

PHP 真的是做这种检测的错误地方.有很多理由说明这是一个坏主意,而且很多地方都有很好的记录.

成功使用浏览器兼容性的关键是检测对所需功能的支持,并填充或优雅地降低这些特定功能.检测实际的浏览器或浏览器版本是不好的做法,很可能会给你带来误报和漏报的问题.由于练习的重点是避免兼容性故障,因此结果不准确会使整个事情有点自我挫败.

对于特征检测,Modernizr是一个很棒的小工具,但如果你真的不像你在问题中所说的那样相处,这里有一个小小的JS函数,专门检测对日期输入字段类型的支持:

/**
 * @returns boolean - True if browser suppors 'date' input type.
 */
function browserSupportsDateInput() {
    var i = document.createElement("input");
    i.setAttribute("type", "date");
    return i.type !== "text";
}

正如你所看到的,它确实很简单.(顺便说一句,你可以在这里找到更详细的文档)

使用您网站中的该功能,现在可以非常轻松地填充日期字段.

这是你的HTML:

<input type='date' name='whatever' class='datepicker'>

现在你可以使用一小部分jQuery执行以下操作:

$(function() {
    if(!browserSupportsDateInput()) {
        $(".datepicker").datepicker();
    }
});

就那么简单.

当然,Modernizr会让它变得更好.Modernizr本身不进行polyfill,所以如果不支持日期输入类型,你仍然需要类似上面的代码来应用datepicker插件,但是我在上面的代码中没有做过的Modernizr做的是允许您告诉浏览器只在需要时加载datepicker库.这将为现代浏览器节省大量带宽.Modernizr使这种事情变得容易.

希望上面的内容能为你提供一些关于做这种事情的最好方法的思考.这都是关于最佳实践的.如果你觉得你必须用PHP来做,那就这样吧,但是要注意你反对几乎所有专家的推荐,从长远来看它会给你带来更多的麻烦.

Answer 2

更好(和已建立)的最佳实践是

a)使一切都适用于非html5浏览器

要么

b.)只需将您的应用程序设为HTML5,并且不要让旧浏览器使用它

要么

c)使用JS工具在旧版浏览器中模拟(某些)HTML5功能:http://en.wikipedia.org/wiki/HTML5_Shiv!这甚至用在一些高端主要网站上,所以它并没有那么糟糕......