Прогрессивное улучшение — это метод, который помогает сделать ваше программное обеспечение надежным и доступным. Следуя ему, вы можете гарантировать, что как можно больше людей смогут использовать ваш веб-сайт или приложение.
Начните с минимально жизнеспособной версии вашего веб-дизайна и убедитесь, что она функционирует так, как необходимо. Затем добавьте дополнительные функциональные возможности и стили, чтобы более мощные браузеры могли извлечь выгоду.
Как работает прогрессивное улучшение?
Из-за своей чрезвычайно распределенной природы Интернет всегда нуждался в поддержке огромного количества устройств. Веб-сайты прошли долгий путь от простых компьютеров 1970-х годов до мощных современных настольных компьютеров, планшетов и телевизоров.
В основе всего лежит HTML. Поскольку это «прощающий» язык, браузеры будут отображать HTML так, как они его понимают. Как правило, они игнорируют все, что не поддерживают.
Это может быть полезно с точки зрения разработчика, но может вызвать проблемы у читателей. Если ваш сайт отображает пустую страницу, когда JavaScript не может быть запущен, у пользователей не остается иного выбора, кроме как отказаться от него. Прогрессивное улучшение побуждает вас предоставлять основной контент всем, кто имеет к нему доступ, а затем улучшать этот контент с помощью соответствующих технологий, таких как CSS и JavaScript.
Прогрессивный подход к стилю
CSS — это язык таблиц стилей в Интернете. которые можно использовать для настройки цветов, шрифтов, макетыи многие другие визуальные аспекты ваших страниц. Вы можете использовать его для улучшения внешнего вида вашего контента по умолчанию, но это не значит, что вы не должны правильно структурировать свой контент.
Возьмем, к примеру, строку меню; вы можете структурировать его следующим образом:
<навигация>
<ссылка ="/register">регистр</ а>
<ссылка ="/login">авторизоваться</ а>
<ссылка ="/about">о нас</ а>
<ссылка ="/contact">контакт</ а>
</nav>Чтобы отобразить горизонтальное меню, где каждая ссылка немного похожа на кнопку, вы можете стилизовать ее с помощью этого CSS:
навигация {
текстовое оформление: нет;
отображение: встроенный блок;
набивка: 0.5em 1Эм;
граница: сплошная 1px;
радиус границы: 8px;
поле справа: 1em;
}Когда браузер полностью отобразит это, это должно выглядеть следующим образом:
Однако, если CSS недоступен, меню будет выглядеть так:
Обратите внимание, что это совсем не похоже на меню, и им не очень легко пользоваться, поскольку ссылки сливаются в одну.
Вы можете использовать альтернативную структуру, чтобы сделать дизайн более надежным:
<навигация>
<ул>
<ли><ссылка ="/register">регистр</ а></li>
<ли><ссылка ="/login">авторизоваться</ а></li>
<ли><ссылка ="/about">о нас</ а></li>
<ли><ссылка ="/contact">контакт</ а></li>
</ul>
</nav>Поскольку в этой разметке используется элемент неупорядоченного списка, ее гораздо удобнее использовать без CSS:
Обратите внимание, насколько проще быстро сканировать и понимать эти ссылки, даже со стилем браузера по умолчанию. Этот подход потребует от вас добавить немного больше CSS, чтобы переопределить стили списка по умолчанию:
навигацияли { отображать: в соответствии; }Несмотря на то, что окончательная структура и стиль более сложны, а у большинства пользователей включен CSS, этот подход более надежен. Это будет удобнее для пользователей программ чтения с экрана и терминальные браузеры.
Внедрение функциональности постепенно
Прогрессивное улучшение наиболее важно, когда речь идет о функционировании сайта или приложения. Принцип гласит, что, несмотря ни на что, ваш сайт должен работать как можно лучше.
На практике это обычно относится к JavaScript. Если вы вводите поведение на стороне клиента, оно должно накладывать функциональность поверх сайта или приложения, которое уже работает без него.
Очень распространенный случай — обработка событий. Представьте себе страницу, которая загружает дополнительный контент по запросу. Это может быть ручная бесконечная прокрутка, встроенный комментарий или что-то подобное.
<тело>
<!--... -->
<кнопка при клике="Загрузи больше();">
Нагрузка Более
</button>
<!--... -->
</body>кнопки по щелчку Атрибут содержит код JavaScript, который запускается, когда кто-то нажимает кнопку. Однако, если JavaScript недоступен, эта кнопка ничего не сделает. Пользователь будет нажимать эту кнопку без обратной связи и без понимания того, что происходит не так. Гораздо лучший подход использует прогрессивное улучшение:
<тело>
<!--... -->
<идентификатор ="р2" ссылка="/page/2">Страница 2</ а><сценарий>
функцияЗагрузи больше() { консоль.бревно("!"); }
/* Заменить ссылку на кнопку */
вар ссылка = документ.getElementById("p2");
вар кнопка = документ.createElement("кнопка");
кнопка.внутреннийтекст = "Загрузи больше";
button.addEventListener("нажмите", Загрузи больше);
документ.тело.insertBefore(кнопка, связь);
связь.parentNode.removeChild(связь);
</script>
</body>
Этот код преобразует базовую ссылку в кнопку с обработчиком событий. Внедряя зависимость от JavaScript с помощью самого JavaScript, вы можете быть уверены, что он будет работать. И есть функциональное поведение по умолчанию, которое работает в виде стандартной ссылки на /page/2.
Действительно ли необходимо прогрессивное улучшение?
Все используют браузеры с CSS и JavaScript, так зачем беспокоиться о ситуации, которая не возникает? Что ж, есть несколько причин, по которым вы должны использовать передовую практику прогрессивного улучшения.
- Во-первых, не все, кто посещает ваш сайт, используют браузер. Некоторые посетители будут ботами, такими как индексатор поисковой системы, и они могут вообще не понимать CSS или JavaScript.
- Во-вторых, не каждый посетитель вашего сайта будет использовать браузер с CSS и JavaScript. Некоторые посетители могут использовать браузер на базе терминала, который отображает обычный текст с минимальным форматированием. Другие могут использовать программу чтения с экрана.
- В-третьих, даже если браузер поддерживает CSS и JavaScript, все пойдет не так. Неработающая ссылка или плохое сетевое соединение могут привести к отсутствию файла .css или .js. Ошибка в JavaScript может привести к тому, что другой код вообще не запустится.
- Наконец, некоторые посетители могут решить отключить CSS или JavaScript. Они могут делать это из соображений конфиденциальности или потому, что у них медленное или платное соединение.
Прогрессивное мышление творит чудеса
Прежде всего, прогрессивное улучшение побуждает вас применять подход, ориентированный на контент. Контент — это главное, поэтому ваш текст и изображения всегда должны быть доступны для всех, независимо от того, как они заходят на ваш сайт.
Предоставляя всем читателям наилучший возможный опыт, а затем делая его еще лучше для тех, кто может извлечь выгоду, вы можете получить лучшее из всех миров. Прогрессивное улучшение — это лишь один из ключевых компонентов хорошей доступности и удобства использования.
