Верстка без картинок на ccs3 - с каких версий браузеры понимают?

[Zverushka]

Если верстать градиенты, тени и закругленные границы без картинок, а с помощью css3 - то какие версии браузеров будут их отображать нормально?

Ослик 8 - не понимает же border-radius? Получается в нем все будет квадратным, а 9й осел вообще не поймет градиенты. Как же быть тогда? Верстальщики обычно не поддерживают 7, ну максимум 8 осел, но не 9й же вычеркивает из верстки... Или для него задаем свои стили с помощью условных комментариев отдельно? (но тогда вообще проще на картинках же сверстать для всех браузеров .. )

В общем с каких версий разных браузеров можно смело использовать css3, вместо картинок?

Edited July 14, 2013 by Zverushka

[Bumblebee]

Джилленуотер - Сила CSS3. Очень увлекательная книжка по вашей теме. Примеров куча. Для всех браузеров.

[SelenIT]

Если позволяет ТЗ, хорошим тоном считается сохранение функциональности сайта без новомодных красот. От того, что углы будут квадратными, а вместо градиентов будет однотонная заливка, ни один котёнок не пострадает, если при этом текст будет четко выделяться на фоне, ссылки и кнопки будут реагировать на :hover и :focus и т.п. И при этом всё будет грузиться быстро. Ну а пользователи продвинутых браузеров впридачу к этому увидят его более красивым, блестящим и переливающимся — прогрессивное улучшение.

Конечно, если визуальные красоты — основная «фишка» сайта (чаще всего для промо), то волей-неволей придется делать по-старинке, картинками. В общем, всё зависит от задачи, как обычно

[antonKar]

CSS3PIE, только вёрстку под IE8 надо запускать из-под сервера, так как для работоспособности этого костыля требуется в .htaccess добавить AddType text/x-component .htc

[lexxcode]

CSS3PIE жуткий костыль который не стоит использовать даже под угрозой расщепления вселенной на атомы.

Zverushka, если вы неуверенны что поддерживает определенный браузер есть полезный инструмент http://caniuse.com/ . А что касается поддержки браузеров, то тут я согласен с товарищем SelenIT. Но все равно нужно прикладывать максимум усилий, чтобы стимулировать пользователей переходить на современные браузеры.

[Catherine]

CSS3PIE жуткий костыль который не стоит использовать даже под угрозой расщепления вселенной на атомы.

Можете закидать меня лучами ярости, но если выбирать между "качественной версткой картинками" среднестатистического сайта-визитки и использованием CSS3PIE для скругления уголков и теней (в случае невозможности избежать этого процесса) - я выбираю второе. Тормоза и неприятности, появляющиеся в результате использования этого распространенного костыля - самый надежный способ стимуляции пользователей переходить на современные браузеры.

В остальном все зависит от требований заказчика, цены, личных убеждений и конкретной ситуации. Полностью поддерживаю товарища SelenIT'a.

[Николя223]

9й осел вообще не поймет градиенты

Но но.. он SVG градиенты понимает) только фильтр нужно отключать

до сих пор пользуюсь colorzilla.com/gradient-editor/ ) вам в помощь

Edited July 16, 2013 by Николя223

[SelenIT]

SVG — это по факту картинка, а топик про «без таковых» (совсем строго говоря, CSS-градиент — тоже, но его картиночная природа «не так очевидна», что ли).

[Николя223]

Недавно случай был. Приходит клиент, разговаривает с менеджером, Лена говорит: мы не разрабатываем сайты под Internet explorer ниже восьмой версии.

Клиент: Нет. Нужно чтобы во всех версиях IE сайт работал. У нас ТАКИЕ люди есть, которые с IE 5 могут зайти

Я не выдержал: Ну и ладно - зайдут раз, другой и перестанут )

profit

SVG — это по факту картинка, а топик про «без таковых» (совсем строго говоря, CSS-градиент — тоже, но его картиночная природа «не так очевидна», что ли).

Думаю ТС имел ввиду без явных изображений

SelenIT, с кем с кем , а с вами мне спорить совсем не хочется.. могу проспорить ))

Но если так судить то и тени - тоже картинка пусть и "картиночная природа не так очевидна". Да и обычный border - тоже картинка отрисованная браузером.

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

<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="#7d7e7d" stop-opacity="1"/>

<stop offset="100%" stop-color="#0e0e0e" stop-opacity="1"/>

</linearGradient>

<rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />

</svg>

Edited July 16, 2013 by Николя223

[SelenIT]

Про PNG и даже JPEG тоже можно сказать, что это алгоритм, который волшебным образом... и далее по тексту . А уж если всё это добро упаковано в data-uri прямо в CSS-файле — и подавно. Вопрос определения.

если так судить то и тени

Тени, в отличие от градиента, по крайней мере не являются значением свойства background-image. Хотя да — тенями в CSS можно рисовать почти что угодно, от многоцветных бордеров до пиксель-арта. Кстати... а ведь во многих случаях простой градиент в том же IE9 вполне можно заменить внутренней тенью, она-то поддерживается...

[Николя223]

Про PNG и даже JPEG

Ну ну... я предполагал такой ответ.

PNG и JPG это всего лишь сжатый по алгоритму набор цветов не думаю что кто то сможет вручную написать подобный файлик ..

А SVG градиент - это код) который можно и написать и зашифровать в base64 ))

upd: ) было время мы и при отправке писем на почту в base64 шифровали, дабы сервер правильно понял) т.ч. это ни о чем не говорит))

являются значением свойства background-image

А больше то и не куда ) не в background-color же.

Можно долго спорить на эту тему, но самый веский аргумент - изображения рисуют, а SVG - пишут)) но в конечном итоге получается примерно одно и тоже

стати... а ведь во многих случаях простой градиент в том же IE9 вполне можно заменить внутренней тенью, она-то поддерживается...

А вот это интересная тема, )) благодарю. Будет время подумаю как реализовать программно подобное) хм.. думаю не стоит - видел картины рисованые тенями.. браузер благополучно повис

[SelenIT]

а SVG - пишут))

Это кто как, у меня пока в основном попадались SVGшки, нарисованные в Illustrator'е, зато однажды довелось копипастить минимальный GIF, сгенеренный по алгоритму). Прошу прощения за весь этот оффтоп.

думаю не стоит - видел картины рисованые тенями.. браузер благополучно повис

Злоупотреблять не стоит, конечно. Лепить сотни теней по штуке на каждый пиксель, конечно, перебор, но одна-две аккуратненькие тенюшки поверх однотонной заливки, дающие градиентный «look and feel», по-моему, большой беды не сделают...

[antonKar]

SVG — это по факту картинка, а топик про «без таковых» (совсем строго говоря, CSS-градиент — тоже, но его картиночная природа «не так очевидна», что ли).

Помню, как в Opera отключил картинки, и пропал градиентный фон у блока, заданный через CSS.

[SelenIT]

На этом форуме когда-то тоже обсуждали эту то ли фичу, то ли багу Оперы. По идее, после миграции на Blink ее уже не будет...

[lexxcode]

да было такое Вадим Макеев сказал, что это баг. Но потом, в скорости, совпало, что они объявили переход на Blink. Мы еще подшучивали, что они таким образом решили избавиться от бага с градиентами

[Zverushka]

CSS3PIE жуткий костыль который не стоит использовать даже под угрозой расщепления вселенной на атомы.

Zverushka, если вы неуверенны что поддерживает определенный браузер есть полезный инструмент http://caniuse.com/ . А что касается поддержки браузеров, то тут я согласен с товарищем SelenIT. Но все равно нужно прикладывать максимум усилий, чтобы стимулировать пользователей переходить на современные браузеры.

Шикарный сайт!

Джилленуотер - Сила CSS3. Очень увлекательная книжка по вашей теме. Примеров куча. Для всех браузеров.

Спасибо большое! Сейчас ее читаю!