Не работает linear-gradient в Safari

[Universe]

Добрый день, пробую использовать на своём сайте линейный градиент. Работает во всех браузерах кроме Safari.

Вот код, который я использую

background: linear-gradient(to top, rgba(0, 0, 0, 0.14902), rgba(255, 255, 255, 0) 53%, rgba(41, 41, 41, 0.117647) 89%, rgba(0, 0, 0, 0.14902)),url("http://jiu.marsana-shop.com.ua/templates/yoo_infinite/css/../images/blue_bg.png");

Добавление префикса -webkit- ничего не дало

[Vlad]

В Сафари синтаксис другой.

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Safari4+ */

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

[npofopr]

Есть же генератор http://www.colorzilla.com/gradient-editor/

Там все виды сможете посмотреть

[lexxcode]

Я уже несколько раз говорил на форуме, не охота повторяться. Использование градиентов можно существенно упростить, применяя css-градиенты в связке с svg. Метод успешно опробован и очень хорошо себя показывает.

Так, что я просто оставлю ссылку на пост на форуме

[SelenIT]

Главное отличие префикснутых градиентов от стандартных — там указывается не конечная, а начальная точка. Вместо "to top" пишется "bottom" (без "to"!) и т.д.

применяя css-градиенты в связке с svg

А смысл в связке? Чем SVG-градиента, если он уже есть, недостаточно? Из-за того бага в Опере/Престо при скролле — так сколько ее осталось, той Оперы?

[lexxcode]

Смысл в отказе от префиксов. SVG выступает как фолбек. Тем более, что SVG в любом случае придется использовать для IE9! Я считаю вполне логичным обеспечить таким образом работу градиента в тех браузерах которых еще нет безпрефиксной поддержки, таких как, например в safari 6-. Уменьшив и упростив тем самым css.

На данный момент в этом плане отстают только IE9, Safari 6-, и мобильные браузеры.

Мы же уже это обсуждали

[SelenIT]

Обсуждали, да (к сожалению, не могу найти ссылку на то обсуждение), но я до сих пор не избавился от ощущения, что использование целого SVG в качестве фолбека для одних лишь градиентов подозрительно смахивает на использование джипа в качестве фолбека для скутера

Имхо, если надо поставить градиент быстро и только для нового, а для хлама типа IE9 приемлема деградация, достаточно стандартного CSS-синтаксиса. А если в любом случае используется SVG, я не вижу смысла дублировать его еще и CSSом, усложняя и без того неочевидный (по крайней мере, для новичков) код. Разве что Опера на Престо с ейным хитровывернутым скроллингом, но она стремительно уходит в историю...

[lexxcode]

если не нужен IE9, то само собой, но заменять svg-шкой градиенты для всех не правильно, потому что svg это лишний запрос, а css нет (понятное дело что можно и в base64 закодировать, но это не лучший выход). А так получится все кто при памяти будут пользовать css, а если уж ну совсем все плохо то так уж и быть сделает лишний запрос и подключит svg, вот и все. Зато на выходе такой вариант получается гораздо проще чем 100500 префиксов. разобраться в градиентах на svg это ровно 5 минут времени

[Catherine]

Обсуждали, да (к сожалению, не могу найти ссылку на то обсуждение)

не эта ли дискуссия имеется в виду?

[lexxcode]

не эта ли дискуссия имеется в виду?

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

[SelenIT]

не эта ли дискуссия имеется в виду?

Она самая, спасибо!

понятное дело что можно и в base64 закодировать, но это не лучший выход

AFAIK, SVG, в отличие от растровой графики, можно внедрять в CSS и без base-64-кодирования (правда, с url-эскейпингом), и цвета при необходимости редактировать там же. Честно говоря, про вариант с отдельным запросом я вообще не думал (там же весь файл весит чуть ли не меньше, чем HTTP-заголовки, а если соглашаться на отдельный запрос, то так можно докатиться и до растровых картинок и поддержки IE8 заодно... ой, что-то меня не в ту сторону понесло ). Я вообще-то думал, что речь об убирании лишнего из результата того же colorzill'овского генератора и ему подобных...

разобраться в градиентах на svg это ровно 5 минут времени

Видимо, кому как . Мне вот стыдно признаться, но я не смог разобраться за два года — до сих пор подглядываю в доки и те же генераторы...

чем 100500 префиксов

Уже не аргумент, потому что

Префиксы стали неактуальны

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

[lexxcode]

то так можно докатиться и до растровых картинок и поддержки IE8 заодно...

не докатимся, ибо растровая графика не позволит делать адекватные градиенты которые будут нормально растягиваться без артефактов.

Я вообще-то думал, что речь об убирании лишнего из результата того же colorzill'овского генератора и ему подобных...

Я именно это и преследую, меньше писать и быть ближе к безпрефиксным записям

Видимо, кому как . Мне вот стыдно признаться, но я не смог разобраться за два года — до сих пор подглядываю в доки и те же генераторы...

Что вот тут вот сложного?

<?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="g" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
	 <stop offset="0%" stop-color="#848484" stop-opacity="1"/>
	 <stop offset="100%" stop-color="#434343" stop-opacity="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g)" />
</svg>

Те же самые color-stop'ы как и в css-градиентах. Единственная сложность это указание угла поворота градиента, кстати, надо бы посмотреть, возможно есть проще способ

Уже не аргумент, потому что

Само собой, я в том смысле, что получаем поддержку градиентов просто в нагрузку бесплатно для тех кому префикс еще нужен

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

да -webkit- но тут пока что safari 6 его хочет, 7-ая уже без префикса, ну и мобильные андроиды. Неизвестно как обстоят дела в Android 4.3 и 4.4

Если же в ближайшее время окажется, что только IE9 останется нуждающимся в svg (а так и произойдет), то я пожалуй буду склонен отказаться от svg в этом качестве в угоду деградации. Такое мое видение в перспективе.

Сейчас как раз подумал. Вся эта мода на плоские интерфейсы может сыграть на руку и позволить совсем так незаметненько полностью перейти на безпрефиксную запись и никто даже ничего не поймет и не заметит

[SelenIT]

Что вот тут вот сложного?

Для меня — пожалуй, вложенность систем координат. От чего отсчитываются координаты прямоугольника (от viewBox-а или от width/height), на что из этого умножаются проценты в стопах и т.п. Плюс про preserveAspectRatio надо тупо знать, тот же Иллюстратор его по умолчанию не ставит, а без него бидапичаль. Ну и вообще, после того, как HTML годами отучал от записи оформления в тегах, приходится переступать через какие-то устоявшиеся привычки

да -webkit- но тут пока что safari 6 его хочет, 7-ая уже без префикса, ну и мобильные андроиды

Причем Сафаря тоже в основном мобильная, имхо. Учитывая спорную репутацию iOS7, 6-я версия может оказаться более долгоживущей, чем предыдущие. В свете всего этого я считаю, что 1 строчка с префиксом всё же «меньше писать» по сравнению с целым файликом на другом языке, поэтому добавить поддержку iOS6-/Андроидов мне труда совсем не составляет, а IE9 обойдется . Но в любом случае делать SVG-файлик на случай, если браузер не поддерживает беспрефиксного градиента... ну никак, никак не могу отделаться от ощущения, что это очень напоминает вот этот сюжет

[lexxcode]

Для меня — пожалуй, вложенность систем координат. От чего отсчитываются координаты прямоугольника (от viewBox-а или от width/height), на что из этого умножаются проценты в стопах и т.п.

От viewBox. Грубо говоря таким образом задаешь реальные размеры полотна

Но в любом случае делать SVG-файлик на случай, если браузер не поддерживает беспрефиксного градиента... ну никак, никак не могу отделаться от ощущения, что это очень напоминает вот этот сюжет

ахахахах :D ну в какой-то мере да, но только, в данном случае, "тот самый случай" обеспечивается сам собой. То есть даже если бы это решение позволяло избавиться от префиксов только в последних браузерах и IE9, то для меня бы это по прежнему оставался приемлемый вариант.

Учитывая спорную репутацию iOS7, 6-я версия может оказаться более долгоживущей, чем предыдущие.

Да я думаю обновятся все быстро. Во-первых по собранным мною сведениям среди друзей, друзей знакомых друзей и знакомых знакомых, то большинству все таки нравится новая iOS. Во-вторых подавляющее большинство пользователей которые обновились и им не понравилась новая iOS просто не смогут откатить ее назад. Останется только совсем небольшой процент пользователей которые соображают как откатить систему.