Heim > Web-Frontend > CSS-Tutorial > So ermitteln Sie, ob der Browser CSS3 unterstützt

So ermitteln Sie, ob der Browser CSS3 unterstützt

醉折花枝作酒筹
Freigeben: 2023-01-05 16:08:04
Original
2764 Leute haben es durchsucht

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 }
Nach dem Login kopieren

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;
      }
}
Nach dem Login kopieren

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;
    }
}
Nach dem Login kopieren

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");
Nach dem Login kopieren

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)");
Nach dem Login kopieren

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)){    //支持}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage