Kernpunkte
getComputedStyle zum Laden oder nur in unterstützten Browsern oder das Skript verwendet wird. "Schneiden des Senfes" ist ein Begriff, der von Tom Maslen von der BBC geprägt wurde. Diese Methode verwendet JavaScript, um die Browserfunktionen zu überprüfen und dann mehr CSS und JavaScript zu laden, um ein "erweitertes" Erlebnis bereitzustellen.
In letzter Zeit ist das Interesse an "Schneiden des Senfs" gestürzt, z. B. "Migrieren in Flexbox durch" Schneiden des Senfs "und" serverseitigem Senfschnitt "und umfassendere progressive Verbesserungen.
Verbesserungsmethode
Nach meiner Erfahrung kann auch eine sehr grundlegende "Kernerfahrung" zu Problemen bei einigen sehr alten Browsern führen. Daher möchte ich dies verbessern, um festzustellen, ob es möglich ist, es insgesamt abzulehnen, sehr alte Browser verwenden CSS. Nur HTML zurücklassen.
Die offensichtliche Lösung besteht natürlich darin, JavaScript zu verwenden, um alle CSS bedingt zu laden (wenn der Browser den "Schneiden des Senfs" -Test besteht), aber das fühlt sich für mich zu rau an. Das Gerät wird dafür bestraft, überhaupt keinen Stil zu haben. Also suchte ich nach einer Möglichkeit, dieses Problem nur mit CSS zu lösen, und fand einen alten Artikel von Craig Buckler. Nach vielen Experimenten und Anpassungen habe ich die folgende Methode entwickelt:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)"> <link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
Lassen Sie uns analysieren, was hier vor sich geht.
Arbeitsprinzip
Die Medienabfrage für das erste <link> Element ermöglicht es nur, dass das Stylesheet in den folgenden Browsern geladen wird:
Die Medienabfrage für das zweite <link> Element ermöglicht es nur, dass das Stylesheet in den folgenden Browsern geladen wird:
Wenn diese Technik in Verbindung verwendet wird, lädt diese Technik keine Blätter, es sei denn, der Browser ist das folgende:
Hinweis: Das Stylesheet wird nur einmal geladen, unabhängig von der Anzahl der <link> Elemente.
Medienabfragen können durch Komma-trennende Deklarationen in ein <link> Element kombiniert werden, wie unten gezeigt:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)"> <link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
Ich persönlich lieber, sie zu trennen, weil ich es einfacher finde, zu sehen, was los ist.
Wenn Sie also die Tags semantisch und zugänglich erstellen, können Legacy -Browser immer noch Inhalte anzeigen, die Sie nicht in einfachem HTML stylen.
Dies ist natürlich sehr subjektiv, aber mein Punkt ist, dass jeder, der diese Browser noch verwendet, in der Lage sein sollte, das zu bekommen, was er braucht. Es ist sehr wahrscheinlich, dass durch die Bereitstellung dieser Browser CSS für neuere Browser einige Inhalte unterbrochen werden, was bedeuten kann, dass die Seite völlig unbrauchbar ist. Mit dieser Methode können sie mindestens eine saubere Seite erhalten. Noch wichtiger ist, dass Sie in diesen Browsern nie wieder testen müssen. Du bist fertig! Zumindest theoretisch. Natürlich können Ihre Unterstützungsbedürfnisse variieren, aber der Vorteil dieser Technologie besteht darin, dass Sie darauf aufbauen können. Wenn Sie beispielsweise Unterstützung für IE8 hinzufügen müssen, können Sie bedingte Anmerkungen verwenden, um dasselbe Stylesheet nur für diesen Browser zu laden:
organisieren Wenn Sie ältere Webkit -Geräte mit einem Pixelverhältnis von mehr als 1 unterstützen müssen, können Sie ein weiteres
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
<link>
<!--[if IE 8]> <link rel="stylesheet" href="css/your-stylesheet.css"> <![endif]-->
Elementen enthalten ist, fügt es tatsächlich nur Unterstützung für diesen Satz anderer hinzu Browser.
Sie können auch die Hauptmedienabfrage für das hier bereitgestellte Element ändern, um die benutzerdefinierte Unterstützung zu erhalten, die Sie benötigen. Um dies zu tun, müssen jedoch viel getestet werden. Seien Sie also vorsichtig! <link>
"Aber sie sind Hacks!" <link>
Ja, ich denke, das sind sie, aber es hängt von Ihrer Definition ab. Medienabfragen sollen die Browserfunktionalität testen, bevor CSS angewendet wird, und genau das möchten wir in diesem Fall tun, wenn auch indirekt. Trotzdem bin ich mit der Technologie zufrieden, ob es sich um Hack handelt oder nicht, und es funktioniert in allen meinen Tests gut, und ich habe vor, sie bald für die Produktionsseite zu verwenden.
Ineffektivität
In all den Tests, die ich bisher gemacht habe, habe ich nur eine Situation gefunden, in der die Dinge nicht wie erwartet funktionieren. Auf Android 4.4 reagieren UC -Browser nicht auf Medienabfragen. Soweit ich weiß, verwenden UC -Browser ältere Versionen von Webkit, was dies erklärt. Wenn Sie diesen Browser unterstützen möchten, können Sie CSS mit einer geringen Anzahl von Benutzeragenten -Schnüffeln laden:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)"> <link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
als Bonus, soweit ich weiß, kann JavaScript in Android -UC -Browsern nicht deaktiviert werden, sodass Stylesheets immer geladen werden sollten, es sei denn, Netzwerkfehler usw.
Wenn Sie feststellen, dass Sie andere spezifische Browser unterstützen müssen, können Sie immer den Bedingungen des Benutzeragenten schnüffeln. Ich empfehle jedoch, sie mit Vorsicht zu verwenden, da sie gegen diese Art von CSS nur verstößt Zweck der Technologie.
Ich habe eine Testseite erstellt, um die grundlegende Methode auf verschiedenen Browsern zu testen. Wenn Sie feststellen, dass Browser nicht wie erwartet funktionieren oder andere Medienabfragen finden, die Unterstützung für einen bestimmten Browser- oder Browser -Bereich unterstützen können, lassen Sie es mich in den Kommentaren wissen oder eine Frage im Github -Repository stellen.
Laden Sie das Skript?
OK, wenn Sie CSS verwenden, um den Browserunterstützung zu erkennen, möchten Sie höchstwahrscheinlich einige oder alle Skripte im Browser laden oder ausführen. Wie können wir das tun?
Okay, es gibt verschiedene Möglichkeiten, dies zu tun, aber ich fand die einfachsten wie folgt:
getComputedStyle, um festzustellen, ob Ihr Attribut im Körperelement festgelegt ist. beispielsweise ist der Standardwert des clear -attributs none. Das Einstellen des Körpers both hat nur geringe Auswirkungen auf die Anzeige der Seite (wenn dies der Fall ist, müssen Sie andere Eigenschaften verwenden). Der Code in Ihrem Stylesheet sieht also wie folgt aus:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)">
in Ihrer Seite (oder Skriptdatei):
<!--[if IE 8]> <link rel="stylesheet" href="css/your-stylesheet.css"> <![endif]-->
endgültiger Code
, ob es sich um einen Hack handelt oder nicht, ich versuche hier zu zeigen, dass es eine wiederverwendbare Methode zum Erkennen relativ neuer Browser und Verhinderung älterer Browser daran gibt, Stile anzuwenden oder Skripte auszuführen, was dazu führt, dass sie nur die HTML der Seite zeigen. Es ist nur sehr wenig Code erforderlich und sollte es Ihnen ermöglichen, sich darauf zu konzentrieren, wundervolle Funktionen für modernere Browser zu erstellen, die modernere Technologien verwenden, ohne sich darüber Sorgen zu machen.
Während Sie möglicherweise nicht alles benötigen, was ich hier zur Verfügung gestellt habe, werden alle Teile die folgenden Ergebnisse liefern:
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:1.1)">
Ich habe eine weitere Testseite mit allen zusätzlichen Inhalten ( sitepoint gelegentlich gelöscht die jahrelange auf auf separate HTML-Seiten gehostete Demo löscht Benutzer. Vielen Dank für Ihr Verständnis.
ANERKENNUNG
Ich könnte dies nicht ohne die Arbeit von BrowsStack tun. Kann ich und die Mitarbeiter von Browserhacks und Jeff Clayton verwenden. Lassen Sie mich also bei allen Beteiligten wissen, wenn Sie Ideen oder Feedback haben.
FAQs über CSS -Medienabfragen und "Schneiden des Senfs" (FAQ)
Im Kontext von CSS -Medienabfragen wird "Schneiden des Senfs" verwendet, um eine Technologie zu beschreiben, in der eine Website oder eine Webanwendung überprüft, ob der Browser des Benutzers bestimmte Funktionen unterstützt, bevor sie ein komplettes Erlebnis bereitstellen. Wenn der Browser den Senf nicht "schneiden" kann, ist eine einfachere, grundlegende Website oder Anwendungsversion verfügbar. Dieser Ansatz stellt sicher, dass alle Benutzer unabhängig von der Funktionalität ihres Browsers auf den Inhalt der Website zugreifen können.
Um festzustellen, ob der Browser "den Senf schneiden", können Sie einfache JavaScript -Tests verwenden. Dieser Test prüft, ob der Browser bestimmte Funktionen wie querySelector und localStorage unterstützt. Wenn der Browser den Test besteht, gilt er als "Senf schneiden" und kann die vollständige Erfahrung der Website oder Anwendung übernehmen.
"Schneiden der Senf" ist wichtig, da sichergestellt wird, dass Ihre Website oder Webanwendung für alle Benutzer unabhängig von der Funktionalität ihres Browsers zugänglich ist. Durch die Bereitstellung einer einfacheren Version der Website für Browser, die den Senf nicht "schneiden" kann, können Sie sicherstellen, dass alle Benutzer Zugriff auf Ihre Inhalte haben.
Ja, Sie können CSS -Medienabfragen ohne JavaScript verwenden. Durch die Verwendung von JavaScript mit CSS -Medienabfragen können Sie Benutzern ein maßgeschneidertes Erlebnis basierend auf ihren Browserfunktionen bieten.
, querySelector und localStorage prüfen. Dies sind alles unterstützte Funktionen von modernen Browsern, sind jedoch möglicherweise nicht in älteren Browsern erhältlich. addEventListener
Was passiert, wenn der Browser den Senf nicht "schneiden" kann?
Kann ich die Erfahrung anpassen, die ich für einen Browser anbietet, der den Senf nicht "schneiden" kann?
Ein potenzieller Nachteil der Verwendung der Technologie „Schneiden der Senf“ besteht darin, dass zusätzliche Entwicklungszeit erforderlich ist, um vereinfachte Versionen von Websites oder Anwendungen zu erstellen und zu testen. Die Vorteile der Gewährleistung, dass alle Benutzer Zugriff auf Inhalte haben, überwiegen jedoch häufig diesen Nachteil.
Ja, die Technologie „Schneiden des Senfkörpers“ ist heute noch relevant. Während moderne Browser eine Vielzahl von Funktionen unterstützen, gibt es immer noch viele Benutzer, die ältere Browser verwenden, die sie möglicherweise nicht unterstützen. Durch die Verwendung der Technologie „Schneiden der Senf“ können Sie sicherstellen, dass Ihre Website oder Anwendung für alle Benutzer zugänglich ist.
Das obige ist der detaillierte Inhalt vonSchneiden Sie den Senf mit CSS -Medienfragen ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Bitcoin-Inschrift Drachenmünze
Der Unterschied zwischen C-Sprache und Python
Was ist der Unterschied zwischen Originalbildschirm und zusammengebautem Bildschirm?
Ist Python Front-End oder Back-End?
Welche Software ist Twitter?
Was bedeutet Bildrate?
Das Installationsprogramm kann keine neue Systempartitionslösung erstellen
Java behält zwei Dezimalstellen bei
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
