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

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

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

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

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

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

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