Как написать обратно совместимый HTML5?

Question

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

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

Answer 1

Говоря о HTML5 или CSS3, вам следует обратиться к:

Когда я могу использовать ...

Как видно, мы все еще далеки от этого.

Кроме того, поскольку старые версии браузеров не поддерживают HTML5 или CSS3, вы можете сделать то, что называется:

Прогрессивное улучшение и постепенная деградация

Вот также некоторые ресурсы:

• Галерея сайтов HTML5 (Вы можете узнать и получить идею из них)
• Создание современных веб-сайтов с использованием HTML5 и CSS3

Answer 2

Вы хотите использовать HTML-теги и CSS, совместимые с мобильными браузерами.

Для чего-нибудь CSS3 оберните это в условный JavaScript. Я всегда проверяю, чтобы ширина устройства была не менее 240 пикселей, а затем все, что ниже, это старый, дрянной, мобильный вид.

Вы можете использовать небольшой мобильный шаблон для CSS, чтобы сбросить используемые вами основные теги (чтобы они выглядели одинаково в разных браузерах). Как и в случае с любым другим шаблоном, вы должны взглянуть на css, чтобы понять, не слишком ли это УДАЛЕННО.

Для получения полного руководства ознакомьтесь с рекомендациями W3 Mobile CSS2: http://www.w3.org/TR/2000/WD-css-mobile-20001013

Еще один хороший ресурс - это таблица совместимости: http://www.quirksmode.org/m/css.html

Answer 3

Браузеры, которые в совокупности покрывают 95% мира: Firefox, Chrome, IE6 / 7/8. Лучший способ проверить их - установить их на свой компьютер.

Answer 4

Сервис, подобный browsershots.org , весьма полезен для проверки того, как ваш сайт отображается в разных браузерах и операционных системах. Вы должны подождать в очереди некоторое время, но это того стоит.

Answer 5

Изящная деградация - все о компромиссе - если бы вы могли делать все в более низкой версии, вы, вероятно, сделали бы. Чтобы выбрать пример закругленных углов, которые вы привели, для вас (или вашего клиента) может быть приемлемо жить без них, где не существует специфичных для рендеринга CSS-расширений для их поддержки (вот как http://www.ipswich - angle.com/ справляется, например, я считаю). Существуют и другие варианты, связанные с изображениями, но это в значительной степени зависит от того, какие компромиссы вы и ваш клиент готовы совершить.

Answer 6

Я собирался сделать это комментарием, но потом я увлекся ..

w3schools имеет предложения по использованию элементов семантического веба на вашем сайте. Он предлагает использовать библиотеку Javascript с именем html5shiv.js , чтобы добавить поддержку стилей в IE8 и ниже, чтобы вы могли найти файлы javascript, которые эмулируют определенные функции, встроенные в HTML5, такие как JSON2.js и Webforms2.js .

Наконец В этой статье приводится полный пример эмуляции формы HTML5 со многими новыми атрибутами / функциями.

Что касается создания сайта, я бы рекомендовал сначала создать сайт HTML4, используя свободно семантические элементы (с html5shiv) и тестировать с IE7. Затем, когда вы создаете части сайта, требующие новых функций, исследуйте файл Javascript, который предоставит более старым браузерам такую ​​же функциональность, например: когда пришло время добавить ваш первый закругленный угол или градиент, возможно, добавьте CSS3Pie . Всегда помни также, что твоя коробка-модель; border-radius и градиенты поддерживаются в webkit, а также в API Mozilla, поэтому многие атрибуты css3 вам нужно будет добавить 3 раза:

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

К сожалению, у меня нет хорошего ресурса для сравнения API-интерфейсов webkit / mozilla с функциональностью HTML5.

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

Возможно, однажды появится сайт, на который вы сможете загрузить свой код, который скажет вам что-то вроде «chrome 20.xyz не поддерживает закругленные углы, добавьте -webkit-border-radius для добавления поддержки», но до тех пор добавьте обратную совместимость после того, как факт будет почти невозможно для сложных сайтов.