HTML5 | htmlbook.ru



HTML5 | htmlbook.ru 

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

• Семантика

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

• Автономная работа

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

• 3D, графика и эффекты

  Можно рисовать прямо на веб-странице используя Canvas API. Технологии WebGL и CSS3 3D позволяют отображать трехмерную графику непосредственно в браузере.

• Мультимедиа

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

• Производительность и интеграция

  Сделайте свои веб-приложения быстрыми и динамичными с разными технологиями вроде Web Workers и XMLHttpRequest 2.

• CSS3

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

Ничего не знаете об HTML5?

Начните изучение HTML5 с книги Марка Пилгрима Погружение в HTML5.

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

<article> <aside> <audio> <canvas> <command> <datalist> <details> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <main> <mark> <menu> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> <video> <wbr>

Вёрстка сайта на HTML5

Описание процесса вёрстки сайта lionindesert.ru на HTML5.

Форум

Также разные аспекты HTML5 можно обсудить на форуме.

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

Зачем нам нужен HTML5: пять простых ответов

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

1. HTML5 — новый подход к разметке: мультимедиа внутри

В отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.

Однако действующий стандарт не предусматривал описания мультимедийного контента средствами самого языка: для этого использовалась функция вставки некоего объекта («object»), возможность воспроизведения которого зависела от того, установлены ли в браузере клиента совместимые с таким контентом дополнительные плагины третьих разработчиков.

Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это — «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.

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

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

Для интеграции аудио или видео в HTML5 достаточно использовать простой набор тэгов, описывающих, какой тип контента вы намерены поместить («video» или «audio»), и обычные ссылки на соответствующие медиафайлы.

Разумеется, у HTML5 есть и множество других нововведений, но это самое главное из них — изменение идеологического подхода.

2. Проблема обратной совместимости: сначала HTML, потом плагины

К сожалению, в мире остаётся значительная часть пользователей, у которых установлены устаревшие браузеры, вполне их устраивающие, но не поддерживающие все возможности HTML5. Прежде всего, речь идёт об Internet Explorer версии 8, до сих пор считающейся самой популярной для этого браузера. Последующие версии — IE 9 и 10 — уже практически полностью поддерживают HTML5. Что касается Chrome, Opera и Safari, то они уже в течение нескольких лет способны обрабатывать теги «video» и «audio».

Тем не менее для обеспечения обратной совместимость в HTML5 сохраняется поддержка использования плагинов (тега «object»), но по схеме «сначала HTML, а потом уже плагины». Это означает, что браузер должен сначала осуществлять рендеринг страницы с использованием тегов «video» и «audio» — и лишь при невозможности сделать это применять код плагинов.

Для обеспечения правильного функционирования такого подхода можно использовать одну из множества доступных библиотек JavaScript, часть из которых предоставляет полностью интегрированный программный интерфейс (API) для управления как HTML-контентом, так и встроенными объектами. Среди них, в частности, можно назвать Projekktor или программный видеоплеер Video.js, обеспечивающие полную совместимость как с HTML5, так и со старыми браузерами, в которых применяются плагины.

3. Единый подход к десктопным и мобильным платформам

Поддержка нового стандарта HTML5 обеспечивается и практически на всех современных мобильных устройствах, включая iOS, Android и Windows Phone, в чём заключается ещё одно его важное достоинство. Веб-мастеру уже не нужно размещать несколько версий медиаконтента для «полноценных» компьютеров и мобильных устройств. Известно, что iOS полностью несовместима с Flash, а ОС Android совместима лишь частично. В случае с HTML5 эта проблема полностью снимается.

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

4. Поддержка разных форматов видео и звука

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

Самые популярные контейнеры для интернет-видео — это AVI, MP4, FLV и WebM, а основных «сетевых» видеокодеков всего три: H.264, Ogg Theora и VP8. При этом каждому кодеку обычно (но далеко не всегда) лучше всего соответствует свой формат контейнера: H.264 — MP4, Theora — OGG, VP8 — WebV.

Кодек H.264 сжимает видео с потерями, чтобы получить файл высокого качества, но небольшого размера. При этом спецификация предусматривает несколько профилей с разным качеством и степенью сжатия, чтобы на маломощные мобильные устройства можно было транслировать «лёгкие» файлы, а на десктопы с широкополосными доступом — более качественное видео.

Хотя H.264 — коммерческий кодек, то есть предполагает лицензионные отчисления, он наиболее универсален: его встроенная поддержка есть в Internet Explorer, Chrome, Firefox, Safari, iOS и Android, а отсутствует лишь в Opera, где такое видео декодируется только через внешний плагин.

Кодек Ogg Theora, изначально рассчитанный на системы под Linux, вначале тоже был коммерческим, но теперь лицензируется бесплатно. Встроенная поддержка имеется в браузерах Chrome, Firefox и Opera, в Internet Explorer и Safari доступен только через плагины.

Кодек VP8, ориентированный на мобильные устройства, распространяется Google на условиях Open Source и обеспечивает качество, сходное с H.264, при меньшей сложности декодирования. Встроенная поддержка есть в Chrome, Firefox и Opera, а также в мобильных устройствах под управлением Android.

Таким образом, чтобы обеспечить воспроизведение видеоконтента практически на всех существующих системах, достаточно выкладывать файлы в контейнерах MP4 в стандарте кодирования H.264 и в формате WebM с кодеком VP8. Поскольку изо всех современных десктопных браузеров встроенная поддержка H.264 отсутствует только в Opera, такие сочетания будут самыми универсальными.

5. Существует обширная общедоступная документация

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

Прежде всего речь об официальной последней рабочей версии консорциума W3C, в рамках которого ведётся непосредственная разработка HTML5.

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

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

На русском языке краткий справочник HTML5 с примерами применения новых элементов имеется на сайте Puzzleweb.ru.

Кроме того, на русский язык переведено уже довольно много книг по HTML5, среди которых, например, «HTML5 для профессионалов», «Погружение в HTML5» или «Самоучитель HTML5».

Что нового в HTML5 и почему лучше на него переходить

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

Так что же в нём особенного?

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

Многие говорят, что этот стандарт ещё слишком сырой — слишком много браузеров не способны поддерживать его и смысл тогда его использовать? С этим нельзя поспорить, но стоит сделать поправку — всё больше браузеров начинают поддерживать этот стандарт по ряду причин, главная из которых — борьба с конкурентами.

Даже если не ждать с моря погоды, есть ещё один хороший аргумент: HTML5 это не что-то неделимое, а скорей сборная модель.
Что это значит? В этой платформе, как известно, собраны множество тегов, которые взаимодействуют друг с другом в нашем HTML-документе. А HTML5 тем и хвалится — своими способностями связать эти элементы воедино и упорядочить их работу.

HTML5 не только следит за взаимодействием своих тегов, но и взаимодействия всех наших JS скриптах, видеофайлах в теге <video> с помощью объектной модели документа — DOM.

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

 

Что нового в HTML5

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

Очень важный плюс состоит в том, что вам ничего не стоит перейти на HTML5, даже если вы так полюбили HTML4: всё потому что в новом стандарте ничего не было вырезано — вам не придется переучиваться. Достаточно просто начать и по желанию использовать новые элементы.

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

Новинка в HTML5:

1. Великолепные формы. Дополнительные возможности к функционалу и внешнему виду форм — вот что нового подготовил для нас новый HTML. Были добавлены множество новых значений, которые значительно упрощают работу с формой. Многие из них способны заменить собой некоторые скрипты и сделать код чище, не теряя в валидности. Среди прочих можно увидеть такие сочные новинки как: ползунок для прокрутки, выбор даты — неплохо, правда? Появился подсказывающий текст, позволяющий создать вполне уютный интерфейс формы. Он активируется во время активации формы и исчезает по истечению времени, либо по клику на него.Проблема формы email-почты частенько была проблемой у устаревших браузеров — они просто отказывались работать с ней. Теперь же этот приятный элемент доступен для всех, а если ваш браузер неактуален — будет выведена простая текстовая форма, взамен формы с типом email.

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

2. Танк мультимедии — canvas. Canvas — это новый тег в HTML5. Его возможности многогранны. Пожалуй, это прорыв и главный огромный жирный плюс для этого стандарта. Этот тег позволяет делать такие крутые элементы как:
   • рисование
   • проигрывание видео
   • построение оффлайновых веб-приложения
   • создание и работа с геолокацией
   • создание локального хранилища
   • и даже создание игр!

   Несомненно — вы поражены, если не знали об этих возможностях до сих пор!

   Все эти возможности до HTML5 можно было реализовать только за счёт громоздкого Flash, Gears или же JavaScript. Теперь это доступно без применения этих плагинов и скриптов! Только чистый html без сложностей и нагрузки на сайте.

   Самое интересное, что всё это УЖЕ доступно даже на IE9! Более того, уже идёт разговор о решении проблемы поддержки Canvas устаревшими браузерами.

   Я обязательно сделаю ещё один пост про создание игр на HTML5 — это будет очень круто, я уверен! Можете посмотреть пример игры по этой ссылке. Впечатляет, не правда ли?

3. Автофокус. Наверняка все мы замечали поисковую форму Google, при заходе на неё. Как только мы зашли на страницу — форма поиска уже активирована и готова к набору поискового запроса.Раньше этот эффект создавался только с помощью JavaScript. В HTML5 это стало гораздо проще и надёжнее: достаточно указать к нужной форме данный атрибут:

   <input type=»text» <strong>autofocus</strong>>

   <input type=»text» <strong>autofocus</strong>>

   После этого фокус будет активен для этой формы. Если по ошибке было введено 2 атрибута — он не будет работать.

4. Микроданные. Этот атрибут позволит добавить немного семантики на нашу страницу. В нём можно указать, к примеру, что какая-либо из картинок имеет доступ под специальной лицензией. Это положительно влияет на сайт, если микроданные поддерживаются. В противном случае — этот атрибут будет проигнорирован.
5. История с API. По большей части это способ манипулировать историей браузера. HTML5 принес нам новый способ добавления записей в историю браузера, а также реакцию на удаление этих записей из стека, при возвращении назад (кнопка браузера «назад»). Таким образом, URL может выполнять свою работу как уникальный идентификатор для текущего ресурса, даже в нагруженных скриптами приложениях, которые не всегда полностью обновляют страницу.

 

Новые теги в HTML5

• 
  <article> используется для контента типа новость, статья, запись блога, форум и т.п.
• 
  <aside> полезен для размещения рубрик, ссылок на архив, меток и прочего. Обычно находится сбоку от контента и имеет привычное нам имя «сайдбар»
• 
  <audio> предназначен для воспроизведения аудио-файлов на странице.
  Имеет атрибуты:

  1. <audio autoplay=»autoplay»>…</audio>

     <audio autoplay=»autoplay»>…</audio>

     
     Воспроизводит аудио-файл с этим атрибутом сразу после загрузки страницы.

  2. <audio controls=»controls»>…</audio>

     <audio controls=»controls»>…</audio>

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

  3. <audio loop=»loop»>…</audio>

     <audio loop=»loop»>…</audio>

     
     Зацикливает воспроизведение аудиозаписи.

  4. <audio muted=»muted»>…</audio>

     <audio muted=»muted»>…</audio>

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

  5. <audio preload=»none | metadata | auto»>…</audio>

     <audio preload=»none | metadata | auto»>…</audio>

     
     Позволяет загрузить аудио-файл вместе с страницей и последующим воспроизведением. При конфликте с autoplay, игнорируется.

  6. <audio src=»URL»>…</audio>

     <audio src=»URL»>…</audio>

     
     Позволяет задать путь к аудиозаписи.
• 
  <command> позволяет задать команду к кнопке. Имеет вид переключателя.
  Может иметь атрибуты:
  1. 
     Позволяет активировать команду.
  2. 
     Задаёт — доступна команда или нет.

  3. <command icon=»*address*»>

     <command icon=»*address*»>

     
     Позволяет задать адрес картинки как команду.

  4. <command label=»*command*»>

     <command label=»*command*»>

     
     Этот атрибут нужен для указания названия команды

  5. <command radiogroup=»*name*»>

Уроки HTML с нуля для начинающих

Веб программирование невозможно представить без языка разметки HTML. HTML указывает браузеру разметку всех объектов на странице. За счет него можно создать: текстовые поля, кнопки, аудио, видео записи и многое другое. За курс мы с вами изучим язык разметки HTML5.

Информация про HTML

HTML расшифровывается как – HyperText Markup Language. Представляет собой язык гипертекстовой разметки, который повсеместно используется во время построения веб-страниц и документов. Путь HTML начался ещё в первой половине 90-х годов. В то время он был крайне примитивным, но уже помогал делать простые страницы для веба. С тех пор язык постоянно развивается, к сегодняшнему дню он уже научился многому. Без HTML, в таком виде как мы привыкли, веб-сайты просто не существовали бы. Все сайты мира используют HTML.

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

Нововведения в HTML5:

• Изменился алгоритм парсинга во время разработки DOM-структуры;
• Появились новые теги, вроде audio, video и прочих. Кстати, теперь только силами HTML можно создать веб-проигрыватель. Раньше приходилось использовать Adobe Flash Player;
• Переопределение части правил и семантики использования HTML-элементов.

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

Всё пришло к тому, что HTML5 стал применяться в двух ключевых направлениях:

• В качестве обновлённой версии языка HTML;
• В роли функциональной платформы, на которой можно строить веб-приложения различной сложности. Правда, создать полноценное приложение на чистом HTML5 не получится. Для этого ещё используется JavaScript и CSS3.

Кто занимается модернизацией HTML5?

Над языком работает W3C или полное название — World Wide Web Consortium – это организация международного уровня, которая сохраняет независимость от конкретных разработчиков. Она же выпускает спецификации, определения и стандарты к HTML5. Оригинальная и полноценная спецификация доступна на официальном сайте по ссылке (доступна на английском). Организация не завершила работу над языком, напротив — всё ещё продолжает его развивать.

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

Важно понимать, что спецификация HTML5 и реализация данной технологии в конкретных браузерах – это разные понятия. Многие активно разрабатываемые веб-обозреватели начали понемногу внедрять функции HTML5 ещё до релиза этой версии. К сегодняшнему дню большинство свежих браузеров поддерживают все функции HTML5. Полную поддержку обеспечивают: Chrome, IE 11, Firefox, Edge, Safari, Opera. Относительно старые версии не имеют поддержки новых стандартов, например, IE 8 и младше. В версии IE 9 и 10 уже реализованы стандарты, но только частично.

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

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

Что нужно для работы?

Что пригодится во время разработки под HTML5? Ключевой инструмент – текстовый редактор, в котором и будет набираться код для будущей веб-страницы. Одним из популярнейших и многофункциональных редакторов является Notepad++. Он доступен на официальном сайте абсолютно бесплатно. Помимо бесплатного распространения, ещё обладает всеми необходимыми функциями, имеет массу полезных плагинов, подсвечивает открытие и закрытие тегов.

Также хорошим редактором с поддержкой большинства операционных систем является Visual Studio Code. Он способен работать в MacOS, Windows и Linux. По возможностям этот программный продукт в разы превосходит Notepad++.

Также прочитайте нашу статью на тему «5 лучших редакторов кода для программистов».

Вторым важным инструментом является веб-обозреватель, он пригодится для тестирования кода. Подойдёт любой современный веб браузер. Если нужно создать кросплатформенное приложение, то придётся установить в систему все популярные веб-обозреватели.

План курса

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

Программа обучения

Также на нашем сайте есть более углубленная программа по изучению разработки веб сайтов. Ознакомится с программой обучения по Front-end можно по этой ссылке и с программой обучения Full Stack по этой ссылке.

Стилизуем заполнитель при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

Атрибут заполнитель применяется для использования к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволили сделать его более активным.

Итак, начнем с примера для тех, кто не знает, что такое заполнитель.

HTML

демо-заполнитель ввода

Стиль placeholder-a можно изменить с помощью такого набора css правил:

CSS

  :: - webkit-input-placeholder {color: # c0392b;}
:: - moz-placeholder {color: # c0392b;} / * Firefox 19+ * /
: -moz-placeholder {color: # c0392b;} / * Firefox 18- * /
: -ms-input-placeholder {color: # c0392b;}
  

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

В IE и старых firefox (до 18-го) местозаполнителем считается псевдоклассом, а в новых firefox, webkit и blink — псевдоэлементом.

Смотрим, что получилось:

демо-заполнитель ввода

Нужно сказать, что поддерживаются не все возможные свойства css. Большинство современных браузеров позволяют изменить:

• шрифт (и сопутствующие свойства)
• фон (и сопутствующие свойства)
• цвет
• межсловный интервал
• межбуквенный интервал
• оформление текста
• с выравниванием по вертикали
• преобразование текста
• высота строки
• текст-отступ
• переполнение текста
• непрозрачность

А если заполнитель не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за функций лейаута, в частности на мобильных девайсах.В этом случае длинный текст-заполнитель-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis . Такой синтаксис будет работать во всех новых браузерах.

CSS

  input [заполнитель] {text-overflow: ellipsis;}
input :: - moz-placeholder {text-overflow: ellipsis;}
ввод: -moz-placeholder {переполнение текста: многоточие;}
input: -ms-input-placeholder {переполнение текста: многоточие;}
  

демо-заполнитель ввода

Как скрыть заполнитель при фокусе?

Скрывание заполнителя-а происходит по-разному.

1. в некоторых браузерах при получении фокуса инпутом
2. в других браузерах при наличии хотя бы одного введенного символа

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

CSS

 : focus :: - webkit-input-placeholder {цвет: прозрачный}
: focus :: - moz-placeholder {color: transparent}
: focus: -moz-placeholder {цвет: прозрачный}
: focus: -ms-input-placeholder {цвет: прозрачный}
  

демо-заполнитель ввода

Скрываем заполнитель красиво

Можно также добавить переход для появления и скрытия placeholder-a:

демо-заполнитель ввода

Вот сss:

CSS

  / * плавное изменение прозрачности placeholder-а при фокусе * /
.input1 :: - webkit-input-placeholder {непрозрачность: 1; переход: непрозрачность 0,3 с легкость;}
.input1 :: - moz-заполнитель {непрозрачность: 1; переход: непрозрачность 0,3 с легкость;}
.input1: -moz-placeholder {непрозрачность: 1; переход: непрозрачность 0,3 с легкость;}
.input1: -ms-input-placeholder {непрозрачность: 1; переход: непрозрачность 0,3 с легкость;}
.input1: focus :: - webkit-input-placeholder {непрозрачность: 0; переход: непрозрачность 0,3 с легкость;}
.input1: focus :: - moz-placeholder {opacity: 0; переход: непрозрачность 0.3с легкость;}
.input1: фокус: -moz-placeholder {непрозрачность: 0; переход: непрозрачность 0,3 с легкость;}
.input1: фокус: -ms-input-placeholder {непрозрачность: 0; переход: непрозрачность 0,3 с легкость;}

/ * сдвиг-заполнитель-а вправо при фокусе * /

.input2 :: - webkit-input-placeholder {текст-отступ: 0px; transition: text-indent 0.3s;}
.input2 :: - moz-placeholder {текст-отступ: 0px; transition: text-indent 0.3s;}
.input2: -moz-placeholder {текст-отступ: 0px; переход: текст-отступ 0.3с легкость;}
.input2: -ms-input-placeholder {текст-отступ: 0px; transition: text-indent 0.3s;}
.input2: focus :: - webkit-input-placeholder {текст-отступ: 500 пикселей; transition: text-indent 0.3s;}
.input2: focus :: - moz-placeholder {text-indent: 500 пикселей; transition: text-indent 0.3s;}
.input2: фокус: -moz-placeholder {текст-отступ: 500 пикселей; transition: text-indent 0.3s;}
.input2: focus: -ms-input-placeholder {текст-отступ: 500 пикселей; transition: text-indent 0.3s;}

/ * сдвиг заполнитель-а вниз при фокусе * /

.input3 :: - webkit-input-placeholder {высота строки: 20 пикселей; transition: line-height 0.5s легкость;}
.input3 :: - moz-заполнитель {высота строки: 20 пикселей; transition: line-height 0.5s легкость;}
.input3: -moz-placeholder {высота строки: 20 пикселей; transition: line-height 0.5s легкость;}
.input3: -ms-input-placeholder {высота строки: 20 пикселей; transition: line-height 0.5s легкость;}
.input3: focus :: - webkit-input-placeholder {высота строки: 100 пикселей; transition: line-height 0.5s легкость;}
.input3: focus :: - moz-placeholder {высота строки: 100 пикселей; переход: высота строки 0.5s легкость;}
.input3: focus: -moz-placeholder {высота строки: 100 пикселей; transition: line-height 0.5s легкость;}
.input3: focus: -ms-input-placeholder {высота строки: 100 пикселей; transition: line-height 0.5s легкость;}
  

Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

.

метатег области просмотра, масштабирование веб страниц в мобильных браузерах

Так уж сложилось, что мобильные браузеры появились сравнительно недавно, а сайтов в сети к времени уже было огромное количество. Естественно, все эти сайты совсем не были оптимизированы под маленькие экраны смартфонов, а смартфоны в свою очередь, должны быть установлены, что все сайты в ширину занимают где-то около 1000px (980px в сафари). Нужно было как-то решать сложившуюся ситуацию и в apple придумали метатег , который по традициям потом сперли все остальные производители браузеров.

Давайте рассмотрим типично-эпичную верстку сайта:

HTML

  

  
    
  
  
   
 Привет, мир 
 

  

Откроем его в новом браузере. Вот что мы увидим:

Как вы правильно заметили, текст слишком мелкий и произошло это, потому что сафари попытка вместить наш сайт (который по его предположению сделан для браузеров с шириной экрана около 980pх)

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

HTML

Что получилось:

Ну вот, теперь все намного лучше. Обозначив width = device-width , мы сказали нам, что нам нужна область просмотра контента, равная ширина экрана мобильного устройства.

Можно вручную установить значение для ширины. Например, content = "width = 320px" , но этого не рекомендуется делать, потому что различные смартфоны могут иметь абсолютно различную ширину экрана.

Очень распространенным распространенным является:

HTML

такой вариант задает ширину страницы и начальный масштаб (в данном случае без масштабирования)

Также часто используется следующий вариант:

HTML

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

1. при загрузке страницы она не будет смасштабирована
2. страница займет всю ширину мобильного
3. запрещено любое пользовательское масштабирование
4. доступен только горизонтальный и вертикальный скролл

Используйте эту конфигурцию, только в том случае, если знаете, что делаете.

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

ширина

Целое число (от 200px — 10,000px) или «device-width».

Задает ширину окно просмотра. Если нирина окно просмотра не указана, то:

• для мобильного Safari это 980px
• Opera — 850 пикселей
• Android WebKit — 800 пикселей
• IE — 974px

высота

Целое число (от 223px до 10,000px) или «устройство-высота»

задает высоту окна просмотра. В 99% случаев, просто не обращайте внимания на этот параметр, но если сильно надо — пробуйте и экспериментируйте. Удачи ..

начальная

Доступные значения (от 0.От 1 до 10).

1.0 — не масштабировать. Задает масштаб страницы. Увеличиваем значение — увеличиваем масштаб.

масштабируется пользователем

Доступные значения нет или да

Задает возможнось изменения масштаба страницы. По-умолчанию установлено как да в Safari.

минимальный масштаб и максимальный масштаб

Доступные значения (от 0.1 до 10).

1.0 — не масштабировать. Определение минимальный и максимальный масштаб видового экрана соответственно.

По-умолчанию в Safari минимальный масштаб = "0,25" , максимальный масштаб = «1,6».

Совет: Не используйте мета-теги (в том числе и этот), пока не разобрались, зачем все это нужно. И тестируйте все в различных мобильных браузерах. Удачи!

.

Формат ссылки для телефонных звонков в мобильныхx (href = «tel: …»)

На сегодняшний день большинство мобильных устройств с браузером также являются телефонами! Так почему бы не создать для телефонных номеров на вашей странице ссылки, кликая по которому вызывалось бы встроенное приложене для звонков. Если вы создаете сайт бизнес, консалтингового агенства или просто продаете пирожки на своем сайте, большинство людей предпочитают позвонить вам в 1-2 тача вместо нудного заполнения формы (особенно на руководстве девайсе).

Мы уже писали об URI-схемах для отправки смс тут.

Первым стандартом, де-факто (скопированным с японских I-MODE стандартов) использование тел: схемы. Он был предложен в стандарте в RFC 5341, но будьте осторожны, потому что большинство предложенных там параметров не работают на всех устройствах.

Сегодня поддержка tel: URI-схемы есть почти в каждом мобильном устройстве, в том числе в Safari на IOS, браузере Android, браузере WebOS, браузере Symbian, Internet Explorer, Opera Mini и т.п.

Очень простой и лаконичный синтаксис:

HTML

   Звоните нам бесплатно! 
  

href = «тел:…»

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

На десктопе, с установленным Skype (или подобным софтом) система попросит вас подтвердить открытие внешнего приложения, при клике на такую ​​ссылку.

Я рекомендую указывать телефонный номер в международном формате: знак плюс (+), код страны, код местной зоны и номер абонента. Мы ведь иногда действительно не знаем, где наши посетители физически расположены. Если они находятся в той же стране, или даже в том же районе, международный формат также будет работать.

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

HTML

   Работает на iPhone и Nokia 
 Работает на Android 
 международный формат для Android 
  

В целом все, что хотелось сказать. Используйте tel: URI-схемы и будет вам счастье;)

.

Что такое HTML5?

От автора: привет друзья! В данной статье я хочу немного рассказать про html5. Рассказать, что такое html5, что в нем нового. Какие новые возможности он предоставляет разработчикам. HTML5 очень широкое понятие. И некоторые технологии, которые называют в HTML5, вообще говоря, не являются html5, но обо всем по порядку…

Что такое HTML5?

Первое — это стандарт HTML5, документ, лежащий на сайте W3C, в котором все новые теги, атрибуты, новые API и ряд сопутствующих документов, которые вносят некоторые дополнительные детали, вроде API для Canvas.

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

Рассмотрим некоторые ключевые особенности html5:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.

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

В нем есть своя интеграция с интерфейсами, которые могут понадобиться в современные приложениях. Как пример можно привести геолокацию, которая позволяет браузеру определить местоположение пользователя (его координаты). Ранее это можно было сделать только через GPS.

Что дает HTML5?

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

Также html5 делает удобную работу в сети и для обычных пользователей. Например, увеличивается скорость работы, использование. Для того, чтобы смотреть ролики из youtube, не нужно устанавливать дополнительные плагины и постоянно обновлять их.

Цели HTML5

Кратко цели html5 можно назвать так:

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

Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых элементов html5.

Обеспечение согласованности между браузерами и устройствами.

Сделать все это настолько прозрачным, насколько это возможно.

Новые возможности HTML5

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

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

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

и

<статья>

Заголовок статьи

Etiam pretium odio eu mi convallis vitae varius neque pharetra.Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.

Подзаголовок статьи

Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.