Градиенты для IE9

[bio]

Может кому понадобиться. Нашёл решение проблемы градиентов для ie9.

Сам скрипт https://rawgit.com/AsanovRuslan/gradientIE9/master/ie9-svg-gradient.js

За основу взят http://jsfiddle.net/camartinez1229/thSxh/show/light/

Суть работы в том что берётся css3 градиент из файлов стилей конвертируется в svg и записывается обратно в свойство background-image.

Для правильной работы нужно какое-то свойство в котором будет храниться наш градиент, так как ie9 вырезает нестандартные значения свойств. По умолчанию используется свойство "-pie-background", но его легко поменять в скрипте.

Edited May 11, 2014 by bio

[SelenIT]

А нельзя доработать так, чтобы фейковое свойство не требовалось, а подхватывался стандартный W3Cшный синтаксис? Тогда получился бы шикарный относительно легковесный полифилл!

[bio]

Так как IE вырезает не стандартные значения свойств в объекте стилей, нормальным способом это к сожалению сделать не получиться. Единственный найденный мной способ это парсить css на клиенте самостоятельно что в зависимости размера и кол-во файлов стилей может занять достаточно большое кол-во времени =(

[ryter]

зачем лишние скрипты если можно сгенерить сразу svg градиент тут http://www.colorzilla.com/gradient-editor/ ну или в случаем с compass просто включить  $experimental-support-for-svg: true;

[bio]

Compass не правильно конвертирует в svg gradient.

Colorzilla не подходит, нужно постоянно конвертировать, а это очень надоедает если нужно сменить цветовое решение у пару сайтов.

[SelenIT]

Так как IE вырезает не стандартные значения свойств в объекте стилей, нормальным способом это к сожалению сделать не получиться

Да, действительно. Тогда, имхо, логично привязываться к -webkit-варианту - всё равно в обозримое время он будет нужен для андроидов.

[Николя223]

Я вас не понимаю. Можно самому сделать небольшое приложение - на JS и например PHP, которое всё само сделает. останется только цвета подставлять

в админку - в настройки колорпикеры, а в css уже выставляется обработанный css

<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">    <stop offset="0%" stop-color="#1e5799" stop-opacity="1"/>    <stop offset="50%" stop-color="#2989d8" stop-opacity="1"/>    <stop offset="51%" stop-color="#207cca" stop-opacity="1"/>    <stop offset="100%" stop-color="#7db9e8" stop-opacity="1"/>  </linearGradient>  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /></svg>

Вот - типичный пример svg (взял из колорзилы только что и раскодировал), на php подвергнуть его кодировке и вставляй-нехочу

p.s: у меня с этим динамическим конвертированием уже глаз наметан))

динамикой совмещения php с CSS и JS давно уже занимаюсь.. Плюсов очень много 

upd: если будете CSS на PHP формировать, не забудьте правильный заголовок отправить

Edited May 12, 2014 by Николя223

[bio]

 

Так как IE вырезает не стандартные значения свойств в объекте стилей, нормальным способом это к сожалению сделать не получиться

Да, действительно. Тогда, имхо, логично привязываться к -webkit-варианту - всё равно в обозримое время он будет нужен для андроидов.

 

Если я верно вас понял то речь идёт о background-image: -webkit-linear-gradient(). В этом случае IE тоже вырежет данное значение так как идёт запись вида "стандартное-свойство: не-стандартное-значение".

 

Николя223, о реализации на сервере тоже думал, и это лучшее решение, но я чаще всего работаю только с клиентской частью и на сервер никакого доступа нет и никто давать не будет, поэтому для меня это не выход

Edited May 12, 2014 by bio

[SelenIT]

Если я верно вас понял то речь идёт о background-image: -webkit-linear-gradient(). В этом случае IE тоже вырежет данное значение так как идёт запись вида "стандартное-свойство: не-стандартное-значение".

Всё верно, это я ляпнул не подумавши))

[Николя223]

а что если попытаться сделать то же самое, но без php

http://javascript.ru/php/base64_decode

по сути то, взять яваскриптом, собрать нужную крос подборку, на основе пред. цветов и вставить их... думаю лучше не в атрибут, а в head в style, или я что то не так понял?

Edited May 12, 2014 by Николя223

[bio]

Николя223, если честно то я не совсем понял для чего base64

 

Сам скрипт работает так: проходится по всем стилям document.styleSheets, ищет те селекторы в которых используется свойство с градиентом, конвертирует в svg и записывает обратно в файл стилей. Работа с файлами стилей даёт преимущество в селекторах - градиент будет нормально отображаться в псевдоэлементах, и нормальная работа с динамическими элементами.

Edited May 12, 2014 by bio