Вы пропустили точку проверки.Вы подтвердите, чтобы избежать ошибок !К ним относятся: небезопасные расширения браузера, взломы, т.е. взломы, и фактические ошибки.Вы ни в коем случае не должны проверять, чтобы сделать ваш код менее кросс-браузерным.
Вы должны знать, что существуют такие вещи, как ожидаемые ошибки, и даже допустимый код работает с ними.Расширения браузера, такие как -moz-, -webkit- и -o-, являются ожидаемыми ошибками.Все браузеры предназначены для удаления неизвестных правил.Вот как CSS обеспечивает обратную совместимость.Браузер, поддерживающий CSS2, пропустит правило CSS3 border-radius.Быть действительным или недействительным не имеет к этому никакого отношения, и ни в коем случае ни один браузер просто не сломается из-за этого (к счастью для нас идея превратить CSS в XML была разрушена и никогда не выходила на свет).Opera удалит -moz- rules, а Firefox сбросит -o- rules, это не ошибка.Это ожидаемое поведение:
Гарантируется, что начальная тире или подчеркивание никогда не будут использоваться в свойстве или ключевом слове каким-либо текущим или будущим уровнем CSS.Таким образом, типичные реализации CSS могут не распознавать такие свойства и могут игнорировать их в соответствии с правилами обработки ошибок синтаксического анализа.Однако, поскольку начальная черта или подчеркивание является частью грамматики, разработчики CSS 2.1 всегда должны иметь возможность использовать CSS-совместимый синтаксический анализатор, независимо от того, поддерживают ли они какие-либо специфичные для поставщика расширения.
W3c даже определяет , как написать эти "специфичные для поставщика расширения" .Ниже перечислены текущие хорошо известные расширения:
- -ms-, mso- Microsoft
- -moz- Mozilla
- -o-, -xv- Программное обеспечение Opera
- -webkit- Apple
- -khtml- KDE
Есть также некоторые, о которых вы, возможно, даже не слышали:
- -atsc- Комитет по передовым телевизионным стандартам
- -wap- WAP Forum
Браузеры реализуют черновую или частичную реализацию (т. е. браузер поддерживает X, Y, но не Z) правил CSS в качестве расширений.Таким образом они предотвращают любые изменения в спецификации от взлома предыдущих версий браузера.Были случаи, когда браузеры были довольны оружием и реализовывали их как не-расширения, и обычно всегда говорили, что браузер выстрелил себе в ногу, например: «браузер XXX версия YYY имеет плохую реализацию [...]».В частности, IE стоит на первом месте в этом списке, но и другим браузерам тоже удалось успешно выстрелить себе в ногу .Когда черновик становится стандартным, а браузер полностью (или в достаточной мере) реализует спецификацию, создается правило без префикса -xxx-.
В последние годы все основные браузеры приняли этот стандарт де-факто.
Как и когда использовать -xxx- расширения браузера? Как обычно, рекомендуется разрабатывать с использованием только кода, соответствующего стандартам, в самом продвинутом браузере, который есть в вашем распоряжении, а затем добавлять все безопасные расширения.Из расширений используйте те, которые основаны на стандартах W3C или текущих рабочих проектах.Не используйте отброшенные стандарты / черновики или стандарты браузерного подражания (т.е. некоторые из старых Firefox).Также избегайте каких-либо поворотов, если у них нет стабильного запасного варианта.
В случае правила радиуса границы у вас есть стабильный запасной вариант.
Как сохранить форму и функционирование? По моемубольшинство людей не обеспокоены "оооооооооооооо" , а скорее фактом, что они вынуждены написать несколько правил для одной и той же строки.Простым решением этого является использование системы шаблонов.Для CSS есть немало, так как проблема сохранения вашего кода СУХОЙ является постоянной.
Есть много много много различных реализаций. Основная идея заключается в том, чтобы решить эту проблему с помощью mixin (т.е. функции):
=border-radius(!radius)
-moz-border-radius= !radius;
-webkit-border-radius= !radius;
-khtml-border-radius= !radius;
border-radius= !radius;
Теперь мы можем написать это везде:
.stuff
+border-radius(15px);
Этот код гораздо гибче, чем просто писать border-radius: 15px и надеяться на лучшее. Это также поддерживается (какой элемент не должен иметь радиус границы более 10 пикселей? Нет проблем).