Browser-compatible processing (HTML conditional annotations, Csshack, and JS recognition)

Previous words

All iex+ representatives in this article contain x and X, and iex-represent the following x and X, only personal habits. Example: ie7+ represents IE7, IE8 ...
All the examples in this article have been tested and welcome to communicate.

HTML recognition

Conditional annotation Method (ie10+ already does not support conditional annotations)

　　"Note" Two--and left bracket [cannot have spaces between them, otherwise invalid

[1] ie9-(<!--[if ie]><![ endif]-->)

<! DOCTYPE html>. box{    height:100px;    width:100px;    Background-color:red;} </style> if ie]><div class= "box" id= "box" ></div> <! [endif]--></body>

[2] only single IE (<!--[if IE 6]><![ endif]-->)

<! DOCTYPE html>. box{    height:100px;    width:100px;    Background-color:red;} </style> if IE 7]><div class= "box" id= "box" ></div> <! [endif]--></body>

[3] greater than GT | | Greater than or equal to GTE | | Less Than LT | | Less than or equal to LTE (<!--[if GTE IE 8]><![ endif]-->)

<! DOCTYPE html>. box{    height:100px;    width:100px;    Background-color:red;} </style> if GTE IE 7]><div class= "box" id= "box" ></div ><! [endif]--></body>

[4] Non-IE (ie10+ can also be recognized), here extra <-->, in IE as internal comments, and in non-IE browser will be closed before the comments (<!--[if! ie]><--><! [endif]-->)

<! DOCTYPE html>. box{    height:100px;    width:100px;    Background-color:red;} </style> if ! Ie]><--><div class= "box" id= "box" ></div><! [endif]--></body>

CSS hack

"1" attribute prefix method (ie supported only)

[1] ie6-(underline, Middle dash) (_color:blue;-color:blue;)

<! DOCTYPE html>. box{    height:100px;    width:100px;    _background-color:red;} </style> 
[2] ie7-(asterisk, plus sign) (*color:blue;+color:blue;)
<! DOCTYPE html>. box{    height:100px;    width:100px;     *background-color:red;} </style> 
[3] ie10-(\9) (color:blue\9;)
<! DOCTYPE html>. box{    height:100px;    width:100px;    Background-color:red\9;} </style> 
[4] ie8+ (color:blue\0;)
<! DOCTYPE html>. box{    height:100px;    width:100px;    Background-color:red\0;} </style> 
[5] IE9, IE10 (\9\0) (color:blue\9\0;)
<! DOCTYPE html>. box{    height:100px;    width:100px;    Background-color:red\9\0;} </style> 
"2" selector prefix method
[1] ie6-(*html)
<! DOCTYPE html>HTML. box{    height:100px;    width:100px;    Background-color:red;} </style> 
[2] IE7 (*+html)
<! DOCTYPE html>HTML. box{    height:100px;    width:100px;    Background-color:red;} </style> 
[3] IE8 (@media)
<! DOCTYPE html>@media \0{    . box{        height:100px;        width:100px;        Background-color:red;    }} </style> 
[4] Ie9+ and other non-IE browsers (: root)
<! DOCTYPE html>: root. box{    height:100px;    width:100px;    Background-color:red;} </style> 
[5]firefox (X:-moz-any-link,)
<! DOCTYPE html>x:-moz-any-link,.box{    height:100px;    width:100px;    Background-color:red;} </style> 
[6]chrome, Safari, Opera (@media screen and (-webkit-min-device-pixel-ratio:0))
<! DOCTYPE html>@mediascreen and (-webkit-min-device-pixel-ratio:0) {    . box{        Height: 100px;        width:100px;        Background-color:red;    }    } </style> 
JS Recognition
"1" Capability detection
"Supplemental 1" using JS capability detection considerations to detect sort sorting as an example
function issortable (object) {    return !! Object.sort;}
The above function determines whether an object supports sorting by detecting whether the object has a sort () method. But the problem is that any object that contains the Sort property also returns true
var result = Issortable ({sort:true});
A better way to detect if a property exists and not to determine whether the object supports sorting is to detect if sort is a function
function issortable (object) {    returntypeof Object.sort = = "function";    } // The typeof operator above is used to determine that sort is indeed a function, so it can be called to sort the data
"Supplement 2"
[BUG] in IE, typeof Xhr.open will return "Unkown"
if (window. ActiveXObject) {    varnew ActiveXObject ("Microsoft.XMLHTTP");    Alert (typeof  xhr.open)    }
[resolution] in the browser environment to test any object of an attribute exists using the following function
function Ishostmethod (object,property) {    vartypeof  Object[property];     return t = = "function" | | (!! (t = = "Object" && Object[property])) || t== "Unknown";}    
[1] ie8-(document.createelement)
The host object of ie8-is implemented through COM, not JScript. Therefore, the document.createelement () function is indeed a COM object, so typeof returns "Object"
    if (typeof document.createelement = = "Object") {        alert (1)    }
[2] ie10-(document.all)
    if (document.all) {        alert (1)    }
[3] ie10-(ActiveXObject)
    if (window. ActiveXObject) {        alert (1)    }
[4]chrome, Opera (chrome)
    if (window.chrome) {        alert (1)    }
"2" useragent
　　[1] Ie
functionIsie () {varUA =navigator.useragent; //Detection Trident engine, ie8+    if(/trident/. Test (UA)) {        //ie11+        if(/RV: (\d+)/. Test (UA)) {            returnregexp["$"]; }            //Ie8-ie10        if(/msie (\d+)/. Test (UA)) {            returnregexp["$"]; }            }    //detect IE logo, ie7-    if(/msie (\d+)/. Test (UA)) {        returnregexp["$"]; }}console.log (Isie ());//only IE returns the version number, and the other browsers return undefined
[2]chrome
function Ischrome () {    var ua = navigator.useragent;     // Get rid of opera first, because opera only adds its own logo    after Chrome's useragent. if (!/opr/. Test (UA)) {        if(/chrome\/(\s+)/. Test (UA)) {            return regexp["$"];}}    } Console.log (Ischrome ()); // only Chrome Returns the version number, and all other browsers return undefined
[3]safari
functionIssafari () {varUA =navigator.useragent; //First rule out opera .    if(!/opr/. Test (UA)) {        //check out Chrome and Safari browser        if(/safari/. Test (UA)) {            //Detect Safari            if(/version\/(\s+)/. Test (UA)) {                returnregexp["$"]; }}}}console.log (Issafari ());//only Safari Returns the version number, and all other browsers return undefined
[4]firefox
function Isfirefox () {    if(/firefox\/(\s+)/. Test (navigator.useragent)) {        return regexp["$"];    }    } Console.log (Isfirefox ()); // only Firefox will return the version number and other browsers will return undefined
[5]opera
function Isopera () {    var ua = navigator.useragent;     if (/opr\/(\s+)/. Test (UA)) {        return regexp["$"];    }    } Console.log (Isopera ()); // only Opera returns the version number, and all other browsers return undefined
Browser-compatible processing (HTML conditional annotations, Csshack, and JS recognition)