Прогресивното подобрение е техника, която помага да се гарантира, че вашият софтуер е надежден и достъпен. Като го следвате, можете да гарантирате, че възможно най-много хора ще могат да използват вашия уебсайт или приложение.
Започнете с минимално жизнеспособна версия на вашия уеб дизайн и се уверете, че функционира според нуждите. След това добавете допълнителна функционалност и стил, така че по-способните браузъри да могат да се възползват.
Как работи прогресивното подобрение?
Поради своята изключително разпределена природа, мрежата винаги е имала нужда да поддържа огромен набор от устройства. От обикновените компютри от 70-те години на миналия век до мощните съвременни настолни компютри, таблети и телевизори, уебсайтовете изминаха дълъг път.
В основата на всичко е HTML. Тъй като това е „прощаващ“ език, браузърите ще показват HTML толкова добре, колкото го разбират. Обикновено те ще игнорират всичко, което не поддържат.
Това може да бъде полезно от гледна точка на програмиста, но може да създаде проблеми за читателите. Ако вашият сайт показва празна страница, когато JavaScript не може да работи, потребителите нямат друг избор, освен да го изоставят. Прогресивното подобрение ви насърчава да доставяте основно съдържание на всеки, който има достъп до него, след което да подобрявате това съдържание с помощта на подходящи технологии, като CSS и JavaScript.
Прогресивен подход към стилизирането
CSS е стиловият език на мрежата които можете да използвате, за да персонализирате цветове, шрифтове, оформленияи много други визуални аспекти на вашите страници. Можете да го използвате, за да подобрите външния вид на вашето съдържание по подразбиране, но това не означава, че не трябва да структурирате съдържанието си правилно на първо място.
Вземете например лента с менюта; можете да го структурирате така:
<нав>
<a href="/register">регистрирам</a>
<a href="/login">Влизам</a>
<a href="/about">за нас</a>
<a href="/contact">контакт</a>
</nav>За да покажете хоризонтално меню, като всяка връзка изглежда малко като бутон, можете да го стилизирате с помощта на този CSS:
nav a {
текст-декорация: няма;
дисплей: inline-block;
подплата: 0.5em 1ем;
рамка: 1px плътна;
радиус на границата: 8px;
поле-дясно: 1em;
}Когато браузърът изобрази напълно това, трябва да изглежда по следния начин:
Ако обаче CSS не е наличен, менюто ще се покаже по следния начин:
Забележете как това не изглежда като меню и не е много лесно за използване, тъй като връзките се сливат в едно.
Можете да използвате алтернативна структура, за да направите дизайна по-здрав:
<нав>
<ул>
<ли><a href="/register">регистрирам</a></li>
<ли><a href="/login">Влизам</a></li>
<ли><a href="/about">за нас</a></li>
<ли><a href="/contact">контакт</a></li>
</ul>
</nav>Тъй като тази маркировка използва неподреден елемент от списък, тя е много по-използваема при липса на CSS:
Обърнете внимание колко по-лесно е бързото сканиране и разбиране на тези връзки, дори със стила по подразбиране на браузъра. Този подход ще изисква да добавите малко повече CSS, за да замените стандартните стилове на списъка:
навли { дисплей: в редица; }Въпреки че крайната структура и стил са по-сложни и повечето потребители ще имат активиран CSS, този подход е по-стабилен. Ще бъде по-удобно за потребителите на екранни четци и терминално базирани браузъри.
Постепенно въвеждане на функционалност
Прогресивното подобрение е най-важно, когато става въпрос за функционирането на сайт или приложение. Принципът гласи, че независимо от всичко, вашият уебсайт трябва да функционира възможно най-добре.
На практика това обикновено се отнася за JavaScript. Ако въведете поведение от страна на клиента, то трябва да постави функционалност върху сайт или приложение, което вече работи без него.
Много често срещан случай е обработката на събития. Представете си страница, която зарежда допълнително съдържание при поискване. Това може да е ръчно безкрайно превъртане, вграждане на коментар или подобно.
<тяло>
<!--... -->
<бутон onclick="зареди още();">
Заредете | Повече ▼
</button>
<!--... -->
</body>Бутона onclick съдържа JavaScript код, който ще се изпълнява, когато някой щракне върху бутона. Ако обаче JavaScript не е наличен, този бутон няма да направи нищо. Потребителят ще остане да щракне върху този бутон без обратна връзка и без представа какво се обърка. Много по-добър подход използва прогресивно подобрение:
<тяло>
<!--... -->
<id="p2" href="/page/2">Страница 2</a><сценарий>
функциязареди още() { конзола.log("!"); }
/* Замяна на връзката с бутон */
вар връзка = документ.getElementById("p2");
вар бутон = документ.createElement("бутон");
button.innerText = "Зареди още";
button.addEventListener("щракнете", зареди още);
документ.тяло.insertBefore(бутон, връзка);
връзка.parentNode.removeChild(връзка);
</script>
</body>
Този код трансформира основната връзка в бутон с манипулатор на събития. Като въведете зависимостта от JavaScript, използвайки самия JavaScript, можете да сте сигурни, че ще работи. И има функционално поведение по подразбиране, което работи под формата на стандартната връзка към /page/2.
Наистина ли е необходимо прогресивното подобрение?
Всеки използва браузъри с CSS и JavaScript, така че защо да се грижим за ситуация, която не възниква? Е, има няколко причини да възприемете добрата практика на прогресивно подобряване.
- Първо, не всеки, който посещава вашия уебсайт, използва браузър. Някои посетители ще бъдат ботове, като индексатор на търсачка, и те може изобщо да не разбират CSS или JavaScript.
- Второ, не всеки човек, който посещава вашия сайт, ще използва браузър с CSS и JavaScript. Някои посетители може да използват базиран на терминал браузър, който показва обикновен текст с минимално форматиране. Други могат да използват екранен четец.
- Трето, дори ако браузърът поддържа CSS и JavaScript, нещата се объркват. Прекъсната връзка или лоша мрежова връзка може да доведе до липсващ .css или .js файл. Грешка в JavaScript може да доведе до това, че друг код изобщо не се изпълнява.
- И накрая, някои посетители може активно да решат да деактивират CSS или JavaScript. Те може да го направят от съображения за поверителност или защото са на бавна връзка или връзка с плащане чрез използване.
Прогресивното мислене върши чудеса
Преди всичко, прогресивното подобрение ви насърчава да приемете подход на първо място със съдържанието. Съдържанието е най-важното, така че вашият текст и изображения трябва винаги да са достъпни за всички, независимо от това, че имат достъп до вашия сайт.
Като предоставяте на всички читатели възможно най-доброто изживяване и след това го правите още по-добро за тези, които могат да се възползват, можете да имате най-доброто от всички светове. Прогресивното подобрение е само един ключов компонент на добрата практика за достъпност и използваемост.
