Я хотел бы начать использовать базовые функции HTML5, но в то же время сохранить мой код обратно совместимым со старыми браузерами (изящная деградация). Например, я хотел бы использовать классные свойства CSS3 для создания закругленных углов. Есть ли доступный учебник для написания грамотно разлагаемого HTML5?
Кроме того, какие браузеры мне следует поддерживать, чтобы мое приложение. функционирует как минимум для 95% посетителей? Каким образом можно безболезненно протестировать эти браузеры?
Говоря о HTML5 или CSS3, вы должны перейти к:
Как видно, мы все еще далеки от использования этого.
Кроме того, поскольку старые версии браузеров не поддерживают HTML5 или CSS3, вы можете делать так, как известно:
Прогрессивное улучшение и грациозная деградация
Вот некоторые ресурсы:
Браузеры, которые в совокупности охватывают 95% мира: Firefox, Chrome, IE6/7/8. Лучший способ проверить их - установить их на свой компьютер.
Вы хотите использовать html-теги и css, совместимые с мобильными браузерами.
Для чего-нибудь CSS3 оберните его в условный javascript. Я всегда убеждаюсь, что ширина устройства по крайней мере 240 пикселей, тогда все, что ниже, это старый, дерьмовый, мобильный вид.
Вы можете использовать небольшой мобильный шаблон для CSS, reset основные теги, которые вы используете (чтобы они выглядели одинаково в разных браузерах). Как и с любым шаблоном, вы должны посмотреть на css, чтобы увидеть, не переполнен ли он.
Для всестороннего руководства ознакомьтесь с рекомендациями W3 Mobile CSS2: http://www.w3.org/TR/2000/WD-css-mobile-20001013
Другим хорошим ресурсом является эта таблица совместимости: http://www.quirksmode.org/m/css.html
Изящная деградация - все о компромиссах - если бы вы могли сделать все в нижней версии, вы, вероятно, захотите. Чтобы выбрать пример закругленных углов, которые вы цитируете, для вас (или вашего клиента) может быть приемлемым жить без них, если для их поддержки не существует специальных расширений CSS для визуализации (это как http://www.ipswich-angle.com/ обрабатывает его, например, я считаю). Другие варианты, связанные с изображениями, есть, но в значительной степени зависят от того, какие компромиссы вы и ваш клиент готовы сделать.
Сервис, такой как browsershots.org, весьма полезен для проверки того, как ваш сайт размещается в разных браузерах и операционных системах. Вы должны ждать в очереди некоторое время, но это стоит того.
Я собирался сделать это замечанием, но потом я увлекся.
w3schools содержит предложения по использованию семантических веб-элементов на вашем сайте. Он предлагает использовать библиотеку Javascript под названием html5shiv.js, чтобы добавить поддержку стилей в IE8 и ниже, чтобы вы могли находить файлы javascript, которые эмулируют определенные функции, встроенные в HTML5 например JSON2.js и Webforms2.js.
Наконец в этой статье приведен полный пример эмуляции формы HTML5 со многими новыми атрибутами/функциональными возможностями.
Что касается создания сайта, я бы рекомендовал сначала создать сайт HTML4, используя семантические элементы свободно (с html5shiv) и тестирование с помощью IE7. Затем, когда вы создаете части сайта, для которых требуются новые функции, изучите файл Javascript, который предоставит более старые браузеры с одинаковой функциональностью, например: когда нужно добавить свой первый округленный угол или градиент, добавьте CSS3Pie. Всегда помните, что ваша коробка-модель; border-radius и gradients поддерживаются в webkit, а также API-интерфейсе mozilla столько атрибутов css3, которые вам нужно добавить 3 раза:
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
К сожалению, у меня нет хорошего ресурса для того, как API-интерфейсы webkit/mozilla сравниваются с функциональностью HTML5.
Единственная функциональность, которую я изо всех сил пытался найти, - это поддержка селекторов CSS3 в старых браузерах, часто вы можете уйти от этого, я имею в виду, если вы не собираетесь обновлять свой браузер IMHO, вы можете жить с несколькими границами двойной толщины или отсутствует альтернативный стиль строк в таблицах.
Возможно, в один прекрасный день появится сайт, на который вы сможете загрузить свой код, который скажет вам такие вещи, как "chrome 20.xyz не поддерживает закругленные углы, добавьте -webkit-border-radius, чтобы добавить поддержку", но до тех пор добавляя обратную совместимость после того, как этот факт будет почти невозможным для сложных сайтов.