Techniky postupné degradace css. Co je půvabná degradace ve webovém designu? Půvabná degradace pomocí prefixů již nefunguje

Od autora: Předpona -webkit- je dnes v CSS tak běžná, že některé weby bez ní odmítají správně fungovat. Zatímco pro vývojáře znamenaly předpony css prodejců posledních pár let ne tak docela přímé znamení perfektní práce vlastnosti, to vedlo Mozillu k zoufalému, ale nezbytnému kroku. Ve Firefoxu 46 nebo 47 (vydaném v dubnu nebo květnu 2016) plánuje Mozilla zavést podporu pro řadu nestandardních předpon – webkit-, aby se zlepšila kompatibilita prohlížeče s touto předponou (dokonce i na mobilních zařízeních).

Myšlenka není nová Microsoft Edge také podporuje různé předpony -webkit- kvůli kompatibilitě. Opera začala podporovat předpony -webkit- v roce 2012 a poté přešla na engine Webkit Blink. Vývojáři W3C a prohlížečů neplánovali použít tuto předponu při vývoji webových stránek:

„Oficiální zásady W3C stanoví, že experimentální vlastnosti by neměly být používány v kódu webu. Lidé je však používají, protože chtějí, aby jejich stránky využívaly nejnovější technologie a vypadaly cool.“- Stránka W3C o optimalizaci obsahu pro různé prohlížeče

Vývojáři však vždy chtějí mít přístup k nejnovějším funkcím co nejrychleji. Předpony dodavatelů vše obrátily vzhůru nohama a daly Webkitu dominanci, ale věřím, že předpony měly obrovský dopad na rychlý rozvoj internetu.

Metody Mozilly a Microsoftu většině webů pouze uškodí. Většina webů již bude mít povoleny předpony –moz- nebo zjistí, že s novou aktualizací bude Mozilla podporovat nové vlastnosti, aniž by bylo nutné provádět změny. Jako profesionální weboví vývojáři si to však musíme dát do klidu a pochopit, že některé návrhy mohou přinést smíšené výsledky. Možná už víte, který z vašich projektů bude touto aktualizací zničen. Weboví vývojáři, je čas přehodnotit svůj přístup k předponám dodavatelů a otestovat je na webech.

Nové předpony

Mozilla bude obsahovat řadu předpon –webkit-. Z toho, co jsem shromáždil, se zdá, že Mozilla nemá v úmyslu porovnat svůj seznam s vlastnostmi Edge. Ne všechny vlastnosti musí být kompatibilní s enginem Mozilla. Mezi předpony, které Mozilla přidá, soudě podle wiki stránky Kompatibilita/Mobilní/Nestandardní kompatibilita, jsou následující:

Webkit - pro přechody

Webkit-transformuje

Webkit-přechody

Webkit-vzhled

Webkit-klip na pozadí

Poměr webkitu-zařízení-pixelů

Webkit-animace

Některé další vlastnosti mohou být v @-webkit-keyframes.

Testování napříč prohlížeči bude kritické

Pokud jste vy, webový vývojář, nezahrnuli předponu -moz-, abyste netestovali nové vlastnosti CSS ve Firefoxu, a termín se blíží a klient vás nutí přidat tuto předponu, budete muset web znovu otestovat ve Firefoxu 46 nebo 47. Tyto verze budou vydány v dubnu nebo květnu, takže ještě máte nějaký čas.

Chcete-li otestovat svůj web bez čekání na Firefox 46/47, můžete tyto změny povolit ve Firefoxu Nightly nastavením layout.css.prefixes.webkit v about:config. Pokud máte nainstalovanou nejnovější verzi Nightly, výchozí hodnota by měla být true. Ve Firefoxu Nightly zatím nefungují všechny změny předpony -webkit-, ale stále je to dobré místo k otestování, jak bude váš web brzy vypadat. S vážným testováním webu ve Firefoxu Nightly bych počkal do března.

Mnohem důležitější je, že Microsoft Edge již interpretuje a zobrazuje předpony -webkit- podobným způsobem. To znamená, že všechny styly WebKit na vašem webu se již zobrazují v prohlížeči, který byl zcela neočekávaný. Pokud jste s tímto prohlížečem ještě nepracovali, nainstalujte si Windows 10 a získejte k němu přístup na testovací stránky.

Předpony prodejců postupně mizí

Naštěstí prefixy výrobců postupně mizí, protože vývojové týmy nacházejí nová řešení. Tým Chrome/Blink trochu změnil svůj přístup:

"Namísto toho, abychom ve výchozím nastavení povolili předpony dodavatele, zachováme běžné vlastnosti za příznakem 'povolit vlastnosti experimentální webové platformy' v about:flags, dokud tyto vlastnosti nebudou ve výchozím nastavení povoleny."— Tým Chrome/Blink

Tým Firefoxu šel podobnou cestou: „Hlavním směrem práce v Mozille je nyní odklon od předpon prodejců jejich zakázáním nebo převedením do stavu běžných vlastností, pokud jsou již stabilní. To je alespoň naše obecná politika, jednotlivé případy si zaslouží výjimky. »— Boris z Mozilly

Microsoft Edge se také zaměřuje na odstranění podpory předpon: „Microsoft se také snaží v Edge zbavit předpony dodavatelů. To znamená, že vývojáři při použití speciálních značek HTML5 nebo vlastností CSS nebudou muset přidávat speciální předponu pro Prohlížeč Edge. Místo toho budou vývojáři psát standardní kód."— Mashovatelné

Půvabná degradace pomocí prefixů již nefunguje

Odklon od prefixů dodavatele znamená jen jednu věc – technika ladné degradace prostřednictvím prefixů již není možná. Izolace konkrétních prohlížečů prostřednictvím předpon dodavatele (například pro Chrome) nebyla účelem těchto předpon; Vývojáři byli vždy vyzýváni, aby používali všechny předpony (–webkit- až –o-). Pokud používáte jakoukoli funkci, která funguje na vlastnostech s předponami dodavatele, a také jste ve svém návrhu pro jiné prohlížeče použili techniku ​​ladné degradace, pak to již nefunguje.

Závěr

Časy se mění. Dominance WebKitu byla neúmyslná a způsobila rozruch a nekompatibilitu na internetu. Jiné prohlížeče se snaží rozšířit kompatibilitu přidáním předpon –webkit-. Postupně, s mizením předpon prodejců, tento problém. Vývojáři by měli zkontrolovat, zda použití předpon nezpůsobuje nežádoucí důsledky v prohlížečích, které nejsou WebKit.

V tomto článku se pokusíme porozumět rozdílu mezi dvěma principy tvorby stránky založené na responzivním webdesignu: Progressive Enhancement a Graceful Degradation.

Půvabná degradace

Půvabná degradace neboli „tolerance k selhání“ je širší pojem, který platí nejen pro webdesign. V obecném smyslu to znamená schopnost systému fungovat, i když některé jeho součásti selžou. A čím závažnější porucha, tím nižší je kvalita systému nebo práce se systémem, ale zároveň zůstává funkční hlavní funkčnost systému.

Půvabná degradace se dá vyjádřit schopností pracovat s vypnutým JavaScriptem, přesným zobrazením webu v prohlížeči bez podpory specifikace CSS3, adekvátním zobrazením webu s vypnutými obrázky. Všechny tyto poruchy by neměly mít vliv na provoz webové aplikace. Pokud však vše funguje, pak je pro uživatele mnohem pohodlnější stránky používat.

Pokud vezmeme v úvahu konkrétní příklad, například z oblasti designu webového rozhraní, lze tento princip formulovat jako „systém může pracovat s JavaScriptem zcela vypnutým, ale se zapnutým JavaScriptem bude mnohem pohodlnější pracovat“. Otázkou není, zda může nastat situace, kdy je JS deaktivován nebo plně funkční, nebo proč se to děje. Tato situace je brána jako daná. Návrhář musí vyvinout rozhraní, které bude nadále fungovat, i když s vypnutým JS.

Chcete-li se řídit tímto principem, často musíte znovu provést logiku zpracování formulářů na straně serveru. Tento přístup se však vyplatí, pokud myslíte na odolnost proti chybám ve fázi plánování formuláře.

Dodržování principu ladné degradace umožňuje uživatelům (a každý uživatel je potenciální klient) pracovat se stránkou v jakékoli situaci.

Progresivní vylepšování

Progresivní vylepšování je princip, který spolu s mobile first tvoří teoretický základ pro responzivní webdesign. Již její název říká, že umisťuje tvorbu webové stránky do fází, cyklicky, podle principu „od jednoduchého ke složitému“. V každé z předem naplánovaných fází by měl být vzhled stránky krásnější, lepší a pohodlnější, ale zpočátku by měly být k dispozici všechny funkce.

Je to zvláštní případ ladné degradace , protože všechny webové stránky na něm postavené budou plně splňovat princip ladné degradace.

Vytvoření stránky pomocí principu progresivního vylepšení se obvykle skládá z následujících kroků:

• Vytvoření stránky na „čistém“ základěHTML
  V této fázi je vytvořena plně funkční stránka, kterou tvoří pouze HTML kód, který je sémanticky i logicky správný, a proto jej dokáže interpretovat jakýkoli prohlížeč, i ten nejjednodušší. V této fázi se neprovádí žádné formátování a prohlížeč sám naformátuje stránku podle standardů, které jsou v ní obsaženy. Postupné zlepšování trvá na tom, že nejdůležitější je první fáze, protože na webu není nic cennějšího než obsah.
  Krátký: vytváření sémantické a logické struktury dokumentu
• Přidávání pravidelCSS
  V této fázi se používá tabulka CSS starého formátu: je přidána značkovací mřížka, prvky jsou umístěny, obrázky pozadí jsou aplikovány na bloky, jsou změněny styly, barvy a styly textu. Stránka obecně získává nový stylizovaný vzhled, stává se krásnějším a příjemnějším.
  Krátký: dává podobu dokumentu
• Použití CSS3
  Nyní můžete na dokument použít všechny efekty a vylepšení, které poskytuje specifikace CSS3. To znamená přidat průsvitnost, stíny, zaoblené rohy pro bloky, hladké animované přechody pro pseudotřídy nebo prvky formuláře.
  Krátký: dává dokonalost vzhled dokument
• Vytváření skriptů naJavaScript
  V této fázi jsou všechny efekty a principy interakce webové stránky s uživatelem vytvářeny pomocí JavaScriptu. Patří mezi ně požadavky AJAX, dynamické načítání nebo ověřování dat, animační efekty a widgety (například Prototype nebo jQuery). Obecně děláme stránku uživatelsky přívětivější.
  Krátký: interakce, interaktivita, pohodlí

Pokusme se tento přístup aplikovat v praxi. Vyvineme a navrhneme nejjednodušší forma přihlásit se na stránky. V první fázi vytvoříme přihlašovací formulář v čistém HTML. Tvar není tak pěkný, ale je plně funkční. Níže je kód stránky a výsledek zobrazený v prohlížeči:

Nyní ve druhém kroku dáme formuláři styl tím, že na něj aplikujeme šablonu stylů obsahující pouze ta pravidla, která jsou použitelná pro CSS bez speciálních vlastností. Přidejme barvu pozadí, výplň, zarovnání. Nyní formulář vypadá lépe:

Nyní přidáme pravidla ze specifikace CSS3. Přidejme do bloků rohy, stíny pro pole pro zadávání textu, upravme styl tlačítka a pomocí nových selektorů odstraníme zbytečnou výplň v horní části. Dostáváme vylepšenou formu:

V poslední fázi můžeme vytvořit požadavek AJAX, aby uživatel mohl přistupovat na web, aniž by musel stránku znovu načítat.

V tomto případě se v každé konkrétní fázi (pokud je prohlížečem podporována) zobrazí plně funkční stránka. Pokud ale prohlížeč podporuje pokročilejší technologie, pak se stránka jen zlepšuje.

Jakou zásadou byste se měli řídit?

Pokud je web postaven co nejefektivněji podle konceptu ladné degradace, pak bude výsledek přibližně stejný, jako by se stalo, kdyby bylo použito progresivní vylepšení. Tak jaký je v tom tedy rozdíl?

Faktem je, že vytvořit webovou stránku založenou na principu ladné degradace je poměrně obtížné, protože jen málo vývojářů to dokáže efektivně. V nejjednodušším případě elegantní degradace můžete udělat následující: vytvořit web pro nejnovější verzi prohlížeče a poté uživatelům zobrazit zprávu, že si musí stáhnout nová verze prohlížeč. Vývojářům přitom může být jedno, jak web vypadá ve starších prohlížečích. Dalším příkladem špatné ladné degradace je úplné zakázání funkčnosti webu, když je zakázán JavaScript. Pozoruhodným příkladem je posílání zpráv na Facebook.com.

Proto progresivní vylepšení vzniklo v reakci na nekvalitní ladnou degradaci. Navrhování takových rozhraní se stalo jednodušším a kvalitnějším, protože existují jasně definované fáze pro vytvoření rozhraní.

V adaptivním designu existuje koncept „mobile first“, který určitým způsobem odpovídá konceptu progresivního vylepšování, protože vyžaduje akci od jednoduchých po komplexní, od mobilní obrazovky do stolních počítačů. Proto klíč k správné použití responzivní webový design závisí na schopnosti vývojáře aplikovat principy progresivního vylepšování a nejprve mobilní.

Rozhodně, internet Explorer obsahuje velké množství chyb různé verze, ale pomocí podmíněných komentářů s nimi můžete bojovat a dosáhnout jejich odstranění. Co však nelze opravit, je to, že IE je beznadějně zastaralý. Zatímco ostatní prohlížeče obsahují stále více vlastností CSS3 a podporují různé nové technologie, IE se blíží. Vydání IE9 problém nevyřeší, předchozí verze toto se přes noc nevypaří. V takové situaci nejlepší řešení dojde k ladné degradaci – principu zachování výkonu při ztrátě některé funkce.

Podívejme se na tuto techniku ​​na malém příkladu, ve kterém je text zobrazen v bloku a tlačítku. Blok a tlačítko mají zaoblené rohy a do bloku je také přidán malý stín. Prohlížeče pro CSS3 zatím používají hlavně specifické vlastnosti s vlastními předponami:

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

Různé verze těchto prohlížečů dokážou porozumět některým vlastnostem jak s prefixem, tak bez něj, takže pro univerzálnost přidávají několik vlastností najednou. Abychom vytvořili zaoblené rohy, potřebujeme následující styl.

Moz-border-radius: 10px; /* Pro Firefox */ -webkit-border-radius: 10px; /* Pro Safari a Chrome */ border-radius: 10px; /* Pro Opera a IE9 */

I když použití těchto vlastností povede k neplatnosti CSS kód, v tomto případě je důležitější zapracovat Prohlížeče Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, stejně jako jejich starší verze. Příklad 1 ukazuje, jak používat vlastnosti CSS3 k vytváření stínů a zaoblených rohů.

Příklad 1. Blok se stínem

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

Výsledek příkladu je na Obr. 1.

Rýže. 1. Blokovat zobrazení v Safari

Stejný příklad v prohlížeči IE8 a níže je uveden na Obr. 2.

Rýže. 2. Blokové zobrazení v IE8

Přestože se vzhled prvků v detailech liší, funkčnost stránky jako celku zůstává stejná. Na tlačítko lze kliknout, text zůstává stejný včetně barvy a pozadí a nedochází k chybám zobrazení. Ve skutečnosti je rozdíl pouze v maličkostech, které plní spíše dekorativní než praktické funkce. Všechny zásady půvabné degradace jsou splněny.

Co tento přístup přináší v praxi?

• Umožňuje aktivně používat dekorativní vlastnosti CSS3 bez ohledu na prohlížeč.
• Motivuje k používání různých CSS3 efektů.
• Výrazně to usnadňuje vývojářům život, protože už nemusí hledat řešení pro zastaralé prohlížeče.
• Zrychluje produktivitu práce.

Samozřejmě, ladná degradace není vždy použitelná. Pokud požadavky na rozvržení naznačují podporu starších verzí, budete muset hledat alternativní řešení, například pomocí obrázků pro zaoblené rohy. Ale z velké části jsou požadavky na uspořádání stanoveny bez zohlednění obecné situace. A pokud všechny výhody ladné degradace srovnáme s nevýhodou, která se projevuje pouze v tom, že zastaralé prohlížeče, zejména IE8, nezobrazují stránku dostatečně „krásně“, pak budou sympatie na straně pokroku.

Dlouho jsem nepsal, musel jsem se přestěhovat někam bez internetu (to je hrozné), v důsledku čehož jsem nemohl psát do blogu. Dnes chci mluvit o metodě vývoje (layout), která se částečně používá v designu mého blogu.

V nejnovější verze Inovativní prohlížeče (jako FF 3.5, Opera 10) zavedly některé dekorativní efekty z navrhované specifikace CSS 3. Průhlednost, stíny a efekt zebry (pruhování) jsou nyní k dispozici bez použití JavaScriptu nebo dalších značek. Některé starší prohlížeče, které se stále používají, však tyto funkce nemají a bylo by smutné si myslet, že ještě pár let nebudete mít šanci tyto úžasné efekty používat.

V tomto článku budu hovořit o tom, jak udělat pěkná (přírůstková) vylepšení v prohlížečích, které podporují funkce CSS3 a přesto poskytují uspokojující rozvržení pro ostatní uživatele.

Co je progresivní vylepšení?

Abyste pochopili koncept „postupného zlepšování“, musíte pochopit princip „ladné degradace“, který je dobře popsán následujícím citátem:

Mírná degradace znamená, že váš web nadále funguje, i když je zobrazen v méně než optimálním prohlížeči, ve kterém pokročilé efekty nefungují.
Fluidní myšlení, Peter-Paul Koch

"Incremental Improvement" používá stejnou metodu jen z opačné strany, místo starostí o to, aby se web nerozpadl ve starém prohlížeči, je potřeba nejprve myslet na obsah a jednoduše přidat do designu funkce moderních programů pro zlepšení uživatele zkušenosti, zatímco základní stavové rozložení stále funguje na starších strojích. Toto je aktuálně nejlepší způsob, jak využít nové funkce CSS 3.

Příklad

Jako příklad si udělejme jednoduché navigační menu, které bude vypadat o něco hezčí v závislosti na podpoře CSS ve vašem prohlížeči.

Rád bych poznamenal, že v tomto příkladu nepoužívám grafiku, hacky ani předpony specifické pro prohlížeč - všechna vylepšení jsou způsobena deklarovanými schopnostmi. S ohledem na to jsou některé z níže uvedených věcí pouze pro účely příkladu a nemusí být nejlepší volbou pro vytváření skutečných webových stránek.

Označení

Udělejme jednoduché menu pomocí neuspořádaného seznamu (ul):

• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum

Základní styl

Jako základ použiji styl, který používá pouze jednoduché selektory vrstvení. Vytvoří ohraničení pro každý prvek a změní pozadí při najetí myší (onmouseover). To by mělo fungovat v jakémkoli prohlížeči vyrobeném za posledních 7-8 let (a možná i více).

CSS je velmi jednoduché:

ul(
barva pozadí: modrá;
border-bottom: 1px tečkovaný #999;
styl seznamu: žádný;
okraj: 15px;
šířka: 150px;
}

li (
barva pozadí: #fff;
ohraničení: 1px tečkovaný #999;
border-bottom-width: 0;
písmo: 1.2em/1.333 Verdana, Arial, bezpatkové;
}

li a (
Černá barva;
displej: blok;
výška: 100 %;
polstrování: 0,25em 0;
text-align: center;
text-dekorace: žádná;
}

li a:hover (barva pozadí: #efefef; )

Jediná zvláštní věc je zde modré pozadí

; Vysvětlím to později. S tímto stylem budeme mít následující základní pohled, zobrazí se v IE6 takto:

Základní rozložení, takto to bude vypadat v IE6 a dalších starších prohlížečích.

Aplikace vylepšení

IE7 byl první v řadě prohlížečů IE, který podporoval všechny selektory atributů z CSS 2.1, což je také běžné v téměř všech ostatních prohlížečích. Můžeme použít jeden z nich – dětský selektor – abychom se začali zlepšovat. Protože IE6 nepodporuje podřízené selektory, bude ignorovat následující pravidla:

Tělo > ul (šířka ohraničení: 0; )

ul > li (
ohraničení: 1px solid #fff;
border-width: 1px 0 0 0;
}

li > a (
barva pozadí: #666;
barva bílá;
váha písma: tučné;
}

li:first--child a (barva: žlutá; )

li > a:hover (barva pozadí: #999; )

S těmito pravidly CSS vypadá seznam takto:



Nabídka má nyní barevné pozadí a tučný text a první odkaz je zvýrazněn jinou barvou.

Takto zobrazí seznam IE7, Firefox, Safari a Opera.

Pojďme klást větší důraz

Dalším krokem je zvýšení důrazu pomocí vlastnosti, kterou IE nerozpozná: Transparency. K tomu nepotřebujeme používat speciální selektory, protože IE jednoduše přeskočí vlastnost, kterou nepodporuje:

Li (neprůhlednost: 0,9; )

li:hover ( neprůhlednost: 1; )

Následující obrázek ukazuje, jak tato vlastnost funguje v Opeře, můžete vidět, že položky seznamu získaly od pozadí lehce modrý nádech

. Po přejetí myší se každý prvek stane zcela neprůhledným:



Pro stejný efekt v IE můžete samozřejmě použít vlastní filtrovací vlastnost IE. Stejně jako předpony specifické pro prohlížeč (-moz-, -webkit-) pro vlastnosti níže. Ale pro vzdělávací účely se budu držet standardu CSS, protože filtr není standardní vlastností, pak není platný.

Firefox 2 podporuje průhlednost, ale v novějších prohlížečích můžeme jít ještě dál. V Safari a Opeře můžeme ozdobit text pomocí vlastnosti text-shadow:

Li a:hover ( text-shadow: 2px 2px 4px #333; )

Jak ukazuje následující obrázek, prvek má při umístění kurzoru mírný stín a zdá se, že mírně vyčnívá ze stránky:



Nakonec se můžete ujistit, že Opera plně podporuje nové selektory CSS 3 a přidat další vrstvu vylepšení: proměnné barvy pozadí pomocí selektoru n-tého potomka:

Li:nth-child(2n+1) a (barva pozadí: #333; )

li:nth-child(n) a:hover (
barva pozadí: #aaa;
barva: #000;
}

li:first--child > a:hover (color: yellow; )

V Opeře uvidíme pruhovanou nabídku:



Shrnutí a závěry

Obrázek níže ukazuje, jak vypadá počáteční označení v IE6, IE7, Firefoxu, Safari a Opeře po použití pravidel CSS popsaných v tomto článku. Jak můžete vidět, jak se podpora CSS pro prohlížeče stává propracovanější, nabídky jsou stylovější a složitější a pomocí technik postupného vylepšování zůstávají nabídky funkční i ve velmi starých prohlížečích.



Mnoho prohlížečů má samozřejmě řadu dalších vlastností, které jsem zde nepopsal, ale které lze použít, jako jsou barvy RGBA a SVG jako barvy pozadí.