Verwenden Sie das CSS-Tag @supports, um eine Browserkompatibilitätsanalyse zu erkennen

@supports kann verwendet werden, um zu überprüfen, ob der Browser ein bestimmtes CSS-Attribut unterstützt, und kann über JavaScript gesteuert werden. Im Folgenden finden Sie eine detaillierte Beschreibung, wie Sie das @supports-Tag von CSS verwenden, um die Browserkompatibilität zu erkennen

Das CSS @supports-Tag hat eine ähnliche Syntax wie die @media-Abfrageanweisung im CSS-Code:

@supports(prop:value) {   
 /* 各种样式 */
}

CSS @supports ermöglicht es Programmierern, verschiedene Methoden zu verwenden, um zu erkennen, ob Der aktuelle Browser unterstützt bestimmte CSS-Stilfunktionen.

Erkennung grundlegender Attribute
Sie können die Erkennung grundlegender Attribute und Attributwerte durchführen:

@supports (display: flex) {   
 p { display: flex; }   
}

Dies ist die einfachste Verwendung des @supports-Tags.

Not-Schlüsselwort
Das @supports-Tag kann mit dem „Not“-Schlüsselwort kombiniert werden, um mit nicht unterstützten Situationen umzugehen:

@supports not (display: flex) {   
 p { float: left; } /* 替换样式 */
}

Mehrfacherkennung und Zustandserkennung

/* or */
@supports (display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex) {   

    /* use styles here */
}   

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {   

 /* something crazy here */
}   

/* and and or */
@supports ((display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex)) and (-webkit-appearance: caret) {   

    /* use styles here */
}

Javascript CSS.supports()
in Javascript Durch die Verwendung von window.CSS.supports-Methode zur Erkennung von CSS @supports, die Spezifikation stellt zwei Methoden bereit: boolValue = CSS.supports(propertyName, value); , boolValue = CSS.supports(supportCondition); Informationen zur spezifischen Verwendung finden Sie im folgenden Beispiel:

//测试环境，Chrome:34.0.1847.131 m
var res01 = CSS.supports("text-decoration-style", "blink");   
//Outputs: false
console.log(res01);   

var res02 = CSS.supports("display", "flex");   
//Outputs: true
console.log(res02);   

var res03 = CSS.supports("( transform-origin: 5% 5% )");   
//Outputs: false
console.log(res03);   

var res04 = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +   
                      "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );   
//Outputs: false
console.log(res04);

@supports-Nutzungsszenarien

In den meisten Fällen wird @supports verwendet, um ältere Browser zu unterstützen und, wo möglich, neue Funktionen in modernen Browsern zu nutzen, um das Benutzererlebnis zu verbessern. Einer der wichtigsten Anwendungsfälle für @supports ist das Seitenlayout. Viele moderne Browser bieten Unterstützung für das Flexbox-Weblayout. Falls viele Browser dies nicht unterstützen, kann Ihr Code wie folgt geschrieben werden:

section {   
 float: left;   
}   

@supports (display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex) {   

    section {   
      display: -webkit-flex;   
      display: -moz-flex;   
     display: flex;   
     float: none;   
    }   
}

Ich glaube, dass dies von Programmierern verwendet wird Wenn Sie diese neue @supports-Funktion erleben, werden sich immer mehr und bessere Nutzungsszenarien ergeben.

Das obige ist der detaillierte Inhalt vonVerwenden Sie das CSS-Tag @supports, um eine Browserkompatibilitätsanalyse zu erkennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!