Кросс-браузерное правило CSS3

Question

У меня глупый вопрос,

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

Например:

         -moz-border-radius: 12px; /* FF1+ */
         -webkit-border-radius: 12px; /* Saf3+, Chrome */
          border-radius: 12px; /* Opera 10.5, IE 9 */

Это значит, что я должен добавить 3 стиля для этой границы радиуса, не так ли?

Answer 1

Отказ от ответственности: надеюсь, вы нашли это через год после моего написания, и теперь это совершенно неправильно, и у нас есть стандарт, ууу!

Пока да, это правильно ... вам нужны все правила.

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

Надеюсь, как только спецификация будет завершена, у нас будет только border-radius: 12px;. Поскольку Firefox и Chrome запускают автоматические обновления (не уверены в Safari?), Это происходит гораздо чаще, в отличие от пользователей IE, которые могут никогда не обновиться.

Answer 2

Компас предоставляет Sass mixins для многих свойств CSS3 , что означает, что вы можете написать что-то вроде:

.foo {
    @include border-radius(4px, 4px);
}

, который сгенерирует следующий CSS:

.foo {
    -webkit-border-radius: 4px 4px;
    -moz-border-radius: 4px / 4px;
    -o-border-radius: 4px / 4px;
    -ms-border-radius: 4px / 4px;
    -khtml-border-radius: 4px / 4px;
    border-radius: 4px / 4px;
}

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

Answer 3

Вам нужно только border-radius для браузеров, которые фактически поддерживают эту часть CSS 3. Другие свойства предназначены для браузеров, которые имеют экспериментальные реализации. Более новая версия этих браузеров заменит префиксные экспериментальные свойства поставщика стандартными свойствами, когда их реализация и спецификация стабилизируются.

Answer 4

Попробуйте это: http://css3please.com/

Answer 5

border-radius - это официальное правило CSS3 для добавления радиуса границы. Однако, как отмечает Ник, это поддерживается не во всех браузерах, поэтому вам нужно добавить соответствующие версии, чтобы он работал в максимально возможном количестве браузеров.