So ermitteln Sie, ob der Browser CSS3 unterstützt

Beurteilungsmethode: 1. Verwenden Sie zur Beurteilung die Regel „@supports“. Das Syntaxformat lautet „@supports (attribute: value) {label name {attribute: value}}“. 2. Verwenden Sie „CSS.supports()“. Funktion zur Beurteilung des Syntaxformats „CSS.supports(„property“, „value“)“. .

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Methode zur Bestimmung, ob der Browser CSS3 unterstützt:

CSS @supports-Regel:

Syntax:

@supports (rule)[operator (rule)]* { sRules }

Beschreibung:

Regel: Geben Sie eine bestimmte CSS-Regel an, die in Klammern eingeschlossen werden muss.
Operator: Verwenden Sie Operatoren wie oder | und |, um nicht mehrere Regeln anzugeben.

1. Grundlegende Verwendung:

@supports ( display: flex ) {
    body {
        display: flex;
      }
     #main {
         flex: auto;
      }
}

bedeutet, dass der Browser den Flex-Standard unterstützt. Wenn er ihn nicht unterstützt, kann er wie folgt implementiert werden.

2. nicht Schlüsselwort:

@supports not ( display: flex ) {
    #main{
        float: left;
    }
}

Js CSS.supports-Funktion

Wie das @supports-Tag in CSS bietet js auch eine Window.CSS.supports()-Methode, um zu überprüfen, ob der Browser CSS3-Attribute unterstützt:

Die erste Methode besteht darin, zwei Parameter zu verwenden: einer ist der Attributname und der andere ist der Attributwert.

var supportsFlex = CSS.supports("display", "flex");

Die zweite Verwendung ist: Geben Sie einfach die gesamte Stilzeichenfolge an, die analysiert werden muss.

var supportsFlex = CSS.supports("(display: flex) and (-webkit-display: flex)");

Die CSS.supports-Funktion gibt einen booleschen Wert zurück. Dies bedeutet, dass das Attribut unterstützt wird. Bevor wir diese Funktion verwenden, müssen wir zunächst feststellen, ob die Methode CSS.supports unterstützt wie folgt:

if(!!((window.CSS && window.CSS.supports) || window.supportsCSS || false)){    //支持}

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie, ob der Browser CSS3 unterstützt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!