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

[Timmmm]

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

[XaocCPS]

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

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

[catlion]

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

[XaocCPS]

с чем?

[catlion]

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

[XaocCPS]

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

[catlion]

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

[mad_s]

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

[RayZ]

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

[RayZ]

И хром.

[mad_s]

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

[oWeRQ]

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

[XaocCPS]

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

[ColorPrint]

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

[mad_s]

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

[XaocCPS]

что и border-colors? хм…

[ColorPrint]

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

[udachnik]

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

[XaocCPS]

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

[NYMEZIDE]

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

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

[XaocCPS]

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

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

[UrbanRider]

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

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

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

[oWeRQ]

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

[XaocCPS]

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

[Qkish]

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

[NYMEZIDE]

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

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

[NYMEZIDE]

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

[XaocCPS]

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

[AChaplygin]

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

[AChaplygin]

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

[lorn]

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

[VextoR]

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

[tass]

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

[noise]

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

[homm]

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

[XaocCPS]

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

[homm]

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

[XaocCPS]

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

[oWeRQ]

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

[XaocCPS]

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

[omfg]

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

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

[XaocCPS]

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

[neGODnick]

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

[XaocCPS]

well done, commander :)

[XaocCPS]

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

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

[XaocCPS]

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

[Tishka17]

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

[XaocCPS]

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

[Tishka17]

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

[nooze]

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

[Octane]

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

[XaocCPS]

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

[killerdesign]

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

[golden13]

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

[oWeRQ]

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

[golden13]

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

[XaocCPS]

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

[oWeRQ]

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

[E1vBaX]

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

[web4_0]

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

[oWeRQ]

FF 3.1b3pre — 100%

[oWeRQ]

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

[LeeQuadro]

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]

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

[youROCK]

Это образец

[Egiptyanin]

Acid4? =)

[Kolizei]

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

[XaocCPS]

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

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

[Stepler]

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

[XaocCPS]

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

[Aesthete]

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]

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

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

[XaocCPS]

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

[roller]

mac 10.5.6 firefox 3.1b2

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

[XaocCPS]

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

[roller]

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

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

[rengo]

Мазафака, ie8b2 вообще ничего не проходит!

[XaocCPS]

в режиме IE7 он проходит word-wrap

[lautsevich]

потому что IE8 поддерживает исключительно CSS2.1, который уже почти завершен