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

Question

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

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

Answer 1

Говоря о HTML5 или CSS3, вы должны отправиться на:

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

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

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

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

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

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

Answer 2

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

Answer 3

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

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

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

Для всеобъемлющего руководства посмотрите на себя руководящие принципы W3 Mobile CSS2: http://www.w3.org/tr/2000/wd-css-mobile-20001013.

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

Answer 4

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

Answer 5

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

Answer 6

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

W3Schools. Имеет предложения по использованию семантических веб-элементов на вашем сайте. Он предлагает использовать библиотеку JavaScript под названием html5shiv.js. Чтобы добавить поддержку стилей к IE8 и ниже, чтобы вы могли найти файлы JavaScript, которые эмулируют конкретные функциональные возможности, встроенные в HTML5, как Json2.js. а также Webforms2.js..

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

Что касается создания сайта, я бы порекомендовал построить сайт HTML4 сначала свободно используя семантические элементы (с HTML5SHIV) и тестированием с IE7. Затем, как вы создаете части сайта, требующие новые функции, исследовать файл JavaScript, который предоставит более старые браузеры с той же функциональностью, например, когда пришло время добавить свой первый закругленный угол или градиент, может быть Css3pie.. Отказ Всегда помните, а ваша коробка-модель; Пограничный радиус и градиенты поддерживаются в 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 Чтобы добавить поддержку «Но до тех пор, пока добавив обратную совместимость после того, как факт будет почти невозможен для сложных сайтов.