0,0
рейтинг
4 октября 2012 в 20:01

Разработка → Ещё семь фич HTML5, о которых вы могли не знать tutorial

Доброго времени суток!

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


Чтобы проверить, в каком браузере работает та или иная фича, советую посетить Can I Use.


autofocus


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

Пример.

<input autofocus="autofocus" />


download


Атрибут download позволяет нам установить имя загружаемого файла. Теперь нам не нужно делать этого на серверной стороне. Например, у нас есть файл hello.js, который мы можем запросто сохранить под именем README. Всё делается очень просто: атрибут download используется в связке с атрибутом href, с помощью которого мы задаём путь до файла.

Пример.

<a href="hello.js" download="README">Загрузить</a>


prefetch


Атрибут prefetch позволяет браузеру заранее загрузить нужную нам страницу для того, чтобы отобразить её сразу при переходе по ссылке, а не ждать утомительной и долгой загрузки. Например, статья поделена на несколько частей (каждая часть располагается на своей странице. /page1 и /page2). Теперь мы можем загрузить вторую страницу заранее, пока занимаемся прочтением первой. Делается это очень просто.

Пример.

<link rel="prefetch" href="/page2">


hidden


Как вы уже, возможно, догадались, атрибут hidden используется для того, чтобы спрятать какой-либо элемент на странице. Данный атрибут выполняет сходную роль значения hidden атрибута type элемента input. Все мы помним спрятанные текстовые поля, которые хранились для сохранения данных, которых пользователю видеть не обязательно. Что же, с атрибутом hidden мы можем спрятать любой элемент.

Пример.

<div hidden="hidden">Привет, мир! К сожалению, ты так и не увидел меня... :(</div>


spellcheck


Атрибут spellcheck позволяет нам проверять орфографические ошибки при вводе данных. Работает данный атрибут со всеми инпутами (читай, текстовыми полями) и редактируемыми div'ами (contenteditable div, если кто не помнит).

Пример.

<input type="text" spellcheck="true">


datalist


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

Пример.

<input list="provlist" name="list" >
<datalist id="provlist">
  <option value="МТС">
  <option value="Мегафон">
  <option value="Билайн">
  <option value="ТЕЛЕ2">
  <option value="БобрДобр">
</datalist>


output


Элемент output предоставляет нам возможность выводить данные на экран. Он может быть полезен для вывода какого-либо типа данных. Например, мы написали веб-приложение, которое представляет собой калькулятор. Элемент output мы можем использовать для вывода результата на страницу.

Пример.

<output>Собственно, результат нашего вычисления</output>


Что я об этом всём думаю


HTML5, несомненно, является новым этапом развития языка гипертекстовой разметки. Несмотря на то, что, он предоставляет некоторые совершенно бесполезные элементы: тот же output можно спокойно заменить на обычный div и не париться по поводу того, будет ли выведен результат вычисления какого-либо выражения, скажем, в старичке IE7; в его загашнике хранится несколько полезных фич: наример, autofocus и datalist. В данном случае HTML5 облегчает работу client-side программисту: позволяет забабахать хорошую фичу в одну-две строки, вместо того, чтобы реализовывать собственные костыли на JavaScript.

На этом всё. До новых встреч!
Михаил Давыденко @krovatti
карма
1,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (96)

  • +26
    • –2
      Да, в недавнем дайджесте была. Только что выложил перевод, т.к. коннекта не было.
  • +3
    Все хорошо, понятно, но мне лично интересно — ведь при включенном атрибуте spellcheck проверка происходит «средствами» браузера? Тогда закономерный вопрос — в чем профит данного атрибута, если бОльшинство популярных браузеров по умолчанию имеют словари (кои можно настраивать на свой вкус) Или я где-то ошибаюсь — поправьте меня. ..(может есть возможность предоставлять словари или т.п.?)
    • +9
      К примеру, можете отключить spellcheck в определённых элементах, отменив поведение браузера по-умолчанию.
      • 0
        Проверил. Да так оно и есть. хм… применение… самый то для тестов по языкознанию\грамматике\орфографии… Больше правда сфер применения не нащупываю
        • +20
          Поля для ввода кодовых фраз, да и просто ФИО — раздражает когда спеллчеккер фамилию подчеркивает.
        • +3
          На падонкаффских форумах.
        • +1
          В редикторе кода спелчекер не нужен особо, т.к. будет подчеркивать половину функций языка. Правда было бы удобно отключить спелчекер только для английского языка например.
  • +2
    позволяет забабахать хорошую фичу в одну-две строки

    А потом в 100 строках объяснять IE8+ (и не надо говорить, что давайте перестанем поддерживать еще и IE8-9), что оно-таки работает и как же оно это делает.

    С другой стороны фичи милые и полезные! Вот правда не вижу особого смысла в hidden…
    • 0
      Совокупность IE 8 версии и меньше занимает меньше 15%. Другими словами, у 85% основные функции вроде этих уже работают. Если вам действительно так важны 15%, то вы, конечно, можете сделать полифилл для них.
      • +6
        А IE9?
        autofocus — wufoo.com/html5/attributes/02-autofocus.html — c 10ой.
        download — codebits.glennjones.net/downloadattr/downloadattr.htm — походу вообще только chrome…
        hidden — html5accessibility.com/ — даже с 10ой не все ясно…
        spellcheck — wufoo.com/html5/attributes/17-spellcheck.html — с 10ой…
        datalist — caniuse.com/datalist — с 10ой…
        output — html5doctor.com/the-output-element/ — с 10ой…

        15% ИЕ8, а сколько ИЕ9? И когда начнем на ИЕ10 переходить?

        Нет, я согласна со своим тех.лидом, что это не повод их не использовать… Но…
        • 0
          Я говорил, про то что поддерживает IE9. В основном, это конечно части CSS 3, аудио, видео, canvas, SVG и некоторые другие плюшки.
          И когда начнем на ИЕ10 переходить?
          Очевидно, через месяц, когда IE10 должен выйти.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            В начале статьи ссылка на прекрасную тулзу.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Подскажите, пожалуйста, где же посмотреть самую представительную статистику по Рунету? Еще бы по Байнету… LI?
            Это не сарказм, это чисто женское любопытство.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Спасибо. Посмотрела. Но, как не посмотри на эту статистику, нельзя списывать IE со счетов…
                • НЛО прилетело и опубликовало эту надпись здесь
                  • 0
                    С этим подходом абсолютно не спорю. Я его вполне поддерживаю. Не всегда проект такой, что можно доказать заказчику, что пропавшие уголки — это ничего страшного, и что пользователь сам себе злобный Буратина.

                    Я не отказываюсь от использования этих фич. Просто чтобы их эмулировать (а заказчик же уже посмотрел, что может быть ВОТ ИМЕННО так, а не иначе) порой уходит больше времени, чем если бы все с нуля… Ну да ладно.

                    Не будем переливать из пустого в порожнее. Фичи полезные и красивые :) И я, на самом деле, их применяю! :)
          • 0
            Микрософт удивительная контора всё таки.
    • +3
      HTML5 используется не только для создания сайтов. Я, например, пишу корпоративное приложение и могу диктовать своим пользователям каким браузером пользоваться.
      • 0
        Но в итоге всё равно придётся поддерживать SeaMonkey и Firefox 2, потому что где-нибудь на рабочих местах на другом конце страны найдётся пара сотен машин с древним OpenSUSE, на который более новые версии Firefox не встают из принципа, а накатить новую операционку вам никто не даст, не в последнюю очередь потому что железо не потянет, а покупка пары сотен машин никак не уложится в бюджет вашего корпоративного приложения. :)
        • 0
          Хм, итак:
          1. Большая организация (>200 машин)
          2. Слабые машины в регионе(ах) ниже 1ГГц celeron-ов <512MB ОЗУ (так, что даже icewm не тянут)
          что мешает поставить на них rdp/nx -клиента на сервер в центре (приложение-то всё равно web-так что отмазка проканалы связи не прокатит?
          • 0
            Ага, примерно так и хотят сделать.
            Но на >20000 машин нужно иметь соответствующие сервера, да ивообще такое не быстро делается, так что пока поддерживаем Firefox 2.
  • +3
    download — это 5! Наконец то можно не делать дополнительные контроллеры (или точки входа) только ради
    header('Content-Type: attachment ....');
    readfile(test.js)
    • +7
      <a href="bigimage.jpg" download="bigimage.exe">Посмотреть рисунок</a>
      
      • 0
        А браузеры разве дают возможность через атрибут download скачать executable файлы? Их же можно просто, без всяких download скачать (прописывая пусть в href). Так зачем поддержать такие файлы в атрибуте download? Я бы на их месте поддержал только те файлы, которые можно открыть в браузере (картинки, текстовые файлы...)
        • НЛО прилетело и опубликовало эту надпись здесь
          • +3
            Ладно, извиняюсь. Вы правы. Мне надо было повнимательнее читать статью…
          • 0
            <a href="bigimage.jpg" download="%USERPROFILE%\Автозагрузка\winlocker.exe">Посмотреть рисунок</a>

            как-то так…
      • 0
        Наверное, вы хотели так:
        <a href="bigimage.exe" download="bigimage.jpg">Посмотреть рисунок</a>
        

        Что бы браузер скачал exe и сохранил как jpg? Но в чём тогда отличае от:

        <a href="bigimage.jpg">Посмотреть рисунок</a>
        

        header('Content-Type: attachment .... filname=bigimage.jpg');
        readfile('virus.exe') ;
        
        • 0
          Можно хостить на статике, php не нужен. Дорого же php запускать.
        • 0
          И какой смысл сохранять вирус в виде картинки? Чтобы она ни одной программой не октрылась и была удалена?
    • +2
      Да ничего хорошего, идет вразрез со спеками хттп
    • –4
      Ну что касается download, гораздо логичнее было бы download=«true», а адрес в href.
      • +1
        Не хотите статью перечитать?
        • +1
          Сорри, перечитал ;)l
    • 0
      юзал download для локального сохранение(результат обработки неких данных) без участия сервера, жаль только в хроме работает
    • 0
      Можно будет не делать. Работает пока только в Хроме.
    • 0
      на самом деле нужнее не имя файла а именно content-type потому что интереснее сразу открыть приложение чем сохранить файл
      а браузеры как-то забивают на расширение файла при установленном content-type, а последний менять средствами httpd не так уж удобно.
  • +11
    А зачем нужен hidden если есть display:none?
    • +7
      Вернемся ко временам отсутствия CSS? Когда все через аттрибуты…
      • +3
        Font)
    • 0
      А ещё есть visibility: hidden и opacity: 0. Хотя, возможно, для чего-то и нужно, например, в JS будет удобнее такие элементы находить.
    • +6
      А зачем нужны header, footer, article и прочие элемент? Все ради семантики.

      Кстати, дублировать в кавычках autofocus=«autofocus» или hidden=«hidden» больше надобности нет, просто <input autofocus /> считается верным. Как и отсутствие кавычек в других атрибутах.
      • 0
        XHTML как бы. Правильнее:
        <input autofocus>
        
        • 0
          Угу, привычка. )
        • НЛО прилетело и опубликовало эту надпись здесь
          • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      А зачем нужен hidden если есть display:none?
      А затем, что записать <div hidden> можно заметно короче (и оттого проще), чем <div style="display: none;">.

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

      Например, в CSS:

      [hidden] { display: none; }
      

      Или в jQuery:

      $('[hidden]').hide();
      

      Второй костыль выглядит как-то надёжнее. Я не уверен, во всех ли старых браузерах в CSS работают не знакомые браузеру атрибуты.
      • +3
        Только может мерцать при загрузке…
        • 0
          Сжимайте страницу gzip'ом, не будет
      • 0
        единственно для чего вижу использование hidden — так это в качестве комментария для временного убирания блоков без полной правки верстки
    • +1
      Кстати, по моему, очень актуальный аттрибут. Постоянная проблема — нужно прятать/показывать разннообразные элементы, у этих самых элементов до черта исходных типов display (от inline, до table). Чтобы спрятать есть унифицированный способ — display: none, а чтобы вернуть обратно, нужно изгаляться и узнавать какой тип отображения был изначально. А visibility: hidden вообще не вариант.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Странно, по моему, в примере по ссылке выше атрибут hidden используется как раз для скрытия/раскрытия элементов.
          • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        не все так банально — display и visiblity работают несколько по разному и иногда приходится пользоваться visibility если надо что бы верстка скорректировалась ( или наоборот, уже сомневаюсь — на память не помню )
        по стандарту нельзя ссылаться на элементы внутри тега с hidden, то есть он работает как комментарий что-ли?
        но при этом допускается его динамическое изменение O_o. При этом DOM должен перестраиваться что-ли ?!

        PS. раньше этот атрибут хотели назвать irrelevant
    • 0
      ага, и с учетом того что разные фреймворки JS пользуются разными атрибутами для скрытия элементов, будет только еще +1 геморой
  • –1
    Жаль datalist не поддерживают Safari и IE, не говоря про мобильные браузеры стандартные.
    • 0
      Более того datalist учитывает регистр букв. мтс != МТС, во всяком случае в Chrome.
      • 0
        было бы полезно иметь аттрибут casesensitive="false"
  • +2
    Спасибо.
  • +1
    Было бы ещё круто добавить в статью что-нибудь вроде таблички, какая фича какими браузерами поддерживается. Про caniuse.com знаю.
    • +3
      И через три недели иметь статью с неактуальной табличкой.
      • +3
        бред. в табличке всегда нужно указывать версии. со временем поддержка фич одной версией не меняется
  • +9
    Неприлично не указывать оригинал
  • 0
    Вместо autofocus=«autofocus» можно просто писать autofocus
    • 0
      Извиняюсь, не заметил совет выше.
  • +4
    autofocus

    Обычно я начинаю что-то вводить еще ДО загрузки страницы, а очередное говно на JS после некоторого момента (догрузится очередной 0-пиксельный счетчик с сайта «партнера») меняет фокус на что-то левое, к примеру поисковую строчку и ввод идет не туда. Или я уже читаю второй экран страницы, а эта гадость фокусирует поле ввода где-то в заголовке. Охота взять и расстрелять. И если раньше помогало отключение JS на таких говносайтах, то теперь ждем расширений от авторов самих браузеров. Помните, что интернет — это не макбук с локалхостом, где вы отлаживаете свой сайт.

    download

    Отличный тег, теперь очень просто будет пользователю дать ссылку на mp3, дабы он схоронил его как exe, ничего на сервере делать не надо.

    prefetch

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

    hidden

    <div hidden="hidden">Секс москва рефераты порно скачать мокрые писечки ильхам зюлькорнеев qip без смс</div>
    


    spellcheck

    Вообще-то есть уже везде и без него. Единственное применение — ОТКЛЮЧАТЬ проверку ввода, можно было бы делать сайты экзаменов.

    datalist

    Сенсация, Т9 со всеми разновидностями, теперь еще и на любом вебсайте! Хотя если посмотреть в стандарт — это фактически просто автозаполнение по набранному тексту, штука полезная, в отличии от всего что есть выше.

    output

    Сейчас видимо нет никакой возможности в какой-то элемент выкинуть результат вычислений. А семантические элементы были где-то в начальные времена HTML4.

    Что я об этом всём думаю

    HTML5 блоатится еще до появления себя в каждом браузере, у нас у всех будет HTML15 и сотни гигагерц, но это в будущем, сразу после долгожданного флешеконца.
    • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      >Обычно я начинаю что-то вводить еще ДО загрузки страницы

      А можно узнать, что именно, куда именно и, собственно, зачем вы начинаете вводить ещё ДО загрузки страницы?
      Или это — могу печатать со скоростью 400 символов в минуту, правда такая фигня получается?..
      • 0
        Ввожу текст (200 символов в минуту) в текстовые поля ввода и взаимодействую с другими интерактивными элементами, которые успели загрузиться. Ибо если у вас сайт открывается за 0.1 секунды, то это не значит, что у других он не будет грузиться полчаса.

        С уважением, К.О.
        • 0
          Которые успели загрузиться — это, очевидно, не ДО загрузки.

          И, это, вы ведь, кэптн, очевидно, вводите ваши 200 символов в первую очередь в первое (или самое важное с кочки зрения сайта) поле, не так ли? Ну, так на него и будет установлен фокус. Причём установлен именно в тот самый момент, когда его браузер отрендерит, а не после загрузки целиком страницы, как в случае с явско-скриптом. Наиболее ожидаемое и разумное поведение, нет?
          • 0
            Нет. Мое мнение — это мое мнение, а не мнение сайта. И куда я ввожу эти 200 символов — мое дело, может быть в сплывающую форму от userjs?

            И да, страницы в 2012 году до сих пор не грузятся за 0.1 секунду, поэтому между «загрузилось и вводим» и «загрузилось все и сработал onload» достаточно ненулевое время, иногда минуты.
            • 0
              И как вы в эту форму попадаете? Поле должно сначала отрендереться, только потом вы сможете в него вводить. А во время рендеринга (или вообще парсинга), эта фича и сработает.

              При чём здесь онлоад — не понимаю, речь как раз о средстве, устраняющем этот кривой механизм.
              • 0
                Там написано, что autofocus сработает после загрузки страницы, а не рендеринга элемента.
                • 0
                  О-о-о! Тогда, сорри. Был не прав… Действительно, фигня какая-то.
          • 0
            Сейчас вспомнил молодость, когда резал все ненужное на страничках. Помню как заменял в страницах обработчики onload/onfocus/onblur на onfuck и наслаждался нормальными страницами. И таких правил у меня было очень много. С тех пор я постарел и обленился, поэтому режу сейчас только несколько сайтов через userjs.
      • +1
        2 случая из моей жизни:

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

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

        • 0
          плюсанул карму
        • 0
          ваш комментарий натолкнул на мысль:
          а если через js определять время загрузки страницы и делать автофокус, только когда загрузка прошла быстрее чем, скажем, 2 сек.
          Засекаем время в начале через <script></script> и второй раз проверяем в ondomready.
          • 0
            Проще всего поставить script блок типа

            document.getElementById('element-to-autofocus-id').focus();

            как можно ближе к элементу для автофокуса. Поправьте меня, если я не прав.

            Но автофокус сам по себе мешает людям, которые хотят скроллить страницу с клавиатуры. Т.е. не везде подойдет.
  • 0
    за некоторые вещи большое вам спасибо :)) это реально круто, пойду себе поставлю
  • 0
    Странно видеть тэг hidden, который описывает отображение, в списке тэгов, которые описывают поведение.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Спасибо за разъяснение
  • 0
    А подскажите наиболее полный сайтик, где будут описываться новые html5 фиги и отображены совместимости с браузерами. caniuse.com не полон.
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Спасибо за статью (= полезно мелкие новые фичи узнавать, когда руки не доходят до полазить по стандарту (=
  • 0
    интересно, а prefetch не даст ли дополнительную лазейку для CSRF и других нехороших хаков?
    Например, запостил я такую ссылку в популярном блоге и получил +100500 посетителей, которые даже об этом не узнали.
    А если эта ссылка на сайт банковской системы, в которой юзер оказался залогинен?
  • +1
    Да, есть полезные фичи. Умрите же скорее, старые браузеры!
  • –1
    Отправил в поддержку своего хостинга запрос с просьбой сделать автофокус при входе в панель управления.
    Спасибо, до вышей статьи даже не задумывался об удобстве этой фичи, теперь везде обращаю внимание.

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