Начальная

Windows Commander

Far
WinNavigator
Frigate
Norton Commander
WinNC
Dos Navigator
Servant Salamander
Turbo Browser

Winamp, Skins, Plugins
Необходимые Утилиты
Текстовые редакторы
Юмор

File managers and best utilites

Поддержка HTML5 в IE9: на что способен браузер? Html5 поддержка браузерами


Поддержка HTML5 в Chrome, Safari, Firefox, IE и Opera

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

Прошло уже четыре года с момента появления HTML5. Сегодня об HTML5 снова вспомнили, потому что комитет W3C, наконец, решил, что пора прекратить возиться со спецификацией HTML 5.0 и перейти к HTML 5.1. Это знаменует собой историческое событие, потому что документ HTML4 был завершен в 1997 году.

Что же делал мир во время становления стандарта? Конечно, не дожидался окончательного проекта. Сайты, использующие преимущества стандарта HTML5, распространились повсеместно. Браузеры поддерживают многие из функций HTML5, и они становятся все лучше с каждой новой версией. Различий между веб-сайтами и нативными приложениями меньше, чем когда-либо, а сложные, интерактивные веб-сайты, ведущие себя как нативные приложения, реальнее, чем когда-либо.

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

Хорошей новостью является то, что браузеры сошлись на стандарте. По оценке HTML5Test.com, они ближе и ближе к идеальным, хотя разница между некоторыми браузерами все-таки есть. Стоит отметить, что HTML5Test оценивает соответствие всем стандартам одной цифрой (от 0 до 555). Автоматизированный тест проверяет — поддерживается ли функция, создавая объекты DOM. Он не может сказать, будет ли функция реализована правильно, элегантно, или без ужасных багов.

В то время как эту цифру трудно игнорировать, реальные ответы лежат несколько глубже. Потратив всего несколько минут на просмотр списков, можно увидеть приоритеты развития команды каждого браузера. Некоторые из новых функций, которые еще не поддерживаются, не особенно важны. Chrome поддерживает кастомные схемы хэндлеров, но не поддерживает кастомные хэндлеры контента. Firefox не поддерживает некоторые из новых полей ввода для форм, такие, как время, месяц или неделя. Есть, по крайней мере, дюжина упущений в каждой платформе, и лишь немногие из них в настоящее время влияют на разницу в опыте обычного пользователя. Но это пока. Соответствие нужно для строительства прочной основы для будущего.

Политика браузеров
Некоторые из этих различий обусловлены глубокими политическими и финансовыми баталиями, скрывающимися за кулисами. Firefox и Chrome поддерживают видео кодеки WebM и Ogg Theora, но не MPEG-4. Safari поддерживает MPEG-4, но не WebM или Ogg Theora. По крайней мере, все они согласны с поддержкой H.264. Эти кодеки не являются официальной частью HTML5, но они являются настолько большой частью современного Интернета, что работа над ними является более важной для многих веб-разработчиков, чем все другие функции.

Другие пункты в тесте даже не являются частью официального проекта HTML5, потому что они — часть другой спецификации, которая может быть выделена из официальной спецификации HTML5. Часто бывает трудно для веб-разработчиков, программистов и особенно пользователей, нарисовать линию между тем, что есть в HTML5 и что является новой или лучшей функцией. Некоторые из наиболее привлекательных функций, таких как Web Storage и Web Workers не находятся под зонтиком HTML5, хотя они также введены консорциумом W3C. При этом, они могут иметь даже большее влияние.

Ядро спецификации HTML5 завершает добавление ряда новых тегов, предназначенных для указания роли воспроизводимого контента внутри тега. Они определяют области, разделы, отступы, нижние колонтитулы и заголовки. Раньше, мы бы отметили их тегами, которые определяют оформление <h4>. Теперь они будут отмечены своей ролью, так что у них могут быть собственные стили CSS, и браузер соответственно отобразит эти элементы. Тенденция отделять текст и изображения от их расположения и представления на странице продолжается.

За этими изменениями стоят увлекательные дискуссии, но они важны только для людей, которые беспокоятся о внешнем виде веб-страниц. Например, есть такие, которые хотят избавиться от использования таблиц для разметки, а другие хотят помешать этому. Можно определять наличие таблицы интуитивно, по чтению атрибутов тега таблицы. Добавление границы или заголовка столбца означает, что это, вероятно, табличные данные. Выключение границы означает, что может быть разметка.

Использование элементов неправильным способом может иметь последствия не только в виде обиженных сторонников правил в Интернете. Умное перепрофилирование тегов (например, таблиц) также разрушает другие системы. Команда HTML5 тратит много ресурсов, чтобы упростить слепым и инвалидам использование Интернет. Использование тегов таблиц для чего-то, кроме данных таблиц, путает программы для чтения с экрана и другие механизмы.

Теперь есть новый класс атрибутов ARIA (Accessible Rich Internet Applications), обеспечивающий альтернативные описания данных внутри. В общем, усилия по отделению сообщения от представления помогает сделать это гораздо легче.

От веб-страниц к веб-приложениям
Множество работ осуществляется в направлении обращения статических страниц в полноценные динамические приложения. Спецификации для Web Storage, WebSockets и Web Workers стали намного толще, по мере того, как создатели браузеров выяснили, что работает, а что нет. Эти данные делают возможным для программистов создание полнофункциональных пакетов программного обеспечения, как Google Docs. Локальное сохранение данных, возможность фоновой коммуникации и многопоточность — очень важны для работы с нетривиальными наборами данных.

Изменения в основном сосредоточены на мелких деталях, которые могут быть даже не заметны для многих разработчиков. Существуют десятки небольших изменений, а также дебатов вокруг них, которые не могут быть закончены. Из-за того, что многие детали остаются неопределенными, создатели браузеров часто принимают разные решения. Спецификация Web Storage говорит, что браузеры должны «ограничить общее количество пространства, доступного для хранения» и предлагает 5MB в качестве хорошего лимита. Между тем, реализации отличаются.

Одна из наиболее спорных областей может заключаться в обработке медиа. Веб-браузер становится доминирующим способом получения доступа к видео и команда, занимающаяся спецификацией HTML, настроилась на завоевание гостиной. Спецификация Encrypted Media Extensions включает в себя сложный механизм для работы с лентой видео и ключами, так что только должным образом лицензированные браузеры смогут показать изображения. Chrome, Opera и Safari поддерживают эти мультимедийные расширения; Firefox и Internet Explorer — нет.

Существует много другой работы, направленной на создание изменяющихся частей. Один из новых проектов, который называется Web Video Text Tracks, исследует стандартный механизм для синхронизации видео с другими частями сайта. Он, в основном, направлен на подписи, но нет никаких причин, почему он не найдет другие применения: слова, графики и изображения, перемещающиеся везде; и все браузеры его поддерживают.

Будущее Web
В то время как естественно думать о внедрении спецификации HTML5 в конце длительного процесса ее развития, лучше рассматривать это как начало следующего поколения. Некоторые из идей были выброшены из спецификации 5.0, потому что не было достаточно «опыта внедрения». Другими словами, функции не существовали достаточно долго, чтобы все узнали — являются ли они тем, что мы хотим.

Быстрый просмотр спецификации HTML 5.1 в виде проекта, включает в себя такие функции, как атрибут accesskey для добавления клавиатурных эквивалентов щелчкам мыши. Существует боле расширенная поддержка во всех браузерах для API редактирования HTML, которые делают каждую веб-страницу потенциально редактируемой, а всю сеть потенциально одной большой Википедией.

Могут появиться даже большие изменения, поскольку некоторые предпочитают, чтобы HTML был более похож на XML. Это не просто попытка закрыть все открытые теги, что, очевидно, приведет к багам у некоторых разработчиков. Некоторый члены сообщества, обсуждающего спецификации HTML5, уже говорят о возможностях «взлома» следующей версии. То есть, они хотят спецификацию, которая позволит нам определять наши собственные тэги и наш собственный механизм для обработки тегов после того, как они будут проанализированы.

Это может сделать разметку гораздо более эффективной. Любой, кто нажимал на кнопку «View Source», видел, что многие файлы HTML на 50-60% состоят из тегов <div> и <span>, каждый из которых с несколькими различными прилагаемыми классами. Отладка файлов CSS стилей становится все более трудной. Один из способов избавиться от этого, заключается в полностью расширяемой системе тегов.

Все эти решения ожидают нас в будущем. Этап HTML 5.0 является значительным, но это только пауза в развитии стандарта, который определяет, как мы представляем информацию и взаимодействуем с ней.

Достаточно обобщений – время покопаться в браузерах.

Браузер №1: Google Chrome
Chrome имеет самый высокий балл по HTML5Test — 523 для Chrome 42 — и многое говорит о приверженности компании Google спецификации HTML5 и стремлении создать один из ведущих браузеров. Осталось только несколько не отмеченных пунктов для команды программирования, чтобы заработать максимальный балл.

Упущения несколько разбросаны, и нельзя их суммировать одной фразой. Пропавший элемент разметки здесь и нереализованный графический метод там. В общем, Chrome — мечта для тех, кто привержен широкому набору инструментов для создания пользовательских интерфейсов. Если вы хотите использовать все новые методы разметки или элементы формы, Chrome — это лучший выбор. У него очень мало пробелов в списке.

Некоторые из самых больших упущений находятся под капотом. В нем нет хуков в движке JavaScript, которые отвечают за отдельные события, когда скрипты запускаются и останавливают выполнение. Нет простого способа контролировать как стили CSS влияют на страницу. Также не существует возможности использовать свой код для регистрации функции, которая обрабатывает все данные определенного типа MIME или URL схемы, так называемых пользовательских обработчиков контента.

Все три идеи, кстати, были давно реализованы в Firefox. Они не были приняты командой из Google.

Еще одна область, которая может принести разочарование — поддержка кодеков и медиа форматов. MPEG-4, например, работает с браузером iOS, но не с Chrome. Apple и Microsoft поддерживают выбор аудиодорожки, и Apple поддерживает видео выбор трека, но Chrome не позволяет вам это использовать.

В целом, Chrone — отличный браузер для тех, кто хочет начать использовать дополнительные функции, которые являются частью нового стандарта.

Браузер №2: Opera
На момент написания, Opera находится на втором месте в тесте HTML5Test, но отстает только на четыре пункта — 519 баллов для версии 29. Как и Chrome, Opera предлагает широкую поддержку новых элементов разметки и форм, так что это такая же хорошая платформа, как и Chrome для желающих поэкспериментировать с ними.

Opera также не поддерживает пользовательские обработчики контента, контекстные элементы стиля и события выполнения сценария. Однако таким же образом поступает любой другой браузер, кроме Firefox.

Самые большие различия лежат в кодеках. Opera не может поддерживать видео форматы MPEG-4 и H.264. Ситуацию осложняет то, что данный браузер также не поддерживает AAC и MP3 –два аудио формата, которые существуют достаточно давно. Таким образом, заставить ваш мультимедийный контент работать с Opera немного сложнее. Opera почти наверняка окружена расходами на лицензирование патентов, и компания, вероятно, предпочла проигнорировать большие затраты на лицензирование. Opera, конечно, поддерживает Ogg Vorbis Ogg Theora и WebM, которые являются достаточно хорошими, если не буквально совместимыми.

Наряду с Internet Explorer и Chrome, Opera развивается в направлении «pointer events», обобщая различные модели ввода. Они направлены, чтобы упростить поддержку мыши, сенсорных экранов и стилусов, предлагая программисту единую простую модель событий, что гармонизирует их.

В целом, Opera — браузер, который впечатляет, но который не получает столько внимания, сколько бы следовало. Он конкурирует только с Chrome по широте поддержки современных веб-функций.

Браузер №3: Mozilla Firefox
По баллам Firefox выглядит, как будто он слегка отстает от двух лидеров. Он набрал 449 баллов в тесте HTML5Test для Firefox 37, но этот факт в значительной степени зависит от важности функций, которую тест определяет сам. Firefox теряет много очков в некоторых областях, где он отстает, и получает меньше очков в тех областях, где ведет.

Много баллов теряется, например, потому, что Firefox не реализует многие из новых полей ввода и интерактивных элементов. Если вы хотите просто добавить один элемент формы для сбора значения даты или времени, Firefox не поможет. За эти упущения, он теряет 26 баллов, но не ясно, действительно ли страдают все программисты. Есть разработанная библиотеки JavaScript для получения данных времени, и они являются кросс-браузерными. Многие из них также отлично стилизованы и лучше выглядит, чем стандартные инструменты. Таким образом, многие программисты выбирают их, а не встроенную в браузеры поддержку.

Тест также не вознаграждает Firefox за проявленную инициативу. События, которые срабатывают, когда сценарий собирается выполнятся, полезны для регулировки, но поддержка этих событий выполнения скрипта дает Firefox только один балл. Добавление рамки к стилям листов полезно для объединения нескольких стилей листов, но это стоит всего два очка в глазах создателей теста HTML5Test.

Firefox больше не выигрывает никаких баллов за реализацию разметки микроданных, дополнительных тегов, которые позволяют проще определять и отмечать некоторые наиболее часто встречающиеся типы данных на веб-страницах. Нелюбимые консорциумом W3C и всеми другими браузерами, микроданные поддерживаются только в Firefox.

Firefox предлагает широкую поддержку кодеков, но избегает MPEG-4, оставив его в том же лагере, что и Chrome и Opera. Он поддерживает Ogg, WebM и H.264, которых более чем достаточно.

Являются ли эти различия важными? Все зависит от того, как вы оцениваете функции лично. Если вам нравятся все новые элементы форм, Firefox не для вас и вашего проекта. Но во многих отношениях, Firefox предлагает тот же уровень соответствия, как и браузеры с более высокими результатами, если вас не беспокоят новые временные поля ввода.

Браузер №4: Apple Safari
На тесте HTML5Test Safari зарабатывает 396 балла, что делает его отстающим больше, чем это может быть на практике. Как и Firefox, Safari теряет большое количество баллов, не сумев реализовать все возможные формы и элементы разметки. В нем нет опций, чтобы сделать поле ввода для сбора времени или цвета и никакой поддержки для стандартных элементов меню.

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

В мире кодеков, путь Apple отличается от Chrome и Firefox. Safari покажет MPEG-4 и H.264 видео, но отвергнет WebM и Ogg Theora. Хорошей новостью является то, что видео и аудио дорожками можно управлять с помощью JavaScript.

Есть несколько других мест, в которых Safari отстает от более полных наборов функций Chrome, Opera и Firefox. В то время как эти браузеры поддерживают коммуникации peer-to-peer с помощью WebRTC, Apple не предлагает никакой поддержки, как и Internet Explorer. Также Safari не поддерживает service workers для фоновой обработки, кастомные схемы, обработчики контента и настраиваемых провайдеров поиска.

Эти упущения не являются катастрофическими. Apple по-прежнему предлагает широкую поддержку стандарта и обеспечивает многие из самых интересных функций.

Браузер №5: Microsoft Internet Explorer
11-я версия Internet Explorer имеет низкий балл в тесте HTML5Test — лишь 348, но это не должно вызывать большого удивления. Движение стандартов всегда обусловлено надеждой стимулировать конкуренцию и вытеснить Microsoft с позиций контроля над сетью. Все работает именно так, как некоторые надеялись.

IE теряет баллы во всей таблице, он не может собрать их достаточно, чтобы лидировать хотя-бы в одной области. На самом деле, единственная область, где он бьет какой-либо из других крупных браузеров — веб-приложения, где его поддержка настраиваемых поставщиков поиска чуть лучше, чем у Safari. В остальное время, он замыкает шествие.

В то время как, конечно, справедливо — использовать более низкий балл за отсутствие реализации каждого бита стандарта HTML5, это не показывает, насколько хорошо IE будет исполнять код HTML5 в повседневной работе. Быстрый просмотр результатов показывает, что многие из потерянных функций являются новыми и далеко не самыми важными. IE потерял очки, например, за отсутствие поддержки CSS селекторов, типа «in-range», «out-of-range» и «read-only». Ему также не хватает поддержки ряда новых полей ввода для времени.

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

Есть несколько более крупных упущений. Microsoft избегает видео MPEG-4, OGG и WebM, а также аудио PCM, OGG и WebM. Это оставляет MP3-аудио, видео H.264 и Flash-видео в качестве единственных поддерживаемых стандартов. Тем не менее, IE позволяет использовать JavaScript для управления аудио-треками.

Стоит отметить, что Microsoft четко понимает значение соблюдения стандартов, и делает быстрые успехи. Несмотря на то, что версии Internet Explorer не меняются так часто, как у других браузеров, довольно недавно IE9 получал всего 113 баллов. И темпы будут ускоряться в новом веб-браузере Edge (Project Spartan), который будет поставляется с Windows 10.

Последняя версия Edge зарабатывает 390 в тесте HTML5Test. Это лучше, чем IE 11 и лишь немного меньше Safari. Самые большие улучшения по сравнению с IE — поддержка ориентации устройства, движения устройства, контроля геймпада, Web-аудио, DRM, медиа-расширения и отображение адаптивных изображений. Все это показывает, что игры, развлечения и мобильные устройства находятся в верхней части списка приоритетов Microsoft.

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

Результаты также обеспечивают хорошее представление о корпоративных приоритетах.  Не удивительно, что Chrome предлагает отличную поддержку полнофункциональных, похожих на приложения сайтов, которые поставляет Google. Это также упрощает предоставление больших возможностей аппаратной платформе от Google — Хромбукам. Компания немного зарабатывает на той части, которая называется «операционной системой», так что не удивительно, что она хочет, чтобы часть, известная как «браузер», была лучше.

Apple, со своей стороны, кажется, не столь заинтересована в поддержке соревновательного поведения в браузерах, может быть, потому что зарабатывает так много денег на App Store, что не хочет его подорвать.

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

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

В этом смысле, оценка HTML5Test говорит больше о будущем, чем о настоящем. В то время как стандарт HTML 5.0 уже установлен и комитет обратил свое внимание к следующему набору идей, создатели браузеров должны закончить внедрения стандарта. По мере того, как они это делают, все больше и больше веб-разработчиков увидят, что новые функции доступны и готовы к использованию. Только после этого пользователи начнут видеть преимущества.

Хорошей новостью является то, что производители браузеров принимают их быстро, и многие из функций охвачены достаточно широко, чтобы веб-разработчики начали их использовать. Комитет сделал свою работу. Теперь наша очередь.

www.npsod.ru

Поддержка браузеров HTML5

Вы можете научить старые браузеры корректно обрабатывать HTML5.

Поддержка браузеров HTML5

HTML5 поддерживается во всех современных браузерах.

Кроме того, все браузеры, старые и новые, автоматически обрабатывать неопознанные элементы как встроенные элементы.

Из - за этого, вы можете "teach" старые браузеры для обработки "unknown" HTML элементов.

Вы даже можете научить IE6 (Windows XP 2001) , (Windows XP 2001) , как обрабатывать неизвестные HTML элементы.

Определить HTML5 элементы, как элементы блока

HTML5 определяет восемь новых семантических HTML элементов. Все эти элементы уровня блока.

Для обеспечения правильного поведения в старых браузерах, вы можете установить свойство отображения CSS , чтобы блокировать:

header, section, footer, aside, nav, main, article, figure {    display: block; }

Добавление новых элементов в HTML

Вы можете также добавить любой новый элемент в HTML с помощью браузера трюка.

В этом примере добавляется новый элемент с именем <myHero> в HTML, и определяет стиль отображения для него:

пример

  Creating an HTML Element  document.createElement("myHero")    myHero {      display: block;      background-color: #ddd;      padding: 50px;      font-size: 30px;  }  

<h2>My First Heading</h2>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body></html>

Попробуй сам "

Оператор JavaScript document. createElement("myHero") document. createElement("myHero") добавляется, только для удовлетворения IE.

Проблема с Internet Explorer

Вы можете использовать решение, описанное выше, для всех новых элементов HTML5, но:

Internet Explorer 8 и выше, не позволяет моделирование неизвестных элементов.

К счастью, Сджоэрд Вишшер создал "HTML5 Enabling JavaScript" , « the shiv »:

<!--[if lt IE 9]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Код выше , является комментарием, но версия предыдущей в IE9 будет читать (and understand it) .

Полное Shiv решение

пример

  Styling HTML5     

<h2>My First Article</h2>

<article>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</article>

</body></html>

Попробуй сам "

Ссылка на shiv код должен быть помещен в <head> элемент, так как Internet Explorer должен знать обо всех новых элементов , прежде чем читать их.

HTML5 Скелет

пример

HTML5 Skeleton

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<style>body {font-family: Verdana, sans-serif; font-size:0.8em;}header,nav, section,article,footer{border:1px solid grey; margin:5px; padding:8px;}nav ul {margin:0; padding:0;}nav ul li {display:inline; margin:5px;}</style></head><body>

<header>  <h2>HTML5 SKeleton</h2></header>

<nav><ul>  <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>  <li><a href="html5_canvas.asp">HTML5 Graphics</a></li></ul></nav>

<section>

<h2>Famous Cities</h2>

<article><h3>London</h3><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p></article>

<article><h3>Paris</h3><p>Paris is the capital and most populous city of France.</p></article>

<article><h3>Tokyo</h3><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.</p></article>

</section>

<footer><p>&copy; 2014 w3ii. All rights reserved.</p></footer>

</body></html>

Попробуй сам "

www.w3im.com

Поддержка HTML5 в IE9: на что способен браузер?

страницы:   1   |   2    |  следующая

Черновик спецификаций к стандарту HTML5 был готов еще в 2008 году. Однако финальная версия стандарта должна быть согласована и проработана внутри индустрии. Стандарт должен быть непротиворечивым, стабильным и пройти апробацию (внедрение), а также закладывать потенциал для дальнейшего совершенствования технологии. Из-за всех этих требований окончательная спецификация до сих пор находится в стадии разработки.

Одна из задач HTML5 – обеспечить поддержку распространенной мультимедийной информации исключительно при помощи ресурсов самого браузера

Основные проблемы кроются в том факте, что изначально HTML создавался как платформенно независимый язык для разметки технической документации с использованием гиперссылок, при этом вся мультимедийная составляющая была привнесена туда много позднее. Задача HTML5 достаточно тривиальна – обеспечить поддержку распространенной мультимедийной информации исключительно при помощи ресурсов самого браузера. Также отличия HTML5 от новой версии включают более удобную разметку, новые семантические теги, коррекцию значений тегов, поддержку canvas и svg. Речь также идет о новых API для разработки веб-приложений, правда, с точки зрения спецификации, это отдельные стандарты (например, Web Storage), прорабатываемые в WebApps WG внутри W3C.

Сергей Молчанов, заместитель технического директора Mail.Ru: HTML5 в настоящий момент все еще находится в разработке, хотя и должен прийти в скором времени на смену устаревающему стандарту разметки веб-страниц HMTL4. Не все браузеры сейчас корректно поддерживают новый стандарт, и это его безусловный минус. Однако разработчикам веб-приложений очень важно находится на "гребне волны" и начинать вовремя использовать новые технологии в своих проектах. Как известно, даже компания Microsoft заинтересовалась данным стандартом, несмотря на то, что изначально не планировала реализовывать его в своих браузерах. Собственно, Internet Explorer 9 - первый браузер, который поддерживает некоторые элементы HTML5. Так, с помощью нового стандарта у веб-мастеров уже сейчас есть возможность работать с мультимедиа данными, не прибегая к плагинам сторонних производителей (Flash или Silverlight), использовать функции рисования векторной графики, создавать более удобные интерфейсные решения.

Наиболее ожидаемые элементы разметки, которые предполагается ввести в новой версии HTML, - это audio (звук), video (видео), а также множество новых семантических тегов, таких как тег nav (навигация).

Internet Explorer 9 в процессе своего развития постепенно набирал все большее количество баллов в тесте Acid3, "замерев" к сегодняшнему дню на отметке 95 баллов (из 100 возможных). При этом сами разработчики говорят о том, что "оставшиеся пять баллов включают две конкретные технологии (SVG-шрифты и SMIL анимации SVG)", поддержка которых будет добавлена позже. Похожая ситуация наблюдается и с HTML5 - можно было бы обеспечить формальное соблюдение черновика стандартов от W3C, однако это ничего бы не дало ни пользователям, ни создателям сайтов.

Поддержка вывода видеоизображения

Спешка в реализации HTML5 может привести к тому, что длительные усилия хотя бы частичного отказа от плагинов, уйдут впустую. Некоторые эксперты утверждают, что значительная часть видеотрафика не является пока HTML5-совместимой и для своего корректного воспроизведения требует установки дополнительных кодеков или иных дополнений, при этом в новом стандарте не перечислены кодеки, которые должен поддерживать браузер. Тот факт, что IE9 Platform Preview 3 и Google Chrome 6.0 способны воспроизводить HTML5 видео на портале YouTube не является репрезентативным показателем, поскольку отсутствие единых стандартов наиболее болезненно ударит именно по небольшим сайтам. Маловероятно, что ситуация, в которой преференции получают только крупные корпорации, является приемлемой для производителей браузеров.

Основная претензия к Adobe Flash (как стандарту де-факто для презентации видео в сегодняшнем интернете) состоят в том, что код Flash Player, который проигрывает flash-контент, закрыт, и разработчикам приходится прикладывать существенные усилия, чтобы обезопасить компьютерную систему от злоумышленников, которые используют уязвимости в Flash Player для атак на систему

Internet Explorer 9 поддерживает отображение интерактивного контента средствами самого браузера

К сожалению, некоторые компании, например Apple, выводят вопросы поддержки Adobe Flash на тот уровень, когда обсуждение технических вопросов тесно переплетается с маркетинговыми моментами, связанными с продвижением продукции компании. В качестве иллюстрации достаточно вспомнить, какие баталии развернулись вокруг выбора кодека, необходимого для воспроизведения видео в формате HTML5 - H.264 и Ogg Theora (а некоторые браузеры начали использовать такие варианты как gstreamer и Phonon).

страницы:   1   |   2    |  следующая

internet.cnews.ru

Определение поддержки HTML5 и CSS3 в браузере при помощи Modernizr

Определение поддержки HTML5 и CSS3 в браузере при помощи Modernizr

При использовании HTML5/CSS3 на вашем веб-сайте возникает проблема совместимости со старыми браузерами и Modernizr - это хороший способ решения этой проблемы, для пользователей со старыми/не поддерживающими стандарты браузерами.

Modernizr - это JavaScript-библиотека, которая использует методы обнаружения, чтобы определить поддерживает ли текущий браузер те или иные CSS3 и HTML5 функций, например, таких как rgba(), border-radius, CSS transition и многое другое.

Это позволяет вам использовать pseudo IF/ELSE условия в вашем CSS и, при желании, можно писать условные операторы в JavaScript при помощи созданного "Modernizr JavaScript object".

Кроме того, Modernizr добавляет поддержку стилей HTML5-элементов. Это позволяет использовать более семантические, перспективные элементы, таких как <section>, <header> и <dialog>, не беспокоясь о том, что они не заработают в Internet Explorer.

Как это работает

Для установки Modernizr, скачайте скрипт с этой страницы. Затем, между тегами head вашего сайта, добавьте ссылку на файл. Например:

<script src="js/modernizr-1.0.min.js"> </ script>

Затем добавьте в ваш html-тег класс "no-js":

<html>

Зачем добавлять этот тег? Потому что это будет состояние страницы по умолчанию. Если JavaScript (JS) не включен, то Modernizr не будет работать вообще (и, возможно, другие функции Вашего сайта также не будут работать), и этот класс нам нужен для этой проверки.

Если же JavaScript включен, то как только страница загрузится в браузере, этот класс будет динамически заменен, и может выглядеть примерно так:

<html>

Что это значит? Давайте посмотрим. В этом примере, я открыл страницу в Firefox 3.5. Этот браузер (к сожалению) не поддерживает множественные фоновые изображения, CSS градиенты или CSS трансформацию, поэтому Modernizr добавляет классы “no-multipebgs“, “no-cssgradients” и “no-csstransforms“. С другой стороны, он поддерживает canvas и border-radius, соответственно добавляются классы "canvas" и "borderradius". И т.д.

Как это использовать.

Предположим нам нужно задать несколько фоновых изображений для фона, css будет выглядеть так:

#nice { background: url(background-one.png) top left repeat-x, url(background-two.png) bottom left repeat-x;}

Но старые браузеры проигнорируют эти стили, поэтому, используя Moderniz, мы определим следующие правила:

#nice { background: url(background-one.png) top left repeat-x;}.multiplebgs #nice { background: url(background-one.png) top left repeat-x, url(background-two.png) bottom left repeat-x;}

Первое правило будет использоваться старыми браузерами, второе же правило будет переопределять первое только в современных браузерах с поддержкой множественных фонов.

Сайт: http://www.modernizr.com/

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии:

Добавить комментарий

www.webmasters.by

Поддержка HTML5 браузерами Google Chrome 10, Firefox 4, Internet Explorer 9

С каждым днём HTML5 всё больше и больше получает распространение и становится ближе к каждому пользователю, плавающему по просторам Интернета с помощью любимого браузера. Может это Google Chrome, Firefox или Intetnet Explorer?

На что способны новейшие версии данных браузеров в поддержке HTML5 возможностей?

На портале ConceivablyTech.com решили ответить на этот непростой вопрос.

Для тестирования были использованы следующие сайты и материалы:

  • HTML5Test.com
  • Browserscope
  • Caniuse Rec. HTML5
  • Caniuse Rec./Working Draft HTML5

Как видно из результатов - если Google Chrome 10 и Firefox 4 добились больших успехов в поддержке стандарта HTML5, то вот у Intetnet Explorer 9 реально с этим делом всё обстоит намного хуже, в трёх из четырёх тестах поддержка возможностей находится на довольно посредственном уровне.

Как же обтоит дело со скоростью обработки возможностей HTML5?

В этом плане Internet Explorer 9 является явным лидером, обладая первым местом почти во всех тестах (за счёт полной реализации аппаратного ускорения). Браузер Google Chrome 10 был протестирован в двух режимах (без включённых опций аппаратного ускорения композитинга и Canvas 2D и с включёнными опциями), аппаратное ускорение позволяло улучшить результаты в некоторых тестах в несколько раз. Firefox 4 находится на втором месте по результатам тестирования, в нескольких тестах занимает первое место, но разница между результатами Firefox 4 и IE9 в них несущественная. Во всех бенчмарках тестировалась работа с элементом HTML5 Canvas.

Каждый производитель (разработчик) браузера стремится внести новые возможности, при этом как правило конечные пользователи получают в свои руки уже готовый результат, с HTML5 всё немного по-другому, ещё с начала 2008 года стали доступны черновые версии спецификации, работа над HTML5 началась 2007 года и продлиться может до 2014, ожидается, что отдельные части спецификации будут реализованы в браузерах и станут доступны до того, как HTML5 получит официальный статус рекомендации. Ну а разработчикам веб-приложений стоит в первую очередь ориентироваться на те возможности HTML5, которые уже сейчас присутствуют во всех браузерах.

freebrowsers.ru

HTML5 Новые теги, поддержка браузерами p.2

<mark>текст</mark>

Тег <mark> помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.

Пример

 

 

 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>mark</title> <style> mark { background: #ffec82; padding: 0 3px; border: 1px dashed #333; } </style> </head> <body> <header> <h2>Следы невиданных зверей</h2> </header> <article> История о том, как возле столовой появились загадочные розовые следы с <mark>шестью пальцами</mark>, и почему это случилось. </article> </body> </html>

 

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <mark>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору MARK.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

 

<menu> ... </menu>

Тег <menu> предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>.

В HTML4 тег <menu> вышел из употребления, вместо него рекомендуется использовать тег <ul>. В HTML5 тег <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для тега <command> и создания меню.

Атрибуты

label - Устанавливает видимую метку для меню.type - Задает тип меню.

Валидация

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 применение тега <menu> корректно.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег MENU</title> </head> <body> <p><strong>В этом выпуске:</strong></p> <menu> <li>Русская кухня. Уха бурлацкая</li> <li>Украинская кухня. Вареники</li> <li>Молдавская кухня. Паприкаш</li> <li>Кавказская кухня. Суп-харчо</li> <li>Прибалтийская кухня. Вертиняй</li> </menu> </body> </html>

Пример 2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тег MENU</title> </head> <body> <menu type="toolbar"> <li> <menu label="Файл"> <button type="button">Новый...</button> <button type="button">Открыть...</button> <button type="button">Сохранить</button> </menu> </li> <li> <menu label="Правка"> <button type="button">Копировать</button> <button type="button">Вырезать</button> <button type="button">Вставить</button> </menu> </li> </menu> </body> </html>

Браузеры

Поддерживают полностью.

 

<meter value="значение">текст</meter>

Используется для вывода значения в некотором известном диапазоне. Используется преимущественно для отображения числовых значений, например, количества результатов поиска, объема жидкости, давления и др.

Атрибуты

value - Устанавливает значение. Обязательный атрибут.min - Задает минимально возможное значение.max - Задает максимально возможное значение.low - Определяет предел, при достижении которого значение считается низким.high - Определяет предел, при достижении которого значение считается высоким.optimum - Определяет наилучшее или оптимальное значение.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>meter</title> </head> <body> <p>Температура воды</p> <meter value="0" max="100" low="10" high="60">Низкая</meter> <meter value="30" max="100" low="10" high="60">Нормальная</meter> <meter value="80" max="100" low="10" high="60">Горячая</meter> <meter value="100" max="100">Кипяток</meter> </body> </html>

Браузеры

Браузеры, которые поддерживают тег <meter>, отображают значение в виде рисунка, на котором цветом помечается текущее значение в указанном диапазоне. Остальные браузеры выводят текст, написанный внутри тега <meter>.

 

Internet Explorer -

Chrome 10.0-13.0

Opera 11.0

Safari -

Firefox -

 

<nav>ссылки</nav>

Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nav</title> </head> <body> <header> <h2>Чебурашка и крокодил Гена</h2> </header> <nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> | <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav> <article> <h3>Добро пожаловать!</h3> </article> </body> </html>

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

 

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

<output> </output>

Определяет область в которую выводится информация, преимущественно с помощью скриптов.

Атрибуты

for - Определяет идентификатор одного и более элементов для связывания с тегом <output>.form - Задает имя формы, которой принадлежит область для вывода.name - Задает уникальное имя элемента.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>output</title> </head> <body> <form> <p>Введите длину в сантиметрах: <input type="number" name="cm" autofocus="autofocus" /></p> <p>Длина в дюймах: <output name="result" onforminput="this.value=(this.form.cm.value/2.54).toFixed(2)">0</output></p> </form> </body> </html>

Браузеры

 

Internet Explorer -

Chrome -

Opera 9.6-11.0

Safari -

Firefox -

 

<progress value="<число>" max="<число>"> Текст </progress>

Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.

Атрибуты

value - Текущее значение прогресса.max - Максимальное значение прогресса.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>progress</title> </head> <body> <p>Пожалуйста, подождите, фотографии загружаются.</p> <progress max="100" value="25"> Загружено на <span>25</span>% </progress> </body> </html>

 

Браузеры

Internet Explorer -

Chrome 10.0-13.0

Opera 11.0

Safari -

Firefox 6.0-7.0

<ruby> текст <rp>текст</rp><rt>аннотация</rt><rp>текст</rp> </ruby>

Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>. В остальных браузерах текст, заключенный в контейнер <rp>, не отображается. Тег <rp> должен идти до или после тега <rt>.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>rp</title> </head> <body> <p> <ruby> 字 <rp>(</rp><rt>zì</rt><rp>)</rp> </ruby> </p> </body> </html>

 

Браузеры

Internet Explorer 6.0-9.0

Chrome 10.0-13.0

Opera -

Safari 5.0

Firefox -

 

<ruby> текст <rt>аннотация</rt> </ruby>

Тег <rt> добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>. Сама аннотация выводится уменьшенным шрифтом.

Такая форма записи преимущественно используется для азиатских языков вроде китайского или японского, но также может применяться для других языков, если требуется написать один текст над другим.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>rt</title> <style> .date { font-size: 1.5em; } .date ruby { background: #0078c9; color: #fff; } .date rt { background: #a0dae8; color: #000; padding: 2px; } </style> </head> <body> <p> <ruby> 23<rt>ноябрь</rt></ruby> </p> </body> </html>

 

Браузеры

Internet Explorer 6.0-9.0

Chrome 10.0-13.0

Opera -

Safari 5.0

Firefox -

 

<ruby> текст <rt>аннотация</rt> </ruby>

Тег <ruby> предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.

Сам тег <ruby> выступает контейнером для тега <rt>, он и формирует аннотацию к тексту, после которого идет; а также <rp>, этот тег предназначен для браузеров, которые не поддерживают <ruby>.

Название тега происходит от слова «рубин», которым в типографии обозначается небольшой шрифт.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ruby</title> <style> p:lang(zh-CN) { font-size: 2em; } </style> </head> <body> <p lang="zh-CN"> <ruby> 汉<rt>hàn</rt> 字<rt>zì</rt> </ruby> </p> </body> </html>

 

Браузеры

Internet Explorer 6.0-9.0

Chrome 10.0-13.0

Opera -

Safari 5.0

Firefox -

Браузеры, которые не поддерживают этот тег, отобразят текст рядом по горизонтали и без изменения его размеров.

<section> </section>

Задает раздел документа, который может включать в себя заголовки, шапку, подвал и текст. Допускается вкладывать один тег <section> внутрь другого.

Атрибуты

cite - Адрес раздела, если он берется с другого сайта

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>section</title> </head> <body> <section> <h2>Съёмки фильма Полипропилен</h2> <p>История о том, как снимали фильм, где герои отдыхали на пляже, потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, и что из этого получилось.</p> </section> <section> <h2>Хороший язык</h2> <p>История о том, как проходила студия изучения языка эсперанто, в то время, как над ней, на веранде велась студия приколистов, где травились анекдоты, и что из этого получилось.</p> </section> </body> </html>

 

Браузеры

 

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

Internet Explorer до версии 8.0 включительно игнорирует тег <section>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору SECTION.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

 

 

<audio> <source src="URL"> </audio> <video> <source src="URL"> </video>

Атрибуты

media - Определяет устройство, для которого будет воспроизводиться файл.src - Адрес файла.type - MIME-тип медийного источника.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>source</title> </head> <body> <video controls="controls"> <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>. </video> </body> </html>

 

 

Браузеры

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 11.0

Safari 3.1-5.0

Firefox 4.0-6.0

 

<details> <summary>Текст</summary> </details>

Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации. Тег <summary> должен идти первым внутри <details>.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>summary</title> </head> <body> <details> <summary>Информация об авторе</summary> <p>Бендер Родригез</p> </details> </body> </html>

 

Браузеры

Internet Explorer -

Chrome 12.0-13.0

Opera -

Safari -

Firefox -

 

<time>дата и время</time> <time datetime="<дата и время>">текст</time>

Помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime.

Атрибуты

datetime - Задает дату, время или оба значения для текста.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>time</title> <style> time { background: #f0f0f0; } </style> </head> <body> <article> <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p> <p><time>1960-08-19</time> первый полет собак в космос.</p> <p><time>1961-04-12</time> первый полет человека в космос.</p> <p><time>1963-06-16</time> первый полет женщины-космонавта.</p> <p><time>1969-07-21</time> высадка человека на Луну.</p> </article> </body> </html>

Браузеры

Браузеры, которые не поддерживают тег <time> отображает его содержимое. Браузеры с поддержкой тега могут устанавливать для элемента стилевое оформление.

 

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 9.2-11.0

Safari 5.0

Firefox 4.0-6.0

<video> <source src="URL">  </video>

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведен в таблице.

Аудио кодеки/Браузеры Internet Explorer Chrome Opera Safari Firefox
ogg/vorbis - + + - +
wav /p - - + + +
mp3 + + - + -
AAC + + - + -

 

Видео кодеки/Браузеры Internet Explorer Chrome Opera Safari Firefox
ogg/theora - + + - +
H.264 + + - + -
WebM - + + - +

 

Атрибуты

autoplay - Видео начинает воспроизводиться автоматически после загрузки страницы.controls - Добавляет панель управления к видеоролику.height - Задает высоту области для воспроизведения видеоролика.loop - Повторяет воспроизведение видео с начала после его завершения.poster - Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится.preload - Используется для загрузки видео вместе с загрузкой веб-страницы.src - Указывает путь к воспроизводимому видеоролику.width - Задает ширину области для воспроизведения видеоролика.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>video</title> </head> <body> <video controls="controls" poster="video/duel.jpg"> <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>. </video> </body> </html>

 

 

Браузеры

 Firefox поддерживает кодек WebM начиная с версии 4.0.

Internet Explorer 9.0

Chrome 10.0-13.0

Opera 10.50-11.0

Safari 3.1-5.0

Firefox 4.0-6.0

 

Текст<wbr>текст

Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тег WBR</title> <style> .word { font-size: 2em; } wbr { display: inline-block; } </style> </head> <body> <p>Самое длинное слово из химии</p> <p>метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p> </body> </html>

 

Браузеры

Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив тег <wbr> на символ мягкого переноса &shy;.

Internet Explorer 8 и Opera не делают переносы длинной строки, пока в стилях для WBR не указано свойство display со значением inline-block, как показано в примере.

Internet Explorer 6.0-9.0 (8.0 возможны баги)

Chrome 10.0-13.0

Opera 9.6-11.0 (возможны баги)

Safari 3.1-5.0

Firefox 3.0-6.0

 

Информация взята с htmlbook.ru

 

vaccina.net

Пять вещей, которые надо знать об HTML5

Оригинал: http://diveintohtml5.info/introduction.html

Перевод: Влад Мержевич

1. Это не одна большая вещь

 Вы можете спросить: «Как я могу использовать HTML5, если старые браузеры его не поддерживают?». На самом деле этот вопрос ошибочен. HTML5 не одна большая вещь, это набор разных возможностей. Вы не можете написать «поддерживается HTML5», потому что это противоречит здравому смыслу, но можете определить поддержку некоторых технологий HTML 5, таких как рисование, видео и геолокация.

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег <video>, он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега <video>.

2. Вам не надо откидывать имеющееся

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

Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type="email", поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.

3. Легко начать

«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:

<!DOCTYPE html>

Смена доктайпа не разрушает существующую верстку, потому что все теги, определенные в HTML4 также поддерживаются и в HTML5. Ко всему прочему, вы можете использовать, и корректно, новые семантические элементы вроде <article>, <section>, <header> и <footer>.

4. Это уже работает

 Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом <canvas>, видео, геолокацией, локальным хранилищем и др. Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.

Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.

5. Он уже здесь

 Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:

Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.

HTML5 уже здесь. Давайте погрузимся в него.

htmlbook.ru


 

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..