Не с первых дней веб-стандартов я не видел наш сообщество сплотиться вокруг, казалось бы, небольшая проблема: реагирующие изображения .
За последний четырех years 1 (да, это было около четырех лет), мы видели много вариантов изображений в гибкой конструкции.Из более расслабленные дни обстановке max-width: 100% (абсолютный минимум вы должны делать) более полнофункциональные реализации JavaScript, такие как Picturefill и ZURB в data-interchange метода, мы потратили много времени спиннинг наши колеса, стучать OURруководители и кричать на стене.Я счастлив сказать, что наша неутомимая путешествие подходит к концу.W3C и браузера производители получили намек .
Государство Отзывчивый Images
В поисках Святого Грааля служения правильный образ пользователю, наше отношение к производителей браузеров до сих пор в значительной степени были: «Забудьте вы — Мы сделаем это сами.” Я не буду, конечно, не исключение.Мы были так внимательны к отзывчивых изображений и подвергались все догадки и испытаний, которые обычно не обнародованы, что мы получили нетерпение (это справедливо) и сделал это с JavaScript .
Разница между CSS перехода и отзывчивым изображения, конечно, как они degrade.Если CSS переход не работает, кто действительно заботится?Ваш интерфейс может быть немного нервный, но опыт в целом не будет действительно страдают, потому что ваши пользователи будут в состоянии выполнить свою цель и потреблять контент, который они нуждаются .
Это действительно не дело с изображениями.Как новый тег ухудшения изображения?img тег столь широкое признание, что я не мог даже найти, когда W3C рекомендовала его в качестве стандарта, кроме небольшого упоминания в HTML 4.01 specification 2 .Замена или даже расширяется на img тега будет, как говорит Фрэнк Синатра носить бейсболку вместо Fedora — Вы получите несколько снизились .
Ресурсов Problems
Как реагировать дизайн вырос в популярности, и как средства массовой информации, благодаря которой пользователи потребляют информация стала неуправляемой, мы медленно понял, что img само по себе не собирается сокращать горчицу.Мы начали задавать вопросы типа: “Что размер экрана пользователя на?” И “Что плотность пикселей на экране?” Эти вопросы топливе наши методы изображения, пока мы не поняли, что размер экрана и плотность пикселей не имеют абсолютно никакого отношения к суммедоступная пропускная способность обслуживать до огромного высокой четкости изображения .
RICG начал работать на picture элемента, разделяя свою работу с W3C по пути .
Решения получил довольно сложным.Обсуждение picture элемента началась, и группа под названием Отзывчивый изображений появились сообщества Group (RICG).RICG начал работать на picture элемента, разделяя свою работу с W3C по пути.Результат привел нас к сегодняшнему дню, и это обсуждение все прогрессу, который был достигнут .
Введение srcset
Поскольку большая часть сообщества реагировать-изображения на борту с picture элементом и с нетерпением жду этого из-за больших polyfills, таких как Picturefill, он пошел вперед и выпустила хорошо продуманной и плотском обличии, документ с изложениемто, что называется srcset, который является продолжением стандарта img тега.Да, я знаю, — он чувствует, как он пришел из ниоткуда.Это было также супер-сложный и чрезмерно ограничивает, ограничивая вас значений (косвенных) пиксельных и с помощью microsyntax, что не позволяет масштабируемости СМИ запросов в будущем.К счастью, синтаксис созрел в то, что мы имеем сегодня, что довольно устойчивыми рекомендации .
Недавно Эндрю Кларк сказал, что лучше когда он tweeted 3 “Посмотрел на гибкой изображений srcset & размеры атрибуты впервые.Вот это да, это сложнее “
Я не мог бы сказать лучше себя.Давайте посмотрим на то, что мы имеем дело с:
<img alt="dog" src="dog.jpg" srcset="dog-HD.jpg 2x, dog-narrow.jpg 300w, dog-narrow-HD.jpg 600w 2x">
Три основных атрибутов в приведенном фрагменте: alt, src и srcset.alt атрибут же, как это всегда было;src это запасной вариант, если srcset не поддерживается;и srcset, очевидно, мясо и картофель здесь .
Мы видим, три аргумента в srcset.Первый путь изображения.Второй дает информацию о браузере Об естественной ширины источников, так что он знает, какой ресурс, чтобы служить пользователю (в зависимости от настроек пользователя, и перекрестные ссылки с в sizes attribute 4 – Я сказал вам, что это сложный).Последняя часть задает необязательный соотношение пикселей (2x В этом примере определяет образ высокой четкости) .
Одна вещь мне действительно нравится в srcset том, что спецификация заявляет, что браузер должен содержать предпочтения изображений распределения для определенных ситуаций пропускной способности.Это означает, что вы не должны беспокоиться о служении на 2x изображение на экран высокой четкости, если это устройство на Cruddy 3G связи.Предпочтения пользователя должна взять на себя, и браузер будет выбрать подходящий образ, чтобы служить .
Подготовка к picture Element
После долгих жаловаться о нашем новом странном другом,srcset, RICG продолжал работать на picture элемент, который, наконец, получить мастеринг сцепление с производителей браузеров … ну, то есть, с Chrome.Предложил синтаксис для picture элемента может выглядеть знакомы, потому что мы видели его в основном в первой версии Picturefill, и это не в отличие от, как <audio> и <video> отмечены до .
<picture>
<source media="(min-width: 600px)" srcset="large-1.jpg, large-2.jpg 2x">
<img alt="A fat dog" src="small-1.jpg">
</picture>
Как вы можете видеть, source тег в picture элемента, наряду с нормальным img тегов.Так же, как мы видели, с src в srcset, img является резервным.В source тега, мы имеем то, что выглядит как СМИ запроса, наряду с srcset атрибут, который содержит те же самые аргументы изображения источника пикселей и плотностью, как раньше.Это похоже на хороший чистый способ популяризации отзывчивые изображений;мы обычно знакомы с синтаксисом, поэтому он должен быть легко принят .
Браузер Support
Атрибут был | ~ 13 поддерживается в Chrome 5 начиная с версии 34. На момент написания, она не поддерживается в другом месте.Mozilla, кажется, работает на реализацию (пальцы скрещенными).Internet Explorer нигде в поле зрения .
picture элемент имеет даже хуже поддержку;это даже не в Chrome пока.Но, как Mozilla с srcset, Google в настоящее время работает над ее реализацией.Если Вы можете переварить читая спецификации, я очень рекомендую его.Несмотря на то, существует не так много сюжета и развитие характеров довольно слаб, он все еще довольно хорошо читать .
Picturefill 2.0 был создан потому, что встроенная поддержка является достаточно close.Вы знаете, нам понадобится незыблемую polyfill использовать при времени официально поставляется, так что давайте взглянем на него
Введение Picturefill 2.0
Picturefill 2.0 6 был недавно выпущен как бета, и это вполне большой скачок от версии 1. RICG действительно направлена на создание одна остановка решение для гибкой images.Задача в том, чтобы создать сценарий, который позволяет, разработчик, использовать любую комбинацию из решений в настоящее время стандартизированные, без вздутие живота его до того, что его не используете вообще бы более легкий .
Представьте себе, polyfilling изображение, которое обычно занимает 2 секунд, чтобы загрузить с помощью файла JavaScript, что занимает 10 секунд, чтобы загрузить — это не имело бы смысла.Picturefill 2,0 избегает этого, следуя спецификации очень близко (с некоторыми преднамеренного упущения, которые мы обсудим в немного) и позволяя использовать либо srcset или picture или комбинацию из двух .
7
Picturefill является выработке подхода образ, который имитирует предложенную элемент изображения, используя div ы.( Большие version 8 )
Пока мы не можем достоверно достичь всего, в спецификации, используя JavaScript (такие как разумно обнаружения пропускной способности, которые были бы настройки пользователя в любом случае), мы, безусловно, может позаботиться о всех частей, которые предназначаются, чтобы быть в HTML (т.е.элементы и атрибуты).Эта версия Picturefill получает нас на один шаг ближе …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров