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