Eine Einführung in die @Supports -Regel von CSS (Feature -Abfragen)

Key Takeaways

• Die @Supports -Regel in CSS ermöglicht es Entwicklern, die Funktionserkennung zu implementieren, zu überprüfen, ob ein Browser bestimmte CSS -Eigenschaft/-wertpaare unterstützt und Stile entsprechend anwendet. Dies ist Teil eines progressiven Ansatzes zur Verbesserung, um die ungleichmäßige Browser -Unterstützung für fortschrittliche Technologien zu bewältigen.
• Die @Supports -Regelsyntax enthält logische Operatoren wie "und", "oder" und "nicht", die gleichzeitig das Testen mehrerer Bedingungen ermöglichen. Die korrekte Verwendung von Klammern ist bei der Gruppierung von Bedingungen von entscheidender Bedeutung.
• JavaScript kann in Verbindung mit CSS -Funktionsabfragen mit der CSS -Schnittstelle und der Funktion Supports () verwendet werden. Diese Funktion gibt einen booleschen Wert zurück, der angibt, ob ein Browser eine bestimmte CSS -Eigenschaft unterstützt.
• Während die meisten modernen Browser die @Supports -Regel unterstützen, tun Internet Explorer 11 und Opera Mini nicht. Entwickler sollten daher Basisstile definieren, die alle gezielten Browser verarbeiten können, und @Supports verwenden, um diese Stile in Browsern zu überschreiben und zu ergänzen, die neuere Funktionen verarbeiten können.

Die beiden allgemeinen Ansätze zur Bekämpfung der ungleichmäßigen Unterstützung von Browsern für die neuesten Technologien sind anmutiger Abbau und progressive Verbesserung.

Anmeldung nutzt fortgeschrittene Technologien, um anspruchsvolle Benutzererfahrungen und -funktionen zu entwerfen. Benutzer von weniger fähigen Browsern können weiterhin auf die Website zugreifen, genießen jedoch ein verringertes Maß an Funktionalität und Browserfahrung.

Bei der progressiven Verbesserung stellen Entwickler eine Grundlinie fest, indem sie für eine Ebene der Benutzererfahrung entwerfen, die die meisten Browser unterstützen können. Ihre Anwendungen bieten eine integrierte Erkennung der Funktionen der Browser, mit denen sie fortgeschrittenere Funktionen und reichhaltigere Browsing-Erlebnisse entsprechend zur Verfügung stellen.

Das am weitesten verbreitete Tool in einem progressiven Verbesserungsansatz ist die Modernizr JavaScript -Bibliothek.

modernizr programmgesteuert überprüft, ob ein Browser Web -Technologien der nächsten Generation unterstützt und dementsprechend True oder False zurückgibt. Mit diesem Wissen können Sie die neuen Funktionen bei der Unterstützung von Browsern ausnutzen und dennoch ein zuverlässiges Mittel zur Verringerung älterer oder nicht kompatibler Browser haben.

So gut das klingt, etwas noch Besseres ist seit einiger Zeit gebraut. Sie können die Feature -Erkennung mithilfe der nativen CSS -Funktionsabfragen mit der @Supports -Regel durchführen.

In diesem Beitrag werde ich mich eingehender mit @Supports und seiner zugehörigen JavaScript -API befassen.

Erkennen von Browserfunktionen mit der @Supports -Regel

Die @Supports -Regel ist Teil der CSS3 -Bedingungsregelnspezifikation, die auch die am weitesten verbreitete @media -Regel enthält, die wir alle in unserer reaktionsschnellen Designarbeit verwenden.

Während Sie mit Medienabfragen Anzeigefunktionen wie Ansichtsfensterbreite und Höhe erkennen können, können Sie @Supports die Browser -Unterstützung für CSS -Eigenschaft/-wertpaare überprüfen.

Um ein grundlegendes Beispiel zu berücksichtigen, sagen wir an, Ihre Webseite zeigt ein Kunstwerk an, das Sie mithilfe von CSS -Mischungen verbessern möchten. Es ist wahr, dass CSS -Mischmodi in nicht unterstützenden Browsern anmutig abgebaut wird. Anstelle dessen, was der Browser in solchen Fällen standardmäßig anzeigt, möchten Sie jedoch möglicherweise Benutzer von nicht unterstützenden Browsern erfreuen, indem Sie etwas gleiches, wenn nicht gleichermaßen spektakulär anzeigen. Auf diese Weise würden Sie den Scheck über CSS in Ihrem Stylesheet mit @Supports durchführen:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

Um verschiedene Stile für Browser anzuwenden, die keine Mix-Blend-Mode-Unterstützung haben, würden Sie diese Syntax verwenden:

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

Ein paar Dinge zu beachten:

• Die Bedingung, die Sie testen, muss in Klammern sein. Mit anderen Worten, @Supports Mix-Blend-Mode: Overlay {...} ist nicht gültig. Wenn Sie jedoch mehr Klammern als benötigtes hinzufügen, ist der Code in Ordnung. Zum Beispiel ist @Supports ((Mix-Blend-Modus: Overlay)) gültig.
• Die Bedingung muss sowohl eine Eigenschaft als auch einen Wert enthalten. Im obigen Beispiel überprüfen Sie die Eigenschaft Mix-Blend-Mode-Eigenschaft und den Overlay-Wert für diese Eigenschaft.
• Hinzufügen einer Nachverfolgung! Wichtig für eine Erklärung, für die Sie testen, wirkt sich nicht auf die Gültigkeit Ihres Codes aus.

Lassen Sie uns die obigen Beispiele mit einer kleinen Demo herausfinden. Browser mit Mix-Blend-Mode-Unterstützung wenden die Stile in @Supports () {...} Block an; Andere Browser wenden die Stile in den @Supports nicht () {...} Block an.

Die HTML:

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027307262599.png?x-oss-process=image/resize,p_40" class="lazy" alt="Eine Einführung in die @Supports -Regel von CSS (Feature -Abfragen)" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

Die CSS:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

Schauen Sie sich die Demo auf CodePen an:

Siehe den Stift @Supports -Regel Demo von SitePoint (@sinepoint) auf CodePen.

Testen auf mehrere Bedingungen gleichzeitig

Bei Feature -Tests mit @Supports sind Sie gleichzeitig nicht auf einen Testzustand beschränkt. Kombinieren Sie logische Operatoren wie und, oder und der bereits erwähnte Nicht -Operator können Sie auf einmal auf einmal testen.

Die und Konjunktion Operator -Tests für das Vorhandensein von mehreren erforderlichen Bedingungen:

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

Durch die Verwendung des disjunktiven oder des Schlüsselworts können Sie das Vorhandensein mehrerer alternativer Funktionen für einen Satz von Stilen testen. Dies ist besonders praktisch, wenn einige dieser Alternativen Anbieter -Präfixe für ihre Eigenschaften oder Werte benötigen:

<span><span>@supports (property1: value1) or (-webkit-property1: value1)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>  <span>}
</span><span>}</span>

Sie können auch mit oder mit oder mit Testen der gleichen @Supports -Regel kombinieren:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

Wenn Sie eine Reihe von Bedingungen gruppieren, ist die korrekte Verwendung von Klammern von entscheidender Bedeutung. Und, oder, und nicht miteinander gemischtes Schlüsselwörter, funktioniert nicht. Auch die Art und Weise, wie Sie die Bedingungen innerhalb von Klammern gruppieren, legt die Reihenfolge fest, in der sie bewertet werden. Im obigen Ausschnitt werden die Disjunktiv- oder Bedingungen zuerst bewertet, dann wird die resultierende Antwort anhand einer weiteren erforderlichen Bedingung, die durch das und Schlüsselwort eingeführt wird.

Mit dem Not -Schlüsselwort können Sie jeweils einen Zustand testen. Zum Beispiel ist der folgende Code nicht gültig:

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

Stattdessen müssen Sie alle die Bedingungen gruppieren, die Sie mit dem nicht Schlüsselwort in Klammern negieren. Hier ist die korrigierte Version des Snippets oben:

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  alt="Eine Einführung in die @Supports -Regel von CSS (Feature -Abfragen)" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

Stellen Sie schließlich sicher, dass Sie den weißen Raum nach einem nicht und auf beiden Seiten eines und oder oder.

Die Operatoren in Aktion

Sie können einen Satz von Stilen anwenden, wenn der Browser sowohl Gradienten als auch Mischmodi mithilfe der folgenden Syntax unterstützt (ich habe den folgenden Code für Anzeigezwecke in mehrere Zeilen unterteilt):

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

Da einige ältere Android -Browser das -Webkit -Präfix für lineare Gradienten benötigen, sollten Sie sich nach dem Browserunterstützung untersuchen, indem Sie diese weitere Bedingung in den Block @Supports einbeziehen:

<span><span>@supports (property1: value1) and (property2: value2)</span> {
</span>  <span>element {
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

Angenommen, Ihre Website verwendet Leuchtkraft- und Sättigungsmischmodi, die zum Zeitpunkt des Schreibens in Safari nicht unterstützt werden. Sie möchten weiterhin alternative Stile für diese Browser bereitstellen. So können Sie den entsprechenden Konjunktivzustand mit @Supports nicht mit und

einrichten.

<span><span>@supports (property1: value1) or (-webkit-property1: value1)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>  <span>}
</span><span>}</span>

Alle Demos für diesen Abschnitt sind auf CodePen verfügbar:

Siehe die Stiftdemos auf mehreren Feature -Tests mit @Supports von SitePoint (@sinepoint) auf CodePen.

JavaScript mit CSS -Feature -Abfragen

Sie können die CSS -Funktionsabfragen mithilfe der JavaScript -CSS -Schnittstelle und der Funktion Supports () nutzen. Sie können die Funktion cs.s.supports () auf zwei Arten schreiben.

Die frühere und am weitesten verbreitete Syntax nimmt zwei Argumente ein, d. H.

Eigenschaft und Wert und gibt einen booleschen wahr oder falschen Wert zurück:

<span><span>@supports ((property1: value1) or 
</span></span><span>          <span>(-webkit-property1: value1)) and 
</span></span><span>          <span>(property2: value2)</span> {
</span>  <span>element {
</span>    <span>-webkit-property1: value1;
</span>    <span>property1: value1;
</span>    <span>property2: value2;
</span>  <span>}
</span><span>}</span>

Stellen Sie sicher, dass Sie die Eigenschaft und ihren entsprechenden Wert innerhalb von Zitaten platzieren. Die Spezifikation macht deutlich, dass die obige Funktion true zurückgibt, wenn sie die folgenden zwei Bedingungen erfüllt:

• Die Eigenschaft ist eine „wörtliche Übereinstimmung für den Namen einer CSS -Eigenschaft“, die der Browser unterstützt.
• Der Wert wäre „erfolgreich als unterstützter Wert für diese Eigenschaft analysiert“.

durch buchstäbliche Übereinstimmung Die Spezifikation bedeutet, dass CSS -Flucht nicht verarbeitet und der Weißraum nicht beschnitten wird. Entweichen Sie daher nicht den Zeichen und lassen Sie den nachfolgenden weißen Raum nicht. Andernfalls wird der Test falsch zurückgegeben.

Die alternative, neuere Syntax nimmt nur ein Argument in Klammern:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}</span>

Verwenden dieser Syntax macht es bequem, mehrere Bedingungen mit den und und und und und und / / und- und Schlüsselwörtern zu testen.

Hier ist ein kurzes Beispiel. Nehmen wir an, Sie möchten testen, ob der Browser den Leuchtstoffmischmodus unterstützt. Wenn dies der Fall ist, fügt Ihr JavaScript dem Zielelement dynamisch eine Klasse von Leuchtkraft hinzu, ansonsten fügt es eine Klasse von Noluminosität hinzu. Ihr CSS wird dann das Element entsprechend stylen.

Hier ist das CSS:

<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.example</span> {
</span>    <span>/* alternative styles here */
</span>  <span>}
</span>
<span>}</span>

Wenn Sie der Zwei-Argument-Syntax folgen, könnte das JavaScript-Snippet wie folgt sein:

<span><span><span><article> class<span>="artwork"</span>></article></span>
</span>  <span><span><span><img  alt="Eine Einführung in die @Supports -Regel von CSS (Feature -Abfragen)" > src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span>
</span><span><span><span></span>></span></span></span></span>

Wenn Sie die neueste Single-Argument-Syntax bevorzugen, ersetzen Sie einfach die entsprechende Codezeile oben durch die folgende:

<span><span>@supports (mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>mix-blend-mode: overlay;
</span>  <span>}
</span>
<span>}
</span>
<span><span>@supports not(mix-blend-mode: overlay)</span> {
</span>
  <span><span>.artwork img</span> {
</span>    <span>opacity: 0.5;
</span>  <span>}
</span>
<span>}</span>

Sie können sich die Demo ansehen:

Siehe die Feature -Feature -Feature -Feature von SitePoint (@sinepoint) auf CodePen.

Browserunterstützung

Alle neuesten Versionen der großen Browser unterstützen die @Supports -Regel mit Ausnahme von Internet Explorer 11 und Opera Mini. Ist @Supports für die reale Welt bereit? Ich habe die beste Antwort auf diese Frage in Tiffany Browns Worten gefunden:

… sei vorsichtig, wenn es darum geht, missionskritische Stile in @Supports zu definieren…
Definieren Sie Ihre Basisstile - die Stile, die jeder Ihrer gezielten
Browser können verarbeiten. Verwenden Sie dann @Supports…, um
zu überschreiben und zu ergänzen Diese Stile in Browsern, die neuere Funktionen bewältigen können.

CSS Master, S.303

Schlussfolgerung

In diesem Artikel habe ich native CSS -Browser -Funktionserkennung mit der @Supports -Regel (a.k.a -Funktionsabfragen) untersucht. Ich habe auch die entsprechende JavaScript -API durchgesehen, mit der Sie den aktuellen Status der Browser -Unterstützung für die neuesten CSS -Eigenschaften unter Verwendung der flexiblen CSS.Supports () -Methode überprüfen können.

Browser -Unterstützung für CSS -Feature -Abfragen ist gut, deckt aber nicht alle Ihre Basen ab. Wenn Sie jedoch @Supports in Ihren Projekten verwenden möchten, kann die strategische Platzierung von Stilen in Ihrem CSS-Dokument, wie Tiffany Brown vorschlägt, und die CSS-Supports.js Polyfill von Han Lin Yap hilft.

Wenn Sie die Demos in diesem Artikel ausprobiert haben oder mit @Supports echte Erfahrung gemacht haben, würde ich gerne von Ihnen hören.

häufig gestellte Fragen zu CSS @Supports -Regel

Wie lautet die CSS @Supports -Regel und wie funktioniert es? Wenn die Funktion unterstützt wird, wendet der Browser die Stile in der Regel @Supports an. Wenn nicht, wird es sie ignorieren. Auf diese Weise können Entwickler neue CSS -Funktionen verwenden und gleichzeitig die Kompatibilität mit älteren Browsern beibehalten. Die Syntax ist @Supports, gefolgt von der Funktion und ihrem Wert in Klammern wie folgt: @Supports (Anzeige: Grid) { / * Stile, die angewendet werden sollen, wenn das Gitter unterstützt wird * /}.

Kann ich mehrere Bedingungen verwenden In einer CSS @Supports -Regel? Mit dem und "und" Bediener können Sie überprüfen, ob mehrere Funktionen unterstützt werden, während der oder "Operator überprüft, ob mindestens eine der Funktionen unterstützt wird. Der Bediener "nicht" überprüft, ob eine Funktion nicht unterstützt wird. Zum Beispiel @Supports (Anzeige: Grid) und (Anzeige: Flex) { / * Stile, die angewendet werden sollen, wenn sowohl Raster als auch Flex unterstützt werden * /}.

Wie kann ich überprüfen, ob ein Browser nicht unterstützt wird Eine CSS -Funktion? Zum Beispiel @Supports nicht (Anzeige: Grid) { / * Stile, die angewendet werden sollen, wenn das Gitter nicht unterstützt wird * /}. Dadurch wird die Stile angewendet, wenn der Browser CSS -Raster nicht unterstützt.

Was passiert, wenn ein Browser die @Supports -Regel nicht unterstützt? Unterstützt die Regel, es wird die gesamte Regel ignorieren, einschließlich der darin enthaltenen Stile. Dies bedeutet, dass Sie @Supports sicher verwenden können, ohne sich Sorgen zu machen, dass Sie Ihre Website in älteren Browsern brechen. Es ist jedoch immer noch wichtig, Fallback -Stile für Browser bereitzustellen, die die Funktionen, die Sie mit @Supports testen, nicht unterstützen. @Supports -Regeln, genau wie Sie andere CSS -Regeln nisten können. Auf diese Weise können Sie auf komplexere Weise auf die Unterstützung mehrerer Funktionen testen. Sie könnten beispielsweise eine verschachtelte @Supports -Regel verwenden, um Stile anzuwenden, wenn der Browser sowohl CSS -Raster als auch Flexbox unterstützt. Die Unterstützungsregel ist eine zuverlässige Methode zur Merkmalserkennung in CSS, ist jedoch nicht perfekt. Einige ältere Browser unterstützen @Supports nicht, und einige Browser melden möglicherweise falsch positive oder negative. Es ist immer eine gute Idee, Ihre Website in mehreren Browsern zu testen, um sicherzustellen, dass sie wie erwartet funktioniert.

Kann ich JavaScript mit der @Supports -Regel verwenden? CSS -Funktionsunterstützung mit der Methode CSS.Supports (). Diese Methode funktioniert ähnlich wie bei der @Supports -Regel, ermöglicht es Ihnen jedoch, in Ihrem JavaScript -Code dynamisch für Funktionsunterstützung zu testen.

Gibt es Tools zum Überprüfen der Browser -Unterstützung für CSS -Funktionen? Eine der beliebtesten ist, kann ich verwenden, die aktuelle Informationen zur Browser-Unterstützung für eine Vielzahl von CSS-Funktionen liefert.

Kann ich @Supports mit Medienfragen verwenden? Ja, Sie können @Supports in Kombination mit Medienabfragen verwenden, um Stile sowohl auf der Unterstützung der Funktionsunterstützung als auch auf der Größe der Ansichtsfenster anzuwenden. Dies kann sehr nützlich sein, um reaktionsschnelle Designs zu erstellen, die auch neue CSS -Funktionen nutzen. Verbessern Sie eine Website schrittweise, indem Sie erweiterte CSS -Funktionen nur dann anwenden, wenn sie vom Browser unterstützt werden. Dies kann Dinge wie CSS -Gitter, Flexbox, benutzerdefinierte Eigenschaften und mehr umfassen. Es wird auch verwendet, um Fallback -Stile für Browser bereitzustellen, die diese Funktionen nicht unterstützen.

Das obige ist der detaillierte Inhalt vonEine Einführung in die @Supports -Regel von CSS (Feature -Abfragen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!