От автора: добро пожаловать во вторую часть этой небольшой серии статьей, посвященной «началу конца» того, что сообщество разработчиков называет oldIE (т.е. IE вплоть до версии 10). В первой статье были представлены устаревшие техники и практики, от которых уже можно отказаться для упрощения процесса front-end разработки. Статья вызвала довольно интересную дискуссию в комментариях, что побудило меня добавить дисклеймер (который следовало бы добавить и в первую статью задним числом).
Отказ от поддержки oldIE не является темой этой серии статей. Я выражаю вам свою симпатию, если специфика вашего сайта не дает вам отказаться от поддержки. Если же вы можете навсегда распрощаться с этой главой нашей жизни, то присоединяйтесь к нам.
Как сказано выше, сегодня мы рассмотрим длинный список современных функций, которыми можно свободно пользоваться. Большое спасибо создателям сайта CanIUse.com – без их замечательного инструмента эту статью было бы намного сложнее составлять. Все функции мы разобьем на 4 основных группы:
Современные CSS свойства и функции;
HTML5 функции;
JavaScript функции…
… и все то, что не подходит под категории выше.
1. Современные CSS свойства и функции
Основным источником жалоб при работе с oldIE была плохая поддержка современных CSS свойств и функций из-за нечастых обновлений. Начать наш рассказ стоит именно с этой части.
Flexbox
Flexbox – третий по счету важный этап в создании веб-макета после таблиц и обтеканий. В Foundation 6 уже сейчас есть сетки на основе Flexbox, и в будущей Bootstrap 4 также будет эта функция. Есть еще много вариаций маленьких сеток на основе Flexbox, о некоторых из них уже говорилось на сайте SitePoint, например sGrid.
С сетками до сих пор много проблем и багов (особенно с вариантом для IE11), благо все они хорошо задокументированы, и люди могут найти способы их решения. Поэтому если вам еще не довелось поработать с сетками, то пора поэкспериментировать с Flexbox и начать работать с ним в своих проектах.
CSS градиенты
С помощью CSS градиентов можно создавать плавные переходы между двумя и более цветами. Немного креатива и вы сможете создать шаблон, который можно будет повторять, как background-image. Больше не нужно нарезать изображения для фонов, кнопок или других UI элементов. С этим может справиться градиент.
CSS анимация
Очень долгое время анимация в интернете работала на Flash и JS. CSS3 модуль Animation Module добавил еще один способ. Flash стоит в сторонке. Основное преимущество CSS анимации над ее JS собратом в том, что анимация выполняется в разных потоках, не блокируя другие скрипты на странице. Не все свойства можно анимировать, а некоторые сильнее других влияют на производительность. В современных браузерах с анимацией немного легче обстоят дела, в них присутствует встроенная поддержка аппаратного ускорения. Т.е. при правильной настройке свойства CSS анимация может быть очень плавной (минимум 60FPS) и с минимальной нагрузкой на производительность. Эта тема еще совсем недавно была крайне популярна на сайте SitePoint, было написано множество статей по тонкой настройке CSS анимации.
2D/3D трансформации и плавные переходы
Трансформации и плавные переходы являются основными строительными кирпичиками в CSS анимации. При должном подходе и вниманию к деталям можно делать то, для чего раньше нужен был Flash. Это не единственная из техник по современной анимации на сегодняшний день (есть также SVG, Canvas, на ум приходят еще различные JS техники), но самая простая в изучении, использовании и работе в целом.
Свойство border image
Проще всего изменить рамку элемента с помощью свойства border-style. Во времена oldIE единственным способом добавить какие-либо декоративные элементы (как пользовательские рамки) был сложная разметка с нарезанными изображениями. Сегодня же можно воспользоваться свойством border-image. Свойство берет изображение, виртуально разрезает его на кусочки и из этих кусочков составляет рамку. От старой техники почти не отличается, но теперь не нужна сложная разметка, и используется всего одно изображение.
Многоколоночный макет
Несмотря на популярность интернета, печатные журналы сохраняют свое очарование – причина этому хорошо созданный макет, зачастую разбитый на много колонок. В сети долгое время пытались имитировать фишки печатного мира. И сегодня мы пожинаем первые плоды этих усилий, теперь мы можем перемещать контент в несколько колонок.
Rem и единицы измерения vw
CSS единицы измерения это очень большая семья, несмотря на то, что большинство разработчиков знакомы только с пикселями и, возможно, em. Поддержка oldIE ушла в прошлое, и теперь можно использовать и другие единицы измерения, особенно rem и vw.
События мыши
Долгое время JS помимо ссылок и кнопок был единственным способом создания интерактивности. Все изменилось с появлением событий для указателя мыши. Изначально эти события появились в SVG, но с их помощью разработчик может создавать события мыши для графических элементов (можно указывать, когда их выполнять, а когда нет, и выполнять ли вообще). Данным событиям можно найти довольно интересное применение, как на сайте Mars telescope to view the London Olympics. Ребята из Microsoft смотрят на события мыши, как на способ унификации интерактивной составляющей, будь-то прикосновение, мышь, стилус или графическая ручка.
SVG фильтры
Несмотря на весь прогресс, все новые техники и шрифты для манипуляции изображениями, для создания какого-либо привлекательного эффекта мы используем графические редакторы. Если нам нужно перемешать цвета, создать текстовый эффект или добавить маску, мы бежим к дизайнеру и просим его об этом.
Теперь бедолаги дизайнеры могут отдохнуть. Все современные браузеры поддерживают свойство svg-filters, с помощью которого можно создавать большую часть эффектов, которые раньше требовали запуска графического редактора. Пока что это не веб версия фотошоп, но уже что-то близкое. Не верите? Взгляните на демо с GitHub: FILDROP – SVG Filters.
Неплохо, да?
2. HTML5 свойства
HTML5 дал нам больше, чем просто набор новых тегов и атрибутов – появилась родная поддержка некоторых действий, для которых раньше требовался JS или другие скрипты. Посмотрим, с чем вы теперь можем поиграться.
Атрибут autofocus
Атрибут делает ровным счетом то, что заложено в его названии – он ставит инпут в фокус. Подумайте, почему вы сразу можете набирать текст при заходе на сайт Google (гугл использует разные способы). Если вы хотите добавить фолбэк с JS, то используйте DOM ready события, а не window.load. Нехорошо, когда фокус автоматом перепрыгивает на инпут (в некоторых случаях даже вызывает экранную клавиатуру), а пользователь хочет нажать на контент.
classList (DOMTokenList)
Изменение классов элементов DOM не новая идея. Как доказательство можно привести тот факт, что в JQuery для этого используется целая библиотека. Встроенная поддержка DOMTokenList позволяет делать те же операции гораздо быстрее и эффективнее. Поддержка в IE11 не 100%, но это не должно вас останавливать.
Атрибуты Dataset & data-*
Хранить данные в разметке придумали очень давно. Разработчики делали это сначала с помощью пользовательских классов, потом с помощью атрибута data-*. Тут очень пригодится JQuery с его .data(). Хотя в нашем примере можно вообще не использовать JQuery, а работать с встроенной поддержкой data-*.
Email, telephone и URL типы поля input
Валидация форм всегда вызывала у разработчиков головную боль. Сколько раз вы гуглили в сети идеальные регулярные выражения для проверки email? К нашему счастью HTML5 Constraint API делает эту задачу намного проще и почти без JS с помощью типов email, telephone и URL.
Новые атрибуты: hidden, placeholder, spellcheck, pattern
С HTML5 появился набор новых полезных атрибутов, которые обеспечивают родную поддержку некоторых техник, для которых раньше требовалась интеграция с JS. Большинство из них расширяют функционал полей input, повышая юзабилити и улучшая процесс валидации. Все свойства уже были давно известны, но только сейчас они получили столь широкую поддержку. Теперь их можно использовать без полифилов. Рассмотрим наши атрибуты:
Атрибут hidden – вариация CSS, работает как display: none. Данный атрибут даже можно переписать с помощью CSS свойства display, и его можно применить к любому HTML элементу. Данный вариант более семантически правильный и больше подходит для скрин ридеров.
Атрибут pattern – у некоторых полей нельзя стандартизировать автоматическую валидацию. Рассмотрим пример <input type=»tel»>. Формат номера телефона в разных странах разный, так что вы не сможете подобрать общую модель валидации. Вот тут нам и поможет атрибут pattern. В его значение можно занести регулярное выражение, которое будет использоваться браузером для валидации данных от пользователя. На сайте HTML5Pattern есть множество готовых шаблонов для вашей коллекции.
Атрибут placeholder – Задает короткую подсказку ожидаемых на ввод данных. Некоторые даже используют этот атрибут вместо лейблов, но такой подход чреват проблемами с юзабилити. После ввода данных плейсхолдер пропадает. А если еще отсутствует лейбл, пользователь может просто запутаться. С данным атрибутом очень легко ошибиться, но все же при должном подходе плейсхолдер может сильно помочь пользователю.
Атрибут spellcheck – В предыдущих статьях мы видели, как поля textarea проверяют орфографию написанного текста. Большинство разработчиков не знают, но эту функцию можно контролировать: ее можно включать, выключать и даже прикреплять к обычным инпутам. Вы можете спросить, а зачем мне это делать? Данная функция может потребоваться для проверки орфографии поля поиска, а отключать ее можно, если в textarea необходимо ввести какой-либо код.
Новые семантические элементы
Семантические элементы в HTML5 тесно связаны с машинной обработкой контента. Больше других эти элементы используются движками индексации и поиска и вспомогательными технологиями. Поддержка все еще не 100%, то тут, то там выскакивают ошибки, а по началу выбор правильного элемента может вызвать трудности. Споры вокруг этих элементов идут до сих пор, и тут каждый сам решает, как часто и где вставлять семантические элементы.
PNG фавиконы
В далеком 1999 IE5 представил новую функцию favicon – небольшое изображение рядом с URL веб-сайта в адресной строке, в списке закладок, а с недавних пор и во вкладках. Старый формат .ico все еще очень универсален (он может хранить в себе несколько форматов изображения 16×16, 32×32 and 48×48 пикселей). Однако в эпоху экранов с высокой плотностью пикселей данный формат явно устарел. Но не волнуйтесь, теперь в качестве фавикона можно использовать PNG изображения. Просто необходимо смотреть небольшие различия во всех браузерах.
Прогресс бары
Прогресс бары были на экране всегда, с рождения самой первой графической операционной системы. В интернете есть несколько вариантов прогресс баров. На сегодняшний день мы можем использовать встроенный тег для создания прогресс бара, нужно лишь уделять внимание особенностям отображения в различных браузерах.
Input тип range (слайдеры)
Как и прогресс бары, слайдеры крутились на экранах компьютеров на протяжении десятилетий. И через некоторое время слайдеры перекочевали в интернет при помощи различных JS решений. А теперь слайдеры можно создавать с помощью встроенного тега. Данный элемент во многих случаях будет самым лучшим интуитивным решением.
Iframe sandbox
За последнее время iframe’ы стали крайне популярны, хотя конечный пользователь редко обращает на них внимание. Социал медиа плагины, баннеры и другая реклама – все это в конечном счете открывает iframe элемент для отображения контента. Такое количество лазеек на вашем сайте играет на руку злоумышленникам.
Тут нам поможет режим sandbox для тега iframe, который говорит браузеру, что нужно убрать привилегии для данного элемента (такие как запуск JS или всплывающих окон). Для удобства обе команды Microsoft и Chromium задокументировали эту функцию.
Управление историей сессии
Сохранение URL в историю браузера при открытии новой страницы уже олд скул. Такой подход позволяет вернуться на предыдущую страницу или наоборот перейти вперед. С ростом популярность одностраничных приложений появилась большая проблема – все происходит на одной странице с помощью AJAX запросов. Значит нам нужны разные URL’ы для разных состояний приложения. Данная проблема была решена с последним обновлением события popstate: методы history.pushState и history.replaceState.
Заключение
Вот такой вот список, примерно столько же я оставил для следующей статьи. Все описанные в этой статье функции не являются чем-то новым. Большая их часть уже была доступна в том или ином виде пару лет. Изменилась только встроенная поддержка в современных браузерах, а также доля рынка браузеров семейства oldIE. Основной вывод в том, что теперь нам не нужно несчетное количество полифилов. Проверьте аналитику своего веб-сайта, и, если возможно, выбросите костыли, а вместо них используйте возможности современных браузеров. Ваши пользователи скажут вам спасибо за возросшую производительность и улучшенный опыт.
Автор: Adrian Sandu
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
