—»     —»   Адаптивные изображения: наконец-то нам доступен элемент picture
  Раздел: События   Нет комментариев  

Адаптивные изображения: наконец-то нам доступен элемент picture



Да уж, это потребовало довольно много времени. Было проведено множество дискуссий, но вот, наконец-то, мы можем воспользоваться этим элементом! Столь многообещающий элемент picture от W3C наконец-то вышел! Если вы знакомы с темой, то вам наверняка известно, что WhatWG пробовали стандартизировать дополнительный атрибут к элементу image, который, в отличие от picture, назывался srcset. Те, кто поверил в слова WhatWG, когда они заявляли, что выступают за “народный стандарт”, в то время как W3C больше ориентируется на back-end, ошиблись. Стандарты W3C живы и действительно задают жару.

Адаптивные изображения: наконец-то нам доступен элемент picture

Адаптивные изображения: каменистая тропа к стандартизации

Мы не хотим утомлять вас подробностями дискуссии, длившейся по меньшей мере 2 последних года. Просто позвольте быстренько представить этот стандарт тем, кто вообще не знаком с темой. В этих продолжительных спорах о стандартах будущего веб не обошлось без противоречий. В ходе этой битвы, связанной с наиболее подходящими стандартами для адаптивных изображений и другими важными вопросами, наиболее значимые сотрудники W3C умудрились отделиться в Web Hypertext Application Technology Working Group (WHATWG) и объявить, что они гораздо быстрее смогут разрабатывать стандарты, так как скорость не приоритете W3C. Это произошло еще в июле 2012 года.

Всего за несколько дней до отделения, WhatWG решили продвигать srcset в качестве решения для использования адаптивных изображений. Реакции W3C долго ждать не пришлось. Осенью 2012 года они пояснили, что их рабочая группа HTML, поддерживаемая W3C Community Group, будет заниматься разработкой и продвижением элемента picture. Им потребовалось много сил и времени на то, чтобы, наконец, воплотить эту задумку в жизнь.

После той стычки не так уж и много произошло, хотя за кулисами проводилось довольно много работы. В феврале 2014 года ребята из Noupe потеряли терпение и предложили вообще не ждать стандарта, каким бы он ни был, и вместо этого начать использовать новое решение под названием rwd.images.js.

Адаптивные изображения: они есть в Chrome Canary, и стоит ждать большего

И теперь это, наконец, произошло! Мы даже и не надеялись. Однако в статье на A List Apart, глава Responsive Images Community Group и бывший участник команды jQuery Mobile, а также дизайнер/разработчик в небезызвестной Filament Group, Mat Marquis, объявил, что теперь у нас есть возможность использовать первую рабочую версию элемента picture.

Для тестирования уже сегодня можно использовать Chrome Canary – версию Chrome от Google для разработчиков. И именно об этом вас просит Marquis, - тестируйте! Chrome Canary можно скачать здесь! Откройте браузер после установки, и вставьте следующую строку кода в адресную строку.

chrome://flags/#enable-experimental-web-platform-features

Нажмите Ввод, а в следующем окне нажмите «Enable». Не беспокойтесь, изменения, внесенные в Canary, никак не влияют на обычную версию Chrome. Эти браузеры работают по-отдельности.

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

Если взглянуть на опыт остальных главных игроков, то мы можем заверить вас в том, что Firefox, а также проекты от Webkit, очень быстро нагоняют упущенное. Проблемы наблюдаются только у дремлющего гиганта от Redmond. Microsoft отмечает элемент picture, а также атрибут srcset как Under Consideration. Хотя у нас стоит IE в котором даже и этой отметки нет.

А теперь, труженики веб-разработки, вперед! Что вы думаете по поводу такой реализации поддержки?

Кстати: на момент написания элемент picture не умел автоматически изменяться в размерах при изменения размеров окна. Приходилось обновлять страницу. Надеемся, что такое поведение элемента будет исправлено в последующих обновлениях.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 3579   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930