Gibt es eine Möglichkeit, die CSS3-Eigenschaft "Hintergrundgröße" zu verwenden und dann etwas wie Modernizr zu verwenden, um sicherzustellen, dass es in älteren Browsern unterstützt wird (insbesondere möchte ich die Option "Hintergrundgröße: Cover" verwenden)?
Ich habe einen Blick auf cssFx geworfen, das auf der Modernizr-Website erwähnt wird, aber dies scheint nur Anbieterpräfixe für Browser hinzuzufügen, die eine Eigenschaft verwenden müssen, statt dass Browser wie IE8 die Hintergrundgrößeneigenschaft unterstützen.
Auch CSS3Pie wurde angeschaut, aber das scheint die Hintergrundgröße nicht zu unterstützen.
[11/10/2011 - Bei älteren Browsern denke ich hauptsächlich an IE7 / 8, aber idealerweise würde ich gerne FF3.6, etc.]
behandeln Sie haben Recht, dass background-size in einigen älteren Browsern nicht unterstützt wird.
Die typische Lösung hierfür ist die Simulation mit einem zusätzlichen <div> oder sogar einem <img> Element, das sich hinter dem Element befindet, das den Hintergrund haben soll.
Dies kann einfach durch zusätzliches Markup erreicht werden, aber diese Lösung hat den Nachteil, dass Sie sie für alle Browser anstelle der Eigenschaft background-size verwenden. Mit anderen Worten bedeutet das, dass Sie Ihren Code absichtlich zugunsten alter Browser abwerten, was nicht ideal ist.
Wenn Sie die CSS-Eigenschaft für Browser verwenden möchten, die sie unterstützen, können Sie ein wenig Javascript verwenden, um das obige Markup zu generieren, aber nur bei Bedarf. Dies bedeutet, dass moderne Browser gerne background-size verwenden und nur ältere Browser den Fallback verwenden.
Es gibt eine Reihe von Javascript-Lösungen, die im Internet verfügbar sind (eine schnelle Google-Suche ergab folgendes: Ссылка unter anderem), aber noch wichtiger müssen Sie wissen, wie man es basierend auf dem Browser auslöst.
Hier kommt Modernizr ins Spiel. Die Beschreibung, die Sie von Modernizr in der Frage gegeben haben, ist nicht ganz korrekt. Es erzeugt eine Reihe von CSS-Klassen in Ihrem HTML-Markup und passende Variablen in Ihrem Javascript, die alle Browserfunktionen darstellen. Dies sind boolesche Flags, die angeben, ob der aktuelle Browser unterstützt.
Mit Modernizr können Sie dann Javascript einchecken, ob der Browser background-size unterstützt oder nicht, und nur die alternative JavaScript-Funktion ausführen, wenn sie dies nicht unterstützt.
Ich hoffe, das hilft.
Sie können die Unterstützung für die Hintergrundgröße und ihre Eigenschaften unter Ссылка
sehenDieses CSS unterstützt IE9 +, FireFox 3.6+, Safari, Chrome:
%Vor%Für IE7 / 8-Unterstützung caniuse.com wird dieses Polyfill aufgeführt: Ссылка
Zunächst einmal gibt es eine einfache Lösung für Firefox 3.6. Es gibt ein Anbieterpräfix:
%Vor%Im Hinblick auf eine Lösung bei der Verwendung von Medienabfragen: Sie könnten mit Modernizr ein anderes Bild ausrichten, wenn Benutzer ältere Browser anzeigen. Dies würde eine andere Browseranforderung bedeuten. Wahrscheinlich werden Sie jedoch für jede Abfrage, bei der die Bildschirmgröße kleiner wird, kleinere Bilder laden. Da Modernizr eine Situation schafft, in der diese Anforderungen in neueren Browsern ignoriert werden, werden Sie die Serveranforderungen für die Mehrheit der Benutzer, die neuere Browser verwenden, reduzieren.
Aus Neugierde habe ich die obige Lösung ausprobiert und es hat funktioniert. Ich habe die folgenden modernisierten Klassen wie folgt angewendet: .no-backgroundsize für nicht Hintergrund-unterstützende Größe und geladen in einem neuen Bild.
Für alle anderen Browser habe ich die Klasse .backgroundsize hinzugefügt und die Präfix-Erwähnung oben für FF hinzugefügt. Dies könnte für jede Medienabfrage mit einem neuen Bild für .no-background wiederholt werden. Dies ist eine Möglichkeit, das Problem zu lösen.
- Ich habe diesen Beitrag bearbeitet, nachdem ich es am 15.12.12 versucht habe.
Ich denke, dass Sie wahrscheinlich modernisieren möchten, um zu überprüfen, ob die Eigenschaft im aktuellen Browser unterstützt wird. Wenn nicht, versuchen Sie, eine alternative Darstellung Ihrer Site / Anwendung zu finden, die immer noch gut aussieht, ohne dass die Hintergrundgröße erforderlich ist.
Natürlich können Sie auch einen anderen Ansatz ausprobieren, der diese Eigenschaft überhaupt nicht betrifft, wie ein darunter liegendes div mit einem Bild darin (das Sie size) und dem Inhalt, der dieses div überlappt. Viel Glück.
Bestes Beispiel für eine bessere Unterstützung:
%Vor%Fügen Sie das nicht hinzu, da es in neuen Firefox-Versionen Probleme gemacht hat:
%Vor%Quelle: mozilla.org