Tīmekļa pārlūkprogrammās ir apmēram tik ilgi, kamēr ir pieejamas vietnes. Faktiski pārlūkprogrammas ir būtiska sastāvdaļa pieredzē vai cilvēki, kuri skatās jūsu vietni, taču ne visas pārlūkprogrammas tiek izveidotas vienādi. Ir pilnīgi iespējams (un faktiski diezgan iespējams), ka klientiem, kuri pārlūkošanas laikā skatās jūsu tīmekļa lapas, ir ļoti vecas un trūkst funkciju, kas atrodama modernākajās pārlūkprogrammās. Tas var radīt būtiskas problēmas, jo jūs cenšaties veidot tīmekļa vietnes, kas izmanto jaunākās tīmekļa vietnes izstrādes un izstrādes priekšrocības . Ja kāds piesakās uz jūsu vietni, izmantojot kādu no šiem novecojušajiem pārlūkiem, un jūsu jaunākās progresīvās metodes viņiem nedarbojas, kopumā varat būt par sliktu pieredzi. Progresīva uzlabošana ir stratēģija, kā rīkoties ar dažādu pārlūkprogrammu tīmekļa lapu izstrādi, proti, vecās pārlūkprogrammas, kurām trūkst modernā atbalsta.
Progresīvs uzlabojums ir veids, kā veidot tīmekļa lapas, lai vairāk funkciju, ko atbalsta lietotāja interfeiss, jo vairāk funkcijas būs tīmekļa lapai. Tas ir pretējs dizaina stratēģijai, ko sauc par graciozo degradāciju . Šī stratēģija vispirms izveido lappuses vismodernākajām pārlūkprogrammām, un pēc tam nodrošina, ka tie arī strādā samērā labi ar mazāk funkcionālajiem pārlūkiem - ka pieredze "graciozi pazeminās". Progresīvā uzlabošana vispirms sākas ar mazāk funkcionālajām pārlūkprogrammām un no turienes iegūst pieredzi.
Kā lietot progresīvo uzlabojumu
Veidojot web-dizainu, izmantojot progresīvu uzlabojumu, pirmā lieta, ko jūs darīsit, ir izveidot dizainu, kas darbojas zemākajam tīmekļa pārlūkprogrammu kopējam saucējam. Pamatā progresīvā uzlabošana saka, ka jūsu saturam jābūt pieejamam visām tīmekļa pārlūkprogrammām, nevis tikai apakšizvēlnei. Tieši tāpēc jūs sākat atbalstīt šīs vecās, novecojušās un mazāk funkcionālās pārlūkprogrammas.Ja izveidojat vietni, kas darbojas labi par viņiem jūs zināt, ka esat izveidojis pamatslāni, kas visiem apmeklētājiem sniegtu vismaz piemērotu pieredzi.
Pirmkārt, sākot ar vismazāk iespējamajām pārlūkprogrammām, jūs vēlaties, lai visi jūsu HTML būtu derīgi un semantiski pareizi. Tas palīdzēs nodrošināt, ka visplašākais lietotāju aģentu klāsts var apskatīt lapu un to pareizi uzrādīt.
Atcerieties, ka vizuālā dizaina stili un vispārējais lapas izkārtojums tiek pievienoti, izmantojot ārējās stilu lapas . Tas patiešām notiek, ja notiek pakāpeniska uzlabošana. Jūs izmantojat stila lapu, lai izveidotu vietnes dizainu, kas darbojas visiem apmeklētājiem. Pēc tam varat pievienot papildu stilus, lai uzlabotu lapu, jo lietotāja aģenti iegūst funkcionalitāti. Ikviens iegūst bāzes līniju stilus, taču jebkurai ziņu pārlūkprogrammai, kas var atbalstīt modernākos un modernākos stilus, tās iegūst papildu vērtību. Jūs "pakāpeniski uzlabojat" lapu pārlūkprogrammām, kas var atbalstīt šos stilus.
Ir daži veidi, kā jūs varat izmantot progresīvu papildierīci. Pirmkārt, jums vajadzētu apsvērt to, ko pārlūks dara, ja tas nesaprot CSS rindu - tas ignorē to! Tas faktiski darbojas jūsu labā. Ja izveidojat pamata stilu kopumu, ko visas pārlūkprogrammas saprot, tad varat pievienot papildu stilus jaunām pārlūkprogrammām. Ja viņi atbalsta stilus, viņi tos piemēros. Ja nē, viņi tos ignorēs un vienkārši izmantos šos sākotnējos stilus. Šajā vienkāršajā CSS var redzēt vienkāršu progresīvas uzlabošanas piemēru:
galvenais saturs {
fons: # 999;
fons: rgba (153,153,153, .75);
}
Šis stils vispirms nosaka fona pelēcīgu krāsu. Otrais noteikums izmanto RGBA krāsu vērtības, lai iestatītu pārredzamības līmeni. Ja pārlūks atbalsta RGBA, tas ignorē pirmo stilu ar otro. Ja tas nenotiek, tiks piemērots tikai pirmais. Jūs esat iestatījis pamata krāsu un pēc tam pievienojis papildu stilus mūsdienīgākām pārlūkprogrammām.
Funkciju vaicājumu izmantošana
Vēl viens veids, kā jūs varat izmantot progresīvu papildinājumu, ir izmantot tos, kas pazīstami kā "funkciju vaicājumi". Tie ir līdzīgi mediju vaicājumiem , kas ir būtisks vietnes dizainu . Lai gan mediji meklē noteiktā ekrāna izmēra tekstu, funkciju vaicājumi pārbauda, vai kāda funkcija tiek atbalstīta vai nē. Sintakse, kuru izmantojat, ir:
@ atbalsta (displejs: flex) {}Visi stili, kurus pievienojāt šajā noteikumā, darbosies tikai tad, ja pārlūkprogramma atbalstīs "flex", kas ir Flexbox stili. Jūs varat iestatīt vienu noteikumu kopumu visiem un pēc tam izmantot funkciju vaicājumus, lai pievienotu papildu tikai atsevišķām pārlūkprogrammām.
Jennifera Krīnina oriģinālais raksts. Rediģējis Džeremijs Girards 16/16/16.