js、css、html判断浏览器的各种版本

关于JS、CSS、HTML判断浏览器的各种版本的攻略，我会和你分享一些实用的方法和示例。具体来说，我们可以从以下几个方面来介绍：

判断浏览器类型和版本号

通过 navigator.userAgent 判断浏览器类型和版本号

。这是浏览器自身提供的属性，我们可以通过navigator.userAgent来访问。具体代码示例如下：

var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') != -1 || ua.indexOf('trident') != -1) {
    console.log('Internet Explorer');
} else if (ua.indexOf('edge') != -1) {
    console.log('Microsoft Edge');
} else if (ua.indexOf('firefox') != -1) {
    console.log('Mozilla Firefox');
} else if (ua.indexOf('opera') != -1 || ua.indexOf('opr') != -1) {
    console.log('Opera');
} else if (ua.indexOf('chrome') != -1) {
    console.log('Google Chrome');
} else if (ua.indexOf('safari') != -1) {
    console.log('Apple Safari');
} else {
    console.log('Unknown browser');
}

使用定制化的 Modernizr 库判断浏览器能力和版本号

另外，我们还可以使用定制化的 Modernizr 库来判断浏览器能力和版本号。这个库可以检查浏览器的特性和 HTML5/CSS3/CSS4/CSS5/CSS6 功能，并提供相应的 polyfill。具体代码示例如下：

Modernizr.addTest('hires', function() {
    var dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
    return !!(dpr > 1);
});

兼容性代码实现

解决样式兼容性问题

可以使用兼容性前缀来解决浏览器之间样式渲染的兼容性问题。常见的前缀有 -webkit（Chrome 和 Safari 等谷歌产物）、-moz（Firefox 等 Mozilla 产物）、-ms（Internet Explorer 等微软产品）、-o（Opera 等欧朋产物）等。

div {
   -webkit-box-shadow: 0 0 5px #ddd;
   -moz-box-shadow: 0 0 5px #ddd;
   -ms-box-shadow: 0 0 5px #ddd;
   box-shadow: 0 0 5px #ddd;
}

解决JS兼容性问题

实际上，JavaScript 的兼容性最常见的问题就是 DOM API 的实现不同。在解决 DOM API 不同的问题上，我们常常使用相关库，比如 jQuery 和 dojo。除此之外，我们还可以使用 polyfill 来提供兼容性的实现。

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

兼容性问题的调试

有时候我们为了解决一个问题，在不同的浏览器中测试它的表现。然而在多个浏览器中分别测试是很麻烦的。所以我们需要一个可以方便多浏览器调试的环境。最常用的的是开发者工具中的模拟器，而不同浏览器中的开发者工具模拟器常常都有这样一个工具。

以上是我对于JS、CSS、HTML判断浏览器版本的攻略。希望能帮到你。