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

    imageПредлагаю всем интересующимся небольшую страницу с наглядным сравнением того как реагирует ваш браузер на CSS3-свойства, поддерживает их либо нет. Страница будет развиваться и наполняться другими свойствами, кроме того, планирую добавить в нее ссылки на описание свойств и дополнительную информацию. На данный момент в тесте участвует 10 свойств, но если вы хотите расширить его, пожалуйста напишите в комментариях про желаемое CSS3-свойство.

    Посмотреть тест.

    PS: opacity в тесте не будет.

    UPD: тест обновлен: добавлено 5 тестов, исправлена ошибка в css
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

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

        но я подумаю, прикрутить нетрудно
        +6
        Не думал, что все так плохо…
          0
          с чем?
            0
            С поддержкой CSS3
              0
              имелось в виду в каком браузере
                +8
                Пробовал FF 3.0.5, Opera 9.63, IE8b2 — везде :)
                  0
                  Хром тоже кстати жжот непадецки
                    +3
                    Лучше всех себя показал Сафари.
                      0
                      И хром.
                        +2
                        кстати да, Сафари приятно удивил
                          0
                          можно скрин или описание результата? gtk-webkit проходящий acid3 на 100 показал не слишком хорошо, FF 3.1b3pre показал все как надо, ток нет ресайза текстарии.
                            0
                            это не textarea, обыкновенный div в том то и прелесть
                          0
                          Хром все тесты нормально прошел (правда у меня nightly builds Chromium стоит)
                            0
                            а я его на текущей официальной проверял
                              0
                              что и border-colors? хм…
                                0
                                упс, бордерс не прошел, не заметил :( остальные прошел все вроде )
                                  0
                                  У меня в первом и втором (shadow) после скрола вниз и назад вверх тень пропала
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      ага, в FF rotate и scale лучше реализован, хотя может быть в webkit как-то можно настроить сглаживание трансформации
                  +1
                  добавьте на каждое свойство ссылку на описание, как его делать и прописывать правильно.

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

                    background-color: rgba(0, 0, 0, 0.5);
                      +3
                      при этом, если я не ошибаюсь:
                      Red green blue alpha

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

                      Я прав, о великий? ^_^
                        0
                        причем alpha празрачность для саго элемента но не его контента если судить из картинки-эталона.
                          +1
                          она для цвета, можете определить его к любому элементу которому раньше назначали цвет
                        +2
                        Подложите что-нибудь под прямоугольник, картинку например, чтобы понятно то было.
                      +1
                      в Хроме не сработал только border-colors

                      наверное поэтому тест ACID3 дает 99 ил 100 =)
                        0
                        Опа! уже 100 из 100. А когда только скачал Хром было 99. Подкрутили?
                          +1
                          webkit рулит, тут не поспоришь
                            0
                            угу… вчерашний WebKit'а поддерживает все, кроме border-colors
                              0
                              вчерашний билд, я имел ввиду
                                0
                                У меня Сафари 3.2.1 — та же картина, не поддерживает только бордер-колорс. Приятно =)
                            0
                            правда, итоговая картинка не совпадает с эталонной
                              +2
                              а в фф3.1б2 только ресайз;)
                                0
                                зато как всё растянулось…
                                +2
                                Нет, конечно хорошо, что гугл хром поддерживает так много CSS3-стилей. Но вот то, что в нем верстка этой самой страницы теста едет во все стороны не вызывает доверия.
                                  0
                                  у меня во втором хроме с разметкой все в порядке
                                  тени порой глючат, это да, но я думал, что из-за dev-версии
                                    0
                                    А у меня вообще все глючит, видимо из-за не-dev версии :)
                                      0
                                      можно скриншот? :)
                                        0
                                        и в gtk-webkit тож глюки с тенями.
                                          0
                                          подтверждаю, хром с тенями не дружит постоянные глюки, в ff и опере все гораздо лучше
                                    +2
                                    О, вы все таки нарисовали логотип)

                                    Что-то в моем Firefox/3.0.5 не все так гладко, как хотелось бы( слегка разочарован. Однако переключение через ие таб на ie7 немного скрасило мою горечь)))
                                      0
                                      я их нарисовал несколько десятков :) ни один не устроил, даже этот не нравится на все 100
                                      0
                                      Очень интересно, спасибо! Но я думаю, вместо «Lorem ipsum» лучше написать краткое описание и используемый код. Это было бы намного нагляднее и полезнее. Причём описание по-русски, если уж автор сделал страницу для наших людей, а не для иностранцев.
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          well done, commander :)
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                              +1
                                              начнушки в этом тесте ничего не решают, так как ваши результаты идентичны firefox 3.1 beta2
                                              ждем поддержку resize и будет 100% :)

                                              * жаль никто не предлагает еще тегов, я пока планирую включить reflection и transform
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                  0
                                                  нет, я ж написал «ждем» :)
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                          +2
                                          В Опере 10 (4126 под 64 бит линух), набирающей 100 в acid3, сработали только @font-face, text-shadow и rgba свойства. Я куда-то не туда смотрю или чтото не понимаю?
                                            +1
                                            вы думаете что acid3 проверяет все css-свойства?
                                              0
                                              вижу что далеко не все (=
                                                0
                                                а он и не должен, css3 только в процессе, а acid3 «как бы» на текущий момент больше проверяет
                                            +1
                                            Более полный список примеров, демонстрирующих работу CSS3-свойств, есть здесь.
                                              0
                                              этот ресурс мне знаком, пример с border-image взят с него
                                              0
                                              Блин, третий Firefox под Мак нифига не поддерживает… =(
                                              Зато третий Safari — просто блестяще! =)
                                                +1
                                                SeaMonkey 2.0a3pre 99 из 100 :) Только ресайз не пашет
                                                  0
                                                  там кстати gecko 2.x или 1.9.х?
                                                    0
                                                    1.9.x, по идее такой же как в фаерфоксе 3.1
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                    0
                                                    ну три с половиной теста из 10 — это неплохо, IE только один тест проходит
                                                      0
                                                      главное поддерживает закругление углов, они часто нужны и их не очень удобно верстать, хотя фф это давно поддерживает через -moz-*
                                                        +1
                                                        Скриншот в пнг надо было… Но в принципе суть понятна.
                                                        По теме: у аналогичная ситуация (лисичка таже)
                                                        0
                                                        Вот ещё интересная штука, касаемо поддержки CSS3
                                                          0
                                                          FF 3.1b3pre — 100%
                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                              0
                                                              Селекторы тоже не маловажная весч, если сейчас приходится выбирать или использовать js или генерить кучу html кода, то новые селекторы чаще всего могли бы это решить просто, быстро и красиво.
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                          0
                                                          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
                                                            –2
                                                            Подскажите, а почему текст справа — картинка?
                                                              0
                                                              Это образец
                                                              0
                                                              Acid4? =)
                                                                0
                                                                В IE 6 вообще всё в один столбик, и пример картинкой, и сам текст ))
                                                                  0
                                                                  все никак руки не дойдут сделать сплешскрин на сайте с предупредением о том, что ie6 мной не поддерживается принципиально

                                                                  так что извиняйте
                                                                  0
                                                                  у меня очень плохо ((( хотя лиса самая последняя. но скруглённые углы у таблиц видно!
                                                                    0
                                                                    каких таблиц?
                                                                    в чем «плохо»?
                                                                    версия ff какая?
                                                                    0
                                                                    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
                                                                      0
                                                                      Как приятно сидеть в последнем билде Webkit'а — всё, кроме border-colors работает :)

                                                                      Только очень жаль, что некоторые примеры просто утащены с css3.info. С тем же border-image можно такой роскошный пример сделать, когда из малого квадрата со скруглёнными краями и тенью создаётся резиновый блок.
                                                                        0
                                                                        «утащен» только один пример, который засветился на многих ресурсах, в том числе на блоге John Resig
                                                                        и как вы наверное заметили, «утащен» не один в один, текстура взята их, да
                                                                        0
                                                                        mac 10.5.6 firefox 3.1b2

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

                                                                            по сабжу box-shadow у меня выглядит красивее чем должно быть :) gradient, box-reflect и marquee — провал. остальное нормально
                                                                          0
                                                                          Мазафака, ie8b2 вообще ничего не проходит!
                                                                            +1
                                                                            в режиме IE7 он проходит word-wrap
                                                                              0
                                                                              потому что IE8 поддерживает исключительно CSS2.1, который уже почти завершен

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

                                                                            Самое читаемое