Полезные сниппеты на HTML5

[Dima_Sharihin]

Просится перечень браузеров, где эти вещи поддерживаются

[Tairesh]

Пожалуйста.

[kriptomen]

Похожая статья: habrahabr.ru/post/153613/
Подробнее про prefetch habrahabr.ru/post/151197/

[Nikitascr]

Вот тут — htmlbook.ru/html5 можно найти все в более развернутом варианте.
Да и более интересные вещи там тоже описаны.

[FranklinDKitamory]

Судя по поддержке, таки 10 ИЕ вполне себе браузер :)

Не понял полезности «Кастомное контекстное меню» нет вещь конечно хорошая, но поддержка only firefox, да ещё и хромающая… хотя надеюсь это лишь временно.

[Mithgol]

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
    <option value="MooTools">
    <option value="Moobile">
    <option value="Dojo Toolkit">
    <option value="jQuery">
    <option value="YUI">
</datalist>

А вот я бы опасался иметь два таких элемента, у которых id одного идентичен name другого…

[Grammka]

What?? Может тогда еще опасаться одинаковый for / id у label / input ?=)

[Grammka]

Не знал)) значит везло, раз не сталкивался с такой проблемой)

[Tairesh]

О_о даже я (93-го года рождения) с ней сталкивался!

[m0sk1t]

С какой проблемой? Чёртово НЛО скрывает самое интересное)))

[uaoleg]

Для datalist есть классный аналог в Bootstrap.

[zapimir]

Та практически для всего есть классные аналоги. Особо убого выглядят стандартные поля для ввода даты. Уж лучше прикрутить JS календарик, который и в дизайн будет нормально вписываться, и выглядеть везде одинаково будет.

[uaoleg]

Это да. Но самое наболевшее — загрузка файлов :)

[Moor]

Ну так вот же ж

[uaoleg]

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

[Moor]

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

[walkman7]

Вы не поверите, но таких аналогов куча. Но это не совсем аналоги, так как из подобных плагинов и взята идея автодополнения. А datalist это реализация на чистом HTML.

[uaoleg]

Асолютно согласен. Я просто поделился решением, которое визуально работает очень схоже, при этом уже сейчас во всех браузерах (IE7+). Да ещё и более кастомизируемое. А то что datalist — это нативный HTML, а Bootstarp Typeahead — нет, это я понимаю.

[palkan]

Про <audio> стоит заметить, что mp3 не поддерживается в FF и Опере (то есть приведенный в посте код не соответствует табличке соответствия). И ни один формат не поддерживается сразу во всех популярных браузерах (табличка). Так что либо backoff на Flash в FF (при использовании mp3), либо конвертация аудио в пару форматов.

[tushev]

Если какая то фича не поддерживается во ВСЕХ браузерах, включая распространенные старые Internet Explorer-ы, то для большинства проектов, применять ее нельзя. А судя по красным ячейкам в приведенных табличках, большинство этих функций бесполезны :-(

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

[VolCh]

Многие фичи в html5 опциональны (и специально так спроектированы) — пользователи новых браузеров получат большее удобство, пользователи старых не потеряют возможность пользоваться даже без особых стараний фронтендера. Скажем input с type=«email/url» и required станет простым input (text по дефолту), а валидировать на сервере все равно нужно, поэтому на отдельную клиентскую валидацию можно забить — старые получат ошибку от сервера, новые от браузера, а на ошибки от JS можно забить

[tushev]

И после этого я получаю от заказчика следующее:
— Клиентская валидация под браузером А вообще не работает!
— Инвалидное поле под браузером В выглядит не так, как под браузером С!
— Исправляйте эти баги, и учитесь писать кроссбраузерный код!

Обидно!

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

<input type="text" data-validator="email" data-invalid-message="Некорректный email" data-required="yes" />

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

[VolCh]

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

Это плагин какой-то? У знакомых немного другой синтаксис. А чисто на JS не уложиться, по-моему, в несколько строк.

[tushev]

При согласовании список поддерживаемых браузеров звучит как «Все распространенные на данный момент браузеры».

Я имел ввиду, если самому реализовывать. В простейшем случае можно написать что то типа того:

// При сабмите любой формы
$('form').submit(function(){ 
    var valid = true;
    // Пробежаться по всем полям
    $('input', this).each(function(){ 
        $(this).removeClass('invalid'); 
        // Если есть специальный аттрибут, то проверить условие
        if($(this).attr('data-requered') == 'yes' && (this).val() == '') {
            // Помечаем поле как инвалидное, может быть еще alert-ом ругаемся
            $(this).addClass('invalid'); 
            ...
            valid = false;            
        }        
        // Другие валидаторы, например через RegExp, минимальная длинна, пользовательская функция, совпадение с другим полем (для паролей) и т.п.
        if(...) {
        ...
        }
    });    
    return vaild;
});

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

[Finom]

Datalist очень разочаровал отсутствием каких-либо особенных для этого элемента методов. Например, о динамическом автозаполнении (jQuery.ui.autocomplete или Bootstrap jQuery.typeahead) при помощи аякса можно забыть.