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.
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:
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</span> class<span>="artwork"</span>></span> </span> <span><span><span><img</span> src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span> </span><span><span><span></article</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.
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</span> class<span>="artwork"</span>></span> </span> <span><span><span><img</span> src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span> </span><span><span><span></article</span>></span></span>
Die Operatoren in Aktion
<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>
<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>
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>
Siehe die Stiftdemos auf mehreren Feature -Tests mit @Supports von SitePoint (@sinepoint) auf CodePen.
JavaScript mit CSS -Feature -Abfragen
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>
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</span> class<span>="artwork"</span>></span> </span> <span><span><span><img</span> src<span>="myimg.jpg"</span> alt<span>="cityscape"</span>></span> </span><span><span><span></article</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.
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
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.
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 * /}.
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 @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!