Поддержка браузеров HTML5
w3big.com
Latest web development tutorials
Предыдущая: HTML Примеры
Далее: Java экземпляр — производитель / потребитель проблема
Вы можете позволить некоторые старые браузеры (не поддерживает 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.
Шив идеальное решение
примеров
<! DOCTYPE HTML>
<HTML>
<Head>
<Meta Charset = «UTF-8»>
<Title> Render HTML5 </ title>
<! — [Если л IE 9]>
<Script SRC = «http://cdn.static.w3big.com/libs/html5shiv/3.7/html5shiv.min.js»> </ скрипт>
<! [Endif] ->
</ Head>
<Body>
<h2> Моя первая статья </ h2>
<Статья>
Этот учебник — наука не только технологии, но и мечта! ! !
</ Статья>
</ Body>
</ HTML>
Попробуйте »
html5shiv.
Предыдущая: HTML Примеры
Далее: Java экземпляр — производитель / потребитель проблема
w3big.com | HTML курс | Web курс | Web Tutorial
HTML5 Поддержка — Учебник HTML5 — Schoolsw3.com
❮ Назад Далее ❯
Вы можете научить старые браузеры правильно обрабатывать HTML5.
Поддержка браузера HTML5
HTML5 поддерживается во всех современных браузерах.
Кроме того, все браузеры, старые и новые, автоматически обрабатывают нераспознанные элементы как встроенные элементы.
Вы можете «научиться» справлятся с «неизвестными» элементами HTML в старых браузерах.
Вы даже можете научить IE6 (Windows XP 2001) обрабатывать неизвестные элементы HTML.
Определение семантических элементов как элементов блока
HTML5 определяет восемь новых семантических элементов.
Чтобы обеспечить правильное поведение в старых браузерах, вы можете установить в свойство display CSS, элемент blockHTML :
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Добавление новых элементов в HTML
Вы также можете добавить новые элементы на страницу HTML с помощью браузерного трюка.
В примере добавляется новый элемент с именем <myHero> страница HTML определяет стиль:
Пример
<!DOCTYPE html>
<html>
<head>
<script>document.createElement(«myHero»)</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<h2>Заголовок</h2>
<myHero>Мой элемент Hero </myHero>
</body>
</html>
Попробуйте сами »
Заявление JavaScriptdocument. необходим для создания нового элемента в IE9 и ранее.
createElement("myHero")
Проблема с Internet Explorer 8
Вы можете использовать описанное выше решение для всех новых элементов HTML5.
Однако, IE8 (и ранее) не допускает стилизации неизвестных элементов!
К счастью, Sjoerd Visscher создал HTML5Shiv! HTML5Shiv является обходным путем JavaScript для включения стиля элементов HTML5 в версиях Internet Explorer до версии 9.
Вам потребуется HTML5shiv для обеспечения совместимости для браузеров IE старше, чем IE 9.
Синтаксис для HTML5Shiv
В HTML5Shiv находится в пределах тега <head> .
HTML5Shiv представляет собой файл javascript, на который ссылается тег <script>.
Вы должны использовать HTML5Shiv, при использовании новых элементов HTML5, таких как: <article>, <section>, <aside>, <nav>, <footer>.
Вы можете загрузить последнюю версию HTML5shiv из github или обратиться к версии CDN по адресу https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
Синтаксис
<head>
<!—[if lt IE 9]>
<script src=»/js/html5shiv.js»></script>
<![endif]—>
</head>
Пример HTML5Shiv
Если Вы не хотите загружать и хранить HTML5Shiv на своем сайте, вы можете сослаться на версию, найденную на сайте CDN.
Скрипт HTML5Shiv должен быть помещен в элементе <head> , после любых стилей:
HTML-
<!DOCTYPE html>
<html>
<meta charset=»UTF-8″>
<!—[if lt IE 9]>
<script src=»https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js»></script>
<![endif]—>
</head>
<body>
<section>
<h2>Знаменитые города</h2>
<article>
<h3>London</h3>
<p>Лондон — столица Англии.
Это самый густонаселенный город в Соединенном Королевстве, более чем 13-миллионным населением.</p>
</article>
<article>
<h3>Париж</h3>
</article>
<article>
<h3>Tokyo</h3>
<p>Токио — столица Японии, центр большого Токио и самый густонаселенный столичный регион в мире.</p>
</article>
</section>
</body>
</html>
Попробуйте сами »
❮ Назад Далее ❯
CSS Grid Layout (уровень 1)
Могу ли я использовать
Поиск?
Макет сетки CSS (уровень 1)
— CRГлобальное использование
96,31% + 0,5% знак равно 96,81%
Включает поддержку всех grid-* свойства и блок fr .Chrome
- 4 — 24: Not supported
- 25 — 28: Not supported (but has polyfill available)
- 29 — 56: Disabled by default
- 57: Supported
- 58 — 106: Supported
- 107 : Поддерживается
- 108–110: Поддерживается
Edge
- 12–15: Частичная поддержка
- 16–106: Поддерживается
- 107: Поддерживается Safari
- 6 — 10: не поддерживается (но имеет полифилл)
- 10,1 — 16,0: поддержано
- 16,1: поддержан
- 16,2 — TP: поддержал
03% — Not supported»> 3,1 — 5.1: не поддерживается
73% — Supported»> 54 — 105: ПоддерживаетсяOpera
- 9 — 27: Not supported
- 28 — 43: Disabled by default
- 44 — 90: Supported
- 91: Supported
IE
- 5.5 — 8: Not supported
- 9 : Не поддерживается (но доступен полифилл)
- 10: Частичная поддержка
- 11: Частичная поддержка
Chrome для Android
23% — Supported»> 107: ПоддерживаетсяSafari на iOS 9.0015 9.1216
Samsung Internet
- 4: Не поддерживается (но доступен полифилл) 9: 1015 90 90
- 6.2 — 17,0: поддержан
- 18,0: Поддерживается
Opera Mini
07% — Not supported»> Все: не поддерживаетсяOpera Mobile
- 10 -12.1: не поддерживает:::::::
: не поддерживают
::: не поддерживают: не поддерживают- .0015
UC Browser для Android
- 13,4: Поддержано
Android Browser
- 2.1 — 4.1: не поддерживается
- 4.2 -4.4.4: Недоотровенный (но не поддерживается.
Firefox for Android
- 106: Supported
QQ Browser
- 13.1: Supported
Baidu Browser
00% — Supported»> 13.18: Supported
KaiOS Browser
- 2.5: Поддержано
См. Также поддержку подгридных
- Ресурсы:
- Полифилл на основе старой спецификации
- Полифилл на основе новой спецификации
- CSSS GRID GRID. Пример: Пример: вам нужно, чтобы вы могли выяснить, что вам нужно, чтобы вы могли узнать, что вам нужно. Mozilla: Введение в CSS Grid Layout
- Сообщение в блоге WebKit
Какие браузеры следует использовать для программирования на HTML5 и CSS3?
Браузер — это основной инструмент в Интернете. Так что для программирования HTML5 и CSS3 у вас должны быть практические знания, потому что все ваши пользователи просматривают вашу страницу в том или ином браузере.
Microsoft Internet Explorer 10
Microsoft Internet Explorer (IE) остается доминирующим игроком в Интернете. Проводник по-прежнему чрезвычайно распространен, поскольку он устанавливается вместе с Microsoft Windows.
Конечно, он также работает исключительно с Microsoft Windows. Mac и Linux не поддерживаются.Версия 10 IE, наконец, имеет респектабельный для основных частей стандарта HTML5. Если вы пишете страницы в соответствии с версией HTML5, вы можете ожидать, что ваша страница будет хорошо работать в IE10. Большинство функций также будут работать в IE9., но не все.
Старые версии Internet Explorer
Более ранние версии IE по-прежнему чрезвычайно важны, потому что на многих компьютерах еще не установлено 10. Версия 6 какое-то время была доминирующим игроком в Интернете, и она отказывается умирать. Однако он не будет хорошо работать с современными стандартами, поэтому большинство разработчиков считает его устаревшим.
Мозилла Фаерфокс
Firefox является значительным улучшением IE с точки зрения программиста по следующим причинам:
Улучшенный просмотр кода: Если вы просматриваете HTML-код страницы, вы видите код в специальном окне.
Улучшенная обработка ошибок: Вы будете делать ошибки. Как правило, Firefox лучше указывает на ошибки, чем IE, особенно когда вы начинаете использовать JavaScript и другие передовые технологии.
Отличные расширения: В Firefox есть несколько замечательных расширений, которые значительно упрощают веб-разработку. Эти расширения позволяют изменять код на лету, автоматически проверять код и динамически исследовать структуру страницы.
Многоплатформенная поддержка: IE работает только в операционной системе Windows, поэтому он недоступен для пользователей Mac или Linux. Даже если вы являетесь разработчиком только для Windows, ваши пользователи могут использовать что-то еще, поэтому вам нужно знать, как другие браузеры видят вещи.
WebKit/Safari
Браузер по умолчанию для Mac и операционной системы iPhone/iPad (iOS) называется Safari. Это мощный браузер, построенный на движке рендеринга WebKit. Safari был разработан с учетом соответствия стандартам и скорости. Пользователи Mac и iOS почти наверняка будут использовать Safari, поэтому вам следует кое-что об этом знать. Chrome также использует WebKit, поэтому, если в Chrome все выглядит хорошо, у вас, скорее всего, все в порядке с пользователями Apple.
Гугл Хром
Google видит будущее вычислений в браузерных приложениях с использованием технологий AJAX. Браузер Chrome чрезвычайно быстр, особенно в технологии JavaScript, которая служит основой этой стратегии. Кроме того, в Chrome есть ряд наборов инструментов для разработчиков, что делает его любимым браузером для многих веб-разработчиков. Вот основные моменты:
Редактирование страницы в режиме реального времени:
Структура страницы: Хорошо спроектированная веб-страница создается в виде схемы с различными элементами, вложенными друг в друга. Представление элементов позволяет вам видеть веб-страницу в этом формате, с возможностью сворачивать и разворачивать элементы, чтобы четко видеть структуру вашей страницы.
Редактирование CSS в реальном времени: Когда вы узнаете, как применять стили CSS, вы захотите увидеть, как различные правила CSS изменяют вашу страницу. В представлении «Проверить элемент» вы можете выделить часть своей страницы и изменить CSS, наблюдая, как изменение влияет на вашу страницу в режиме реального времени.
Вкладка «Сеть»: Эта функция позволяет вам проверить, сколько времени требуется для загрузки каждой части вашей страницы.
Это может быть полезно для устранения неполадок с медленной загрузкой страницы.Sources View: Это позволяет вам увидеть полный код вашей страницы. Это особенно полезно, когда вы приступаете к программированию на JavaScript, поскольку включает в себя мощный набор средств отладки.
Консоль: Представление консоли — это небольшой инструмент командной строки, интегрированный непосредственно в ваш браузер. Это может быть очень полезно, потому что часто показывает ошибки, которые в противном случае скрыты от глаз. Консоль наиболее полезна при использовании JavaScript.
Другие известные браузеры
Firefox и IE — крупные игроки в мире браузеров, но они, конечно, не единственные браузеры, с которыми вы столкнетесь.
Опера
Веб-браузер Opera, один из первых браузеров, совместимых со стандартами, является технически надежным браузером, который никогда не использовался широко. Если вы создаете свои страницы со строгим соблюдением требований, у пользователей Opera не будет проблем с доступом к ним.
Opera очень хорошо совместима с HTML5. На многих игровых консолях и мобильных устройствах есть браузеры на базе Opera, так что на это стоит обратить внимание.Веб-кит/Сафари
Apple включает веб-браузер во все последние версии Mac OS. Текущее воплощение — Safari — отличный браузер, соответствующий стандартам. Изначально Safari был разработан только для Mac, но доступна и версия для Windows. Платформа WebKit, основа для Safari, используется в ряде других онлайн-приложений, в основном на Mac. Модифицированная версия Safari является основой браузеров на iOS.
Текстовые браузеры
Некоторые браузеры, которые вообще не отображают графику (например, Lynx), предназначены для старых интерфейсов командной строки. Хотя эти браузеры кажутся неуместными, они невероятно быстры, потому что не отображают графику. Слуховые браузеры читают содержимое веб-страниц. Изначально они предназначались для людей с нарушениями зрения, но часто ими пользуются и люди без инвалидности.
Конечно, он также работает исключительно с Microsoft Windows. Mac и Linux не поддерживаются.
Затем вы можете увидеть, как выглядит элемент с новым содержимым. Вы можете выбрать часть страницы, чтобы увидеть, какая страница соответствует коду, и вы можете выбрать код и посмотреть, какую часть страницы представляет этот код.
Это может быть полезно для устранения неполадок с медленной загрузкой страницы.
Opera очень хорошо совместима с HTML5. На многих игровых консолях и мобильных устройствах есть браузеры на базе Opera, так что на это стоит обратить внимание.