Что нового в HTML5 / CSS3?

Ответы:

33

HTML5 огромен , но также великолепен .

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

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

В-третьих, HTML5 включает в себя множество специальных возможностей и семантической помощи. Например, такие элементы, как <section>и <article>помогают машинам выяснить, каким должен быть контент. Такие новые типы ввода <input type=email>также могут быть полезны по тем же причинам, хотя новые типы ввода включают пользовательские интерфейсы, которые делают их полезными даже для «обычных» читателей.

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

HTML5 включает в себя <canvas>, что позволяет рисовать 2D (и, с WebGL, 3D) формы, такие как диаграммы или даже рендеринга игр.

Старое поведение теперь стандартизировано, например, древнее Internet Explorer contentEditable.

DOCTYPE наконец-то приличный! Теперь вы можете запомнить это!<!DOCTYPE html>

Задать кодировку также проще, с <meta charset=utf-8>.

Если вы хотите отправить данные клиенту и связать их с элементами, теперь вы можете сделать это с помощью пользовательских атрибутов. Например, <div data-status=open>Open</div>теперь наконец-то разрешено. Обратите внимание, что имена пользовательских атрибутов должны начинаться с префикса data-.

Теперь вы можете включать SVG и MathML в документы HTML. Раньше вы могли делать это только с документами XHTML.

Среди множества новых функций и полей, определенных HTML5, одним из наиболее впечатляющих является classList, который позволяет вам легче манипулировать атрибутом класса. Вместо того, чтобы получать getAttribute / setAttribute и использовать сложные хаки, чтобы выяснить, какие классы есть у элемента и удалить определенный класс из этого элемента, classList делает эти сложные ситуации очень простыми.

Есть также несколько связанных спецификаций, таких как Web Workers, Web Sockets и IndexedDB, которые на самом деле не являются частью HTML5, но все говорят о них, как если бы они были. Они очень полезны для использования преимуществ многоядерных компьютеров, связи с серверами и локального хранения данных.

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

В CSS3 также появились новые селекторы, упрощающие сопоставление определенных элементов на странице (например, только нечетных или четных строк в таблице).

Непрозрачность, новые юниты, Marquee и Ruby также являются частью CSS3.

Я думаю, что в значительной степени охватывает все важные части.

luiscubal
источник
1
Отличный обветшалый.
Джордж Эдисон
Хорошая работа по поражению всех основных моментов.
Грант Пэйлин
1
Стоит отметить, что HTML5 в настоящее время является всего лишь рабочим проектом, и что он еще не полностью завершен.
Джанго Рейнхардт
1
@Django Reinhardt Как говорит WHATWG, не все функции HTML5 находятся на одной стадии. Некоторые из них уже широко применяются, другие займут еще немного времени. Реализация - это то, что действительно важно при разработке веб-сайтов, и статус спецификации не является хорошим показателем для этого. Возможно, вы также захотите взглянуть на FAQ WHATWG.
luiscubal 10.10.10
1
Избавились ли они от кавычек для допустимых атрибутов XHTML?
Lotus Notes
18

Чтобы отслеживать функции и технические характеристики поддержки, вы можете проверить, когда я могу использовать . Он включает в себя функции HTML5 и CSS3 и такие вещи, как SVG, PNG, CSS2.1 и CSS2. Он также отслеживает их статус утверждения (Рекомендация, Предлагаемая рекомендация, Рекомендация кандидата, Рабочий проект, стандарт IETF). FindMeByIP поддерживает матрицы поддерживаемых функций CSS3 только браузером.

Некоторое изменение и упрощение синтаксиса произошло в основных чертах:

  • Упрощенная строка типа документа: <!DOCTYPE html>
  • Упрощенный languageатрибут для <html>тега: <html lang="en">
    (все еще может включать, xmlnsи xml:langесли вы хотите соответствие XML)
  • Выделенный <meta>тег для charset:<meta charset="utf-8" />
  • scriptбольше не принимает typeатрибут, требуется charsetдля удаленных сценариев:
    <script src="/media/js/jquery.js" charset="utf-8"></script>(встроенные сценарии вообще не нуждаются в дополнительных атрибутах)

HTML5 делает вашу разметку намного более семантической , и в целом намного проще для чтения / записи и имеет меньший размер файла. Вместо того, чтобы иметь <div id="nav">, вы просто имеете <nav>. Не очень похоже, но складывается.

Многие элементы из XHTML1 и HTML4 устарели. Следующие элементы не поддерживаются в HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>и <xmp>.

Несколько новых элементов в HTML5 предназначены только для добавления большей семантической разметки и ничего не будут делать, кроме как предоставят более значимую альтернативу <div>. Эти новые элементы включают в себя: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>, и <figcaption>.

HTML5 формы значительно улучшены.

Новые типы ввода

Новые атрибуты:

Новые элементы

Мы могли бы заполнять формы весь день, но вот некоторые ресурсы, чтобы лучше объяснить все эти новые вещи.

CSS3 приносит замечательный Media Queries . Медиа-запросы такие, такие, такие замечательные. Недоступно в IE8 и ниже, но будет поддерживаться IE9.

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

Если вы поклонник CSS Reset, HTML5 CSS Reset доступен от HTML5 Doctor. Я сделал три дополнения к этому сбросу для своих личных страниц:

  • text-rendering: optimizeLegibility; добавлены к стилям в определении для <body>
  • labelвключены в определение с inputи selectтак как это необходимоvertical-align: middle;
  • стили для insи :focusиз CSS Reset Эрика Мейера добавлены обратно в

Доступен конкурирующий сброс, называемый reset5 , но я еще не оценил его лично. Он основан на обоих сбрасывает Эрик Мейер и HTML5 доктор.

HTML5 безопасности Cheatsheet отслеживает ошибки в функции HTML5 , как это реализовано в различных браузерах, а также ошибки в существующие функции, которые хорошо отслеживать , как хорошо.

Однако использование элементов HTML5 не делает ваш код семантическим. WHATWG написала статью под названием <section>, это не просто «семантический <div>», объясняющий, что это не просто элемент контейнера.

В HTML 5 есть алгоритм для построения схематичного вида документов. Это может использоваться, например, AT, чтобы помочь пользователю перемещаться по документу. И <section>, и друзья являются важной частью этого алгоритма. Каждый раз, когда вы вкладываете <section>, вы увеличиваете глубину контура на 1 (в случае, если вам интересно, какие преимущества этой модели по сравнению с традиционной моделью <h1> - <h6>, рассмотрите веб-ридер, который хочет интегрировать структуру документа синдицированного контента со структурой окружающего сайта. В HTML 4 это означает разбор всего контента и перенумерацию всех заголовков. В HTML5 заголовки заканчиваются на нужной глубине бесплатно).

...

Если вы просто вслепую конвертируете все <div> на своих страницах в <section>, маловероятно, что ваша страница будет иметь ожидаемый контур. И, помимо того, что это семантическая ошибка, это может запутать людей, которые полагаются на заголовки для навигации.

Как и все остальное в этом мире, существует платформа для веб-приложений HTML5 под названием SproutCore , созданная бывшим инженером Apple по имени Чарльз Джолли.

В дополнение к html5rocks.com вы можете не отставать от html5doctor.com и html5gallery.com .

Брайсон
источник
+1 Хороший ответ! Думаю, вы где-то пропускаете закрытие одного из ваших разделов кода.
JasonBirch
+1 Спасибо за ссылки на таблицы совместимости браузера! FindMeByIP был особенно аккуратным. Кроме того, в дополнение к SproutCore, ExtJS только что перезапустился как Sencha, и они, кажется, бросают свой вес за HTML 5.
Sharpie
4

Существуют базовые элементы макета, такие как border-radius, shadows (box / text), поддержка rgba и т. Д .; Это то, что CSS3 наиболее известен. Более интересными являются тэг canvas, video tag, локальное хранилище, websockets и т. Д., Которые создадут гораздо более богатый пользовательский опыт в простом HTML / JS / CSS. Эти функции могут стать отличной альтернативой для Flash в Интернете без дополнительных плагинов.

D4V360
источник
4

Я нахожу новые элементы HTML довольно интересными ... некоторые из них являются многообещающими семантическими заменами для родовых divs. Многообещающий новые элементы включают в себя article, section, aside, figure, nav, header, и footer, среди прочих. Мне очень нравится идея семантических элементов, заменяющих бессмысленные контейнеры.

О да, связанный предмет: очень упрощенный doctype- наконец-то, что я могу напечатать из памяти!

Грант Пэйлин
источник
4

( Это мой ответ на аналогичный вопрос на webapps.stackexchange.com )

В Canvas и веб - рабочие потоки являются наиболее интересными аспектами HTML5 мне. Я написал несколько веб-приложений, которые используют эти функции:

GioAUTHor [sic] широко использует холст, чтобы вы могли рисовать пути на карте, а затем находить кратчайший путь от начала до конца (с помощью алгоритма Дейкстры в JavaScript).

Демонстрация JavaScript Thread использует ограниченное использование canvas, но демонстрирует использование рабочих потоков, в комплекте с демонстрационным кодом. Также используется ползунок HTML5 input type = "range" .

Поддержка браузеров HTML5 так же разнообразна, как и сами браузеры. Есть хороший сайт (в HTML5, естественно) о готовности HTML5, который показывает, кто к чему готов.

Алан
источник
Я уже видел этот сайт HTML5 Readiness, но не мог вспомнить, где - спасибо за ссылку! Действительно аккуратный, двойная цель сайта служит.
Грант Пэйлин
2

Что касается CSS3 - посмотрите на http://css3please.com/, чтобы увидеть, что вы можете сделать.

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

Sniffer
источник
1

Аудио и видео теги позволяют отображать мультимедиа без использования плагина, такого как Flash или Silverlight, и, что наиболее важно, работают в браузерах iPhone и iPad. Есть некоторые проблемы, которые необходимо проработать в отношении кодеков и управления цифровыми правами.

Стив Транби
источник
1

Джереми Кит только что выпустил действительно хорошую книгу на тему «HTML5 для веб-дизайнеров». Вы можете проверить это.

Это первая книга из книги A Apart. Очень рекомендую его для среднего и продвинутого дизайнеров. A ++

http://books.alistapart.com/

ПРИМЕЧАНИЕ : вам, возможно, придется подождать, чтобы получить печатную копию

Kevin
источник
1

Это не дает мнения о важности, но это полезная разница между HTML 4 и 5.

Мои 2 ¢ по основным улучшениям:

  • <section>и новый алгоритм выделения контуров заголовка (я сказал, что это были только мои 2 ¢)
  • новые элементы формы, например <input type=email>
  • data-* атрибуты
  • хранилище на стороне клиента
  • родной <audio>и<video>
Пол Д. Уэйт
источник
0

Потому что никто еще не поставил это:

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

Илан Бяла
источник