Новый материал HTML5 / CSS3 (Web8!) Звучит круто! Должен ли я начать использовать его сейчас или придерживаться css / xhtml, подождите, пока другие браузеры не смогут его использовать?
Новый материал HTML5 / CSS3 (Web8!) Звучит круто! Должен ли я начать использовать его сейчас или придерживаться css / xhtml, подождите, пока другие браузеры не смогут его использовать?
Ответы:
HTML5 теперь поддерживается всеми браузерами, даже IE5! (Если вы используете скрипт html5shiv). Я настоятельно рекомендую прочитать http://diveintohtml5.org. Это один из лучших ресурсов HTML5.
Что касается CSS3, если вы его используете, убедитесь, что вы используете префикс поставщика, помимо обычного синтаксиса. например
граница радиуса
-moz-граница радиуса
-webkit-граница радиуса
Я верю в прогрессивное улучшение. Поддержка IE9 css3 звучит очень многообещающе.
Наверное.
Есть части HTML5, которые вы можете использовать прямо сейчас, сегодня. Формы например. Если у вас есть <input type="email">
браузер, который не поддерживает HTML5 (да, даже IE6), вы просто увидите то же самое, что и при использовании <input type="text">
. Тем не менее, в браузере, который поддерживает элементы формы HTML5, вы получаете преимущества этого email
типа, а именно: клиент проверит ошибку при проверке значения без дополнительных JS. Хотя да, вам все равно понадобится JS для браузеров, отличных от HTML5, у вас будет еще один уровень проверки в поддерживаемых браузерах.
Другой вопрос на этом сайте дает хороший обзор новых функций, доступных вам через HTML5 и CSS3. В этом вопросе также много хороших данных о формах.
Поскольку Internet Explorer (и более старые версии Safari и Firefox, какими бы редкими они ни были) не поддерживают многие из этих функций, у вас остались библиотеки JavaScript для заполнения пробела. Они включают в себя снижение производительности (хотя только для браузеров, которые должны их использовать), поэтому будьте внимательны к своим пользователям при их использовании.
Чтобы решить проблемы с отсутствием поддержки функций, если вы решите, что эти новые функции того стоят, используйте следующие ресурсы:
.htc
файл), которое позволяет Internet Explorer 6-8 отображать некоторые из наиболее полезных функций оформления CSS3. При применении к элементу, он позволяет И.Е. распознавать и отображатьborder-radius
,box-shadow
,border-image
, множественные фоновые изображения, иlinear-gradient
качестве фонового изображения.true
если поддерживается иfalse
если нет. Добавлена поддержка для укладки и печатей HTML5 элементовтаквы можете использовать такие элементы, как<section>
,<header>
и<nav>
.src
из<img />
элемента иликачествеbackground-image
свойства в CSS. В отличие отAlphaImageLoader
,background-position
иbackground-repeat
работают как задумано, и элементы будут реагировать наa:hover
псевдокласс..htc
файл), которое добавляет поддержку PNG с альфа-прозрачностью в IE 6. Поддерживается полное позиционирование и повторение CSS-фона (включая CSS-спрайты) с дополнительным (включенным) JavaScript..htc
файл), которое автоматически исправляет: hover,: active и: focus для IE6, IE7 и IE8, позволяя вам использовать их так же, как и в любом другом браузере. Включаетсебя поддержку AJAX,означаетчто любой HTMLкоторый получает вставлено в документпомощью JavaScript также подтолкнет:hover
,:active
и:focus
стили в IE.Интересно отметить, что DD_belatedPNG решает обе проблемы, решаемые с помощью Whither: hover и IEH Fixix от TwinHelix с использованием чистого JavaScript, тогда как Whither: hover и IE PNG Fix от TwinHelix используют комбинацию JavaScript и подключенного поведения IE ( .htc files
).
Обычно люди, которые используют браузеры, отличные от IE, обновляют их, когда их об этом просят, и поэтому IE принимает на себя главный удар «Но некоторые браузеры не поддерживают эту функцию!» жалобы. Modernizr добавит возможность использовать HTML5 / CSS3 для любого браузера, который вы, вероятно, увидите, а не только для IE. ie-css3.js будет делать то же самое, вы просто должны реализовать его без условного комментария IE (что означает, что все браузеры получат его, если вы не включите его в проверки пользовательского агента на стороне сервера - это значительно снизит производительность) для всех ваших посетителей, а не только для ваших пользователей IE.)
Используйте любую технологию, которая больше всего соответствует вашим потребностям.
Эрик Мейер написал прекрасную статью о том, почему начинать использовать специфичные для поставщика префиксы в правилах CSS не так уж и плохо, как использовать взломы CSS-фильтров.
Я думаю, что то же самое относится и к HTML5. Если вы можете проверить поддержку браузера для различных функций, почему бы не использовать его. Пока сайт грациозно деградирует, оживи его.
Некоторые другие полезные ссылки, когда вы решаете, какие функции CSS3 вы, возможно, захотите использовать: http://caniuse.com/ (дает хорошее представление о том, какие элементы и селекторы можно использовать на каких платформах)
http://css3please.com/ (редактируемая на странице игровая площадка, чтобы связываться с функциями CSS3, это также дает некоторые советы о том, какие методы и функции поддерживаются какими платформами для часто запрашиваемых стилей, таких как закругленные углы, градиентные фоны, и т.д.)
Я использую его для улучшения взаимодействия с современными браузерами, чтобы пользователи с хорошим браузером были «вознаграждены» более привлекательным интерфейсом (закругленные углы, тени и тому подобное). Я полагаю, вам не следует использовать его в качестве замены, скажем, вашей текущей проверки клиентской формы, если только у вас нет какой-то альтернативы JS.
Если вы начинаете новый проект с использованием HTML5, который также должен поддерживаться в старых браузерах, лучше всего использовать Initializr -
Он использует HTML5 Boilerplate на сервере и добавляет несколько собственных опций, чтобы дать вам шаблон, который вы можете развернуть на своем собственном сайте. Он включает библиотеки Javascript (например, HTML Shiv или Modernizr), которые сделают ваш сайт совместимым со старыми браузерами.
Зависит от того, какая аудитория и какие функции вы хотите использовать. Я ожидаю, что пройдет еще несколько лет, прежде чем средний проект сможет отказаться от поддержки ie6 :(
Если ваш сайт является частной интрасетью, и вы либо управляете браузером, либо имеете ограниченный набор браузеров для работы, то не стесняйтесь работать на передовых технологиях.
Если нет, независимо от того, что вы используете, вы всегда должны учитывать наименьший общий знаменатель. В данном случае это, вероятно, некоторая комбинация IE 6 и ряда мобильных браузеров. Таким образом, если вы переходите к HTML 5, у вас появляется дополнительная проблема, заключающаяся в том, чтобы ваш сайт хорошо «деградировал».