Прогресивно побољшање је техника која помаже да се осигура да је ваш софтвер робустан и приступачан. Ако га пратите, можете осигурати да што више људи може да користи вашу веб локацију или апликацију.
Почните са минимално одрживом верзијом вашег веб дизајна и осигурајте да функционише по потреби. Затим поставите додатну функционалност и стил, тако да способнији прегледачи могу имати користи.
Како функционише прогресивно побољшање?
Због своје изузетно дистрибуиране природе, веб је одувек имао потребу да подржава велики број уређаја. Од основних рачунара из 1970-их до способних модерних десктопа, таблета и телевизора, веб странице су прешле дуг пут.
У срцу свега је ХТМЛ. Пошто је то језик који „опрашта“, претраживачи ће приказати ХТМЛ онако како га разумеју. Обично ће игнорисати све што не подржавају.
Ово може бити корисно са тачке гледишта програмера, али може изазвати проблеме читаоцима. Ако ваш сајт приказује празну страницу када ЈаваСцрипт не може да се покрене, корисници немају другог избора осим да је напусте. Прогресивно побољшање вас подстиче да испоручите основни садржај свима који му могу приступити, а затим побољшате тај садржај користећи одговарајуће технологије, као што су ЦСС и ЈаваСцрипт.
Прогресивни приступ стајлингу
ЦСС је језик веб листе стилова које можете користити за прилагођавање боја, фонтова, распореди, и многе друге визуелне аспекте ваших страница. Можете га користити да побољшате подразумевани изглед свог садржаја, али то не значи да не бисте требали правилно структурирати свој садржај.
Узмите траку менија, на пример; можете га структурирати овако:
<нав>
<а хреф="/register">регистровати</а>
<а хреф="/login">Пријавите се</а>
<а хреф="/about">о нама</а>
<а хреф="/contact">контакт</а>
</nav>Да бисте приказали хоризонтални мени, са сваким линком који личи на дугме, можете га стилизовати користећи овај ЦСС:
нав а {
текст-декорација: нема;
дисплеј: инлине-блоцк;
паддинг: 0.5ем 1ем;
граница: 1пк чврста;
бордер-радиус: 8пк;
маргин-ригхт: 1ем;
}Када претраживач ово у потпуности прикаже, требало би да изгледа овако:
Међутим, ако ЦСС није доступан, мени ће се приказати овако:
Обратите пажњу на то како ово не личи на мени и није баш лако за коришћење јер се везе спајају у једну.
Можете користити алтернативну структуру како бисте дизајн учинили робуснијим:
<нав>
<ул>
<ли><а хреф="/register">регистровати</а></li>
<ли><а хреф="/login">Пријавите се</а></li>
<ли><а хреф="/about">о нама</а></li>
<ли><а хреф="/contact">контакт</а></li>
</ul>
</nav>Пошто ова ознака користи неуређени елемент листе, много је употребљивија у одсуству ЦСС-а:
Имајте на уму колико је лакше брзо скенирати и разумети ове везе, чак и са подразумеваним стилом прегледача. Овај приступ ће захтевати од вас да додате мало више ЦСС-а, да бисте заменили подразумеване стилове листе:
навли { приказ: у реду; }Иако су коначна структура и стилови компликованији, а већина корисника ће имати омогућен ЦСС, овај приступ је робуснији. Биће пријатније за кориснике читача екрана и претраживачи засновани на терминалима.
Увођење функционалности прогресивно
Прогресивно побољшање је најважније када је у питању функционисање сајта или апликације. Принцип каже да, без обзира на све, ваша веб локација треба да функционише што је могуће боље.
У пракси, ово се обично односи на ЈаваСцрипт. Ако уведете понашање на страни клијента, требало би да положи функционалност на врх сајта или апликације која већ функционише без тога.
Веома чест случај је руковање догађајима. Замислите страницу која учитава додатни садржај на захтев. Ово може бити ручно бесконачно померање, уграђивање коментара или слично.
<тело>
<!--... -->
<дугме онцлицк="Учитај више();">
Учитај Више
</button>
<!--... -->
</body>Дугме онцлицк атрибут садржи ЈаваСцрипт код који ће се покренути када неко кликне на дугме. Међутим, ако ЈаваСцрипт није доступан, ово дугме неће учинити ништа. Корисник ће кликнути левим кликом на ово дугме без повратних информација и појма шта није у реду. Далеко бољи приступ користи прогресивно побољшање:
<тело>
<!--... -->
<а ид="п2" хреф="/page/2">страна 2</а><скрипта>
функцијаУчитај више() { конзола.Пријава("!"); }
/* Замени везу дугметом */
вар линк = документ.гетЕлементБиИд("п2");
вар дугме = документ.цреатеЕлемент("дугме");
буттон.иннерТект = "Учитај више";
буттон.аддЕвентЛистенер("клик", Учитај више);
документ.тело.инсертБефоре(дугме, линк);
линк.парентНоде.ремовеЦхилд(линк);
</script>
</body>
Овај код трансформише основну везу у дугме са руковаоцем догађаја. Увођењем зависности од ЈаваСцрипт-а користећи сам ЈаваСцрипт, можете бити сигурни да ће функционисати. И постоји функционално подразумевано понашање које функционише, у облику стандардне везе до /page/2.
Да ли је прогресивно побољшање заиста неопходно?
Сви користе претраживаче са ЦСС-ом и ЈаваСцрипт-ом, па зашто се онда трудити да бринемо о ситуацији која се не појави? Па, постоји неколико разлога зашто бисте требали усвојити добру праксу прогресивног побољшања.
- Прво, не користе сви који посете вашу веб локацију прегледач. Неки посетиоци ће бити ботови, попут индексатора претраживача, а они можда уопште не разумеју ЦСС или ЈаваСцрипт.
- Друго, неће свака особа која посети ваш сајт користити претраживач са ЦСС-ом и ЈаваСцрипт-ом. Неки посетиоци могу да користе претраживач заснован на терминалу, који приказује обичан текст са минималним форматирањем. Други могу користити читач екрана.
- Треће, чак и ако претраживач подржава ЦСС и ЈаваСцрипт, ствари иду наопако. Неисправна веза или лоша мрежна веза могу довести до тога да недостаје .цсс или .јс датотека. Грешка у ЈаваСцрипт-у може узроковати да се други код уопште не покрене.
- Коначно, неки посетиоци могу активно одлучити да онемогуће ЦСС или ЈаваСцрипт. Они то могу учинити из забринутости за приватност или зато што су на спорој или плаћеној вези.
Прогресивни начин размишљања чини чуда
Изнад свега, прогресивно побољшање вас подстиче да усвојите приступ на првом месту. Садржај је краљ, тако да би ваш текст и слике увек требало да буду доступни свима, без обзира на то да приступају вашој веб локацији.
Дајући свим читаоцима најбоље могуће искуство, а затим га чинећи још бољим за оне који могу имати користи, можете имати најбоље од свих светова. Прогресивно побољшање је само једна кључна компонента добре праксе приступачности и употребљивости.
