XaocCPS 14 янв 2009 в 17:05

Наглядное тестирование поддержки CSS3-свойств вашим брузером

1 мин

997

CSS*

+44

Комментарии 87

Timmmm 14 янв 2009 в 17:10

Вот бы еще сводную таблицу по браузерам, цены бы небыло

XaocCPS 14 янв 2009 в 17:18

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

но я подумаю, прикрутить нетрудно

catlion 14 янв 2009 в 17:33

Не думал, что все так плохо…

XaocCPS 14 янв 2009 в 17:37

с чем?

catlion 14 янв 2009 в 18:03

С поддержкой CSS3

XaocCPS 14 янв 2009 в 18:04

имелось в виду в каком браузере

catlion 14 янв 2009 в 18:10

Пробовал FF 3.0.5, Opera 9.63, IE8b2 — везде :)

mad_s 14 янв 2009 в 19:48

Хром тоже кстати жжот непадецки

RayZ 14 янв 2009 в 19:52

Лучше всех себя показал Сафари.

RayZ 14 янв 2009 в 19:53

И хром.

mad_s 14 янв 2009 в 20:01

кстати да, Сафари приятно удивил

oWeRQ 14 янв 2009 в 20:10

можно скрин или описание результата? gtk-webkit проходящий acid3 на 100 показал не слишком хорошо, FF 3.1b3pre показал все как надо, ток нет ресайза текстарии.

XaocCPS 14 янв 2009 в 20:14

это не textarea, обыкновенный div в том то и прелесть

ColorPrint 14 янв 2009 в 20:38

Хром все тесты нормально прошел (правда у меня nightly builds Chromium стоит)

mad_s 14 янв 2009 в 20:43

а я его на текущей официальной проверял

XaocCPS 14 янв 2009 в 20:44

что и border-colors? хм…

ColorPrint 14 янв 2009 в 20:51

упс, бордерс не прошел, не заметил :( остальные прошел все вроде )

udachnik 15 янв 2009 в 03:18

У меня в первом и втором (shadow) после скрола вниз и назад вверх тень пропала

НЛО прилетело и опубликовало эту надпись здесь

XaocCPS 15 янв 2009 в 12:26

ага, в FF rotate и scale лучше реализован, хотя может быть в webkit как-то можно настроить сглаживание трансформации

NYMEZIDE 14 янв 2009 в 17:39

добавьте на каждое свойство ссылку на описание, как его делать и прописывать правильно.

rgba — это что такое?

XaocCPS 14 янв 2009 в 17:43

добавлю
rgba — это назначение цвета с прозрачностью

background-color: rgba(0, 0, 0, 0.5);

UrbanRider 14 янв 2009 в 17:48

при этом, если я не ошибаюсь:
Red green blue alpha

где альфа — значение прозрачности…

Я прав, о великий? ^_^

oWeRQ 14 янв 2009 в 20:13

причем alpha празрачность для саго элемента но не его контента если судить из картинки-эталона.

XaocCPS 14 янв 2009 в 20:15

она для цвета, можете определить его к любому элементу которому раньше назначали цвет

Qkish 14 янв 2009 в 18:15

Подложите что-нибудь под прямоугольник, картинку например, чтобы понятно то было.

NYMEZIDE 14 янв 2009 в 17:43

в Хроме не сработал только border-colors

наверное поэтому тест ACID3 дает 99 ил 100 =)

NYMEZIDE 14 янв 2009 в 17:45

Опа! уже 100 из 100. А когда только скачал Хром было 99. Подкрутили?

XaocCPS 14 янв 2009 в 17:57

webkit рулит, тут не поспоришь

AChaplygin 14 янв 2009 в 21:50

угу… вчерашний WebKit'а поддерживает все, кроме border-colors

AChaplygin 14 янв 2009 в 21:53

вчерашний билд, я имел ввиду

lorn 14 янв 2009 в 22:02

У меня Сафари 3.2.1 — та же картина, не поддерживает только бордер-колорс. Приятно =)

VextoR 14 янв 2009 в 18:10

правда, итоговая картинка не совпадает с эталонной

tass 14 янв 2009 в 18:11

а в фф3.1б2 только ресайз;)

noise 14 янв 2009 в 18:36

зато как всё растянулось…

homm 14 янв 2009 в 18:09

Нет, конечно хорошо, что гугл хром поддерживает так много CSS3-стилей. Но вот то, что в нем верстка этой самой страницы теста едет во все стороны не вызывает доверия.

XaocCPS 14 янв 2009 в 18:17

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

homm 14 янв 2009 в 18:20

А у меня вообще все глючит, видимо из-за не-dev версии :)

XaocCPS 14 янв 2009 в 18:20

можно скриншот? :)

oWeRQ 14 янв 2009 в 20:15

и в gtk-webkit тож глюки с тенями.

XaocCPS 14 янв 2009 в 20:16

подтверждаю, хром с тенями не дружит постоянные глюки, в ff и опере все гораздо лучше

omfg 14 янв 2009 в 18:10

О, вы все таки нарисовали логотип)

Что-то в моем Firefox/3.0.5 не все так гладко, как хотелось бы( слегка разочарован. Однако переключение через ие таб на ie7 немного скрасило мою горечь)))

XaocCPS 14 янв 2009 в 18:17

я их нарисовал несколько десятков :) ни один не устроил, даже этот не нравится на все 100

neGODnick 14 янв 2009 в 18:19

Очень интересно, спасибо! Но я думаю, вместо «Lorem ipsum» лучше написать краткое описание и используемый код. Это было бы намного нагляднее и полезнее. Причём описание по-русски, если уж автор сделал страницу для наших людей, а не для иностранцев.

НЛО прилетело и опубликовало эту надпись здесь

XaocCPS 14 янв 2009 в 18:20

well done, commander :)

НЛО прилетело и опубликовало эту надпись здесь

XaocCPS 14 янв 2009 в 18:23

начнушки в этом тесте ничего не решают, так как ваши результаты идентичны firefox 3.1 beta2
ждем поддержку resize и будет 100% :)

* жаль никто не предлагает еще тегов, я пока планирую включить reflection и transform

НЛО прилетело и опубликовало эту надпись здесь

XaocCPS 14 янв 2009 в 18:32

нет, я ж написал «ждем» :)

НЛО прилетело и опубликовало эту надпись здесь

Tishka17 14 янв 2009 в 18:23

В Опере 10 (4126 под 64 бит линух), набирающей 100 в acid3, сработали только @font-face, text-shadow и rgba свойства. Я куда-то не туда смотрю или чтото не понимаю?

XaocCPS 14 янв 2009 в 18:24

вы думаете что acid3 проверяет все css-свойства?

Tishka17 14 янв 2009 в 18:39

вижу что далеко не все (=

nooze 14 янв 2009 в 19:15

а он и не должен, css3 только в процессе, а acid3 «как бы» на текущий момент больше проверяет

Octane 14 янв 2009 в 18:38

Более полный список примеров, демонстрирующих работу CSS3-свойств, есть здесь.

XaocCPS 14 янв 2009 в 19:12

этот ресурс мне знаком, пример с border-image взят с него

killerdesign 14 янв 2009 в 18:41

Блин, третий Firefox под Мак нифига не поддерживает… =(
Зато третий Safari — просто блестяще! =)

golden13 14 янв 2009 в 18:49

SeaMonkey 2.0a3pre 99 из 100 :) Только ресайз не пашет

oWeRQ 14 янв 2009 в 20:18

там кстати gecko 2.x или 1.9.х?

golden13 15 янв 2009 в 12:10

1.9.x, по идее такой же как в фаерфоксе 3.1

НЛО прилетело и опубликовало эту надпись здесь

XaocCPS 14 янв 2009 в 20:13

ну три с половиной теста из 10 — это неплохо, IE только один тест проходит

oWeRQ 14 янв 2009 в 20:25

главное поддерживает закругление углов, они часто нужны и их не очень удобно верстать, хотя фф это давно поддерживает через -moz-*

E1vBaX 14 янв 2009 в 21:37

Скриншот в пнг надо было… Но в принципе суть понятна.
По теме: у аналогичная ситуация (лисичка таже)

web4_0 14 янв 2009 в 20:15

Вот ещё интересная штука, касаемо поддержки CSS3

oWeRQ 14 янв 2009 в 20:21

FF 3.1b3pre — 100%

НЛО прилетело и опубликовало эту надпись здесь

oWeRQ 14 янв 2009 в 23:01

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

НЛО прилетело и опубликовало эту надпись здесь

LeeQuadro 14 янв 2009 в 21:44

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b3pre) Gecko/20090114 Shiretoko/3.1b3pre

Всё кроме resize.

Acid3: 92/100

Failed 8 tests.
Test 26 passed, but took 218ms (less than 30fps)
Test 71 failed: doc.open is not a function
Test 72 failed: doc.images is undefined
Test 75 failed: anim.beginElement is not a function
Test 76 failed: expected '0' but got '100' — Incorrect animVal value after svg animation.
Test 77 failed: expected '4776' but got '5560' — getComputedTextLength failed.
Test 78 failed: expected '90' but got '0' — getRotationOfChar(0) failed.
Test 79 failed: expected '34' but got '33' — SVGSVGTextElement.getNumberOfChars() incorrect
Test 80 failed: kungFuDeathGrip was null
Total elapsed time: 12.73s

bar_boss 15 янв 2009 в 09:37

Подскажите, а почему текст справа — картинка?

-2

youROCK 15 янв 2009 в 09:43

Это образец

Egiptyanin 15 янв 2009 в 10:02

Acid4? =)

Kolizei 15 янв 2009 в 11:41

В IE 6 вообще всё в один столбик, и пример картинкой, и сам текст ))

XaocCPS 15 янв 2009 в 11:47

все никак руки не дойдут сделать сплешскрин на сайте с предупредением о том, что ie6 мной не поддерживается принципиально

так что извиняйте

Stepler 15 янв 2009 в 11:59

у меня очень плохо ((( хотя лиса самая последняя. но скруглённые углы у таблиц видно!

XaocCPS 15 янв 2009 в 12:03

каких таблиц?
в чем «плохо»?
версия ff какая?

Aesthete 15 янв 2009 в 16:14

gradient, box-reflect и marquee не работают.
Остальное в порядке.
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b2) Gecko/20081201 Firefox/3.1b2

pepelsbey 16 янв 2009 в 03:15

Как приятно сидеть в последнем билде Webkit'а — всё, кроме border-colors работает :)

Только очень жаль, что некоторые примеры просто утащены с css3.info. С тем же border-image можно такой роскошный пример сделать, когда из малого квадрата со скруглёнными краями и тенью создаётся резиновый блок.

XaocCPS 16 янв 2009 в 08:11

«утащен» только один пример, который засветился на многих ресурсах, в том числе на блоге John Resig
и как вы наверное заметили, «утащен» не один в один, текстура взята их, да

roller 17 янв 2009 в 15:32

mac 10.5.6 firefox 3.1b2

крешрепорт ушел разрабам

XaocCPS 17 янв 2009 в 15:36

а что там не так? вы картинку приложить не забыли?

roller 17 янв 2009 в 15:50

фиг знает почему он упал, может потому что уже 25 вкладок было открыто и эта — с кучей картинок его добила)

по сабжу box-shadow у меня выглядит красивее чем должно быть :) gradient, box-reflect и marquee — провал. остальное нормально