Новинки Front-end в 2017 году
HTML 5.1
1 ноября 2016 года W3C перевела статус документации по HTML 5.1 в статус рекомендованных, а это значит, что все разработчики популярных браузеров будут стараться соответствовать новым стандартам. Не которые функции уже реализованы и работают в некоторых браузерах. О самых интересных из них мы поговорим ниже.
Контекстное меню
Пожалуй одна из самых долгожданных функций, которая ждет нас в 2017 году это внедрение контента в контекстное меню (правая кнопка мыши). В различных административных панелях, сервисах, CRM и т.д. можно часто наблюдать имитацию собственного контекстного меню. В первую очередь это делается для удобства пользователя привыкшего к использованию такого метода ввода команд. В контекстное меню можно добавлять чекбоксы, радиокнопки и JS команды.
Работоспособность вашего браузера вы можете проверить в примере выше, либо посмотреть на скриншот ниже.
На данный момент фича частично поддерживается только браузером FireFox, так же доступна в браузерах Chrome и Opera как экспериментальная возможность.
Dropdown без JS
Выпадающее меню, аккордеоны, табы и т.д. стали неотъемлемой частью современного сайта, встретить их можно практически везде. Если вы разработчик, то должны понимать насколько это рутина прикрутить очередную выпадашку. Теперь эта возможность доступна через два простых тега <details> и <summary>.
На данный момент момент фича поддерживается всеми современными браузерами кроме IE и EDGE.
Новые типы input полей
Поле input с типом date появилось уже очень давно, однако, в чистом виде этот тип полей практически не используется, т.к. имеет множество недостатков. Практически всегда функционал заменяется на решение написанное на JS, которое гораздо более гибкое и функциональное. Новые типы полей, конечно вряд ли исправятся ситуацию, но это уже небольшой шаг расширить возможности выбора дат.
Три новых типа выбора дат:
- month - выбор месяца
- week - выбор недели
- datetime-local - выбор даты и локального времени
Был еще 4 тип datetime, который позволял выбирать не локальное время, а по гринвичу, но от него решили отказаться.
Поддержка бараузерами пока не полная, примерно 50/50. На данный момент функционал полностью поддерживают Opera, Chrome и EDGE. Частичная поддержка есть у Safari iOS. В пролете пока остаются IE, Firefox и Safari Desktop.
Адаптивные изображения
Пожалуй самая полезная фича из всего списка нововведений HTML 5.1. Новый атрибут srcset для тега img позволяет через запятую указать несколько источников изображения которые будут подгружаться в нужном разрешении. Рядом с источником каждого изображения указывается либо множитель плотности пикселей относительно стандартна, либо ширина или высота экрана.
<img src="images/low-res.jpg" srcset=" images/low-res.jpg 1x, images/high-res.jpg 2x, images/ultra-high-res.jpg 3x" >
С помощью атрибута sizes можно указать условия для отображения изображения на разных разрешениях. Так, например, можно явно указать что на больших экранах изображение будет принимать размер половины экрана viewport, а на маленьких всю ширину экрана.
<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" srcset="images/low-res.jpg 600w, images/high-res.jpg 1000w, images/ultra-high-res.jpg 1400w" >
Новый тег picture позволяет не только отображать разные размеры изображения, но и в зависимости от условий показывать совершенно другое изображение.
<picture>
<source media="(max-width: 20em)" srcset="
images/small/low-res.jpg 1x,
images/small/high-res.jpg 2x,
images/small/ultra-high-res.jpg 3x
">
<source media="(max-width: 40em)" srcset="
images/large/low-res.jpg 1x,
images/large/high-res.jpg 2x,
images/large/ultra-high-res.jpg 3x
">
<img src="images/large/low-res.jpg">
</picture>
С поддержкой браузеров все очень хорошо, а потому использовать возможность можно уже сейчас! Атрибуты поддаются принципу graceful degradation, а потому если браузер не поддерживает новый атрибут он просто проигнорирует его и будет как и раньше работать с основным источником. У нас отсутствует поддержка IE, но много ли вы видели устройств с высокой плотностью пикселей и браузером IE на борту или экраном смартфона? Android к сожалению поддерживается только с 5 версии для стандартного браузера, но если используется Chrome, то все будет как и в десктопной версии.
CSS в 2017
Что касается стилей в 2017 году, нас так же ждет не мало интересных вещей, некоторые из которых можно использовать уже сегодня.
Проверка поддерживаемого свойства CSS
Рано или поздно во время тестирования верстки приходится сталкиваться с неприятными моментами, когда какое-то свойство хорошо поддерживается в одном браузере, но совершенно не поддерживается в другом. Конечно если браузер не знаком с новым свойством, он просто его проигнорирует и это дает возможность выкрутиться из ситуации все тем же graceful degradation, однако, метод подходит не для всех случаев и код в тоге может раздуться до нечитабельного вида. Что если бы нам можно было просто использовать условия? В этом нам и поможет новая функция @suppports.
Синтаксис простой, очень похоже на типичный условный оператор в любом языке программирования. Вы просто указываете в скобках какое свойство вам нужно проверить на работоспособность, а далее указываете какие стили нужно применить в случае истины.
.shape{
width: 20em;
height: 20em;
float: left;
margin: 0.25em 2em 1em 0;
}
@supports (shape-outside: circle()) {
.shape {
shape-outside: circle(50%);
border-radius: 25em;
}
}
Но чтобы через @supports проверить поддерживается ли свойство, надо проверить поддерживается ли сам @supports в браузере. И тут я могу вас обрадовать, с поддержкой в браузерах сейчас все очень хорошо, а там где не очень (привет IE), свойство просто будет игнорироваться и опять же все будет сводиться к graceful degradation. Так что смело используйте новую функцию, чтобы лишний раз обезопасить себя от кривого отображения CSS свойств.
Переменные в CSS
Об использовании переменных в CSS говорили уже очень давно (в далеком 2011 их уже можно было попробовать как экспериментальную возможность) и многие представляют как это будет работать, на примере использования css-препроцессоров. Одним словом, переменные это удобно и их сильно не хватает в синтаксисе чистого CSS.
:root {
--main-color: #06c;
}
#foo h1 {
color: var(--main-color);
}
На данный момент функционал переменных реализован почти во всех современных браузерах за исключением двух детищ от Microsoft: IE и EDGE. К сожалению эти два браузера до сих пор не позволяют в полной мере использовать нам временные, т.к. игнорирование недодерживаемого синтаксиса просто напросто сломает все стили, а дублирование стилей для поддержки IE и EDGE сводит на нет весь принцип использования переменных. Увы, пока ситуация остается в тупике. Но к счастью все мы давно привыкли писать на своем любимом препроцессоре и там вам никто не запрещает использовать переменные.
CSS Grid Layout - табличная верстка нового поколения
Пожалуй, объективно самое ожидаемое нововведение 2017 года это конечно же гриды.
В 2016 мы вдоволь оценили всю мощь Flexbox и научились делать на них практически любой шаблон, однако иногда приходилось изрядно поломать голову чтобы выстроить нужную нам разметку и правильно адаптировать ее. С приходом Grid мы сможем вообще все!
Если говорить вкратце, то мы разбиваем нужный нам блок на столбцы и строки нужных размеров (можно установить как фиксированные так и относительные единицы, либо вообще установить автоматическое заполнение всего оставшегося пространства), а дальше все блоки, что есть у нас внутри мы распределяем по этой сетке занимая любое количество блоков.
Для более наглядного примера, я бы порекомендовал посмотреть отличную презентацию от Вадима Макеева на тему гридов, где можно в полной мере насладиться всеми широкими возможностями новых свойств.
К сожалению, единственная причина по которой сейчас невозможно использование гридов это его поддержка браузерами. Сейчас мы имеем частичную поддержку в IE и EDGE (внезапно!), в Firefox, Chrome и Opera можно включить функцию как экспериментальную и потренироваться чтобы быть готовым к полноценному релизу во всех браузерах.
Internet of Things на вкусненькое
Не секрет что интернет вещей потихоньку захватывает рынок (хотя и не так быстро как хотелось бы), но все будущие технологии очевидно будут развиваться именно в таком ключе. Уже сейчас возможно управление системами интернет вещей через специальные контролеры или приложения на смартфоне..
Браузеры тоже решили не отставать и недавно в Chrome представили поддержку Bluetooth прямо из браузера. Теперь если вы хорошо владеете веб технологиями вам не обязательно изучать новый контроллер или мобильную разработку для того чтобы погрузиться в мир интернета вещей. Соберите интрфейс прямо в браузере и управляйте своими умными розетками, лампочками и термостатами прямо с вашего локального веб-приложения..
На данный момент уже сейчас попробовать новую фичу можно в браузере Chrome или Opera включив эту экспериментальную возможность. С остальными браузерами все очевидно плохо, но учитывая что эта функция будет использоваться как правило не для массового онлайн доступа, а локального, фича во первых, скорее всего так и останется выключенной по дефолту из соображений безопасности, а во вторых не составит труда у конечно пользователя соответствовать минимальным системным требованиям и настройкам.
Вновь рекомендую ознакомиться с очень интересной презентацией Вадима Макеева, где демонстриуется использование этой функции на некоторых устройствах и рассказывается о принципах обмена данными в Bluetooth устройствах.