Techniky postupnej degradácie css. Metóda postupného zlepšovania s CSS3: Podpora moderných prehliadačov. Pôvabná degradácia s predponami už nefunguje

V tomto článku sa pokúsime prísť na to, aký je rozdiel medzi dvoma princípmi tvorby stránky založenej na „responzívnom“ webdizajne: Progressive Enhancement a Graceful Degradation.

pôvabná degradácia

Pôvabná degradácia, alebo „tolerancia chýb“ je širší pojem, ktorý sa používa nielen vo webdizajne. Vo všeobecnom zmysle znamená schopnosť systému fungovať aj v prípade zlyhania niektorých jeho komponentov. A čím je porucha závažnejšia, tým je kvalita systému alebo práce so systémom nižšia, ale hlavná funkcionalita systému zostáva funkčná.

Ladná degradácia sa môže prejaviť v schopnosti pracovať s vypnutým JavaScriptom, v presnom zobrazení stránky v prehliadači bez podpory špecifikácie CSS3, v adekvátnom zobrazení stránky s vypnutými obrázkami. Všetky tieto poruchy by nemali mať vplyv na fungovanie webovej aplikácie. Ak však všetko funguje, potom je používanie stránky pre používateľa oveľa pohodlnejšie.

Ak vezmeme do úvahy konkrétny príklad napríklad z oblasti dizajnu webového rozhrania, potom možno tento princíp formulovať ako „systém môže pracovať s úplne vypnutým JavaScriptom, ale oveľa pohodlnejšie bude pracovať so zapnutým“. Otázkou nie je, či to môže byť tým, že JS je deaktivovaný alebo nie plne funkčný, alebo prečo. Táto situácia sa považuje za samozrejmosť. Dizajnér musí vyvinúť také rozhranie, ktoré bude naďalej fungovať rovnakým spôsobom, aj keď s vypnutým JS.

Aby ste dodržali tento princíp, často musíte prerobiť logiku spracovania formulárov na strane servera. Tento prístup sa však oplatí, ak na odolnosť voči chybám myslíte už vo fáze plánovania formulára.

Dodržiavanie princípu ladnej degradácie umožňuje používateľom (a každý používateľ je potenciálnym klientom) pracovať so stránkou v akejkoľvek situácii.

Progresívne vylepšenie

Progresívne zlepšovanie je princíp, ktorý spolu s „mobile first“ vytvára teoretický základ pre „responzívny“ (adaptívny) dizajn webu. Už jej názov hovorí, že umiestňuje tvorbu webovej stránky na etapy, cyklicky, podľa princípu „od jednoduchého k zložitému“. V každej z vopred naplánovaných fáz by mal byť vzhľad stránky krajší, lepší a pohodlnejší, ale všetky funkcie by mali byť k dispozícii na začiatku.

Ide o špeciálnejší prípad elegantnej degradácie , pretože všetky webové stránky na ňom postavené budú plne vyhovovať princípu ladnej degradácie.

Vytvorenie stránky progresívneho vylepšenia zvyčajne pozostáva z nasledujúcich krokov:

Vytvorenie "čistej" stránkyHTML
V tejto fáze je vytvorená plne funkčná stránka, ktorú tvorí iba HTML kód, ktorý je sémanticky a logicky správny, a preto ho dokáže interpretovať akýkoľvek prehliadač, aj ten najjednoduchší. V tejto fáze sa nevykonáva žiadne formátovanie a samotný prehliadač naformátuje stránku podľa štandardov, ktoré sú v nej vložené. Postupné zlepšovanie trvá na tom, že najdôležitejší je prvý krok, pretože na webe nie je nič hodnotnejšie ako obsah.
Krátky: vytvorenie sémantickej a logickej štruktúry dokumentu
Pridávanie pravidielcss
V tejto fáze sa použije tabuľka CSS starého formátu: pridá sa značkovacia mriežka, použije sa umiestnenie prvkov, aplikujú sa obrázky pozadia pre bloky, zmenia sa štýly, farby a štýly textov. Vo všeobecnosti stránka získa nový štylizovaný vzhľad, stane sa krajšou a príjemnejšou.
Krátky: dávajúci vzhľad dokumentu
Použitie CSS3
Teraz môžete na dokument použiť všetky efekty a vylepšenia, ktoré poskytuje špecifikácia CSS3. To znamená, že pridajte priesvitnosť, tiene, zaoblenie rohov pre bloky, plynulé prechody animácií pre pseudotriedy alebo prvky formulára.
Krátky: nepoškvrnený vzhľad dokument
Vytváranie skriptov preJavaScript
V tejto fáze sú všetky efekty a princípy interakcie webovej stránky s používateľom vytvorené pomocou JavaScriptu. Ide o požiadavky AJAX, dynamické načítanie alebo overenie údajov, animačné efekty a widgety (napríklad Prototype alebo jQuery). Vo všeobecnosti robíme stránku užívateľsky príjemnejšou.
Krátky: interakcia, interaktivita, pohodlie

Skúsme tento prístup uplatniť v praxi. Vyvinieme a navrhneme najjednoduchší prihlasovací formulár na stránku. V prvej fáze vytvoríme prihlasovací formulár v čistom HTML. Tvar nie je taký pekný, ale je plne funkčný. Nižšie je uvedený kód stránky a výsledok zobrazenia v prehliadači:

Teraz v druhom kroku naštylizujeme formulár tak, že naň aplikujeme šablónu štýlov, obsahujúcu len tie pravidlá, ktoré sú použiteľné pre CSS bez špeciálnych vlastností. Pridajte farbu pozadia, výplň, zarovnanie. Formulár teraz vyzerá lepšie:

Teraz pridajme pravidlá zo špecifikácie CSS3. Pridajme do blokov zaoblenia, tiene pre polia na zadávanie textu, upravme štýl tlačidla, pomocou nových selektorov odstránime zbytočné vypchávky zhora. Získame vylepšenú formu:

V poslednom kroku môžeme vytvoriť požiadavku AJAX, aby používateľ mohol vstúpiť na stránku bez toho, aby musel stránku znova načítať.

Zároveň sa v každej konkrétnej fáze (s podporou jej prehliadača) zobrazí plne funkčná stránka. Ak však prehliadač podporuje pokročilejšie technológie, stránka sa bude len zlepšovať.

Akú zásadu dodržiavať?

Ak je lokalita vybudovaná čo najefektívnejšie podľa konceptu ladnej degradácie, potom bude výsledok približne rovnaký, ako by bol pri postupnom zlepšovaní. Tak aký je v tom potom rozdiel?

Faktom je, že budovanie lokality podľa princípu ladnej degradácie je dosť ťažké, pretože len málo developerov to dokáže efektívne. V najjednoduchšom prípade elegantnej degradácie môžete urobiť nasledovné: vytvoriť stránku pre Najnovšia verzia prehliadača a potom používateľom ukázať správu, v ktorej im povie, že si musia stiahnuť Nová verzia prehliadač. Vývojárom zároveň môže byť jedno, ako stránka vyzerá v starších prehliadačoch. Ďalším príkladom zlej elegantnej degradácie je úplné zakázanie funkčnosti stránky, keď je zakázaný JavaScript. Typickým príkladom je posielanie správ na Facebook.com.

Preto progresívne zlepšovanie vzniklo ako reakcia na nekvalitnú ladnú degradáciu. Navrhovanie takýchto rozhraní je jednoduchšie a lepšie, pretože existujú jasne definované kroky na vytvorenie rozhrania.

AT responzívny dizajn existuje pojem „mobile first“, ktorý istým spôsobom korešponduje s konceptom progresívneho vylepšovania, keďže vyžaduje konanie od jednoduchého po zložité, od mobilné obrazovky do stolných počítačov. Preto je kľúčom k správnej aplikácii responzívny webový dizajn závisí od schopnosti vývojára aplikovať princípy progresívneho vylepšovania a mobile first.

Som zmätený z rozdielu medzi Postupné posilňovanie a Pôvabné degradácie. Myslím, že je to jedno a to isté.

mohli by ste mi, prosím, vysvetliť rozdiel medzi týmito dvoma a v akej situácii by som použil jeden pred druhým?

8 odpovedí

Sú takmer rovnaké, ale líšia sa kontextom.

existuje trieda prehliadačov nazývaná "prehliadače triedy A". Toto sú vaši typickí členovia publika, ktorí (pravdepodobne) tvoria väčšinu vašich návštevníkov. Začnete so základnou úrovňou týchto používateľov. Nazvime to najlepšie moderné postupy.

Ak chceš zvýšiť zážitok pre tých, ktorí omylom používajú FF3.6 alebo Safari 4 alebo nejaký iný vývojársky whizbang nočný webkit, čo chcete robiť úžasné veci ako

zaoblené rohy cez css
tieňovaný text (ale prosím Boha, nie príliš)
vrhané tiene (pozri vyššie v zátvorkách)

Vďaka tomu bude vaša stránka vyzerať neuveriteľne, no nezničí ju. to postupné zvyšovanie. Prijatie budúcnosti v pojmoch osvedčené postupy.

na druhej strane, vaša špecializovaná stránka Nintendo priťahuje značné množstvo používateľov IE5. Chudák, ale tiež sa chceš uistiť, že sa stále vracajú. Môžete poskytnúť alternatívu k svojmu správaniu ajax zahrnutím skriptu ajax do externého súboru a ak nie je zahrnutý ich JS, je možné, že vaše odkazy obnovia celú stránku. Atď. Z pohľadu najlepšie moderné postupy, zistíte, že sa podávajú niektoré historické trhy nejaké zdanie funkčného miesta. to pôvabná degradácia.

Sú v podstate identické, ale líšia sa z hľadiska priority pre mnohé vývojové tímy: PE je celkom fajn, ak máte čas, ale GD je často nevyhnutné

Ak vaša stránka vyzerá rovnako dobre vo všetkých prehliadačoch, ale niektoré prehliadače majú, povedzme, tancujúce poníky, pretože podporujú tancujúce poníky, potom ide o progresívne zlepšenie. Funguje vo všetkých prehliadačoch, no niektoré prehliadače dostávajú niečo navyše. Tento výraz sa zvyčajne používa na určité funkcie JavaScriptu, ktoré môžu zlepšiť použiteľnosť mimo „spracovaného HTML“.

Ak vaša stránka vyzerá tak, ako chcete, v prehliadačoch, ktoré plne podporujú, povedzme, CSS3 a IE8, vykreslia tú istú stránku bez, povedzme, zaoblených rohov, potom ide o pôvabnú degradáciu. Stránka je skutočne určená moderné prehliadače, ale stále sa používa v starších prehliadačoch, len nie tak vymyslený.

v skutočnosti ide o to isté, nazerané z dvoch rôznych uhlov pohľadu.

smer od vybraného základňu každý koncept je iný.

ladná degradácia začína na ideálnej úrovni používateľskú skúsenosť a znižuje sa na základe schopností používateľského agenta na minimálnu úroveň, obsluhujúcich agentov, ktorí nepodporujú určité funkcie používané základnou líniou.

Progresívne vylepšenie začína na širokej minimálnej skúsenosti spotrebiteľa a zvyšuje sa v závislosti od schopností spotrebiteľského agenta na schopnejšiu úroveň, ktorá sa stará o agentov, ktorí podporujú pokročilejšie funkcie ako základné.

Myslím, že obidva koncepty by sa dali použiť, ak to čas/rozpočet dovolí. Ak nie, potom je vhodnejšia ladná degradácia.

Ospravedlňujem sa, že oživujem niečo, čo je viac ako rok staré, ale cítil som, že by som mohol prispieť svojím spôsobom vlastným názorom na vec.

aj keď súhlasím s Alexom Mcpom a istým spôsobom deceze, výrazy "ladná degradácia" a "progresívne vylepšovanie" majú trochu iný význam, ako si zaslúžim.

pôvabná degradácia veľa času (podľa môjho názoru) sa zdá byť skôr palicou na prekonanie aplikácie v pohľade po tom, čo bola v prvom rade zle zostavená. Ako niekto vytvorí obrovský javascriptový objekt, ktorý používateľovi poskytne niečo skutočne skvelé na hranie, kým nepríde manažér, neskontroluje vec a všetci kričia a rozhadzujú rukami, keď si všimnú, že ich aplikácia nefunguje v 35 % prehliadačov. "Niekto, kto by to mal lepšie zabezpečiť."

Postupné posilňovanie aj keď (a to je tiež dobrý výraz) by to vyzeralo skôr o budovaní niečoho, čo jednoducho funguje vstupný level, všade, pomocou najzákladnejších dostupné metódy poskytnúť všetky funkcie, ktoré používateľ potrebuje. To je možné pridať pomocou úhľadných malých nenápadných pomocníkov, stylingu atď. To v skutočnosti zlepšuje používateľskú skúsenosť s príslušnou aplikáciou, nielen ju robí sotva použiteľnou. "čo vyzerá super. Funguje to v IE6. Áno. Funguje"

Myslím si, že možno uviesť štýl ako príklad oboch výrazov v prvých dvoch odpovediach tu trochu chýba skutočný základný problém použiteľnosti, ktorým je postupné zvyšovaniečasto rozhoduje príroda kde pôvabná degradácia ignoruje, kým sa všetko nepokazí.

Tiráda sa skončila...

pôvabná degradácia je prax navrhovania webovej funkcionality tak, aby poskytovala určitú úroveň používateľského zážitku v modernejších prehliadačoch, ale tiež elegantne degraduje na nižšiu používateľskú skúsenosť v starších prehliadačoch. Táto nižšia úroveň nie je pre návštevníkov vašich stránok taká príjemná, ale stále im poskytuje základné funkcie, ktoré prišli na vašu stránku používať. veci sa im nelámu.

progresívny boost je podobný, ale je to naopak. Začnete stanovením základnej úrovne používateľského zážitku, ktorú budú môcť poskytnúť všetky prehliadače pri vykresľovaní vašich webových stránok, ale vytvoríte aj pokročilejšie funkcie, ktoré budú automaticky dostupné prehliadačom, ktoré ich môžu používať.

inými slovami, pôvabná degradácia začína od súčasného stavu zložitosti a pokúša sa napraviť menej skúseností, zatiaľ čo progresívne zlepšovanie začína od veľmi základného, fungujúceho príkladu a umožňuje neustále rozširovanie pre budúce prostredia. Pôvabne degradovať znamená pozerať sa späť, zatiaľ čo progresívne zvyšovanie znamená pozerať sa dopredu a pritom držať nohy na pevnej zemi.

Pôvabné degradácie

pôvabná degradácia schopnosť počítača, stroja, elektronického systému alebo siete zachovať si obmedzenú funkčnosť, aj keď je veľká časť zničená alebo znefunkčnená. Cieľom ladnej degradácie je zabrániť katastrofickému zlyhaniu.

pôvabná degradácia je jedným z riešení. Ide o prax vytvárania webovej stránky alebo aplikácie, takže poskytuje dobrú úroveň používateľskej skúsenosti v moderných prehliadačoch. V starších prehliadačoch sa to však elegantne znižuje. Systém nemusí byť taký pekný alebo pekný, ale základná funkčnosť bude fungovať na starších systémoch.

Jednoduchým príkladom je použitie 24-bitových alfa transparentných PNG. Tieto obrázky je možné bez problémov zobraziť v moderných prehliadačoch. IE5.5 a IE6 zobrazí obrázok, ale efekty priehľadnosti nebudú fungovať (v prípade potreby ho môžete spustiť). Staršie prehliadače, ktoré nepodporujú PNG, budú zobrazovať alternatívny text alebo prázdne miesta.

vývojári, ktorí akceptujú elegantnú degradáciu, často špecifikujú svoju úroveň podpory prehliadačov, ako sú prehliadače úrovne 1 (lepšia skúsenosť) a prehliadače úrovne 2 (degradovaná skúsenosť).

Postupné posilňovanie

postupné zvyšovanie je stratégia webového dizajnu, ktorá kladie dôraz na dostupnosť, sémantické značenie HTML a externé šablóny štýlov a skriptovacie technológie. Progresívne vylepšovanie využíva webové technológie vrstveným spôsobom, ktorý umožňuje každému pristupovať k základnému obsahu a funkciám webovej stránky pomocou ľubovoľného prehliadača alebo internetového pripojenia, ako aj poskytovanie vylepšených verzií stránky tým, ktorí sú pokročilejší. softvér prehliadač alebo vyššiu šírku pásma.

progresívny vzostup je svojou koncepciou podobný elegantnému zhoršovaniu, ale naopak. Web alebo aplikácia sa nainštaluje základná úroveň používateľské prostredie pre väčšinu prehliadačov. Pokročilejšie funkcie budú pridané, keď ich bude prehliadač podporovať.

progresívne vylepšenie od nás nevyžaduje výber podporovaných prehliadačov alebo návrat k rozloženiam založeným na tabuľkách. Vyberáme technologickú úroveň, t.j. prehliadač musí podporovať HTML 4.01 a štandardné požiadavky/odpovede stránok.

späť k nášmu príkladu obrázka, môžeme sa rozhodnúť, že naša aplikácia by mala fungovať vo všetkých grafických prehliadačoch. Mohli by sme použiť nižšiu kvalitu gif obrázkyštandardne, ale nahraďte ich 24-bitovými png, keď ich prehliadač podporuje.

odkazy

Wikipedia: Postupné posilňovanie a

Som zmätený, aký je medzi tým rozdiel Postupné posilňovanie a Pôvabné degradácie. Mne sa zdajú byť rovnaké.

mohli by ste mi prosím vysvetliť rozdiely medzi nimi a v akej situácii by som ich použil?

8 56 2010-03-31 08:05:38

8 odpovedí:

Sú takmer úplne rovnaké, ale líšia sa kontextom.

existuje trieda prehliadačov s názvom "A Grade Browsers". Toto sú vaši typickí členovia publika, ktorí (pravdepodobne) tvoria väčšinu vašich návštevníkov. Začnete so základnou úrovňou týchto používateľov. Nazvime to najlepšie moderné postupy.

Ak chceš zvýšiť skúsenosti pre tých, ktorí náhodou používajú FF3. 6 alebo safari 4 alebo nejaký iný vývojársky zábavný nočný webkit, čo chcete robiť úžasné veci ako

zaoblené rohy cez css
tieňovaný text (ale prosím Boha, nie príliš)
vrhať tieň (pozri vyššie v zátvorkách)

Robia vašu stránku úžasnou, ale neporušia ju. to postupné zvyšovanie. Prijatie budúcnosti v pojmoch osvedčené postupy.

Sú v podstate identické, ale líšia sa z hľadiska priority pre mnohé vývojové tímy: PE je celkom fajn, ak máte čas, ale GD je často nevyhnutné

Ak váš web vyzerá tak, ako chcete, iba v prehliadačoch, ktoré plne podporujú, povedzme, CSS3 a IE8 – vykreslí rovnakú stránku bez, povedzme, zaoblených rohov, potom ide o pôvabnú degradáciu. Stránka je skutočne navrhnutá pre moderné prehliadače, ale stále sa používa v starších prehliadačoch, len nie tak vymyslených.

veď je to vlastne to isté, nazerané z dvoch rôznych uhlov pohľadu.

smer od vybraného základňu každý koncept je iný.

elegantná degradácia začína na ideálnej úrovni používateľského zážitku a znižuje sa na základe schopností používateľského agenta na minimálnu úroveň, pričom sa stará o agentov, ktorí nepodporujú určité funkcie používané základnou líniou.

progresívna podpora začína na minimálnej širokej skúsenosti spotrebiteľa a zvyšuje sa v závislosti od schopností spotrebiteľského agenta na schopnejšiu úroveň, ktorá sa stará o agentov, ktorí podporujú pokročilejšie funkcie ako základná línia.

Myslím, že obidva koncepty by sa dali použiť, ak to čas/rozpočet dovolí. Ak nie, potom by bola vhodnejšia elegantná degradácia.

Ospravedlňujem sa, že oživujem niečo, čo je už viac ako rok, ale mal som pocit, že by som mohol prispieť svojím spôsobom vlastným názorom na vec.

aj keď súhlasím s Alexom Mcpom a do určitej miery decese, výrazy "ladná degradácia" a "progresívne vylepšenie" majú trochu iný význam, ako si zaslúžim.

pôvabná degradácia Veľa času (podľa môjho názoru) sa zdá byť skôr palicou na porazenie aplikácie, aby sa odovzdala potom, čo bola v prvom rade zle zostavená. Ako niekto postaví nejaký obrovský javascriptový objekt, ktorý používateľovi poskytne niečo naozaj skvelé na hranie, kým nepríde manažér, skontroluje vec a všetci kričia a rozhadzujú rukami, keď príde na ich pozornosť, že ich aplikácia nefunguje na 35% prehliadačov. niekto by na to mal lepšie poskytnúť zálohu."

Postupné posilňovanie aj keď (a to je tiež dobrý výraz) by sa zdalo skôr o budovaní niečoho, čo na základnej úrovni a všade funguje, s najzákladnejšími dostupnými metódami, aby poskytovalo všetky funkcie, ktoré používateľ potrebuje. To je možné pridať pomocou úhľadných malých nenápadných pomocníkov, stylingu atď. To v skutočnosti zlepšuje používateľskú skúsenosť s príslušnou aplikáciou, nielen ju robí sotva použiteľnou. "Čo vyzerá skvele. Funguje to v IE6. Áno, áno."

Myslím si, že uvedenie štýlu ako príkladu oboch výrazov v prvých dvoch odpovediach tu trochu chýba skutočný základný problém použiteľnosti, ktorým je postupné zvyšovaniečasto rozhoduje príroda kde pôvabná degradácia ignoruje, kým sa všetko nepokazí.

Prejsť...

pôvabná degradácia je postup, pri ktorom sa vytvára vaša webová funkčnosť tak, aby poskytovala určitú úroveň používateľského zážitku v modernejších prehliadačoch, no v starších prehliadačoch sa tiež elegantne zníži na nižšiu úroveň používateľského prostredia. Táto spodná úroveň nie je pre návštevníkov vašich stránok taká dobrá, ale stále im poskytuje základné funkcie, ktoré prišli na vašu stránku používať. veci sa im nelámu.

progresívny boost je podobný, ale robí to naopak. Začnete nastavením základnej úrovne používateľského zážitku, ktorú budú môcť poskytnúť všetky prehliadače pri vykresľovaní vašich webových stránok, ale vytvoríte aj pokročilejšie funkcie, ktoré budú automaticky dostupné prehliadačom, ktoré ich môžu používať.

inými slovami, pôvabná degradácia začína od súčasného stavu zložitosti a pokúša sa napraviť menej skúseností, zatiaľ čo progresívne vylepšovanie začína na veľmi jednoduchom, fungujúcom príklade a umožňuje neustále rozširovanie pre budúce prostredia. Pôvabne degradovať znamená pozerať sa späť, zatiaľ čo progresívne stúpať znamená pozerať sa dopredu a zároveň držať nohy na pevnej zemi.

Pôvabné degradácie

pôvabná degradácia schopnosť počítača, stroja, elektronického systému alebo siete zachovať si obmedzenú funkčnosť aj vtedy, keď bola veľká časť zničená alebo znefunkčnená. Cieľom je, samozrejme, zabrániť katastrofálnemu zlyhaniu.

Jednoduchým príkladom je použitie 24-bitových alfa transparentných PNG. Tieto obrázky je možné bez problémov zobraziť v moderných prehliadačoch. IE5. 5 a IE6 by zobrazili obrázok, ale efekty transparentnosti by zlyhali (v prípade potreby to môže fungovať). Staršie prehliadače, ktoré nepodporujú PNG, budú zobrazovať alternatívny text alebo prázdne miesta.

vývojári, ktorí akceptujú elegantnú degradáciu, často špecifikujú svoju úroveň podpory prehliadačov, ako napríklad prehliadače úrovne 1 (lepšia skúsenosť) a prehliadače úrovne 2 (znížená úroveň).

Postupné posilňovanie

postupné zvyšovanie je stratégia webového dizajnu, ktorá kladie dôraz na dostupnosť, sémantické značenie HTML a externé šablóny so štýlmi a skriptovacie technológie. Progresívne vylepšenie využíva webové technológie vo vrstvenej forme, ktorá umožňuje komukoľvek pristupovať k základnému obsahu a funkciám webovej stránky pomocou ľubovoľného prehliadača alebo internetového pripojenia, ako aj poskytovať vylepšené verzie stránky tým, ktorí majú pokročilejší softvér prehliadača alebo väčšiu šírku pásma.

progresívny nárast ako schému zapojenia k pôvabnému zhoršeniu, ale naopak. Web alebo aplikácia nastaví základnú používateľskú skúsenosť pre väčšinu prehliadačov. Pokročilejšie funkcie budú pridané, keď to prehliadač bude podporovať.

progresívne vylepšenie od nás nevyžaduje výber podporovaných prehliadačov alebo návrat k rozloženiam tabuliek. Vyberáme technologickú úroveň, t.j. prehliadač musí podporovať HTML 4.01 a štandardné požiadavky/odpovede stránok.

aby ste to uľahčili, nastavte lištu priamo hore, potom môžete progresívne vylepšenie ignorovať. kedy Nová funkcia zvýšiť latku ;)

Alebo si nastavte latku na najnižšiu úroveň (možno klus?) a použite progresívne zvýšenie.

Samozrejme, internet Explorer obsahuje veľké množstvo chýb rôzne verzie, ale pomocou podmienených komentárov s nimi môžete bojovať a dosiahnuť ich odstránenie. Čo sa však nedá ničím opraviť je, že IE je beznádejne zastaraný. Zatiaľ čo ostatné prehliadače zahŕňajú všetko viac vlastností CSS3, podporuje rôzne nové technológie, IE označuje čas. Ukončenie IE9 problém nevyrieši, predchádzajúce verzie z tejto noci sa nevyparí. V takejto situácii najlepšie riešenie dôjde k ladnej degradácii - princípu zachovania výkonu, keď dôjde k strate niektorých funkcií.

Pozrime sa na túto techniku s malým príkladom, ktorý zobrazuje text v bloku a tlačidlo. Blok a tlačidlo majú zaoblené rohy a do bloku je pridaný aj malý tieň. Prehliadače pre CSS3 zatiaľ používajú väčšinou špecifické vlastnosti s vlastnými predponami:

Firefox - vlastnosti začínajúce na -moz-;
Safari a Chrome - vlastnosti začínajúce na -webkit-;
Opera - vlastnosti začínajúce na -o-.

Rôzne verzie týchto prehliadačov dokážu porozumieť niektorým vlastnostiam s predponou aj bez nej, takže pre univerzálnosť je pridaných niekoľko vlastností naraz. Aby sme vytvorili zaoblené rohy, potrebujeme nasledujúci štýl.

moz-border-radius: 10px; /* Pre Firefox */ -webkit-border-radius: 10px; /* Pre Safari a Chrome */ border-radius: 10px; /* Pre Operu a IE9 */

Použitie týchto vlastností bude mať v tomto prípade za následok neplatný kód CSS práca je dôležitejšia v Prehliadače Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9 a ich staršie verzie. Príklad 1 ukazuje použitie vlastností CSS3 na vytváranie tieňov a zaoblených rohov.

Príklad 1. Krabica s tieňom

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Blokovať

Musíte prejsť 20 otázkami, ktoré sú náhodne vybrané z databázy. Na úspešné absolvovanie testu stačí správne zodpovedať aspoň 75 % navrhovaných otázok (15 a viac otázok).

Príkladný výsledok je znázornený na obr. jeden.

Ryža. 1. Blokovať zobrazenie v Safari

Rovnaký príklad v IE8 a nižšie je znázornený na obr. 2.

Ryža. 2. Blokové zobrazenie v IE8

Aj keď sa vzhľad prvkov v detailoch líši, funkčnosť stránky ako celku je zachovaná. Na tlačidlo sa dá kliknúť, text zostáva rovnaký vrátane jeho farby a pozadia, nedochádza k chybám zobrazenia. V skutočnosti je rozdiel iba v maličkostiach, ktoré vykonávajú dekoratívne, nie aplikované funkcie. Všetky princípy pôvabnej degradácie sú splnené.

Čo dáva tento prístup v praxi?

Umožňuje aktívne používať dekoratívne vlastnosti CSS3 bez toho, aby ste sa pozerali do prehliadača.
Motivuje k aplikovaniu rôznych efektov CSS3.
Výrazne zjednodušuje život vývojára, pretože už nemusí hľadať riešenia pre zastarané prehliadače.
Urýchľuje pracovný výkon.

Samozrejme, elegantná degradácia nie je vždy použiteľná. Ak požiadavky na rozloženie naznačujú podporu pre staršie verzie, budete musieť hľadať alternatívne riešenia, napríklad použite obrázky pre zaoblené rohy. Ale väčšinou sú požiadavky na usporiadanie stanovené bez zohľadnenia všeobecnej situácie. A ak porovnáme všetky výhody elegantnej degradácie s nevýhodou, ktorá sa prejavuje iba v tom, že zastarané prehliadače, najmä IE8, nezobrazujú stránku dostatočne „krásne“, potom budú sympatie na strane pokroku.

Obsah:

Predpona -webkit- dominuje CSS natoľko, že niektoré stránky bez nej nefungujú správne. To naznačuje, že vývojári v posledných rokoch nedodržiavali osvedčené postupy, čo viedlo k neúspešnému, ale takmer vynútenému rozhodnutiu zo strany Mozilly. Vo verzii Firefoxu 46 alebo 47 (toto je apríl alebo máj 2016) plánuje Mozilla implementovať podporu pre neštandardné predpony -webkit-, aby sa zlepšila kompatibilita Firefoxu so stránkami, ktoré vo veľkej miere využívajú -webkit (zvyčajne stránky vhodné pre mobilné zariadenia).

Vývojári však používajú predpony najnovšie funkcie prehliadačov čo najrýchlejšie. Predpony spôsobili neporiadok s dominanciou WebKitu, no tiež urýchlili napredovanie webu.

Prístup Mozilly a Microsoftu je bezpečný pre väčšinu stránok. Mnohé stránky budú používať predponu -moz- alebo nebudú musieť urobiť nič, aby boli kompatibilné s budúcou aktualizáciou Firefoxu. Ako profesionálni weboví vývojári však musíme dôkladne zvážiť a pochopiť dôsledky tohto javu. Pravdepodobne viete, ktorých z vašich stránok môže byť táto aktualizácia ovplyvnená.

Je teda načase prehodnotiť prístup k prefixom a otestovať s nimi stránky.

Podporované predpony

Existuje množstvo predpôn -webkit-, ktoré môže Mozilla implementovať. Na základe toho, čo som zhromaždil, sa Mozilla nesnaží porovnať svoj zoznam podporovaných vlastností s predponami s vlastnosťami Edge, pretože nie všetky sú potrebné na kompatibilitu s nástrojom rozloženia.

K podobnému prístupu sú blízko aj vývojári Firefoxu:

Súčasným trendom v Mozille je vyhýbať sa predponám dodávateľov zakázaním bežných funkcií a používaním verzie bez predpony, keď je dostatočne stabilná. Toto je všeobecná zásada: v niektorých prípadoch môžu existovať výnimky - Boris z Mozilly

Microsoft Edge tiež zruší predpony dodávateľov:

„Microsoft sa tiež chystá zrušiť predpony dodávateľov z Edge. To znamená, že vývojári, ktorí chcú používať špecifické funkcie HTML a CSS, nebudú používať predponu špecifickú pre Edge. Namiesto toho len napíšu kód podľa štandardov“ - Mashable

Postupná degradácia na základe prefixov už nebude

Tento odklon od prefixov dodávateľov znamená jednu vec – postupná degradácia pomocou prefixov dodávateľa neprichádza do úvahy.

Použitie predpôn dodávateľa na použitie štýlov špecifických pre prehliadač (napríklad iba pre Chrome) nebolo účelom ich zavedenia; Odporúčanie pre vývojárov bolo vždy používať všetky predpony (od -webkit- po -o-). Ak používate funkcie, ktoré závisia od vlastností predpony a používate predpony na postupnú degradáciu vášho dizajnu v iných prehliadačoch, potom to už nefunguje.

Záver

Časy sa menia. Dominancia WebKitu nevedomky spôsobila problémy s nekompatibilitou, ktoré nútia iných predajcov prehliadačov implementovať predpony -webkit-. Tento problém sa prejaví, keď sa predajcovia prehliadačov vzdialia od predpon dodávateľov, ale zatiaľ by vývojári mali zabezpečiť, aby predpony nespôsobovali neočakávané výsledky v prehliadačoch, ktoré nepoužívajú WebKit.