Ich habe Ссылка gefunden, um CSS3-Verläufe zu erzeugen. Es gibt jedoch eine Sache, die großartig wäre, wenn jemand für mich klären könnte.
Wie ich es verstehe, unterstützt IE9 die Filter nicht auf dieselbe Weise wie IE6-8 und unterstützt auch keine CSS3-Gradienten. Colorzilla bietet eine sehr clevere Möglichkeit, IE9 mit Multi-Stop-Gradienten zu arbeiten, indem SVG-Daten für den Farbverlauf im CSS eingebunden werden und der Filter für IE9 nur für Elemente gesetzt wird, die den Farbverlauf verwenden. Im Folgenden sehen Sie ein Beispiel, was Colorzilla generiert, wenn Sie das Kontrollkästchen IE9 Support aktivieren, wobei die Zeile background: url(data ... die für IE9 hinzugefügte Zeile ist.
Mit den folgenden hinzugefügt, um das Element <head> im HTML.
Ich frage mich, ob es generell vorzuziehen ist, diesen Code für IE9 zu verwenden, oder stattdessen auf einen regulären Image-Fallback angewiesen ist? Gibt es Situationen, in denen ein Ansatz besser ist als der andere? Kann dieser SVG-Code auch die Leistung anderer Browser beeinflussen, die die CSS3-Eigenschaften verwenden, oder ignoriert er diese Zeile?
Colorzilla scheint die Implikationen dieses Codes nicht zu erklären, vielleicht gibt es auch keine und es ist der richtige Weg, es immer zu tun. Wenn das der Fall ist, tut mir leid, dass ich die Leute Zeit verschwendet habe, aber die Tatsache, dass es eine tickbare Option ist, ließ mich denken, dass es einen Grund geben könnte, es nicht zu benutzen.
Der IE9-SVG-Gradient funktioniert gut, aber der IE7 betrachtet es als ungesicherten Inhalt. Wenn Sie also Ihre Website mit diesem Design hinter SSL / HTTPS sichern, erhalten IE7-Benutzer die "Diese Seite enthält sowohl sichere als auch nicht sichere Elemente". Ich habe diesen Abschnitt in eine bedingt enthaltene CSS-Datei gezogen, damit IE7 nicht bellt.
IE9 unterstützt IE6-8-Filter, IE10 jedoch nicht. Sie haben Recht, dass IE9 keine CSS3-Gradienten unterstützt, aber IE10 wird dies tun.
Da IE9 IE6-8-Filter unterstützt, muss colorzilla den IE6-8-Filter ausschalten, wenn Sie den SVG-Filter auf das Objekt anwenden. Der Filter IE6-8 wird mithilfe einer Filtereigenschaft im Gegensatz zu CSS-Filtern festgelegt, die mit der Eigenschaft background festgelegt werden. Die <head> -Zugabe schaltet daher den IE6-8-Filter auf IE9 aus. Bei den verschiedenen Eigenschaftsnamen gilt die letzte Selektorübereinstimmungsregel nicht.
Dieser Code sollte schneller sein als der normale Fallback von Bildern, da der SVG-Code hardwarebeschleunigt werden kann. Der SVG-Code wirkt sich nicht auf andere Browser aus, da der letzte Selektor übereinstimmt, deshalb ist die alte Browserzeile ganz oben.
Tags und Links css svg css3 internet-explorer-9