-webkit-gradient и -webkit-linear-gradient

SelenIT · June 14, 2012

Один из самых популярных генераторов CSS-градиентов генерирует, кроме прочего, такую пару свойств:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #aaaaaa 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */

С учетом того, что он генерирует также немало лишнего (напр. -ms-вариант, который уже не понадобится), возник вопрос: нужны ли оба этих свойства? Не достаточно ли одного первого (впридачу к беспрефиксному варианту, по новому стандарту с to)? Существуют ли webkit-браузеры, понимающие вторую нотацию, но не понимающие первую, и значимы ли они хоть сколько-либо?

psywalker · June 14, 2012

Имхо, все эти генераторы, фреймворки и т.д, добавляют кучу лишнего для перестраховки. Поэтому считаю, что два варианта нафиг не нужны и нужно оставить тока один.

background: -webkit-linear-gradient(top, #aaaaaa 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */

От -ms- этот генератор скорее всего откажется, но тока позже, когда точно всё устаканиться и выйдет IE10.

SelenIT · June 14, 2012

Хм... я как раз склонялся к тому, чтобы оставить -webkit-gradient(linear, ...) — у которого охват пошире (всякие Сафари 5.0.х — ну мало ли, первые айпады и т.п.). И добавить правильный вариант без префикса и с to (генератор, кстати, to тоже до сих пор не добавил).

А чем -webkit-linear-gradient круче? Есть разница в производительности и т.п.?

Softlink · June 14, 2012

А чем -webkit-linear-gradient круче? Есть разница в производительности и т.п.?

Разве что унификация с -moz- и -o-

SelenIT · June 14, 2012

Вот и я того же мнения. Грохать поддержку старого синтаксиса они вряд ли будут, со дня на день пойдет поддержка беспрефиксного (W3C уже разрешил). А терять поддержку целого класса iOS 4- (ну и десктопных сафарей 5.0.х- заодно, по мелочи) ради какой-то унификации — обидно и, имхо, нелогично

Так что, консенсус на том, что на сегодня для градиентов достаточно следующего?

background: #a8a8a8; /* бесполезные ископаемые */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #aaa), color-stop(100%, #bbb)); /* Chrome2+, Safari4+, iOS3.2+, Android2.1+ */
background: -moz-linear-gradient(top, #aaa 0%, #bbb 100%); /* FF3.6+ */
background: -o-linear-gradient(top, #aaa 0%, #bbb 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #aaa 0%, #bbb 100%); /* W3C, IE10 и все-все-все завтра */

и отдельно

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#bbbbbb', GradientType=0); /* IE6-9 */

Вот бы еще найти вариант, чтоб можно было не отдельно... никто не знает, как спрятать CSS от 10-го IE, оставив для всех предшествующих и не вынося в др. файл?

mishka · June 14, 2012

Я делаю так:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie10 lt-ie9 lt-ie8 ie7" lang="en-US"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie10 lt-ie9 ie8" lang="en-US"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10 ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.lt-ie10 .box {
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#bbbbbb', GradientType=0); /* IE6-9 */
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

Great Rash · June 14, 2012

А W3C уже определились с окончательным синтаксисом градиента? Имхо надо юзать тот вариант, который будет оставлен в дальнейшем.

SelenIT · June 14, 2012

mishka, хороший вариант (скорее всего что-то подобное и придется применить), но для общей эрудиции/быстрых фиксов хотелось бы найти и чисто CSSовое решение

Great Rash, да, определились (статус CR). Но ни старый, ни новый префикснутые -webkit-варианты ему не соответствуют . Но у старого варианта браузерная поддержка шире

mishka · June 14, 2012

Для общей эрудиции конечно не помешает, но на практике, если с нуля делать проект, то вариант с этими классами лучше всего.

Раньше постоянно для ие6-7 юзал * html, *+html, теперь просто не понимаю как можно было юзать столь неудобную запись

psywalker · June 14, 2012

Хм... я как раз склонялся к тому, чтобы оставить -webkit-gradient(linear, ...) — у которого охват пошире (всякие Сафари 5.0.х — ну мало ли, первые айпады и т.п.). И добавить правильный вариант без префикса и с to (генератор, кстати, to тоже до сих пор не добавил).
А чем -webkit-linear-gradient круче? Есть разница в производительности и т.п.?

А хрен его знает, мне просто вот такая форма больше нравится linear-gradient + чтобы был правильный вариант с to. В общем, чтобы один остался.

SelenIT · June 14, 2012

как спрятать CSS от 10-го IE, оставив для всех предшествующих и не вынося в др. файл?

Если SelenIT не идет к Микрософту, то Микрософт идет к SelenITу

Разработчики Internet Explorer отказались от поддержки старых свойств filter (DX-фильтров) и их обновлённого синтаксиса -ms-filter во всех режимах и для всех движков в IE10, работающих в зоне открытого интернета, т.е. для подавляющего большинства сайтов.

Решение неоднозначное (особенно насчет режимов совместимости), но в данном конкретном случае мне только того и надо было. Наконец в MS настроили телепательную машинку!)

lexxcode · June 15, 2012

Вот бы еще найти вариант, чтоб можно было не отдельно... никто не знает, как спрятать CSS от 10-го IE, оставив для всех предшествующих и не вынося в др. файл?

Я прячу так:


.css {
    background: #87e0fd;
    background: url(data:image/svg+xml;base64,....); /* тут svg в base64 для IE9 */
    background: -moz-linear-gradient(top, #87e0fd 0%, #05abe0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(100%,#05abe0));
    background: -webkit-linear-gradient(top, #87e0fd 0%,#05abe0 100%);
    background: -o-linear-gradient(top, #87e0fd 0%,#05abe0 100%);
    background: -ms-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* Типа можно удалить */
    background: linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* W3C */
    *filter: progid:DXImageTransform.Microsoft.gradient(....); /* (*) отрубаю все кроме IE7- (минус) */
}

/* это в самом конце файла, все, что нужно включить для IE8 персонально */
@media \0screen {
    .css {
        filter: progid:DXImageTransform.Microsoft.gradient(....); /* оживляем IE8 */
    }
}

не супер лаконично, но нет хлама с лишними классами и с CC для IE в html.

SelenIT · June 15, 2012

О, кстати, занятный вариант! Про SVG в base64 я и забыл... а верно ли я подозреваю, что с SVG-строчкой будет достаточно и такого?

.css {
    background: #87e0fd; /* бесполезные ископаемые */
    background: url(data:image/svg+xml;base64,....); /* тут svg в base64 для IE9 и Оперы 9.50+ */
    background: -moz-linear-gradient(top, #87e0fd 0%, #05abe0 100%); /* FF 3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(100%,#05abe0)); /* все вебкитные последних 2-3 лет */
    background: linear-gradient(to bottom, #87e0fd 0%,#05abe0 100%); /* новый синтаксис W3С, для IE10+ и всех-всех-всех сезона лето-осень 2012 и позже */
    *filter: progid:DXImageTransform.Microsoft.gradient(....); /* IE7- */
    filter: progid:DXImageTransform.Microsoft.gradient(....)\0/; /* по идее, IE8 оnly */
}

Эх, теперь еще найти бы всё-таки хак для IE8- — чтоб еще одну невалидную строчку сэкономить.. А для простого двухцветного градиента можно оставить один filter без хака — всё равно IE9 последний, кто его увидит.

lexxcode · June 15, 2012

А -webkit-linear-gradient это же первый вариант который был предложен вроде бы? Но у этого варианта поддержка chrome с 3 версии, но это как это, но safari с 5.1+. А как у того же safari с поддержкой -webkit-gradient?

А это разве работает?


filter: progid:DXImageTransform.Microsoft.gradient(....)\0/; /* по идее, IE8 оnly */

Если да, то собственно и получается IE8- вместе со строчкой (не?)


*filter: progid:DXImageTransform.Microsoft.gradient(....); /* IE7- */

Про IE9 не очень понял

SelenIT · June 15, 2012

А -webkit-linear-gradient это же первый вариант который был предложен вроде бы? Но у этого варианта поддержка chrome с 3 версии, но это как это, но safari с 5.1+. А как у того же safari с поддержкой -webkit-gradient?

Насколько я в курсе, второй. По моим данным (нагуглившимся), Сафари держит -webkit-gradient с 4-й версии, iOS — с 3.2 (-webkit-linear-gradient — с 5.1 и 5 соответственно). И разработчики вебкита вроде бы обещали поддержку старого синтаксиса не убирать.

А это разве работает?
filter: progid:DXImageTransform.Microsoft.gradient(....)\0/; /* по идее, IE8 оnly */
Если да, то собственно и получается IE8- вместе со строчкой (не?)

Упс . Поторопился я. Похоже что не работает (IE9 тоже его видит). Как и другие хаки "якобы IE8-only" (напр. из коллекции Пола Айриша). Жаль.

Про IE9 не очень понял

Имею в виду, что если градиент таков, что для IE9 можно нарисовать его фильтром, а не SVG-шкой (просто из цвета в цвет от 0 до 100%) — то можно так и записать всё подряд:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #aaa), color-stop(100%, #bbb)); /* Safari4+, iOS3.2+, Android2.1+ */
background: -moz-linear-gradient(top, #aaa 0%, #bbb 100%); /* FF3.6+ */
background: -o-linear-gradient(top, #aaa 0%, #bbb 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #aaa 0%, #bbb 100%); /* W3C, IE10 и светлое будущее */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#bbbbbb', GradientType=0); /* IE5.5-9 */

В IE10 сработает стандартный синтаксис, а фильтр он (в свете текущих новостей) просто проигнорирует. Что по факту и требовалось.

lexxcode · June 15, 2012

Упс . Поторопился я. Похоже что не работает (IE9 тоже его видит). Как и другие хаки "якобы IE8-only" (напр. из коллекции Пола Айриша). Жаль.

Я опираюсь на коллекцию Dimox'a

Про IE9 не очень понял
Имею в виду, что если градиент таков, что для IE9 можно нарисовать его фильтром, а не SVG-шкой (просто из цвета в цвет от 0 до 100%) — то можно так и записать всё подряд:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #aaa), color-stop(100%, #bbb)); /* Safari4+, iOS3.2+, Android2.1+ */
background: -moz-linear-gradient(top, #aaa 0%, #bbb 100%); /* FF3.6+ */
background: -o-linear-gradient(top, #aaa 0%, #bbb 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #aaa 0%, #bbb 100%); /* W3C, IE10 и светлое будущее */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#bbbbbb', GradientType=0); /* IE5.5-9 */
В IE10 сработает стандартный синтаксис, а фильтр он (в свете текущих новостей) просто проигнорирует. Что по факту и требовалось.

Но в IE9 есть с фильтром другая неприятная беда, помимо того, что фильтром не сделаешь сложный градиент, так еще из-за фильтра скругление углов не будет. Верней оно как бы и будет, но будет накрыто сверху фильтром, у которого углы соответственно не скругляются. Так, что svg реально решает.

SelenIT · June 16, 2012

Насчет углов согласен. Два угла можно худо-бедно спасти (визуально), сделав градиент из одного цвета в полную прозрачность. Но когда скруглять не надо (у меня сейчас как раз такая ситуация) — по-моему, вполне вариант?

lexxcode · June 16, 2012

вариант конечно. но захешированная svg'шка нарисуется быстрей чем фильтр, а если подобных элементов на страницы не один, то наличие, пусть даже одинаковых фильтров, затормозит страничку сильней чем svg. Над svg хотя бы пытались работать в нужном направлении, а фильтры как были тормозным борохлом 10 лет назад, то и сейчас ровным счетом над ними никаких работ не провели в общем-то. По этому мое мнение если можно безболезненно отказаться от фильтров, то нужно отказываться, а в этом случае сплошные плюсы выходят.

svg конечно тоже не панацея, т.к. сложный градиент будет весить достаточно прилично в css, а если их несколько и разных, то общий объем css файла может разжиреть на ровном месте.

SelenIT · June 16, 2012

Согласен, производительность — важный момент. Просто, на мой взгляд, SVG-шки — это уже настолько «тяжелая артиллерия», что как-то несолидно даже рядом возиться с CSS-градиентами . Что из мало-мальски актуального (кроме IE8-) не поддерживает SVG в CSS-фонах — FF3.6 да Android 2.x? При таком раскладе ну очень велик соблазн SVG-шкой и ограничиться, а неподдерживающих отправить на изящную деградацию до сплошной заливки...

lexxcode · June 16, 2012

Кстати вот тоже согласен, я как-то об этом не задумывался. Можно наглым образом оставить две строчки, одну с монолитным фоном для старья, а вторую уже с хешем с svg. Учитывая то, что ff3.6 принципиально умер, а Android 2.x через месяца 3-4 повсеместно будет заменен на Android 4.0 ICS, то особо париться не стоит)

troll · June 17, 2012

Что из мало-мальски актуального (кроме IE8-) не поддерживает SVG в CSS-фонах — FF3.6 да Android 2.x?

В Opera SVG фон не дружит с border-radius'ом (полистайте страничку вниз-вверх).

SelenIT · June 18, 2012

Вот так упс. А как всё хорошо начиналось... Неужели никаких противохаков не открыто?

lexxcode · June 18, 2012

Да, я предлагаю life-hack, написать петицию за закрытие десктопной оперы как таковой)

psywalker · June 18, 2012

Ну вот, началось всплытие новых багов, начинаем собирать друзья для Opera 13

Sign In

-webkit-gradient и -webkit-linear-gradient

Question

Link to comment

Share on other sites

23 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information