Компания Nokia выпустила обновлённую версию легендарного телефона Nokia 3310 примерно 3 года назад. Я вполне мог его себе позволить (стоил он совсем недорого), поэтому я таким телефоном обзавёлся. Он оснащён двухмегапиксельной камерой и батареей, которой хватает на 30 дней (до 22 часов разговоров). Он поддерживает 2G-сети, оборудован 16 мегабайтами памяти, в нём есть классическая игра «Змейка» и браузер.
Телефоны Nokia 3310
Как создавать сайты, которые будут хорошо работать на таком телефоне?
Браузер Opera Mini
Nokia 3310 позволяет просматривать веб-сайты с использованием браузера Opera Mini. Существуют разные версии этого браузера. То, как именно он рендерит страницы, зависит от операционной системы, от устройства и от используемых настроек. Если установить этот браузер на смартфон, вы, возможно, ничего нового для себя не увидите, так как Opera Mini использует браузерный движок, который имеется в Android или iOS. У этого браузера есть одна интересная особенность. Дело в том, что он позволяет задавать разные параметры экономии трафика. Экономия может быть выключена, может выполняться в автоматическом режиме, уровень экономии может быть высоким и экстремальным. Когда страницы просматривают в экстремальном режиме экономии трафика, запросы уходят на один из прокси-серверов Opera, который загружает страницу, обрабатывает её, сжимает, а после этого отправляет пользователю. Представители Opera заявляют о том, что это снижает объём передаваемых данных вплоть до уровня в 90%. Это ограничивает интерактивные возможности страниц, так как JavaScript-код обрабатывается только сервером, а устройство лишь выводит готовую страницу.
Вот некоторые другие примечательные факты, касающиеся обработки JavaScript в Opera Mini:
- Время выполнения всех скриптов ограничено двумя секундами.
- Функции
setIntervalиsetTimeoutотключены. - Ограничено количество событий, возникновение которых может вызывать выполнение скриптов.
Opera Mini очень сильно нацелен на производительность и экономию трафика. Я предполагаю, что это — одна из причин, по которым именно этот браузер установлен на моём Nokia 3310. Правда, тот браузер, который установлен на этом телефоне, отличается от того, который установлен на моём смартфоне. Это — тот самый браузер, при описании возможностей которого на caniuse.com обычно используется красный цвет.
Opera Mini поддерживает лишь ограниченный набор возможностей CSS и JS
Вчера мне стало любопытно узнать о том, сможет ли веб-сайт, который я недавно создал, отрендериться на Nokia 3310.
Вот короткое видео, демонстрирующее сравнение вывода этого сайта в Safari на iPhone XR и в Opera Mini.
К моему удивлению, мне, чтобы сайт выглядел бы на Nokia 3310 прилично, нужно было лишь уменьшить некоторые внутренние отступы элементов и размеры шрифтов. Мне не пришлось вносить в проект особенно больших изменений, так как я, когда создаю сайты, следую принципу прогрессивных улучшений. Прогрессивные улучшения — это когда основное внимание уделяется контенту, а остальные возможности проекта улучшаются поэтапно. В этой классической статье Аарона Густафсона о прогрессивных улучшениях разъясняется порядок использования данной техники в веб-разработке.
Содержимое, презентационный уровень, клиентские скрипты
Вот что пишет об этом Аарон Густафсон: «Всё начинается с ядра, пусть это будет арахис, представляющего собой контент, оформленный в виде семантического (X)HTML-кода, обладающего широкими функциональными возможностями. На этот контент наносят слой вкуснейшего шоколадного CSS. И, наконец, добавляют JavaScript, который напоминает твёрдую оболочку конфеты, что улучшает вкус угощения (и не даёт сладостям таять в руках)».
Как я использую методологию прогрессивных улучшений
У меня есть некоторые практические примеры, которые помогут вам лучше разобраться с тем, что такое «прогрессивные улучшения» в веб-разработке.
▍Grid-макеты
Для создания двухколоночного макета главной страницы проекта Front-end Bookmarks я использовал технологию CSS Grid. Если браузер не знает о том, что такое display: grid, то просто используется запасной вариант в виде одноколоночного макета. Обратите внимание на то, что мне не приходится использовать @supports-запросы в CSS, так как браузер попросту игнорирует свойства, которые ему непонятны.
ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(29rem,1fr));
grid-gap: .7rem;
}
Страница проекта в IE11 и в Firefox
Одноколоночный макет, как видите, не идеален, но он, всё равно, достаточно хорош.
▍Поиск
Современные браузеры выводят в верхней части страницы моего проекта поле комбинированного списка, которое позволяет перемещаться по страницам, фильтровать и выбирать страницы. В своём JavaScript-коде мне хотелось использовать стрелочные функции, шаблонные литералы и прочие современные возможности языка. При этом мне не хотелось бы применять полифиллы для обеспечения поддержки этих возможностей браузерами, в которых нет их встроенной поддержки. Именно поэтому я отправляю JS-код только тем браузерам, которые понимают ES2015+. Добиваюсь я этого, добавляя к тегу <script> атрибут type=«module».
<script src="/assets/js/scripts.min.js" type="module"></script>
Браузер выполнит скрипт только в том случае, если он поддерживает ES-модули, а соответствующий браузер будет поддерживать и возможности ES2015+. Филип Уолтон представил данную методику в 2017 году, в этом материале.
Поиск в IE 11 и в Firefox
Соответствующий JS-компонент, обладающий широкими возможностями, в браузерах, не поддерживающих нужные для его работы технологии, превращается в простую форму поиска. В поле ввода заранее помещено значение site:www.frontendbookmarks.com. Если ввести сюда поисковый запрос и нажать на кнопку Search, будет вызвана поисковая система DuckDuckGo, которая выполнит поиск по заданному запросу на сайте frontendbookmarks.com. Это — не идеальное решение, но оно всё же лучше, чем ничего.
<form action="https://duckduckgo.com/" method="GET">
<label for="search">Search on DuckDuckGo</label>
<input id="search" name="q" value="site:www.frontendbookmarks.com " type="text">
<button type="submit">Search</button>
</form>
Я позаимствовал эту идею отсюда. Там похожий подход используется для организации поиска по документации Eleventy.
Я планирую улучшить производительность проекта Front-end Bookmarks, используя изображения формата webp и ленивую загрузку изображений. Я пока не реализовал эти возможности, но при их реализации я воспользуюсь техникой прогрессивных улучшений.
▍Webp-изображения
Преимущества формата webp перед другими графическими форматами заключаются в размерах файлов. Webp-файлы обычно гораздо меньше, чем файлы, сохранённые в других форматах. К несчастью, я не могу просто взять и заменить все мои jpg-изображения на их webp-версии, так как Safari и IE не поддерживают этот формат. Но мы можем дать браузеру возможность самостоятельно выбрать подходящее изображение, используя элемент <picture>:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="image description">
</picture>
Браузер читает содержимое элемента <picture> сверху вниз. Если браузер поддерживает формат webp, то он использует соответствующее изображение, описанное в элементе <source>. Если не поддерживает — он просто пропустит этот элемент и выведет изображение, описываемое элементом <img>.
▍Ленивая загрузка
Для того чтобы оптимизировать производительность загрузки изображений, я планирую использовать механизмы ленивой загрузки. Это позволят сделать так, чтобы изображения загружались бы только тогда, когда они находятся в области просмотра (или тогда, когда они близки к тому, чтобы оказаться на экране). Мне очень не хотелось бы использовать для реализации этой возможности какой-нибудь большой скрипт стороннего разработчика. Вместо этого я собираюсь воспользоваться стандартными механизмами, дающими возможность организовать ленивую загрузку изображений. При этом я планирую предусмотреть запасной вариант для браузеров, которые не поддерживают соответствующие механизмы.
<img data-src="myimage.jpg" loading="lazy" />
// Заменить значение атрибута src на значение атрибута data-src
// для браузеров, не поддерживающих ленивую загрузку.
if ('loading' in HTMLImageElement.prototype) {
const images = document.querySelectorAll("img[loading='lazy']");
images.forEach(img => {
img.src = img.dataset.src;
});
} else {
// Запасной вариант для других браузеров
}
В этом материале можно найти рассказ о том, как может выглядеть резервный механизм для работы с изображениями, предназначенный для браузеров, не поддерживающих стандартные средства ленивой загрузки.
Итоги: прогрессивные улучшения — это прекрасно
Я назвал этот материал «Красота прогрессивных улучшений» из-за того, что мне очень приятно видеть то, как сайт подстраивается под разные устройства, операционные системы, браузеры. Прогрессивные улучшения позволяют нам использовать самые свежие и самые интересные возможности HTML, CSS и JavaScript. Но при этом они помогают создавать простую и надёжную базовую структуру сайтов, которая позволяет сайтам работать где угодно. Веб-разработчику очень важно заботиться обо всех пользователях — в том числе о тех, кто смотрит сайты с помощью IE 11 и Opera Mini. Не стоит полагаться на статистические данные по браузерам. Нам надо думать о тех, для кого мы создаём сайты. Наши пользователи очень сильно отличаются друг от друга. Речь идёт об их физических возможностях, об их личных предпочтениях, об их устройствах и браузерах.
Используете ли вы прогрессивные улучшения в своих веб-проектах?
Автор: ru_vds
