Хорошо / плохо использовать -moz-border-radius - PullRequest
3 голосов
/ 12 января 2011

Привет!

Я заметил, что некоторые сайты используют -moz-border-radius для округления значений элементов?Это хорошая практика?Есть ли с этим минусы?

Ответы [ 4 ]

5 голосов
/ 12 января 2011

Я бы рекомендовал добавить «-webkit-border-radius» для покрытия Safari и Chrome и «border-radius» для покрытия стандарта CSS3.

Единственная проблема - IE8 не поддерживает закругленные углы. Но это выглядит хорошо во всех других браузерах.

3 голосов
/ 12 января 2011

Использование border-radius (и его друзей-браузеров -moz-border-radius и -webkit-border-radius) - самая простая стратегия для получения закругленных углов на элементах. Поскольку этот метод совместим со стандартами (и не требует отвратительных взломов, таких как позиционирование элементов с фоном), это лучший способ.

О разнице между -moz и -webkit см. на этой странице по адресу css3.info . Эта страница также содержит дополнительную информацию об этом.

2 голосов
/ 12 января 2011

Философски

Свойство CSS для border-radius является одним из лучших способов получения закругленных углов в любом месте на веб-сайте.ИМО это ЛУЧШИЙ путь.

Хотя border-radius поддерживается не во всех браузерах / версиях, я предпочитаю использовать это свойство почти во всех случаях, когда закругленные углы выгодны, потому что закругленные углы являются декоративной функцией, поэтому неважно в тех случаях, когда это не поддерживается, а также, как правило, не стоит дополнительной полосы пропускания при использовании эффекта на основе изображений или даже взлома JavaScript, такого как CSS3Pie.

Это следует из обоснования «прогрессивного улучшения» веб-дизайна,Пользователи, которые имеют современный браузер, поддерживающий border-radius, видят их, другие - нет.Но радиус границы, как правило, не является вопросом доступности или удобства использования, поэтому реализация через CSS - лучший путь в 95% случаев.

Практически

На практике использование border-radius требует, чтобы фактически поддерживались три свойства в большинстве современных браузеров:

div {
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}

Первое, border-radius - это фактическое свойство, указанное в спецификации CSS3, и однажды будетДефект реализовал правило.Но пока широкое внедрение не будет достигнуто и спецификация не будет завершена, вам все равно нужно будет включить префиксы, специфичные для поставщика, для -moz- (Mozilla Firefox) и -webkit- (браузеры Google Chrome и Apple Safari).

Ресурсы

http://border -radius.com / Создает правильные правила / сокращенные версии в зависимости от того, какие значения вы хотите применить и какие углы вы хотите округлить.Очень удобно.

http://www.css3.info/preview/rounded-border/ Некоторая дополнительная информация о поддержке поставщиков, использовании сокращений и т. Д.

2 голосов
/ 12 января 2011

Да, border-radius считается хорошей практикой.Это, безусловно, на много лучше, чем альтернативы, такие как грязный JQuery или хуже, набор угловой графики - у всех альтернатив есть серьезные проблемы, начиная от не масштабируемости и заканчивая испортить фон.border-radius - это чистый CSS, и у него нет ни одной из этих проблем.

Единственная причина, по которой вы бы его не использовали - это отсутствие поддержки в веб-браузерах.Однако все основные браузеры, кроме IE, теперь поддерживают border-radius.Некоторые по-прежнему нуждаются в префиксе вендора, например -moz-, поэтому вам нужно указывать его несколько раз, но функциональность в основном одинакова во всех браузерах.до версии 8 (IE9 будет поддерживать его, но еще не выпущен).Хорошей новостью является то, что есть очень приятный небольшой взлом для IE, который добавляет поддержку border-radius (и некоторых других функций тоже), даже в более старые версии, такие как IE6.

Хак называется CSS3Pie , и стоит посмотреть, хотите ли вы использовать эту функцию.Это означает, что вы можете использовать современную функцию CSS3, такую ​​как border-radius, не слишком заботясь о пользователях IE.

...