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

Я видел этот сайт и этот сайт , но это многое нужно переварить. Каковы основные особенности HTML5, которые делают его отличным/лучшим от обычного старого (X)HTML/CSS?

Author: Jason, 2010-07-08
Source

10 answers

HTML5 огромный , но также потрясающий.

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

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

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

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

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

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

ДОКТАЙП наконец-то приличный! Теперь вы действительно можете запомнить его! <!DOCTYPE html>

Указание кодировки также проще, с <meta charset=utf-8>.

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

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

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

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

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

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

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

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

 33
Author: luiscubal, 2010-10-08 10:38:55

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

В nuts произошла некоторая перестройка и упрощение синтаксиса и болты:

  • Упрощенная строка doctype: <!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 предоставляет замечательные Медиа-запросы. Медиа-запросы такие, такие, так здорово. Недоступно в IE8 и ниже, но будет поддерживаться IE9.

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

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

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

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

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

Однако использование элементов HTML5 автоматически не делает ваш код семантическим. Группа WHATWG написала статью под названием - это не просто "семантический ", объясняющий, что это не просто элемент контейнера.

В формате HTML 5, существует алгоритм построения контурного представления документов. Это может быть использовано, например, AT, чтобы помочь пользователю перемещаться по документу. И и друзья являются важной частью этого алгоритма. Каждый раз, когда вы вставляете , вы увеличиваете глубину контура на 1 (в случае, если вам интересно, в чем преимущества этой модели по сравнению с традиционной моделью

-

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

...

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

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

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

 18
Author: Bryson, 2010-11-02 01:15:45

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

 4
Author: D4V360, 2010-07-08 19:34:16

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

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

 4
Author: Grant Palin, 2010-07-09 06:03:35

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

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

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

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

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

 4
Author: Alan, 2017-04-13 12:57:24

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

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

 2
Author: Sniffer, 2010-08-05 18:36:15

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

 1
Author: Steve Tranby, 2010-07-15 21:28:52

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

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

Http://books.alistapart.com/

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

 1
Author: Kevin, 2010-07-16 02:54:31

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

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

  • <section> и новый алгоритм описания заголовка (я действительно сказал, что это просто мой 2¢)
  • новые элементы формы, например<input type=email>
  • data-* атрибуты
  • хранилище на стороне клиента
  • родной <audio> и <video>
 1
Author: Paul D. Waite, 2012-07-30 08:35:30

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

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

 0
Author: Ilan Biala, 2013-01-20 15:41:37