Разработка Front End после Internet Explorer

• Декорирование Интернета с помощью CSS-изображений границ
• CSS3 Border-Image
• CSS3 Border Images для красивых, гибких рамок

Многостолбцовый макет

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

• CSS3-столбцы и постраничное повторяемое содержимое
• Руководство по адаптивным CSS-колонкам (CSS Tricks)
• Использование многостолбцовых макетов CSS (MDN)

Рем и единицы просмотра

CSS-модули — это большое семейство, хотя большинство разработчиков в основном знакомы с пикселями и (возможно) ems. С большим плохим oldIE, отправленным на пенсию, мы можем теперь получить больше их братьев и сестер, особенно rem и единицы просмотра. Давайте посмотрим, что это за единицы и что мы можем с ними сделать.

• Взгляд на единицы длины в CSS
• Понимание и использование rem Units в CSS

Указатель событий

Долгое время JavaScript был основным способом добавления интерактивности к элементам, кроме ссылок и кнопок. Ситуация изменилась с более широким принятием событий указателя. Хотя их источник лежит в SVG, события указателя позволяют разработчикам указывать, может ли графический элемент реагировать на события мыши. Это может иметь интересные приложения, такие как телескоп Марса для просмотра Олимпийских игр в Лондоне . Ребята из Microsoft также рассматривают события указателя как способ объединения взаимодействия, будь то с помощью касания, мыши, стилуса или графического пера. Давайте посмотрим, что еще мы можем с ними сделать:

• CSS3 Gems: Свойство указателя-события
• Как события указателя облегчат поддержку кросс-браузерного касания
• Объединение Touch и Mouse с событиями указателя

SVG Filters

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

Ну, теперь вы можете дать бедному парню (или девушке) заслуженный перерыв. Все современные браузеры поддерживают функцию, называемую svg-filters которая позволяет вам воссоздать большинство эффектов, которые ранее требовали редактора изображений. Хотя вы не совсем можете найти Photoshop на веб-странице, все не так уж далеко. Не веришь мне? Взгляните на эту демонстрацию, размещенную на GitHub: FILDROP — SVG Filters . Довольно аккуратно, правда?

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

2. Особенности HTML5

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

Автофокус

Этот атрибут делает именно то, что говорит имя — он помещает фокус внутрь ввода. Подумайте, как вы можете печатать напрямую, когда попадете на страницу поиска Google (обратите внимание — они используют другое решение). Если вы хотите интегрировать запасной вариант с использованием JavaScript, обязательно используйте событие DOM ready вместо window.load . Это не очень хорошая идея, чтобы страница переходила к месту ввода (и, возможно, даже отображала экранную клавиатуру), когда пользователь уже начал взаимодействовать с контентом.

Для получения дополнительной информации вы можете проверить следующие ресурсы:

• 6 отличных, экономящих время атрибутов HTML
• HTML5 и даже более интересные формы
• Атрибут ввода: автофокус (HTML5Tutorial.info)

classList (DOMTokenList)

Управление классами в элементе DOM не новая идея. В доказательство популярности (и полезности) jQuery имеет отличную поддержку этих действий за счет переноса всей библиотеки. Встроенная поддержка DOMTokenList позволяет выполнять те же операции быстрее и эффективнее. Хотя поддержка в IE11 не завершена на 100%, это не должно помешать вам изучить возможности, предоставляемые этой функцией.

Чтобы лучше понять детали DOMTokenList, вы можете обратиться к следующим ресурсам:

• Изучение API classList
• ClassList API (HTML5Doctor)
• Element.classList (MDN)

Атрибуты набора данных и данных- *

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

Если вам необходимо обновить встроенную поддержку атрибутов dataset и data-* , вы можете начать со следующих ресурсов:

• Управление пользовательскими данными с помощью API набора данных HTML5
• Как использовать атрибуты данных HTML5
• Использование атрибутов данных (MDN)

Типы ввода электронной почты, телефона и URL

Проверка формы всегда вызывала головные боли у веб-разработчиков во всем мире. Сколько раз вы искали в Интернете идеальное регулярное выражение для проверки электронной почты? К счастью, API ограничения HTML5 может облегчить эту задачу при минимальном использовании JavaScript с помощью типов ввода email , telephone или URL . Вот несколько примеров того, как это сделать:

• Использование HTML5 Constraint API для проверки формы
• Проверка формы HTML5
• Проверка формы данных (MDN)

Блестящие новые атрибуты: скрытый, заполнитель, проверка орфографии, шаблон

HTML5 предоставил набор новых полезных атрибутов, предназначенных для обеспечения собственной поддержки некоторых методов, которые обычно интегрируются с использованием JavaScript. Большинство из них расширяют функциональность полей ввода, повышая удобство использования и процесс проверки. Хотя ни один из них не является настоящим сюрпризом (существовавшим уже некоторое время), теперь они впервые получают такую ​​широкую поддержку, которая позволяет легко использовать их без развертывания полифилл. Если вам нужно обновить проверку на стороне клиента HTML5, обратитесь к этой статье — Проверка формы на стороне клиента с помощью HTML5 . В противном случае, давайте посмотрим, что в списке:

1. «Скрытый» атрибут — это на самом деле ответвление CSS, так как он ведет себя точно так же, как display: none . Его можно даже переопределить с помощью CSS с помощью свойства display и применить к любому элементу HTML. Как решение, оно более семантически правильно и должно более эффективно помогать программам чтения с экрана.
2. Атрибут «Шаблон» — автоматическая проверка некоторых полей не может быть стандартизирована. Давайте рассмотрим <input type="tel"> . Форматы телефонов отличаются от страны к стране, поэтому у вас не может быть общей модели проверки. Вот тут и вступает в силу атрибут pattern . Вы можете указать в качестве значения регулярное выражение, и браузер будет использовать его для проверки введенных пользователем данных. Для большой коллекции различных шаблонов вы должны проверить HTML5Pattern .
3. Атрибут Placeholder — Атрибут placeholder указывает краткую подсказку, которая описывает ожидаемое значение поля ввода. Некоторые люди даже используют их в качестве замены для ярлыков, но это открывает массу проблем с удобством использования — после заполнения полей заполнитель исчезает. Из-за отсутствия видимых ярлыков это может привести к путанице. Несмотря на то, что при разумном использовании существует много возможностей для злоупотреблений, заполнитель может дать много полезных советов пользователю.
4. Атрибут «Проверка орфографии» — мы уже привыкли видеть, как текстовые зоны делают исправление проверки орфографии над текстом, который мы пишем. Большинство разработчиков не знают, что вы можете управлять этой функцией, включать или выключать ее и даже включать в обычные поля ввода текста. Почему вы хотите сделать это, спросите вы? Возможно, вы захотите проверить орфографию запроса в поле поиска или отключить функцию, например, когда текстовая область используется для ввода кода. Более подробную информацию вы можете найти в следующей статье Mozilla Developer Network — Управление проверкой орфографии в формах HTML .

Новые семантические элементы

Семантические элементы в HTML5 тесно связаны с машинной обработкой веб-контента, с двумя основными областями, которые приносят наибольшую выгоду: с одной стороны, индексирование и поисковые системы, а с другой — вспомогательные технологии. Поддержка все еще не на 100%, есть небольшие икоты, и выбор правильного элемента в каждом случае может быть пугающим в начале. Дискуссии по поводу вариантов использования по-прежнему сильны, и каждый из нас должен выбрать, сколько из этих элементов мы развернем и где. На HTML5Doctor.com есть отличная статья на тему семантики HTML5 с большим количеством информации и указанием на множество соответствующих ресурсов.

PNG favicons

Еще в 1999 году Internet Explorer 5 представил новую функцию, называемую favicon — крошечное изображение, которое находится рядом с URL-адресом веб-сайта в адресной строке, в списке закладок и, совсем недавно, на вкладке, где загружается веб-сайт. Старый формат .ico все еще имеет степень универсальности (он может инкапсулировать несколько форматов изображений в 16 × 16, 32 × 32 и 48 × 48 пикселей), но он устарел в эпоху экранов высокой плотности. Не бойтесь, хотя, как теперь вы можете использовать изображения PNG в качестве значков. Просто следите за особенностями каждого браузера, как они подробно описаны в этой замечательной статье о хитростях CSS .

Элемент прогресса

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

• Элемент прогресса HTML5 (CSS-хитрости)
• Элемент <progress> (MDN)

Тип ввода диапазона (ползунки)

Как и элемент прогресса, о котором мы упоминали выше, ползунки на протяжении десятилетий были еще одной константой на экранах компьютеров. Посадка на веб-страницы также не заняла много времени с помощью различных решений JavaScript. Наконец, теперь вы можете создавать собственные элементы управления слайдами с помощью одного тега HTML. Есть несколько ситуаций, когда этот элемент является наиболее интуитивным решением. Узнайте, как и когда его использовать:

• Тип ввода: диапазон (HTML5Tutorial.info)
• Как оформить слайдер диапазона HTML5 в нескольких браузерах (Hongkiat.com)
• Игра с ползунком ввода HTML5 (новый код)

Песочница Ифраме

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

Здесь вступает в игру режим песочницы для iframes. Он инструктирует браузер сокращать привилегии (например, запускать JavaScript или запускать всплывающие окна). Обе команды Microsoft и Chromium зарегистрировали эту функцию для вашего удобства:

• Как защитить свой сайт с помощью песочницы HTML5 (MSDN)
• Безопасность в глубине: HTML5’s @sandbox (Chromium Blog)

Управление историей сессий

Поведение веб-сайта «старой школы» заключается в том, что при загрузке новых страниц URL-адреса меняются и сохраняются в истории браузера. Благодаря этому вы можете переходить по истории, когда вы хотите еще раз взглянуть на страницу, с которой вы только что удалились. Появление «одностраничных приложений» поставило перед собой сложную задачу — все происходит на одной странице через вызовы AJAX, но нам все еще нужны отдельные URL-адреса для различных состояний приложения. Эта popstate решается с помощью последних обновлений управления историей, а именно popstate события popstate , методы history.pushState и history.replaceState . Вы можете проверить следующие ресурсы для углубленного анализа функции:

• Более рациональное управление историей HTML5 (AdequatelyGood.com)
• Управление историей браузера (MDN)

Вывод

Это был довольно большой список, и я все еще коплю примерно такую ​​же сумму для другой статьи. Ни одна из функций, описанных в этой статье, не является новой. Большинство из них были доступны, так или иначе, в течение нескольких лет. Что изменилось, так это встроенная поддержка в основных браузерах, а также сокращение доли рынка для oldIE . Наиболее важным последствием является то, что в большинстве случаев нам больше не нужны бесчисленные решения для заполнения. Так что взгляните на аналитику своего сайта и, если возможно, отбросьте учебные колеса по полифиллу и используйте все возможности современных браузеров. Ваши клиенты будут благодарны за улучшение производительности и опыта.