Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. Страница 16

Более совершенный вариант переключения с использованием атрибутов srcset и sizes

Рассмотрим еще одну ситуацию. В адаптивном веб-дизайне довольно часто случается, что при небольших окнах просмотра изображение занимает все их пространство, а при окнах просмотра большего размера — всего лишь его половину. Это может быть проиллюстрировано основным примером из главы 1. Довести намерения до браузера можно следующим образом:

<img srcset="scones-small.jpg 450w, scones-medium.jpg 900w"

sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw"

src="scones-small.jpg" alt="Scones">

Внутри тега изображения снова используется srcset. Но на этот раз после указания изображений добавляется значение с суффиксом w. С его помощью браузеру сообщается о ширине изображения. В нашем примере имеются изображения шириной 450 пикселов (scones-small.jpg) и 900 пикселов (scones-medium.jpg). Важно отметить, что значение с суффиксом w не является настоящим размером. Это всего лишь указание браузеру, приблизительно соответствующее ширине в так называемых пикселах CSS.

совет

Я задался вопросом: как именно определяется пиксел CSS? Затем нашел объяснение по адресу http://www.w3.org/TR/css3-values/ и понял, что лучше бы я этим вопросом не задавался.

Значение с суффиксом w обретает больший смысл, когда учитывается значение атрибута sizes. Этот атрибут позволяет сообщить браузеру о намерениях относительно изображений. В предыдущем примере первое значение равноценно следующей установке: «Для устройств, имеющих ширину как минимум 17 em, я хочу, чтобы показывалось изображение с параметрами, близкими к 100 vw».

примечание

Если вы не можете разобраться в некоторых используемых единицах измерения, например в vh (где 1 vh является эквивалентом 1 % высоты окна просмотра) и vw (где 1 vw является эквивалентом 1 % ширины окна просмотра), обратитесь к материалам главы 5.

Вторая часть фактически указывает: «Браузер, я хочу, чтобы для устройств шириной как минимум 40 em показывалось изображение шириной 50 vw». Пока учет ведется в dpi (или в dpr, что означает device pixel ratio), это может показаться излишним. Например, на устройстве шириной 320 пикселов с разрешением 2x (при выводе на полную ширину для него требуется изображение шириной 640 пикселов) браузер может решить, что изображение шириной 900 пикселов подойдет больше, поскольку первый из имеющихся у него вариантов касается изображения, которое будет достаточно большим для заполнения требуемого размера.

Вы что, сказали, что браузер может предпочесть одно изображение другому?

Важно запомнить, что атрибуты sizes всего лишь дают браузеру подсказку. Это не гарантирует повиновения со стороны браузера. И это, уж поверьте, совсем неплохо и означает, что в будущем, если появится надежный способ для браузеров выяснить возможности сети, он сможет предпочесть одно изображение другому, поскольку к тому моменту будут известны обстоятельства, неизвестные нам как разработчикам программы. Возможно, пользователь настроит свое устройство на загрузку только изображений с разрешением 1х или только изображений с разрешением 2х, при таких сценариях браузер сможет выбрать вызов самого подходящего кода.

Альтернативой решению браузера является использование элемента picture. Использование этого элемента гарантирует использование браузером конкретно запрошенного вами изображения. Посмотрим на его работу.

Режиссура, применяемая в отношении элемента picture

И последний сценарий, с которым вы можете столкнуться, предполагает наличие разных изображений, применимых при различных размерах окон просмотра. Рассмотрим, к примеру, нашу булочку, взятую опять же из примера главы 1. Возможно, для самых маленьких экранов мы предпочтем булочку, изображенную крупным планом, щедро политую сверху вареньем и сливками. Для более крупных экранов, наверное, предпочтем воспользоваться более широким изображением. Возможно, это будет общий план стола с разнообразной выпечкой. И наконец, в еще более крупных окнах просмотра мы, наверное, предпочтем увидеть кондитерскую на деревенской улице, людей, сидящих возле нее за столиками, лакомящихся булочками и запивающих их чаем (понимаю, похоже на некую идиллию). Нам нужны три разных изображения, наиболее подходящих к различным диапазонам окон просмотра. Решить задачу с помощью элемента picture можно следующим образом:

<picture>

    <source media="(min-width: 30em)" srcset="cake-table.jpg">

    <source media="(min-width: 60em)" srcset="cake-shop.jpg">

    <img src="scones.jpg" alt="One way or another, you WILL get cake.">

</picture>

Во-первых, следует иметь в виду, что элемент picture — это просто контейнер, помогающий другим изображениям попасть в тег img. Если нужно придать изображениям то или иное стилевое оформление, переключите свое внимание на тег img.

Во-вторых, атрибут srcset работает здесь точно так же, как и в предыдущем примере.

В-третьих, тег img предоставляет альтернативное изображение, а также изображение, которое будет показано, если браузер распознает изображение, но не найдет соответствие ни одному из медиаопределений. Нужно четко уяснить, что не следует убирать тег img из контейнера picture, иначе все плохо кончится.

Основной особенностью контейнера picture является наличие в нем тега source. В этом теге можно применять выражения в стиле медиазапросов, конкретно сообщая браузеру, какой из ресурсов применять в той или иной ситуации. Например, в первом теге из предыдущего примера браузеру предписывается: «Если экран шириной не менее 30 em, нужно загрузить изображение cake-table.jpg». При совпадении условий браузер будет подчиняться предписаниям.

Продвижение новомодных форматов изображений. В качестве бонуса элемент picture также помогает вам в предоставлении альтернативных форматов изображений. WebP (информацию о котором можно получить на сайте https://developers.google.com/speed/webp/) является новейшим форматом, не получившим еще достаточного уровня поддержки во многих браузерах (http://caniuse.com/). Тем браузерам, которые обеспечивают его поддержку, можно предложить файл в этом формате, а тем, которые с этим не справляются, — файл в обычном формате:

<picture>

    <source type="image/webp" srcset="scones-baby-yeah.webp">

    <img src="scones-baby-yeah.jpg" alt="Again, you WILL eat cake.">

</picture>

Надеюсь, что теперь ситуация прояснилась. Вместо атрибута media используется атрибут type (с ним мы еще встретимся в главе 4), который, хотя и используется чаще всего для указания на видеоисточники (возможные типы видеоисточников можно найти на сайте https://html.spec.whatwg.org/multipage/embedded-content.html), позволяет нам в данном случае определить в качестве наиболее предпочтительного формат WebP. Если браузер в состоянии его отобразить, он это сделает, а если нет, возьмет исходное изображение, указанное в теге img.

совет

Есть множество устаревших браузеров, которые никогда не смогут воспользоваться официально заявленными консорциумом W3C адаптивными изображениями. Мой совет: пока на то не будет конкретных причин, не отказывайтесь от возможностей использования встроенных резервных вариантов. Чтобы не портить пользователям таких браузеров впечатление от вашего сайта, воспользуйтесь резервными изображениями подходящих размеров, а усовершенствованные возможности оставьте для более способных на их реализацию устройств.

Резюме

В данной главе было рассмотрено множество важных вопросов. Много времени было потрачено на ознакомление с Flexbox, самой последней, эффективной и теперь уже широко поддерживаемой технологией. Были также рассмотрены способы обслуживания для наших пользователей любого количества альтернативных изображений в зависимости от требующих решения задач. Благодаря применению srcset, sizes и picture пользователи всегда будут получать самые подходящие изображения, отвечающие их потребностям как сейчас, так и в будущем.

К этому моменту нами рассмотрены довольно большой объем кода CSS и некоторые возникающие в этой технологии перспективы и возможности, но более современной разметки мы касались только в отношении адаптивных изображений. Далее уделим внимание именно этому вопросу.

Следующая глава будет целиком посвящена HTML5. Мы разберемся с тем, что предлагается в этой версии языка, что изменилось по сравнению с его предыдущей версией, и в значительной мере с тем, как наилучшим образом воспользоваться новыми семантическими элементами для создания более понятных и осмысленных HTML-документов.

4. Использование HTML5 в целях разработки адаптивного веб-дизайна

Если вы предполагаете увидеть здесь руководство по использованию интерфейсов прикладного программирования (API) HTML5, то я хочу перефразировать высказывание из одного общеизвестного вестерна и сказать: «Я не ваш Хаклберри».

Я собираюсь рассмотреть с вами «словарную» часть HTML5, то есть семантику этого языка. Если конкретнее, то способ использования новых элементов HTML5 для описания содержимого, помещаемого в разметку. Основная часть содержимого главы не имеет прямого отношения к адаптивному веб-дизайну. Но HTML является основой, на которой строятся все веб-проекты и приложения. А кому же не хочется возводить свое здание на самом крепком из фундаментов?