Новинки 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, который позволял выбирать не локальное время, а по гринвичу, но от него решили отказаться.

See the Pen

Поддержка бараузерами пока не полная, примерно 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 устройствах.

• Технологии

Наша статья вам помогла? Поддержите нас лайком!