Какие инструменты / библиотеки / шаблоны помогут начать работу с HTML5 / CSS3?

Question

Мы небольшая компания по разработке веб-приложений. Мы планируем перейти на HTML5 / CSS3 и проходим этап обучения (мы используем видеоуроки). Хотя HTML5 / CSS3 выглядит многообещающе, кажется, что есть много проблем с кросс-браузерной совместимостью, а также со многими новыми API. Есть ли какой-нибудь шаблон, который мы можем использовать сразу, ожидая полной рекомендации от W3C? В настоящее время существуют ли библиотеки / инструменты, которые мы можем использовать для обеспечения кросс-браузерной поддержки?

Помощь высоко ценится. :)

Answer 1

HTML5 ... С чего начать?

Сейчас вам лучше всего следить за тем, что могут делать браузеры. Поэтому следите за блогами разработчиков браузеров на эту тему.

Кстати, HTML5 - это в основном набор не связанных между собой функций, переходящих от разметки к новым функциям, таким как WebGL и клиентское хранилище (WebSQL). HTML5 основан на предыдущих спецификациях стандартов HTML и разъясняет многие функции. С другой стороны, CSS является кульминацией CSS1 + CSS2 + CSS3.

Зайдите в Интернет, вся информация есть!

Ресурсы

• Краткая история разметки (информация)
• HTML5 Rocks (информация + учебные пособия)
• Погружение в HTML5 (информация)
• CSS3 (информация + учебные пособия)
• Quirksmode (совместимость с браузером)
• Эксперименты WebGL (эксперименты, вы можете просмотреть источник, чтобы узнать)
• HTML5 демонстрации (демонстрации)
• Блог разработчиков Mozilla
• Webkit

Библиотеки и шаблоны

• HTML5 Boilerplate
• HTML5 shiv (включает HTML5 для IE)
• Modernizr
• JQuery
• Normalize.css

Инструменты

• Aptana Studio (Linux / Mac OS / Windows)
• Эспрессо (Mac OS X)
• WebStorm (Linux / Mac OS / Windows)

Похожие вопросы и ответы по StackOverflow

• Насколько важно следовать веб-стандартам?
• Какую версию HTML следует выбрать для общедоступного веб-сайта?

Я постараюсь продолжать добавлять ресурсы ...

Answer 2

Пол Ирландский и его друзья только что запустили Перемещение в Интернете :

Вы любите веб-стандарты.Вы хотите вернуть сообществу.Хотите узнать, с чего начать?Мы здесь, чтобы помочь.

...

Learn

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

...

Answer 3

jQuery - самая популярная кросс-браузерная библиотека. Он будет использовать функции HTML5 в браузерах, которые его поддерживают, и при необходимости корректно откатывается к чему-то другому. Он часто обновляется и очень многофункциональный.

quirksmode http://www.quirksmode.org/compatibility.html - это список всех функций HTML / CSS / DOM, а также того, какие браузеры их поддерживают и в какой степени.

w3schools http://www.w3schools.com/ - отличный источник информации о том, как конкретные функции HTML / CSS / DOM работают с примерами кода.

jsfiddle http://jsfiddle.net/ - это онлайн-редактор javascript / HTML / CSS. Это отличный способ проверить идеи, прежде чем помещать их в код. Это также отличный способ поделиться примерами кода с другими.

jsPerf http://jsperf.com/ - это онлайн проверка скорости кода. Если вы не уверены, что лучше всего сделать что-то в javascript, вы можете запустить примеры здесь. Результаты также можно поделиться.

Answer 4

Давайте разделим кроссбраузерную совместимость на две части: новые HTML5 элементы / атрибуты и HTML5 API .

Элементы : браузерыкоторые не поддерживают новые элементы HTML5 (например, <section>), например, более старые версии IE, будут просто печатать содержимое и игнорировать стили.Вы можете использовать небольшой JavaScript-хак для создания элементов, которые можно стилизовать в IE: HTML5shim .

Атрибуты : Использование новых атрибутов HTML5 также вполне нормально.Браузеры, которые их не понимают, просто игнорируют их.С Modernizr вы можете проверить, доступна ли функция HTML5 / CSS3, а если нет, просто предоставить запасной вариант с JavaScript.

Чтобы обеспечить поддержку новых HTML5 APIs , выможно использовать полифиллы для добавления поддержки отсутствующих функций.Вот хороший список: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Кстати: хорошая идея использовать некоторые API-интерфейсы HTML5, такие как localStorage, в качестве прогрессивного усовершенствования.Если это всего лишь небольшая функция, предназначенная для улучшения взаимодействия с пользователем, то можно сделать это с HTML5 и позволить старым браузерам просто иметь нормальную версию.

Answer 5

Пройдет некоторое время, прежде чем html и css3 будут поддерживаться, но в то же время, если вы хотите получить предварительный старт, посмотрите themeforest у них есть множество html5 и php шаблонов, которые вы можете начать взламывать прочь. Еще один замечательный инструмент - проверить этот пост noupe , где перечислены некоторые бесплатные учебники html5 / css3.

Answer 6

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

Библиотеки и шаблоны являются помощниками, но не являются необходимыми. Подбирайте элементы и свойства по мере необходимости. Не начинайте использовать новый материал только потому, что он там есть.