Новинки Front-end в 2017 году

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

Три новых типа выбора дат:

Был еще 4 тип datetime, который позволял выбирать не локальное время, а по гринвичу, но от него решили отказаться.

See the Pen

Поддержка бараузерами пока не полная, примерно 50/50. На данный момент функционал полностью поддерживают Opera, Chrome и EDGE. Частичная поддержка есть у Safari iOS. В пролете пока остаются IE, Firefox и Safari Desktop.

Screenshot at янв. 31 19-07-51.png

Адаптивные изображения

Пожалуй самая полезная фича из всего списка нововведений 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;
    }    
}

Screenshot at янв. 31 19-18-53.png

Но чтобы через @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 устройствах.

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

Другие записи

Существуют ли несуществующие страницы? Как видит Google страницу 404

Нам часто приходится делать аудиты сайтов. Для комплексного аудита существует чек-лист из нескольких десятков пунктов, который помогает ничего не забыть и не упустить.Один из пунктов - страница 404.

Мужское поздравление с женским праздником

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

Что ожидать от web-дизайна в 2017 году?

7 самых ярких трендов веб дизайна, развитие которых ожидается в 2017 году.

Контакты

  • Телефон:
    +7 (812) 425-64-08
  • Наш адрес:
    Санкт-Петербург, Рижская 5, оф. 212
  • Email
    info@pugofka.com
  • Добавляйтесь в друзья
Скачать презентацию