Минимизированные атрибуты HTML5, селекторы и jQuery
После работы с некоторыми атрибутами веб-форм HTML5 в небольшом проекте я пришел к выводу, что на данный момент лучше всего…
Использовать
not <требуется ввод> Немного предыстории. Несколько недель назад я работал над небольшим закрытым веб-сайтом, перегруженным формами, и подумал, что он хорошо подойдет в качестве тестового примера HTML5. По целому ряду технических причин [в частности, форматирование ввода] я не стал вникать в это, используя все различные атрибуты типа ввода, но использовал обязательный атрибут в качестве крючка для проверки формы и стилей на основе JavaScript. Я обнаружил, что в целом была адекватная поддержка стилей и выбора на основе этого нового и неизвестного многим браузерам обязательного атрибута — Yay! мы можем использовать этот материал сегодня! Тем не менее, было несколько странностей браузерного CSS-селектора и jQuery 1.
3.2, которые привели меня к выводу, что безопаснее всего использовать расширенную форму требуемого атрибута, а не свернутую или более короткую форму, как это позволяет HTML5. Это дает вам самые надежные и гибкие варианты выбора селекторов в коде CSS или jQuery.
Тестовые примеры обязательных атрибутов
Я собрал простую тестовую страницу и провел тестирование браузера. Тестовые случаи и таблица результатов размещены здесь.
Из этих тестов видно, что все современные браузеры имеют сильную поддержку в CSS для селектора атрибута и его использования против возможно неизвестного атрибута. Как можно было бы надеяться, они выбирают все обязательные поля, как сокращенные, так и полные, на основе строки [обязательное] [зеленый текст] и только полную форму на основе [обязательное=обязательное] [выделено жирным шрифтом]. Кроме того, Opera 10 также поддерживает выбор на основе псевдоселектора :required .
Загадочное поведение возникает в нескольких сценариях, когда селектор CSS ведет себя правильно, но выбор элементов с помощью библиотеки jQuery и JavaScript для тех же самых селекторов не выполняется.
Это видно в браузерах на основе Firefox 3.0/Gecko 1.9.0, где $("[обязательно]") выбирает только тот случай, когда атрибуту явно задано значение.
Одна из положительных вещей, которую вы увидите в этих тестах, заключается в том, что неизвестное значение атрибута типа ввода (в данном случае type="number" ) не влияет на поведение селектора ни в одном браузере.
Необходимо дополнительное исследование
Связанные тестовые примеры были быстро объединены, и я не тратил время на то, чтобы взглянуть на происходящее с более общей точки зрения. Если кто-то из основных гуру jQuery или движка селектора браузера захочет присоединиться, есть еще несколько вещей, которые я хочу прояснить…
- Отличаются ли результаты теста для минимизированного атрибута, такого как отключенный или проверенный, который может понять браузер, отличный от HTML5?
- Я хотел бы запустить тестовые примеры jQuery для сборки магистрали или ранней сборки 1.
