CSS3 для дизайна сайта или Граф. файлы для эффектов

CSS3 для дизайна сайта
9
Нейтральная
сторона
0
Граф. файлы для эффектов
1
Современный масштабируемый дизайн без лишних файлов
Прежде чем писать комментарии или выбрать сторону вы должны авторизироваться!
Классический, совместимый, но с лишними гифками

11-06-2011 17:32 0

При вёрстке сайта часто приходится выполнять типичные задачи: скругление углов блоков, градиентная заливка, тени. В старых браузеров для этого не было стандартных средств, поэтому приходилось рисовать кучу растровых графических файлов.

Теперь появилось универсальное средство — CSS3. Но оказалось, что не всё так гладко. Во-первых, не все браузеры поддерживают отдельные функции. Например, text-outline для обводки текста сейчас не поддерживает ни один браузер. Во-вторых, даже там, где нужная функция поддерживается, не всегда работает, как хотелось бы. Например, недавно поступили жалобы, что блюринг текста тормозит в Опере Мобайл. А ещё есть такая статья про Мозиллку: -moz-box-shadow и -moz-border-radius - это кошмар CPU.

Есть третий вариант: использование SVG. Не знаю, к какой стороне холивара его отнести.

8 комментариев
cherepets 11-06-2011 17:38 0

opera.rulez, Недавно пробовал браузер один для телефона (сейчас нагуглю как звался). Большинство сайтов довольно быстро и неплохо отображал. Но на холиворсе ВООБЩЕ не грузил комментарии. Странно это как-то.

opera.rulez 11-06-2011 17:40 0

cherepets, UCWEB вообще не грузит комментарии с Холиварсов, а менее известный BOLT грузит. Но они вроде игнорируют CSS3.

cherepets 11-06-2011 17:42 0

opera.rulez, Zirco Browser. Просто бесконечно крутится загрузка комментариев. Судя по затратам траффика, реально никакой загрузки и не намечалось.

opera.rulez 11-06-2011 17:52 0

cherepets, Он опенсорсный: code.google.com/p/zirco-browser/
Своего движка у него нет. Он использует стандартные библиотеки Андроида. А этот браузер вообще java_script поддерживает?

cherepets 11-06-2011 18:05 0

opera.rulez, Вроде поддерживает (нигде не указано). Стандартный точно поддерживает, правда у меня он не установлен и я не знаю как там дела обстоят с отображением холиворсов.

opera.rulez 11-06-2011 18:22 0

cherepets, Сайты с CSS3 тестировал? Например, текст с блюром, который вызвал тормоза в Опере Мобайл?

cherepets 11-06-2011 18:23 0

opera.rulez, Текст отображается там нормально. Тормозов меньше, но не намного.

opera.rulez 11-06-2011 18:31 0

cherepets, Ясно. А теперь ложка дёгтя настольным браузерам:

«Giorgio 2010-10-23 00:03:16 PDT
on win7 with quad6600 and ati48701gb i've a lot of performance problem when i use border-radius

in one page i've some test effects (shadows, transparency rgba(), 32bit pngs)

they slows down scrolling but it is not so bad,

but when i add border-radius on these boxes page scrolling is TOTALLY unusable»

Взято с Багзиллы. Меня пугает то, что в варианте Холиварс.ру, над которым сейчас работает Саша, скругления уголков будут через тот самый злополучный border-radius. Предчувствую душевную боль у пользователей сайта.

11-06-2011 18:55 0

А ещё есть такая статья про Мозиллку: -moz-box-shadow и -moz-border-radius - это кошмар CPU.
Лисобляди соснули даже тут

1 комментарий
opera.rulez 11-06-2011 21:41 0

Learcy, Тестировал FF4, на той странице особых тормозов не заметил. Видимо, скорость зависит и от версии браузера, и от драйвера видеокарты, и ещё от кучи факторов.

11-11-2011 20:56 0

Опера, как с анимацией у Оперы? Хотелось бы её на CSS3 реализовать, так как java_script добавит массу проблем.

3 комментария
opera.rulez 11-11-2011 21:26 +1

Tro, От версии шибко зависит. Они немного запоздали с этими штуками, хотя первые элементы CSS3 начали появляться ещё в восьмой версии, если не раньше.

Ссылка с главной «Поддерживаемые веб-стандарты»: www.opera.com/docs/specs/

Тебя интересует поддержка www.w3.org/TR/css3-transitions/ или www.w3.org/TR/css3-animations/ ? Если первое, то появились они в Presto 2.3 (Opera 10.50), но до сих пор их надо писать с префиксом -o-: www.opera.com/docs/specs/presto29/css/tr ... . А насчёт второго не в курсе.

P.S. Второй модуль, кажется, Опера не поддерживает. Вот ещё источники документации:
developer.mozilla.org/en/CSS/CSS_transit ...
developer.mozilla.org/en/CSS/CSS_animati. ..

Tro 11-11-2011 21:35 0

opera.rulez, Надо сделать изменение прозрачности от a до b. С помощью чего это лучше сделать?

opera.rulez 11-11-2011 21:44 0

Tro, С помощью css3-transitions управляешь свойством opacity. Я пока сам этим не баловался, но на w3.org вроде всё подробно расписано.

13-06-2011 13:50 +1

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

0 комментариев