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

[Methos]

Хороший перевод статьи, спасибо. Читал неделю назад.

Ещё есть «The placeholder Attribute», " range Input Type", «The datetime, datetime-local, date, week and week Input Types», «The color Input Type»

[krovatti]

Да, в недавнем дайджесте была. Только что выложил перевод, т.к. коннекта не было.

[xnim]

Все хорошо, понятно, но мне лично интересно — ведь при включенном атрибуте spellcheck проверка происходит «средствами» браузера? Тогда закономерный вопрос — в чем профит данного атрибута, если бОльшинство популярных браузеров по умолчанию имеют словари (кои можно настраивать на свой вкус) Или я где-то ошибаюсь — поправьте меня. ..(может есть возможность предоставлять словари или т.п.?)

[nazarpc]

К примеру, можете отключить spellcheck в определённых элементах, отменив поведение браузера по-умолчанию.

[xnim]

Проверил. Да так оно и есть. хм… применение… самый то для тестов по языкознанию\грамматике\орфографии… Больше правда сфер применения не нащупываю

[VolCh]

Поля для ввода кодовых фраз, да и просто ФИО — раздражает когда спеллчеккер фамилию подчеркивает.

[ibnteo]

На падонкаффских форумах.

[BupycNet]

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

[AnGr]

позволяет забабахать хорошую фичу в одну-две строки

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

С другой стороны фичи милые и полезные! Вот правда не вижу особого смысла в hidden…

[AnGr]

А 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 переходить?

Нет, я согласна со своим тех.лидом, что это не повод их не использовать… Но…

[noys]

В начале статьи ссылка на прекрасную тулзу.

[AnGr]

Подскажите, пожалуйста, где же посмотреть самую представительную статистику по Рунету? Еще бы по Байнету… LI?
Это не сарказм, это чисто женское любопытство.

[AnGr]

Спасибо. Посмотрела. Но, как не посмотри на эту статистику, нельзя списывать IE со счетов…

[AnGr]

С этим подходом абсолютно не спорю. Я его вполне поддерживаю. Не всегда проект такой, что можно доказать заказчику, что пропавшие уголки — это ничего страшного, и что пользователь сам себе злобный Буратина.

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

Не будем переливать из пустого в порожнее. Фичи полезные и красивые :) И я, на самом деле, их применяю! :)

[t80]

Микрософт удивительная контора всё таки.

[PyroRed]

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

[Goodkat]

Но в итоге всё равно придётся поддерживать SeaMonkey и Firefox 2, потому что где-нибудь на рабочих местах на другом конце страны найдётся пара сотен машин с древним OpenSUSE, на который более новые версии Firefox не встают из принципа, а накатить новую операционку вам никто не даст, не в последнюю очередь потому что железо не потянет, а покупка пары сотен машин никак не уложится в бюджет вашего корпоративного приложения. :)

[mihmig]

Хм, итак:
1. Большая организация (>200 машин)
2. Слабые машины в регионе(ах) ниже 1ГГц celeron-ов <512MB ОЗУ (так, что даже icewm не тянут)
что мешает поставить на них rdp/nx -клиента на сервер в центре (приложение-то всё равно web-так что отмазка проканалы связи не прокатит?

[Goodkat]

Ага, примерно так и хотят сделать.
Но на >20000 машин нужно иметь соответствующие сервера, да ивообще такое не быстро делается, так что пока поддерживаем Firefox 2.

[resurection]

download — это 5! Наконец то можно не делать дополнительные контроллеры (или точки входа) только ради
header('Content-Type: attachment ....');
readfile(test.js)

[kratkar]

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

[m_hamlet]

А браузеры разве дают возможность через атрибут download скачать executable файлы? Их же можно просто, без всяких download скачать (прописывая пусть в href). Так зачем поддержать такие файлы в атрибуте download? Я бы на их месте поддержал только те файлы, которые можно открыть в браузере (картинки, текстовые файлы...)

[m_hamlet]

Ладно, извиняюсь. Вы правы. Мне надо было повнимательнее читать статью…

[mihmig]

<a href="bigimage.jpg" download="%USERPROFILE%\Автозагрузка\winlocker.exe">Посмотреть рисунок</a>

как-то так…

[resurection]

Наверное, вы хотели так:

<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') ;

[iFrolov]

Можно хостить на статике, php не нужен. Дорого же php запускать.

[bazzilic]

И какой смысл сохранять вирус в виде картинки? Чтобы она ни одной программой не октрылась и была удалена?

[nikita2206]

Да ничего хорошего, идет вразрез со спеками хттп

[Keyten]

Ну что касается download, гораздо логичнее было бы download=«true», а адрес в href.

[krovatti]

Не хотите статью перечитать?

[Keyten]

Сорри, перечитал ;)l

[GMM]

юзал download для локального сохранение(результат обработки неких данных) без участия сервера, жаль только в хроме работает

[Wott]

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

[Evengard]

А зачем нужен hidden если есть display:none?

[AnGr]

Вернемся ко временам отсутствия CSS? Когда все через аттрибуты…

[Dobrii]

Font)

[nazarpc]

А ещё есть visibility: hidden и opacity: 0. Хотя, возможно, для чего-то и нужно, например, в JS будет удобнее такие элементы находить.

[Prophet]

dev.w3.org/html5/spec/single-page.html#the-hidden-attribute

[DeMx]

А зачем нужны header, footer, article и прочие элемент? Все ради семантики.

Кстати, дублировать в кавычках autofocus=«autofocus» или hidden=«hidden» больше надобности нет, просто <input autofocus /> считается верным. Как и отсутствие кавычек в других атрибутах.

[kratkar]

XHTML как бы. Правильнее:

<input autofocus>

[DeMx]

Угу, привычка. )

[Mithgol]

А зачем нужен hidden если есть display:none?

А затем, что записать <div hidden> можно заметно короче (и оттого проще), чем <div style="display: none;">.

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

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

[hidden] { display: none; }

Или в jQuery:

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

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

[vitalets]

Только может мерцать при загрузке…

[dasty]

Сжимайте страницу gzip'ом, не будет

[Wott]

единственно для чего вижу использование hidden — так это в качестве комментария для временного убирания блоков без полной правки верстки

[bassdrum]

Кстати, по моему, очень актуальный аттрибут. Постоянная проблема — нужно прятать/показывать разннообразные элементы, у этих самых элементов до черта исходных типов display (от inline, до table). Чтобы спрятать есть унифицированный способ — display: none, а чтобы вернуть обратно, нужно изгаляться и узнавать какой тип отображения был изначально. А visibility: hidden вообще не вариант.

[Wott]

не все так банально — display и visiblity работают несколько по разному и иногда приходится пользоваться visibility если надо что бы верстка скорректировалась ( или наоборот, уже сомневаюсь — на память не помню )
по стандарту нельзя ссылаться на элементы внутри тега с hidden, то есть он работает как комментарий что-ли?
но при этом допускается его динамическое изменение O_o. При этом DOM должен перестраиваться что-ли ?!

PS. раньше этот атрибут хотели назвать irrelevant

[Wott]

ага, и с учетом того что разные фреймворки JS пользуются разными атрибутами для скрытия элементов, будет только еще +1 геморой

[masterrr]

Жаль datalist не поддерживают Safari и IE, не говоря про мобильные браузеры стандартные.

[Piterski]

Более того datalist учитывает регистр букв. мтс != МТС, во всяком случае в Chrome.

[vitalets]

было бы полезно иметь аттрибут casesensitive="false"

[amarao]

Спасибо.

[mikenerevarin]

Было бы ещё круто добавить в статью что-нибудь вроде таблички, какая фича какими браузерами поддерживается. Про caniuse.com знаю.

[anmi]

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

[philpirj]

Неприлично не указывать оригинал

[CyberAP]

Вместо autofocus=«autofocus» можно просто писать autofocus

[CyberAP]

Извиняюсь, не заметил совет выше.

[iFrolov]

autofocus

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

download

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

prefetch

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

hidden

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

spellcheck

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

datalist

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

output

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

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

HTML5 блоатится еще до появления себя в каждом браузере, у нас у всех будет HTML15 и сотни гигагерц, но это в будущем, сразу после долгожданного флешеконца.

[dime]

>Обычно я начинаю что-то вводить еще ДО загрузки страницы

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

[iFrolov]

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

С уважением, К.О.

[dime]

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

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

[iFrolov]

Нет. Мое мнение — это мое мнение, а не мнение сайта. И куда я ввожу эти 200 символов — мое дело, может быть в сплывающую форму от userjs?

И да, страницы в 2012 году до сих пор не грузятся за 0.1 секунду, поэтому между «загрузилось и вводим» и «загрузилось все и сработал onload» достаточно ненулевое время, иногда минуты.

[dime]

И как вы в эту форму попадаете? Поле должно сначала отрендереться, только потом вы сможете в него вводить. А во время рендеринга (или вообще парсинга), эта фича и сработает.

При чём здесь онлоад — не понимаю, речь как раз о средстве, устраняющем этот кривой механизм.

[MagicWolf]

Там написано, что autofocus сработает после загрузки страницы, а не рендеринга элемента.

[dime]

О-о-о! Тогда, сорри. Был не прав… Действительно, фигня какая-то.

[iFrolov]

Сейчас вспомнил молодость, когда резал все ненужное на страничках. Помню как заменял в страницах обработчики onload/onfocus/onblur на onfuck и наслаждался нормальными страницами. И таких правил у меня было очень много. С тех пор я постарел и обленился, поэтому режу сейчас только несколько сайтов через userjs.

[MagicWolf]

2 случая из моей жизни:

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

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

[iFrolov]

плюсанул карму

[vitalets]

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

[MagicWolf]

Проще всего поставить script блок типа

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

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

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

[sogologo]

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

[savostin]

Странно видеть тэг hidden, который описывает отображение, в списке тэгов, которые описывают поведение.

[savostin]

Спасибо за разъяснение

[Istergul]

А подскажите наиболее полный сайтик, где будут описываться новые html5 фиги и отображены совместимости с браузерами. caniuse.com не полон.

[demiazz]

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

[vitalets]

интересно, а prefetch не даст ли дополнительную лазейку для CSRF и других нехороших хаков?
Например, запостил я такую ссылку в популярном блоге и получил +100500 посетителей, которые даже об этом не узнали.
А если эта ссылка на сайт банковской системы, в которой юзер оказался залогинен?

[vitalets]

Нашел на хабре старенькую статью на эту тему
habrahabr.ru/post/74123/

[Badevlad]

Да, есть полезные фичи. Умрите же скорее, старые браузеры!

[M1nstrel]

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