Respond
1.4.2
Copyright 2011: Scott Jehl, scottjehl.com
Lizenziert unter der MIT-Lizenz.
Das Ziel dieses Skripts besteht darin, ein schnelles und kompaktes (3 KB minimiertes / 1 KB komprimiertes) Skript bereitzustellen, um responsive Webdesigns in Browsern zu ermöglichen, die keine CSS3-Medienabfragen unterstützen – insbesondere Internet Explorer 8 und niedriger. Es ist so geschrieben, dass es wahrscheinlich auch die Unterstützung für andere nicht unterstützende Browser patchen wird (mehr Informationen dazu folgen in Kürze).
Wenn Sie mit den Konzepten rund um Responsive Web Design nicht vertraut sind, können Sie sich hier und auch hier informieren
Demoseite (die Farben ändern sich, um anzuzeigen, dass Medienabfragen funktionieren)
@media screen and ( min-width : 480 px ){
/** ...styles for 480px and up go here **/
}Verweisen Sie nach Ihrem gesamten CSS auf das Skript „respond.min.js“ (mindestens 1 KB/gzipped) (je früher es ausgeführt wird, desto größer ist die Chance, dass IE-Benutzer keinen Blitz von Inhalten ohne Medien sehen).
Öffnen Sie den Internet Explorer und pumpen Sie vor Freude die Fäuste
Respond.js funktioniert, indem es über AJAX eine makellose Kopie Ihres CSS anfordert. Wenn Sie Ihre Stylesheets also auf einem CDN (oder einer Subdomain) hosten, müssen Sie einen lokalen Proxy einrichten, um das CSS für alte IE-Browser anzufordern. Frühere Versionen empfahlen einen veralteten x-Domänen-Ansatz, aber ein lokaler Proxy ist (aus Leistungs- und Sicherheitsgründen) dem Versuch vorzuziehen, die domänenübergreifenden Einschränkungen zu umgehen.
Einige Hinweise, die Sie beachten sollten:
Der Fokus dieses Skripts ist absichtlich sehr eng: Nur Medienabfragen mit minimaler und maximaler Breite sowie alle Medientypen (Bildschirm, Druck usw.) werden in nicht unterstützende Browser übersetzt. Ich wollte die Dinge in Bezug auf Dateigröße, Wartung und Leistung einfach halten, deshalb habe ich die Unterstützung absichtlich auf Abfragen beschränkt, die für die Erstellung eines (mobile-first) responsiven Designs unerlässlich sind. In Zukunft werde ich die Dinge möglicherweise etwas überarbeiten, um einen Hook zum Einbinden zusätzlicher Medienabfragefunktionen hinzuzufügen – bleiben Sie dran!
Browser, die CSS3-Medienabfragen nativ unterstützen, können dieses Skript nicht so schnell wie möglich ausführen. Beim Testen auf Unterstützung werden alle anderen Browser einem Schnelltest unterzogen, um festzustellen, ob sie Medienabfragen unterstützen oder nicht, bevor mit der Ausführung des Skripts fortgefahren wird. Dieser Test ist jetzt separat oben enthalten und verwendet die hier zu findende window.matchMedia-Polyfüllung: https://github.com/paulirish/matchMedia.js . Wenn Sie diese Polyfüllung bereits über Modernizr oder auf andere Weise einbinden, können Sie diesen Teil gerne entfernen.
Dieses Skript basiert auf keinen anderen Skripten oder Frameworks (außer dem enthaltenen matchMedia-Polyfill) und ist für die mobile Bereitstellung optimiert (~1 KB Gesamtdateigröße, min./gzip).
Wie Sie vielleicht erraten haben, ist diese Implementierung im Hinblick auf CSS-Parsing-Regeln ziemlich dumm. Das ist eine gute Sache, denn dadurch kann es sehr schnell laufen, aber seine Lockerheit kann auch zu unerwartetem Verhalten führen. Beispiel: Wenn Sie eine ganze Medienabfrage in einen Kommentar einfügen, um deren Regeln zu deaktivieren, werden Sie wahrscheinlich feststellen, dass diese Regeln in Browsern, die Medienabfragen nicht unterstützen, aktiviert werden.
Respond.js analysiert weder CSS, auf das über @import verwiesen wird, noch funktioniert es mit Medienabfragen innerhalb von Stilelementen, da diese Stile nicht erneut zum Parsen angefordert werden können.
Aufgrund von Sicherheitsbeschränkungen erlauben einige Browser möglicherweise nicht, dass dieses Skript mit file://-URLs funktioniert (da es xmlHttpRequest verwendet). Führen Sie es auf einem Webserver aus.
Wenn die Anforderung für die CSS-Datei, die MQ-spezifische Stile enthält, hinter einer Umleitung steht, schlägt Respond.js stillschweigend fehl. CSS-Dateien sollten mit dem Status 200 antworten.
Derzeit werden Medienattribute für Linkelemente unterstützt, jedoch nur, wenn das verknüpfte Stylesheet keine Medienabfragen enthält. Wenn es Abfragen enthält, wird das Medienattribut ignoriert und die internen Abfragen werden normal analysiert. Mit anderen Worten: @media-Anweisungen im CSS haben Priorität.
Berichten zufolge funktionieren CSS-Dateien, die in UTF-8 mit Byte-Order-Mark (BOM) codiert sind, nicht mit Respond.js in IE7 oder IE8. Vermerkt in Ausgabe Nr. 97
WARNUNG: Das Einfügen von @font-face-Regeln in eine Medienabfrage führt dazu, dass IE7 und IE8 beim Laden hängen bleiben. Um dies zu umgehen, platzieren Sie die @font-face-Regeln offen, als Geschwister zu anderen Medienabfragen.
Wenn mehr als 32 Stylesheets referenziert werden, gibt der IE einen Fehler aus: Invalid procedure call or argument . Wenn Sie Ihr CSS verketten, sollte das Problem behoben sein.
Sass/SCSS-Quellkarten werden nicht unterstützt; @media -sass-debug-info wird „respond.js“ beschädigen. Vermerkt in Ausgabe Nr. 148
Internet Explorer 9 unterstützt CSS3-Medienabfragen, jedoch nicht innerhalb von Frames, wenn sich das CSS mit der Medienabfrage in einer externen Datei befindet (dies scheint ein Fehler in IE9 zu sein – siehe https://stackoverflow.com/questions/10316247/media-queries). -fail-inside-ie9-iframe). Wenn Sie dieses Problem haben, finden Sie in diesem Commit eine Lösung. https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603
Verschachtelte Medienabfragen werden nicht unterstützt
Grundsätzlich durchläuft das Skript das auf der Seite referenzierte CSS und führt einen oder zwei reguläre Ausdrücke auf deren Inhalt aus, um Medienabfragen und die zugehörigen CSS-Blöcke zu finden. Im Internet Explorer ist es unmöglich, den Inhalt des Stylesheets in seinem vorab analysierten Zustand abzurufen (was in IE 8 bedeutet, dass seine Medienabfragen aus dem Text entfernt werden), daher fordert Respond.js die CSS-Dateien mithilfe von Ajax und erneut an analysiert die Textantwort von dort. Stellen Sie sicher, dass Sie das Caching Ihrer CSS-Dateien richtig konfigurieren, damit diese erneute Anfrage nicht tatsächlich an den Server geht, sondern stattdessen Ihren Browser-Cache erreicht.
Von dort aus wird jeder Medienabfrageblock der Reihe nach über Stilelemente an den Kopf angehängt, und diese Stilelemente werden aktiviert und deaktiviert (sprich: angehängt und aus dem DOM entfernt), je nachdem, wie ihre minimale/maximale Breite mit der Browserbreite verglichen wird. Das Medienattribut der Stilelemente stimmt mit dem der Abfrage im CSS überein, es könnte also „Bildschirm“, „Projektor“ oder was auch immer Sie möchten sein. Allen im CSS enthaltenen relativen Pfaden wird die href ihres Stylesheets vorangestellt, sodass Bildpfade zu ihrem richtigen Ziel führen
Klar, ein paar:
Dies ist nicht das einzige Polyfill-Skript für CSS3-Medienabfragen. aber es könnte verdammt noch mal das schnellste sein.
Wenn Sie nach einer robusteren Unterstützung für CSS3-Medienabfragen suchen, schauen Sie sich vielleicht https://code.google.com/p/css3-mediaqueries-js/ an. Beim Testen habe ich festgestellt, dass dieses Skript beim Rendern komplexer responsiver Designs deutlich langsam ist (sowohl in Bezug auf die Dateigröße als auch auf die Leistung), aber es unterstützt tatsächlich viel mehr Medienabfragefunktionen als dieses Skript. Großer Tipp an die Autoren! :) :)
