Свойство border-radius не существует на уровне CSS 2.1, но существует в: 6px 6px

Я новичок в веб-дизайне, и у меня есть некоторые проблемы на моем сайте. Во-первых, это не кросс-браузерный веб-сайт. Я хочу сделать это так, но я не знаю, как это сделать. Я прочитал несколько статей об этом, но они не помогли. Пожалуйста, скажите мне, как я могу создать кросс-браузерный сайт.

Во-вторых, я проверил файл CSS моего сайта и получил эти ошибки:

218.box Свойство border-radius не существует в CSS уровне 2.1, но существует в: 6px 6px 219 .box Свойство -moz-border-radius не существует: 6px 6px 220 .box Свойство -webkit-border-radius doesn't существует: 6px 6px.

Но я тоже не знаю, как это решить.

http://www.harvestcreativemedia.com/

3 ответа

border-radius является свойством CSS3, поэтому если вы проверяете как CSS2, он будет сообщать об ошибках.

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

Если вы разрабатываете кросс-браузерный сайт, вам нужно подумать, какие браузеры включить. Например, хотите ли вы потратить некоторое время, чтобы заставить его работать в очень старых версиях браузеров (которые, возможно, больше никто не использует)? Вам нужно решить, какие более старые версии поддерживать.

Это относится к border-radius потому что все текущие версии Firefox, Chrome и Safari поддерживают border-radius без префикса производителя. На самом деле, префикс вендора не требовался для нескольких версий, особенно для браузеров Webkit. Таким образом, вы можете быть совершенно оправданы, если отбросите эти префиксные объявления. Вам нужно проверить, какие версии каких браузеров им требуются, и решить, хотите ли вы поддерживать эти браузеры.

Еще один фактор, который следует учитывать, это то, что до недавнего времени IE не поддерживал border-radius вообще, даже с префиксом вендора. IE9 поддерживает его, но большинство пользователей IE все еще используют IE8.

Если ты хочешь border-radius чтобы работать на IE, вам нужно будет сделать несколько хаков. На данный момент лучшим вариантом для этого является CSS3Pie. Другой вариант - просто игнорировать его и оставлять пользователей IE с квадратными углами. Поскольку это не повлияет на удобство использования вашего сайта, вы можете решить, что это самый простой вариант.

Все браузеры и версии браузеров имеют свою собственную комбинацию функций, которые они поддерживают. Такой сайт, как CanIUse.com, неоценим, поскольку он помогает вам определить, следует ли использовать какую-либо функцию: он показывает, какие браузеры и версии поддерживают ее, что позволяет вам принять обоснованное решение о том, использовать ее или нет.

Наконец, самый важный совет, который я могу вам дать для создания кросс-браузерного сайта: протестируйте его во всех браузерах и во всех версиях браузеров, которые вы хотите поддерживать. (не просто предполагайте, что если он работает в одной версии браузера, он будет работать в других версиях - вам нужно протестировать их все).

Чтобы исправить кросс-браузер веб-сайта на веб-сайте, лучше всего начать его с этого и шаг за шагом разрабатывать, чтобы проверить каждый браузер на предмет различий и попытаться найти кросс-браузерное решение. Вы можете достичь этого и с готовым сайтом, но, конечно, это гораздо сложнее. Если у вас есть конкретный вопрос, вы можете использовать stackru.com для помощи в любых ваших проблемах программирования.

Об ошибках вы получаете, потому что вы пытаетесь проверить файл CSS 3 со стандартами CSS 2.1. Перейдите по адресу http://jigsaw.w3.org/css-validator/ и выберите на уровне профиля 3 css, чтобы подтвердить его для css 3.

Хорошая вещь, чтобы посмотреть на это jquery закругленные углы. это довольно просто и делает почти все, что делает css3 border-radius. Недостатком является создание границы, если вам нужна граница в 1 пиксель, вам нужно будет обернуть ваш целевой div в другой div и установить для внешнего отступа 1 px.

вот сайт: http://plugins.jquery.com/project/corners загрузите zip-пакет для просмотра демоверсии.

Это работает во всех браузерах и IE6+, а также адаптирует правильные свойства CSS, если они существуют для этого браузера.

Другие вопросы по тегам