CSS or Img

[systemiv]

Добрый вечер Уважаемые!

Интересует вопрос по концепции вёрстки.

Как Вы считаете, например тот же градиент лучше верстать с помощью картинки или задавать css3 & filter(ie)

Или border-radius, что лучше, перечислять все вендорные свойства или просто создать 4 доп блока и позиционировать их внутри родителя(всегда так делаю)

[br3t]

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

[SelenIT]

Для border-radius'а уже никакие префиксы не нужны.

[systemiv]

Для border-radius'а уже никакие префиксы не нужны.

Opera 10.5+, Firefox 3.6

[SelenIT]

Опера, ЕМНИП, сразу без префиксов поддерживать стала. FF3.6... имхо, в 2012-м вполне можно записать в динозавры, пусть эти <4% довольствуются квадратными уголками, как и старые IE. iOS3 и Андроиды 2.1- — туда же. Хотя, если очень хочется, эту пару префиксов можно и добавить...

[systemiv]

В принципе звучит настолько убедительно, что нельзя не согласится=)

А как Ваше отношение к кроссбраузерности IE. Чем Вы её достигаете? Картинками, pie, google js?

[cyklop77]

а как же контент картинками, а оформление бэкграундом? это уже не в моде?.. (или я не понял вопроса?)

Edited March 13, 2012 by cyklop77

[systemiv]

а как же контент картинками, а оформление бэкграундом? это уже не в моде?.. (или я не понял вопроса?)

Вы про image replacement?

Без него тоже не обойтись в некоторых случаях, а насчёт контента картинками, а всё оформление бэкграундом - это скорее техника улучшения семантики сайта, что бы при отключенных стилях не вертелись уголки нарезанные. Тема и спрашивает, о реализации теперь - CSS3

Edited March 14, 2012 by systemiv

[Vin]

С таким подходом, в общей сложности, вы забиваете на 15% юзеров, тем более, что на конкретном сайте доля ie8 и старше + не самые свежие opera и FF может быть гораздо больше. Ни один серьёзный сайт себе такого не позволяет, кроме addons.mozilla.org, у которого специфическая аудитория, и то там используется префикс -moz и дизайн сделан так, чтобы он не портился квадратными углами.

Допустимо скруглять border-radius'ом до 3-х пикселов, 8-10 и больше — уже картинками (примерно). В последнем случае квадратные углы испортят весь дизайн. Зайдите на главную htmlbook или twitter с ie8 и всё поймёте. Такой ненавязчивый CCS3 (по аналогии с ненавязчивым JavaScript). Вот если речь идёт о каком-нибудь навороченном RIA, тогда другое дело, там можно поддерживать только свежак, но там приходится забивать и на юзеров с не очень быстрым соединением.

Вот думаю, был бы у вас сайт, который приносит прибыль, таких вопросов бы не возникало

что бы при отключенных стилях не вертелись уголки нарезанные. Тема и спрашивает, о реализации теперь - CSS3

Так картинки эти надо вставлять бэкграундом, а не img.

Edited March 14, 2012 by Vin

[wildhind]

15%?

Вот диаграмка метрики с реально действующего сайта, притом не особо специфичного.

[Vin]

А я могу показать график, правда не из метрики, а из liveinternet с 50%+ общей доли IE и долей IE6 больше 5%., пардон, счётчик мейловский, общая доля ie меньше 40%, доля IE6 - ок. 5%, но в общей сложности, браузеров, не поддерживающих border-radius без префиксов больше 30%, с префиксами — около 25-27%.

Edited March 14, 2012 by Vin

[systemiv]

Вот думаю, был бы у вас сайт, который приносит прибыль, таких вопросов бы не возникало

Возможно. Но у меня нет такого сайта=)

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

Вы считаете что всё таки лучше использовать полую нарезку(уголки, градиент, тени), или использовать вот эти несколько не замысловатых свойств:

/* Radius */
border-radius: 10px;

/* Shadow */
box-shadow: 5px 5px 10px #A8A8A8;

/* Gradient */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9FDCF2), to(#D0EEF9));
background: -moz-linear-gradient(#9FDCF2, #D0EEF9);
background: linear-gradient(#9FDCF2, #D0EEF9);
-pie-background: linear-gradient(#9FDCF2, #D0EEF9);

/* Opacity */
opacity: 0.3;
filter: alpha(opacity=30);

Все они кроссбраузерны, не включая ff3.6, но как сказано выше это уже динозавр.

Для IE7+ подключается PIE.htc

[Vin]

Все они кроссбраузерны, не включая ff3.6, но как сказано выше это уже динозавр.

Я сам довольно долго сидел на этом динозавре: не мог сразу привыкнуть к новому интерфейсу, да и аддоны некоторые долго переписывали, окончательно перешёл на FF4+ только к выходу FF5.

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

Ну тогда решайте с заказчиком — что ему важнее. А насчёт того, чтобы использовать CSS3 для второстепенных эффектов, без которых дизайн выглядит вполне приемлемо — я только за. Обеими руками и ногами. Получается прогрессивное улучшение: владельцы "свежака" получают бонус, но и владельцы старых браузеров не обламываются и не уходят с сайта.

Насчёт PIE: посмотрите, не слишком ли это ресурсоёмко. Для ie8 возможно, а вот ie7, по-моему, не слишком быстр в обработке JS.

Edited March 14, 2012 by Vin

[systemiv]

Насчёт PIE: посмотрите, не слишком ли это ресурсоёмко. Для ie8 возможно, а вот ie7, по-моему, не слишком быстр в обработке JS.

Ну я же не для себя делаю сайт. Для некоторых ситуаций не вижу другого выхода, т.к. заказчик требует полного соответствия что в ff 10, что в IE7

Что Вы предлагаете?

Edited March 14, 2012 by systemiv

[hedgehog]

Насчёт PIE: посмотрите, не слишком ли это ресурсоёмко. Для ie8 возможно, а вот ie7, по-моему, не слишком быстр в обработке JS.

В ие7 от пирожка вылазят довольно занятные баги

[wildhind]

…заказчик требует полного соответствия что в ff 10, что в IE7

Что Вы предлагаете?

+200% к стоимости проекта — тогда есть о чём говорить.

[Vin]

Ну я же не для себя делаю сайт. Для некоторых ситуаций не вижу другого выхода, т.к. заказчик требует полного соответствия что в ff 10, что в IE7

Что Вы предлагаете?

Лично я бы тогда делал картинками. Пусть заказчик определится, что ему важнее: возможность легко что-то поменять или одинаковое отображение во всех браузерах, которое я тоже не люблю, но которое и мне приходится делать (хотя у меня пока заказчики — знакомые, поэтому попиксельным соответствием и прочим маразмом можно не страдать, но потому и о пользователях забочусь, не хочу знакомым дрянь подсовывать).

В ие7 от пирожка вылазят довольно занятные баги

А поподробнее? Я только тормоза замечал.

Edited March 14, 2012 by Vin

[hedgehog]

А поподробнее? Я только тормоза замечал.

Например, вся страница оказывается залита фоновым цветом блока, к которому применяются css3 стили

[systemiv]

А поподробнее? Я только тормоза замечал.

Например, вся страница оказывается залита фоновым цветом блока, к которому применяются css3 стили

IE требует чёткое задание background-color блоку, к которому применяются стили из пирожка.

С ним есть ещё проблема. Например если одному элементу задать градиент, и на нём расположить второй элемент с градиентом там будут проблемы с индексами. zoom: 1; position: relative как пишут спасает, но что то вот я начал тестировать и вообще никак.

Ещё одна проблема: если у одного блока прописать нижнюю тень, а под ним сразу же расположить другой блок с тенью снизу. То как бы нижний блок прикроет собой тень верхнего блока и там уже ничем не поможешь.

Насчёт попиксельной точности, честно говоря, как не верстай на ~10 пикселей где ни будь да уйдёшь.

[psywalker]

Добрый вечер Уважаемые!

Интересует вопрос по концепции вёрстки.

Как Вы считаете, например тот же градиент лучше верстать с помощью картинки или задавать css3 & filter(ie)

Правильный ответ: задавать css3 без filter(ie)

Или border-radius, что лучше, перечислять все вендорные свойства или просто создать 4 доп блока и позиционировать их внутри родителя(всегда так делаю)

Правильный ответ: border-radius без префиксов (давно не нужны уже)