Начальная

Windows Commander

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

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

File managers and best utilites

Сравнение Браузеров css3 & html5. Html5 браузеры


HTML5 видео-проигрыватели | Chrome OS по-русски

Одно из самых интересных нововведений в HTML5 — возможность обрабатывать и воспроизводить аудио и видео-записи. Достигается это за счет новых тегов <audio> и <video>, которые позволяют реализовать вставку медиа-контента с минимальным количеством кода. До этого основным инструментом для воспроизведения был Flash, который, скажем прямо, никогда не был идеальным, особенно на устройствах фирмы Apple. Введение новых тегов явно нацелено на устранение огрехов флеша.

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

LeanBack — использует JavaScript и HTML5, чтобы сделать интерфейс видео-плеера удобным для пользователя и добавить возможность управления через сочетания клавиш. Совместим со всеми современными браузерами, а именно Chrome 7+, Firefox 3.6+, Opera 10.6+, Safari 5.0.2+ и Explorer 9. Работает на большинстве мобильных платформ: Android, iOS, BlackBerry, HP webOS, Mozilla Mobile и Windows Phones. Поддерживает следующие аудио и видео кодеки: H.264, Ogg, WebM и Mp3. За счет возможности редактирования стилей плеер легок в настройке и интеграции в дизайн.

Проигрыватель LeanBack

Проигрыватель LeanBack

MediaElement — это аудио и видео проигрыватель, построенный на чистом HTML и CSS. Для старых версий браузеров, не поддерживающих HTML5, проигрыватель будет работать на Flash или, при необходимости, на Java Silverlight. В комплекте идут плагины для популярных движков: WordPress, Drupal, Joomla и другие. Поддерживает все современные браузеры и кодеки. Мануалы по настройке внешнего вида, перечень опций и другие функции плеера можно найти на официальной странице.

Проигрыватель mediaelement

Проигрыватель mediaelement

VideoJS — видео проигрыватель на HTML5 со встроенным JavaScript для добавления дополнительных функций. Среди этих функций особенно интересные, на наш взгляд, это полноэкранный режим и возможность включить субтитры при проигрывании ролика. Как и у MediaElement, если поддержки HTML5 нет, проигрыватель будет работать на Flash. Корректно отображается во всех браузерах и мобильных устройствах (iOS, Android, Windows Phone, Blackberry и другие).

Проигрыватель VideoJS

Проигрыватель VideoJS

SublimeVideo — самый функциональный проигрыватель из представленных в обзоре. Поддержка всех видов браузеров и устройств. Единый интерфейс плеера как и для HTML5, так и для Flash. Полноэкранный режим и новости, возможность переключения между SD и HD качеством, поддержка списков воспроизведения, расширенная статистика и режим просмотра в реальном времени. Интеграция с популярными движками, собственный API и еще множество других полезных и важных функции, полный список которых вы найдете на официальном сайте.

Проигрыватель SublimeVideo

Проигрыватель SublimeVideo

Dark Onyx — полноценная платформа для работы с видео-роликами. По функционалу близка, а в некоторых моментах даже обгоняет, SublimeVideo. Из функционала выделим возможности переключения качества ролика (как это сделано у YouTube), интеграциию с движками и социальными сетями, поддержку плейлистов, гибкую настройку внешнего вида, добавление водяного знака, показ рекламы (pre-roll, post-roll или pop-up) при просмотре ролика и удобную панель управления. Полный список функций расположен на официальном сайте.

Проигрыватель Dark Onyx

Проигрыватель Dark Onyx

os-chrome.ru

HTML 5 (часть 2). Новые теги и поддержка браузерами

Новые теги в HTML5

Перед изучением новых тегов необходимо ознакомится с инструментами поддержки тегов браузерами. Для проверки тега, можно использовать htmlbook с иллюстрациями:

поддержка тега center в htmlПоддержка тега center в спецификациях HTML

Видно, что тег <center> в спецификации 5.0 не поддерживается (розовый цвет), а в спецификации 4.01 поддерживался частично (желтый цвет). Кстати, для выравнивания блоков и картинок теперь нужно применять СSS.

Также, рекомендуем ресурс caniuse.com

отображение поддержки на сайте caniuseРекомендация не использовать тег center в коде html5

Как видно, данный тег не рекомендован к применению. Если тег можно применять, то caniuse покажет развернутую карту поддержки тега браузерами. Так для тега audio, мы увидим:

Поддержка тега audio браузерамиПоддержка тега audio браузерами

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

Рассмотрим новые введенные элементы.

Тег audio

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

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

<audio controls autoplay="autoplay" > <source src="audio/music.mp3" type="audio/mpeg"> <source src="audio/music.mp3" type="audio/mpeg"> Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>. </audio>

<audio controls autoplay="autoplay" >

  <source src="audio/music.mp3" type="audio/mpeg">

  <source src="audio/music.mp3" type="audio/mpeg">

    Тег audio не поддерживается вашим браузером.

  <a href="audio/music.mp3">Скачайте музыку</a>.

</audio>

Атрибуты описанные в примере:

  • controls – выводят проигрыватель. Если их не указать, то получим играющую музыку без возможности выключения
  • autoplay – автоматическое проигрывание после загрузки, не стоит использовать данный атрибут без крайней необходимости
  • loop – зациклить проигрывание

Обратите внимание, что внешний вид проигрывателя в разных браузерах разный.

Тег video

Позволяет внедрить на страницу видеопроигрыватель без использования сторонних сервисов. Также, как и тег <audio> применяется с тегом source, если необходимо указать несколько источников видео.

<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 не поддерживается вашим браузером. Скачайте видео. </video>

<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 не поддерживается вашим браузером. Скачайте видео.

</video>

Атрибуты аналогичны тегу <audio>.

Данный тег используется для создания блоков с видео в виде фона.

Тег canvas

Используется для рисования в HTML5. Применение canvas позволило отказаться от технологии Flash. Рисование производится с помощью JavaScript. Использования тега <canvas> вы изучите на уроках JS.

<canvas> <p>Ваш браузер не поддерживает рисование.</p> </canvas>

<canvas>

  <p>Ваш браузер не поддерживает рисование.</p>

</canvas>

Тег datalist

Используется для создания «умных» выпадающих списков. Дублирует функционал выпадающего списка, но добавляет к нему возможность поиска пунктов по буквам входящим в слова и введения своего варианта. Идеален для применения к спискам, пункты которых известны заранее.

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

Пример:

<datalist> <option value="Чебурашка"></option> <option value="Крокодил Гена"></option> <option value="Шапокляк"></option> </datalist>

<datalist>

  <option value="Чебурашка"></option>

  <option value="Крокодил Гена"></option>

  <option value="Шапокляк"></option>

</datalist>

Тег details

Позволяет создавать раскрывающийся при клике блок. Используется совместно с тегом <summary>, который задает раскрывающийся элемент.

<details> <summary>Информация об авторе</summary> <p>Бендер Родригез</p> </details>

<details>

   <summary>Информация об авторе</summary>

   <p>Бендер Родригез</p>

</details>

Поддержка данного тега – частичная, как следствие, на данном этапе лучше применять решения на основе JS или jQuery.

Тег meter

Используется для визуализации диапазонов величин. Пример применения:

<meter value="5" max="100" low="10" high="60">Низкая</meter> <meter value="9" max="100" low="10" high="60">Нормальная</meter> <meter value="80" max="100" low="10" high="20">Горячая</meter <meter value="100" max="100" >Кипяток</meter>

<meter value="5" max="100" low="10" high="60">Низкая</meter>

<meter value="9" max="100" low="10" high="60">Нормальная</meter>

<meter value="80" max="100" low="10" high="20">Горячая</meter

<meter value="100" max="100" >Кипяток</meter>

Позволяет задавать минимально, максимальное значение диапазона, значения которые считаются низкими и высокими, текущее значение (value). Возможно управление с помощь JS. Хороший инструмент для простой визуализации.

Тег nav

Тег используется для обозначения главной навигации по сайту. Содержит внутри себя список (хотя могут быть и другие элементы). Пример:

<nav> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </nav>

<nav>

  <ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

  </ul>

</nav>

Использовать тег <nav> нужно обязательно.

Тег output

Создан в противовес тегу input, используется для обозначения области на html странице, куда будет выводится информация.

Следует отметить, что с помощью JS можно вывести информацию в любой элемент. Однако введение тега <output> это следствие новой функции HTML5 – функции представления информации.

<output name="result">0</output>

<output name="result">0</output>

Тег progress

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

<progress max="100" value="50"> Загружено на <span>25</span>% </progress>

<progress max="100" value="50">

  Загружено на <span>25</span>%

</progress>

Тег wbr

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

Пример использования:

<p> метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>аминоакридин </p>

<p> метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>аминоакридин

</p>

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

w3.org.ua

Сравнение Браузеров css3 & html5 / Хабр

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

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

Просмотрел ряд статей на счет hml5:Проверка технологий HTML5Как протестировать веб-браузер на совместимость с HTML5?Тест и сравнение пяти веб-браузеров в Windows 7 и OS X Mountain LionТест и сравнение веб-браузеров: Chrome 20, Opera 12, Firefox 13Тест и сравнение веб-браузеров | Пять лучших

Сравнение не всегда может быть адекватным в связи и использованием различных сервисов и тестов. Для теста использовались следующие сервисы:

Css:
Maze Solvercss3test.comCSS3 Selectors TestAcid3
Html5
html5testTest2peacekeeper

Итак погнали.

FF 18.0.2
Maze Solver — CSS3 Layout Performance Test
Css3test.com
CSS3 Selectors Test
From the 41 selectors 41 have passed, 0 are buggy and 0 are unsupported (Passed 574 out of 574 tests)
Acid3
html5test
Test2
Peacekeeper

Итоговая таблица по результатам FF

Css3 Html5
ie.microsoft.com 136 seconds
css3test.com 56% (500/ 937)
tools.css3.info 41/41 574/574
acid3 100/100
html5test 393/500 (+10)
wapsbttest2 129/160
peacekeeper1 798 (5/7)
peacekeeper2 1514 (5/7)
Opera 12.14
Чтобы не засорять пост массой картинок, выложу только итоговую таблицу. Css3 Html5
ie.microsoft.com 16 seconds
css3test.com 58% (451/937)
tools.css3.info 41/41 574/574
acid3 100/100
html5test 404/500 (+9)
wapsbttest2 146/160
peacekeeper1 2441 (2/7)
peacekeeper2 2522 (4/7)
Chrome 24.0.1312.57
Css3 Html5
ie.microsoft.com 6.9 seconds
css3test.com 63% (562/937)
tools.css3.info 41/41 574/574
acid3 100/100
html5test 448/500 (+13)
wapsbttest2 148/160
peacekeeper1 1734 (6/7)
peacekeeper2 3127 (6/7)
IE 9.0.8112.16421 64-bit
Css3 Html5
ie.microsoft.com 22 seconds
css3test.com 33% (274/937)
tools.css3.info 41/41 574/574
acid3 100/100
html5test 138/500 (+5)
wapsbttest2 91/160
peacekeeper1 998 (3/7)
peacekeeper2 1001 (3/7)
IE 10.0.9200.16438 64-bit
Css3 Html5
ie.microsoft.com 24 seconds
css3test.com 54% (444/937)
tools.css3.info 41/41 574/574
acid3 100/100
html5test 320/500 (+6)
wapsbttest2 127/160
peacekeeper1 1882 (3/7)
peacekeeper2 1882 (3/7)
Safary Версия 6.0.2 (8536.26.17), max osx 10.8
Спасибо btd за результаты Safari Css3 Html5
ie.microsoft.com 6.9 seconds
css3test.com 55% (500/937)
tools.css3.info 41/41 574/574
acid3 100/100
html5test 378/500 (+8)
wapsbttest2 139/160
peacekeeper1 3117 (3/6)
peacekeeper2 3117 (3/6)
Выводы и итого по всем

Удивил тест на peacekeepers, ребята постарались. Интересный факт, что 1-й запуск тест сильно отличается от 2-ого, может быть кэш так влияет, но вопрос очень спорный. Так же очень странно было видеть алгоритм поиска выхода из лабиринта у FF, Opera, Chrome один и тот же алгоритм выхода был, но IE не ищет легких путей и пошел не так как все (хотя запускал тест раза 3-4 один и тот же лабиринт). Итоговая таблица лучший пожалуй хром, а дальше черт ногу сломит, в общем, смотрите сами:

Css3 Html5
Browser FF Opera Chrome IE IE10 Safari
ie.microsoft.com 136 seconds 16 seconds 6.9 seconds 22 seconds 24 seconds 6.9 seconds
css3test.com 56% (500/937) 58% (451/937) 63% (562/937) 33% (274/937) 54% (444/937) 55% (500/937)
tools.css3.info 41/41 574/574 41/41 574/574 41/41 574/574 41/41 574/574 41/41 574/574 41/41 574/574
acid3 100/100 100/100 100/100 100/100 100/100 100/100
html5test 393/500 (+10) 404/500 (+9) 448/500 (+13) 138/500 (+5) 320/500 (+6) 378/500 (+8)
wapsbttest2 129/160 146/160 148/160 91/160 127/160 139/160
peacekeeper1 798 (3/7) 2441 (2/7) 1734 (6/7) 998 (3/7) 1820 (3/7) 3117 (3/7)
peacekeeper 1514 (5/7) 2522 (4/7) 3127 (6/7) 1001 (3/7) 1882 (3/7) 3117 (3/7)

P.S. Никто не безупречен, орфография и ошибки прошу милости в личку. P.P.S. Если у кого есть желание протестите Safari.

P.P.P.S. Добавил IE10 удивил отчасти, но лишь отчасти… Спасибо btd за результаты Safari

P.P.P.P.S прислал друг результаты IE10 под win8

Css3 Html5
ie.microsoft.com 16 seconds
css3test.com 54% (444/937)
tools.css3.info 41/41 574/574
acid3 100/100
html5test 320/500 (+6)
wapsbttest2 127/160
peacekeeper1 3476 (2/7))

habr.com

HTML5 простыми словами

Это — не статья для супер-гуру-вебмастеров. И даже не для начинающих веб-разработчиков. Эта статья задумывалась как памятка об HTML5 для журналистов и аналитиков.

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

Поможет нам в этом HTML5 DOCTOR, сообщество активных последователей HTML5, проповедующих его использование, и в частности, Брюс Лоусон:

«К нам часто обращаются журналисты и аналитики с вопросами о HTML5. И это замечательно, потому что мы тратим куда больше времени еженедельно, пытаясь читать странички тех журналистов и аналитиков, которые к нам не обратились.

Вот перечень наиболее часто задаваемых нам вопросов, на которые мы дали ответы неспециализированным языком. Журналисты, пользуйтесь на здоровье! цитирование приветствуется, но не является обязательным )))»

Что такое HTML5?

Зто зависит от того, о чем идет речь. Выражение "HTML5» используют в трех разных значениях:

Спецификация HTML5

Наиболее точным определением понятия "HTML5» будет следующее: это спецификация, разработанная совместно двумя группами, W3C и WHATWG. Существуют разные версии спецификации HTML5.

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

    Ключевые понятия:
  • Его разработали для обеспечения взаимодействия страниц в разных браузерах. Сегодня мы используем различные браузеры (к примеру, на работе у нас может стоят IE, в телефоне — Safari или Opera, а дома -Firefox) и было бы неразумно и досадно, если бы сайт не работал бы в чем-то из них.
  • Все производители браузеров — – Opera, Mozilla (Firefox), Apple (Safari), Microsoft (Internet Explorer), Google (Chrome) — все они сотрудничают между собой, равно как и с еще кучей органицазий и частных лиц: с Netflix, Adobe, IBM, HP, BBC и многим другими.
  • Он разработан, чтобы расширить возможности современного веба, не нарушая при этом работы уже существующих веб-страниц.
  • Он может соревноваться с плагинами типа Microsoft Silverlight и Adobe Flash, которые сами по себе были созданы, чтобы закрыть дыры в окаменелом стандарте HTML4.

HTML5 и его друзья

в дополнение к самому ядру HTML5, WHATWG разработали другие спецификации, такие как Web Workers, Web Sockets, Web Database. Все они дополняют его новыми свойствами и функциями, полезными для приложений, игр и тому подобного.

Многое из их содержимого изначально было частью самого ядра, но по некоторым производственным и организационным причинам было выведено из него. Вся группа вместе называется Web Applications 1.0.

3. Новые «супер-веб-технологии»

Часто большинство людей, налеких от веб-разработки (а часто и не очень сведущие разработчики), говоря "HTML5», подразумевают целый ряд технологий: ядро HTML5, его дополнения — и еще уйму вообще никак не связанных с ними технологий, таких как геолокация (способность вашего браузера «распознавать» ваше местонахождение), ориенацию устройства, события касания, анимацию CSS3 (которая может заменять несложную Flash-анимацию), SVG (способ отображения графики четко и гладко на экране любого размера), и недавно вошедший сюда WebGL, позволяющий использовать популярные библиотеки 3D-графики в веб, внося трехмерность в веб-гарфику и браузерные игры.

Многое из этого разработано W3C, а WebGL, к примеру, создан Khronos Group.

Также важно не забывать, что так называемые "демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.

Зачем придумали HTML5?

HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.

Как много браузеров поддерживают HTML5?

Смотря как посмотреть. Если исходить из того, что HTML5 произошел от HTML4, то все барузеры поддерживают какие-то свойства HTML5.

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

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

Кто является движущей силой HTML5?

Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.

Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.

Кто пользуется HTML5?

Множество людей и компаний: Boston Globe Newspaper; Nationwide Building Society, Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.

Когда будет завершена работа над HTML5?

Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.

Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.

Правда ли, что HTML5 несовместим с Internet Explorer?

Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.

Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.

Правда ли, что HTML5 предназначен для мобильных устройств?

Совершенно нет. В основе HTML5 лежат определенные принципы разработки, один из которых гласит о повсеместном его применении:

«Элементы должны разрабатываться для повсеместного использования... Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»

С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).

Также преимуществом является возможность использовать элемент canvas для отображения анимации устройствами, которые по той или иной причине не могут использовать Flash.

Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.

Вытеснит ли HTML5 Adobe Flash?

Нет — по крайней мере, я на это надеюсь. Многие годы Flash оставался единственной возможностью внедрить видео на страницу. Теперь, с появлением HTML5, появилось соперничество, в котором будут развиваться обе технологии, что просто замечательно для разработчиков.

Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.

Flash в любом случае остается полезным кросс-браузерным инструментом. к тому же, следует понимать, что Flash — это больше, чем просто видео. Некоторые простые его функции, используемые в играх, перехвачены HTML5 canvas, а часть примитивных анимаций, для которых он ранее использовался, перекочевала в CSS3. Однако, из соображений удобства создателей тонкой анимации, используемой в играх и мультфильмах, конечно, лучше пользоваться Flash , в котором куда более удобный интерфейс, упрощающий разработчикам многие рабочие моменты. Со временем, когда будут разработаны удобные оболочки для работы с canvas это изменится, но еще не сегодня и не завтра.

Перевод — Дежурка. Автор оригинальной статьи — Bruce Lawson, один из соавторов книги Introducing HTML5.



Комментарии

Оставить ответ

Похожие статьи

Случайные статьи

www.dejurka.ru

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

Вы можете позволить некоторые старые браузеры (не поддерживает HTML5) поддержку HTML5.

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

Современные браузеры поддерживают HTML5.

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

Из - за этого, вы можете"церковь" браузеры обрабатывать «неизвестные»HTML элементы.

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

Элемент HTML5, определяется как элемент блока

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

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

примеров

заголовок, раздел, сноска, в сторону, нав, главным образом , статья, рисунок { дисплей: блок ;}

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

Вы можете добавлять новые элементы в HTML.

Примеры новых элементов , добавленных в HTML, а также элементы стиля , определенный для элемента под названием <myHero>:

примеров

<! DOCTYPE HTML> <HTML> <Head> <Meta Charset = "UTF-8"> <Title> HTML , чтобы добавить новый элемент </ title> <Script>

документ. createElement ( "myHero")

</ Script> <Style>

myHero { дисплей: блок ; Цвет фона: #ddd ; Обивка: 50 точек ; Размер шрифта: 30 точек ;}

</ Style> </ Head> <Body> <h2> Мой первый заголовок </ h2> <P> Мой первый абзац. </ P> <MyHero> Мой первый новый элемент </ myHero> </ Body> </ HTML>

Попробуйте »

JavaScript заявление document.createElement ( "myHero"), чтобы добавить новый элемент в браузере IE.

вопросы обозревателя Internet Explorer

Вы можете использовать метод, описанный выше, чтобы добавить элементы HTML5 браузеры IE, но:

примечание
Internet Explorer 8 и более ранних версиях IE браузер не поддерживает более одного пути.

Мы можем использовать Сьерд Висшера создан "HTML5 Включение JavaScript", "заточку " , чтобы решить эту проблему:

<! - [Если л IE 9]> <Script SRC = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ скрипт> <! [Endif] ->

Приведенный выше код является комментарием, роль, когда браузер версии IE меньше IE9 будет читать html5.js файл и разобрать его.

Примечание: Пожалуйста , отечественные пользователи используют сайт статического хранилища (репозитория нестабильности Google в стране):

<! - [Если л IE 9]> <Script SRC = "http://cdn.static.w3big.com/libs/html5shiv/3.7/html5shiv.min.js"> </ скрипт> <! [Endif] ->

Для IE браузера html5shiv является лучшим решением. html5shiv основным решением предложены новые элементы HTML5 IE6-8 не признают эти новые элементы не могут быть обернуты в качестве родительского узла дочерних элементов, и не может применить стили CSS.

Шив идеальное решение

примеров

Render HTML5 title> </ &#1089;&#1082;&#1088;&#1080;&#1087;&#1090;> Head>

<Body>

<h2> Моя первая статья </ h2>

<Статья> Этот учебник - наука не только технологии, но и мечта! ! ! </ Статья>

</ Body> </ HTML>

Попробуйте »

html5shiv.js код ссылки должны быть помещены в элемент <HEAD>, так как браузер IE при разборе HTML5 новые элементы необходимо загрузить файл.

www.w3big.com

cross-browser - Как определить совместимость HTML 5 в браузере

"Совместимость HTML5" - очень неопределенная вещь.

Когда люди спрашивают о совместимости с HTML5, они обычно означают "какие браузеры поддерживают эти функции браузера нового X, Y и Z, которые я хочу использовать?"

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

На самом деле нет браузеров, которые поддерживают каждую новую функцию.

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

Достаточно полный список новых функций браузера, а также диаграммы поддержки браузера для них доступны по адресу http://caniuse.com/ (если вы перейдете к внизу, вы увидите в общей таблице совместимости, что самые лучшие текущие браузеры поддерживают только 89% тестируемых функций. Это со временем улучшится по мере выпуска новых версий... но, конечно же, новые функции будут также вводятся)

Для определения во время выполнения, поддерживает ли пользовательский браузер данную функцию, вы можете использовать Modernizr. Это инструмент на основе Javascript, который даст вам набор классов CSS и флагов Javascript, которые расскажут вам, какие функции поддерживаются. Вы можете использовать это, чтобы вызвать альтернативное поведение на вашем сайте, если браузер не поддерживает функцию, которую вы хотите. (Modernizr также включает в себя функциональность HTML5Shim, которая позволяет IE, по крайней мере, справляться с HTML-страницами, содержащими новые элементы HTML5).

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

Очевидно, что попытка запустить более чем несколько из них сразу в IE сильно повлияет на производительность вашего сайта, но это может быть удобно, если вам нужно поддерживать одну или две функции. Мой любимый на данный момент CSS3Pie, который дает поддержку IE6/7/8 для скругленных углов, теней и градиентов CSS.

Надеюсь, что это поможет.

qaru.site

ВесьТоп создание и продвижение сайтов » Archives » Браузеры с поддержкой html5

.

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

В общем-то, даже нет смысла обсуждать здесь браузерную поддержку, ибо все сказанное, без сомнения, потеряет актуальность к тому времени, как книга отправится в печать. И все же я утверждал бы, ссылаясь на ресурс, что браузеры весьма различно поддерживают HTML5 и CSS3. Они по-разному работают с новейшими функциями HTML5, но некоторые из них выбиваются из строя особенно сильно. Я, конечно, имею в виду Internet Explorer.

Устранение ошибок в Internet Explorer. До выхода Internet Explorer 9 браузеры IE вообще не поддерживали новые элементы HTML5 (и с проблемами поддерживали некоторые функции HTML5). Однако есть способ заставить ранние версии Internet Explorer «вести себя прилично», по крайней мере с точки зрения поддержки стилизации этих новых элементов. Проблема только в том, что ранние версии «не знают», что это за новый элемент — header, к примеру.

Это блочный элемент?

У него должны быть какие-нибудь поля или отступы?

 Как должен отображаться текст внутри его?

Может ли он быть пунктом списка?

Может ли он быть включен в ячейку таблицы?

Internet Explorer 8 и ниже просто не знают, что с ним делать! Так что если вы попробуете стилизовать такой элемент, например, вот так:

header {background: red: padding:10 рх: colonwhite;}

то ничего не выйдет.

Но есть способ заставить Internet Explorer распознать элемент header и другие элементы HTML5 — использовать хитрый сценарий. Автор этого сценария, за который мы все должны быть благодарны, — Реми Шарп.

Просто поместите сценарий между открывающим тегом head и закрывающим /head и не беспокойтесь больше ни о чем. Рассмотрим, как это работает.

1. В первую очередь сценарий проверяет, действительно ли он должен в данный момент сработать. В условный комментарий заключено указание применить определенный CSS-код или сценарий для указанных версий Internet Explorer. В данном примере сценарий будет срабатывать для версий старше Internet Explorer 9 — это прописано как if It Internet Explorer 9 (It означает less than — «меньше»).

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

3. Внутри сценария старшие версии Internet Explorer «знакомятся» с новыми элементами HTML5. В документе каждый новый элемент динамически генерируется и заново вставляется в документ.

4. Элементы, автоматически сгенерированные сценарием, не появляются на вашей веб-странице, но Internet Explorer 9 теперь «знает», что они существуют, и вы можете стилизовать их как вам угодно.

Это очень просто, поэтому предлагаю вам новое задание по учебному сайту.

1. Откройте в текстовом редакторе главную страницу — index. html.

2. Сразу после тега meta и перед link добавьте ссылку, открывающую доступ к HTML5, в тегах scri pt. Вот как это должно выглядеть:

3. Повторите это для всех страниц сайта.

Если теперь вы обновите страницу в браузере, то не увидите изменений, что вполне понятно — мы же еще не применили никаких функций из HTML5! Для всех браузеров, кроме Internet Explorer раньше 9-й версии, этот сценарий будет игнорироваться, как и задумано.

.

xn--b1ag1aeig3e.xn--p1ai


 

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

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

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

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

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

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

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

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

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

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