Прогрессивное улучшение
В веб-разработке доступность является ключевым аспектом веб-дизайна. Если ваше приложение приводит к недоступности, пользователь не может взаимодействовать с вашим приложением, кроме результата. Разработчики хотят создавать доступные, прогрессивные приложения для пользователей. Концепция прогрессивного улучшения проста, и каждый разработчик должен использовать эту концепцию. В этой статье мы обсудим принципы прогрессивного улучшения и их преимущества.
Что такое прогрессивное улучшение?
Прогрессивное улучшение — это концепция веб-дизайна, которая гарантирует, что содержимое веб-приложения в первую очередь доходит до всех пользователей, независимо от преимущества их браузера, стиля представления или интерпретируемого интернет-соединения.
В «изящной деградации» обеспечивает наилучшие возможности для пользователя, который сначала использует последние версии браузера, а затем деградирует, чтобы хорошо работать со старыми версиями браузера. Но прогрессивное улучшение начинается со старого браузера и продолжает улучшать продукты высокого уровня.
При прогрессивном улучшении правило разделения применяется к содержимому и стилю.
Контент является приоритетом в прогрессивном улучшении. Особенности стиля и браузера вторичны. Прогрессивное улучшение приводит в основном к высокому уровню.
Принципы прогрессивного улучшения:
- Следует учитывать предпочтения веб-браузера конечного пользователя. Пользователи должны иметь возможность использовать любой браузер, который у них есть, и не должны быть вынуждены использовать определенный браузер для доступа к содержимому веб-сайта. Контент дизайна — от низкоуровневой функциональности до высокой функциональности.
- Используйте формат, разработанный глобальными веб-стандартами. Каждый браузер имеет свои функции и возможности. Поэтому мы не можем разрабатывать веб-приложения для каждого браузера. Таким образом, использовать глобальный стандартный веб-формат просто.
- Имейте в виду, что при проектировании основные функции и стандартные события должны быть доступны во всех веб-браузерах. Перед реализацией пользовательских функций или событий для продвижения веб-приложения используйте все обычные события DOM для управления взаимодействием с пользователем при разработке веб-сайтов.
- Содержание веб-сайта должно сопровождаться структурой стандартного семантического формата HTML. Например, если посетители не могут просматривать видео или изображения, покажите текст с использованием типографики в HTML.
- Разработчики должны использовать внешний JavaScript, обеспечивающий расширенную функциональность. Некоторые браузеры имеют собственные библиотеки JavaScript для расширения функциональных возможностей. Но некоторые веб-браузеры не поддерживают JavaScript. В этом случае, если внешний JavaScript недоступен, в результате пользователи не могут получить доступ к информации.
- Поскольку мы подключаем библиотеку JavaScript извне, внешним может быть CSS, используемый в веб-разработке. Он обеспечивает базовый макет и делает контент презентабельным для пользователей.
Зачем использовать прогрессивное улучшение?
В режиме реального времени, когда вы предоставляете контент в Интернете, возникает множество проблем, таких как интернет-интерпретация, поддержка браузера, версии браузера и т. д. Но прогрессивное улучшение начинается с основ и продолжает улучшать продукты высокого уровня.
Ниже приведены причины использования прогрессивного улучшения.
- Улучшено SEO этого сайта, потому что информация будет более доступной.
- Улучшенная совместимость и доступность, поскольку контент должен загружаться на различных устройствах.
- Нет обслуживания для веб-сайтов.
- Улучшена скорость и пользовательский опыт.
Как реализовать прогрессивное улучшение:
Мы уже знаем, что прогрессивное улучшение начинается с базового уровня до высокого. HTML — это основа веб-дизайна. Вот почему мы начинаем писать HTML в формате уценки. HTML — это первый слой любого веб-приложения.
Пример: В следующем примере мы пишем код для меню навигации.
Выход:
Код CSS: мы пишем CSS для стилизации. Это второй уровень веб-дизайна. Добавьте CSS в код HTML.
CSS
button { border: none; padding: 10px 20px; cursor: pointer; background: green; transition: all ease 0.2s;} button:hover { box-shadow: 2px 2px 4px rgb(90, 90, 90); filter: invert(1);} ul { list-style: none; padding: 0px; width: 250px;} .active { height: 0px; overflow-y: auto;} li { height: 25px; padding: 10px; background-color: none;} li:hover { filter: invert(1);} li a { height: 100%; width: 100%; color: black; text-decoration: none;} |
Выход:
Код JS: мы добавляем JavaScript на наши веб-страницы, чтобы сделать их более отзывчивыми и функциональными. Это третий уровень веб-дизайна.
Javascript
window.addEventListener("load", () => { dropDownMenu = document.querySelector("#ul") btn = document.querySelector("#dropbtn") dropDownMenu.classList.add("closed") btn.addEventListener("click", (e) => { e.preventDefault() dropDownMenu.classList.toggle("closed") })}) |
Окончательный код: Окончательный код представляет собой комбинацию всех трех разделов, указанных выше.
Выход:
Пример прогрессивного улучшения: в некоторых браузерах не включены расширения JavaScript. В этом случае мы не можем использовать фреймворки Angular, React, Vue js и т.д. Чтобы избежать этой проблемы, вы должны предоставить альтернативные варианты или контент, например «JavaScript не включен в вашем браузере».
<body>
<div id="root">
<p>You need to enable JavaScript to run this app.</p>
</div>
</body>Если разработчики используют настраиваемые шрифты, которые могут быть несовместимы со всеми браузерами. В этом случае вы можете использовать альтернативное семейство шрифтов, совместимое со всеми браузерами.
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
font-family: "Open Sans", sans-serif;
}Заключение: мы кратко обсудим прогрессивное улучшение. Подводя итог, можно сказать, что прогрессивное улучшение начинается с базовой версии до высокой, а это означает, что следует учитывать старые версии.