A webböngészők már ott vannak, amíg a weboldalak vannak. Valójában a böngészők lényeges összetevői a tapasztalatnak vagy a webhelyét megtekintő személyeknek - de nem minden böngészőt hoznak létre egyenlő módon. Teljesen lehetséges (és valójában meglehetősen valószínű), hogy az ügyfelek megtekintik a weboldalakat olyan böngészőkben, amelyek rendkívül idősek és hiányoznak a modern böngészőben található funkciók. Ez jelentős problémát jelenthet, mivel olyan webhelyek fejlesztésére törekszenek, amelyek kihasználják a weboldal tervezésének és fejlesztésének legfrissebb eredményeit . Ha valaki a webhelyén egy ilyen régimódi böngészővel érkezik, és a legújabb fejlett technikái nem működnek számukra, általánosságban gyenge tapasztalatot nyújthatna. A progresszív fejlesztés stratégiája az internetes oldalak tervezése különböző böngészők számára, nevezetesen azoknak a régi böngészőknek, amelyek nem rendelkeznek modern támogatással.
A progresszív fejlesztés a weboldalak kialakításának egyik módja annak, hogy a több felhasználó által támogatott funkciók támogatják a weboldalt. A tervezési stratégia ellentétes, mint a kecses degradáció . Ez a stratégia elsősorban a legmodernebb böngészők számára készült oldalakat, majd biztosítja, hogy a kevésbé funkcionális böngészők is ésszerűen működjenek -, hogy az élmény "kecsesen bomlik". A progresszív fejlesztés elsőként a kevésbé képes böngészőkkel kezdődik, és onnan felépít egy élményt.
A progresszív feljavítás használata
Amikor webes tervet készít a progresszív tartozék használatával, az első dolog, amit meg kell tennie, hogy olyan tervet hozzon létre, amely a webböngészők legalacsonyabb közös nevezője számára működik. Maga a progresszív fejlesztés azt mondja, hogy tartalmának elérhetőnek kell lennie minden böngésző számára, nem csak egy alcsoportnak. Ezért kezdjük ezeket a régi, elavult és kevésbé képes böngészőket. Ha létrehoz egy jól működő webhelyet számukra, tudod, hogy olyan alapvonalat hoztál létre, amely legalább hasznos élményt biztosít minden látogató számára.
Ha először a legkevésbé képes böngészőket szeretné kezdeni, akkor gondoskodnia kell arról, hogy minden HTML-nek érvényesnek és szemantikailag helyesnek kell lennie. Ez segít annak biztosításában, hogy a felhasználói ügyfelek legszélesebb változata megtekintheti és pontosan megjelenítse az oldalt.
Ne feledje, hogy a vizuális tervezési stílusokat és az általános oldalelrendezést külső stíluslapok segítségével adják hozzá. Ez valójában ott van, ahol a fokozatos javulás történik. A stíluslapot olyan webhelytervezéshez hozhatja létre, amely minden látogató számára működik. Ezután hozzáadhat további stílusokat, hogy javítsa az oldalt, ahogy a felhasználói ügyfelek megszerezzék a funkciókat. Mindenki megkapja az alapvonalak stílusait, de minden olyan hírböngésző számára, amely támogatja a fejlettebb és korszerűbb stílusokat, kapnak valamit. Ön "fokozatosan javítja" az olyan oldalt, amely támogatja ezeket a stílusokat.
Néhány mód van arra, hogy fokozatosan javítson. Először is, fontolja meg, hogy mit csinál egy böngésző, ha nem érti meg a CSS egy sorát - figyelmen kívül hagyja! Ez valóban az Ön javára működik. Ha olyan alapvonalat hoz létre, amelyet minden böngésző megért, akkor további stílusokat adhat hozzá az új böngészőkhöz. Ha támogatják a stílusokat, alkalmazzák őket. Ha nem, akkor figyelmen kívül hagyja őket, és csak azokat az alapvonalakat használják. Egy egyszerű példa a progresszív javításra ebben a CSS-ben:
.központi téma {
háttér: # 999;
háttér: rgba (153,153,153, 75);
}
Ez a stílus először szürkés színűvé teszi a hátteret. A második szabály az RGBA színértékeket használja az átlátszóság beállításához. Ha egy böngésző támogatja az RGBA-t, felülbírálja az első stílust a másodikval. Ha nem, csak az első alkalmazásra kerül. Alapszintű színt állított be, majd extra stílusokat adott hozzá a korszerűbb böngészőkhöz.
A funkció lekérdezések használata
A progresszív továbbfejlesztés alkalmazásának másik módja az úgynevezett "szolgáltatás lekérdezések" használata. Ezek hasonlóak a média lekérdezésekhez , amelyek az elvárható weboldal tervezésének lényeges elemei. Míg a média lekérdezi a szöveget bizonyos képernyőméretekhez, a szolgáltatás lekérdezések ellenőrzik, hogy egy adott funkció támogatott-e vagy sem. A szintaxis a következő:
@supports (display: flex) {}A szabályon belül hozzáadott stílusok csak akkor működnek, ha a böngésző támogatja a "flex" -ot, ami a Flexbox stílusa. Mindenki számára egy szabálykészletet állíthat be, majd a funkciók lekérdezésével kiegészítheti a kiválasztott böngészőkre.
Jennifer Krynin eredeti cikke. Szerkesztette: Jeremy Girard 13/13/16.