---
title: Progressive Enhancement
localeTitle: Прогрессивное улучшение
---
## Прогрессивное улучшение
**Прогрессивное улучшение** предполагает, что веб-интерфейсы должны создаваться поэтапно, циклически, от простого к сложному. На каждом из этапов должен получаться законченный веб-интерфейс, который будет лучше, красивее и удобнее предыдущего. Можно сказать, что сейчас таких этапов четыре:

1. «Старый-добрый-HTML»
2. «CSS»
3. «CSS3»
4. «JavaScript»

На первом этапе исходное содержание страницы размечается с помощью HTML. На этом этапе необходимо сделать логичную и семантически правильную разметку. Никакого дополнительного оформления не осуществляется. В результате получается корректно размеченный HTML-документ, который браузер отображает так, как считает нужным. Такой документ можно назвать «наименьшим общим знаменателем», так как он будет корректно отображаться в любом, даже самом простом, браузере. Прогрессивное улучшение настаивает, что первый этап является самым важным, так как нет в вебе ничего важнее, чем содержание.

На втором этапе документ оформляется с помощью старого доброго CSS и обретает более аккуратный вид: появляется сетка страницы, задаются параметры шрифта элементов, фоновые изображения и так далее.

На третьем этапе применяются новые возможности из семейства спецификаций CSS3, и документ доводится до блеска: полупрозрачные плашки, круглые уголки, тени. Также с помощью CSS3 можно добавить различные анимационно-декоративные фишечки: постепенное затухание или смещение элементов, подсвечивание полей форм и так далее.

На четвёртом этапе до ума доводится процесс взаимодействия с интерфейсом: различные AJAX решения, динамические элементы, те же календарики и так далее. Тут вовсю используется JavaScript. Этот этап отвечает за удобство.

Резюмируем назначение описанных этапов:

1. Смысл документа, логическая разметка. Технология: HTML.
2. Внешний вид. Технология: CSS.
3. Безупречный внешний вид. Технология: CSS3.
4. Взаимодействие, интерактивность, удобство. Технология: JavaScript.

#### Дополнительная информация:
[Больше о прогрессивном улучшении](https://htmlacademy.ru/blog/7-progressive-enhancement)