Veebibrauserid on olnud nii kaua kui veebisaidid on olemas. Tegelikult on brauserid olulised koostisosad kogemusi või inimesi, kes teie saiti vaatavad, kuid mitte kõik brauserid on võrdselt loodud. On täiesti võimalik (ja tegelikult tõenäoliselt), et kliendid näeksid oma veebilehti brauserites, mis on äärmiselt vanad ja puuduvad funktsioonidest, mis on leitud kaasaegsematest brauseritest. See võib tekitada märkimisväärseid probleeme, kui püüate välja töötada veebisaite, mis kasutavad veebisaitide kujundamise ja arendamise uusimaid edusamme . Kui keegi jõuab teie saidile, kasutades ühte neist antiqued brauseritest ja teie uusimad täiustatud tehnikad ei tööta nende jaoks, võib üldiselt olla halb kogemus. Progressiivne täiustamine on erinevate brauseritega veebilehtede kujundamise strateegia, nimelt need vanad brauserid, millel puudub kaasaegne tugi.
Järk-järguline täiustamine on veebisaitide kujundamise viis, nii et mida rohkem funktsioone toetab kasutajagrupp, seda rohkem funktsioone saab veebilehel. See on vastupidine disainstrateegiale, mida nimetatakse graatsaks halveneks . Selle strateegiaga luuakse esmalt kõige kaasaegsete brauseritega lehti ja seejärel tagatakse, et nad töötavad mõnevõrra hästi vähem funktsionaalsete brauseritega - kogemus "halvendab graatsiliselt". Esialgne progresseeruv lisavarustus algab kõige vähem võimekate brauseritega ja loob seeläbi kogemuse.
Kuidas kasutada progressiivset täiustamist
Kui loote veebi disaini, mis kasutab progressiivset täiustust, siis peate kõigepealt tegema veebi brauserite madalaima ühise nimetaja jaoks disaini. Järjekindlalt näitab progressiivne täiustus, et teie sisu peaks olema kättesaadav kõigile veebibrauseritele, mitte ainult alamkomplektile. Seetõttu alustad nende vanade, vananenud ja vähem võimekate brauseritega toetamist. Kui loote hästi toimivat saiti nende jaoks teate, et olete loonud lähtetaseme, mis peaks kõikidele külastajatele pakkuma vähemalt kasutatavat kogemust.
Kõigepealt käivitades kõige vähem sobivad brauserid, peate tagama, et kogu teie HTML peaks olema kehtiv ja semantiliselt korrektne. See aitab tagada, et kõige kasutajasõbralike agentide arv võib lehte vaadata ja täpselt kuvada.
Pidage meeles, et visuaalse disaini stiilid ja kogu lehe kujundus lisatakse väline stiililehtede abil . See on tõesti koht, kus toimub progressiivne täiustamine. Kasutage stiililehte saidi disaini loomiseks, mis töötab kõigi külastajate jaoks. Seejärel saate lisada lisaleid, et lehe täiendamiseks kasutajate agentide funktsionaalsust saada. Igaüks saab lähtejoonte stiili, kuid mis tahes uudiste brauserite jaoks, mis toetavad arenenud ja kaasaegsemaid stiile, saavad nad lisaväärtust. Te "järk-järgult suurendate" lehte selliste brauseritega, mis neid stiile toetavad.
Teil on mitmeid viise, kuidas saate järkjärgulist täiustamist rakendada. Kõigepealt peaksite kaaluma brauseri toimimist, kui ta ei mõista CSS-i rida - see ignoreerib seda! See toimib teie kasuks. Kui loote baasjoonte komplekti, mida kõik brauserid mõistavad, saate seejärel uutele brauseritele lisada täiendavaid stiile. Kui nad stiile toetavad, rakendavad nad neid. Kui ei, siis ignoreerivad nad neid ja kasutavad neid lähtejooni. Selles CSS-s on lihtne näide järkjärgulisest täiustamisest:
peamine sisu {
taust: # 999;
taust: rgba (153, 153, 153, 75);
}
See stiil määrab esmalt halli värvi tausta. Teine reegel kasutab läbipaistvuse taseme määramiseks RGBA värviväärtusi. Kui brauser toetab RGBA-d, siis ignoreerib see esimese stiili teisega. Kui see nii ei ole, rakendatakse ainult esimest. Olete määranud baasjoone värvi ja lisanud täiendavaid stiile tänapäevastele brauseritele.
Funktsiooni päringute kasutamine
Teine viis, kuidas saate järkjärgulist täiustamist rakendada, on kasutada seda, mida nimetatakse funktsiooni päringuteks. Need on sarnased meediumipäringutega , mis on olulised tundlikud veebisaidi kujundused . Kuigi meedium küsib teatud ekraanisuuruste teksti, kontrollib funktsiooni päringute abil, kas teatud funktsioon on toetatud või mitte. Kasutatav süntaks on:
@ toetused (displei: flex) {}Kõik selle reegli sisestatud stiilid toimivad vaid siis, kui brauser toetab "flex", mis on Flexboxi stiilid. Võite määrata ühe reegli kogumi kõigile ja seejärel kasutada funktsiooni päringuid, et lisada ainult valitud sirvijatele.
Jennifer Krynini algne artikkel. Redigeeris Jeremy Girard 13. ja 16. oktoobril.