Îmbunătățire pas cu pas cu CSS3: Suport pentru browsere moderne. Este timpul să regândim prefixele furnizorului CSS Tehnici graduale de degradare CSS

Sunt confuz cu privire la diferența dintre Creștere graduală și Degradare grațioasă... Mi se pare că sunt una și aceeași.

ai putea, te rog, să-mi explici diferența dintre cele două și în ce situație aș folosi una peste cealaltă?

8 răspunsuri

Sunt la fel, dar diferă în context.

există o clasă de browsere numite „browsere clasa A”. Aceștia sunt membrii tipici ai audienței care (probabil) reprezintă majoritatea vizitatorilor dvs. Veți începe la nivelul de bază al acestor utilizatori. Să-i spunem cele mai bune practici moderne.

Dacă dorești a mari experiență pentru oricine care folosește accidental FF3.6 sau Safari 4 sau un alt dezvoltator de webkit de noapte whizbang ce vrei, vrei să faci lucruri uimitoare cum ar fi

• colțuri rotunjite prin css
• text umbrit (dar te rog, Doamne, nu prea mult)
• umbre (vezi mai sus între paranteze)

Acest lucru face ca site-ul dvs. să arate, dar nu îl va sparge. aceasta creștere graduală... Îmbrățișând viitorul în termeni de cei mai buni practici.

pe de altă parte, site-ul dvs. de nișă Nintendo atrage o cantitate echitabilă de utilizatori IE5. Sărac de tine, dar vrei și tu să te asiguri că vor reveni în continuare. Puteți oferi o alternativă la comportamentul dvs. ajax prin includerea scriptului ajax într-un fișier extern și dacă JS-ul lor nu este inclus, atunci linkurile dvs. ar putea reîmprospăta întreaga pagină. Etc. Din punct de vedere cele mai bune practici modernevă veți asigura că sunt deservite unele piețe istorice o aparență de site funcțional... aceasta degradare grațioasă.

Ele sunt în mare parte identice, dar diferă în ceea ce privește prioritatea pentru multe echipe de dezvoltare: PE este destul de drăguț dacă aveți timp, dar GD este adesea necesar

Dacă site-ul dvs. arată la fel de bine în toate browserele, dar unele browsere primesc, să zicem, ponei dansatori pentru că susțin ponei dansatori, atunci aceasta este o îmbunătățire progresivă. Funcționează în toate browserele, dar unele browsere primesc ceva în plus. De obicei, acest termen se aplică anumitor funcții Javascript care pot îmbunătăți gradul de utilizare în afara „HTML-ului brut”.

Dacă site-ul dvs. arată doar așa cum intenționați pe browserele care acceptă pe deplin, să zicem, CSS3 și IE8 - vor reda aceeași pagină fără, să zicem, colțuri rotunjite, atunci aceasta este o degradare grațioasă. Site-ul este cu adevărat destinat browserelor moderne, dar este încă folosit în browserele mai vechi, nu doar atât de fantezist.

la urma urmei, ele sunt cu adevărat același lucru, văzute din două puncte de vedere diferite.

direcția selectată baza pentru fiecare concept este diferit.

degradarea grațioasă începe la nivelul ideal de experiență a utilizatorului și scade în funcție de capacitățile agentului utilizator la un nivel minim, servind agenți care nu acceptă anumite funcții utilizate de linia de bază.

îmbunătățirea progresivă începe de la experiența minimă largă a consumatorului și crește, în funcție de capacitățile agentului consumatorului, la un nivel mai capabil, oferind hrană agenților care susțin funcții mai avansate decât cele de bază.

Cred că s-ar putea folosi ambele concepte dacă timpul / bugetul ne permite. Dacă nu, este preferată degradarea grațioasă.

Îmi pare rău că am reînviat ceva care depășește un an, dar am simțit că aș putea contribui, într-un fel, la propria mea opinie în această privință.

în timp ce sunt de acord cu Alex Mcp și decezez în anumite privințe, termenii degradare grațioasă și îmbunătățire progresivă au o semnificație ușor diferită față de ceea ce am eu.

degradări grațioase, mult timp (după părerea mea), pare mai degrabă un stick pentru a bate aplicația în vizualizare după ce a fost construită prost în primul rând din experiența mea. Cum poate cineva să construiască un fel de obiect javascript imens care să ofere utilizatorului ceva cu adevărat grozav cu care să se joace până când managerul intră, verifică chestia și toată lumea aleargă țipând, aruncându-și mâinile atunci când vine în atenția lor că aplicația lor este nu funcționează în 35% din browsere. „Cineva ar fi mai bine să ofere o rezervă pentru acest lucru.”

Creștere graduală deși (și acesta este un termen atât de bun de spus) s-ar părea mai mult despre a face ceva care funcționează, la nivel de intrare, peste tot, folosind cele mai de bază metode disponibile, pentru a oferi toate funcționalitățile pe care le dorește utilizatorul. Acest lucru poate fi apoi adăugat cu ajutorul unor ajutoare discrete și stilate, etc., de fapt, îmbunătățește experiența utilizatorului aplicației în cauză, mai degrabă decât să o facă abia utilizabilă. "care arată mișto. Funcționează în IE6. Da, da. Da"

Cred că, dând stilul ca exemplu al ambilor termeni în primele două răspunsuri aici, este un fel de dor de adevărata problemă de utilizare creștere graduală decide adesea prin natura unde degradări grațioase ignoră până când lucrurile merg prost.

Tirada s-a terminat ...

degradarea grațioasă este practica de a crea funcționalități web pentru a oferi un anumit nivel de experiență a utilizatorului în browsere mai moderne, dar se va degrada cu grație și la un nivel de utilizator mai scăzut în browserele mai vechi. Acest strat inferior nu este la fel de plăcut de utilizat pentru vizitatorii site-ului dvs., dar le oferă în continuare funcționalitatea de bază pe care au venit pe site-ul dvs. să o utilizeze; lucrurile nu se rup pentru ei.

creșterea progresivă este similară, dar opusul este adevărat. Începeți prin a stabili o experiență de utilizare de bază pe care toate browserele vor putea să o ofere atunci când redați site-ul dvs. web, dar creați și funcționalități mai avansate care vor fi disponibile automat browserelor care îl pot utiliza.

cu alte cuvinte, degradarea grațioasă începe cu status quo-ul complexității și încearcă să rezolve mai puțină experiență, în timp ce îmbunătățirea progresivă începe cu un exemplu de lucru foarte de bază și permite o expansiune continuă pentru mediile viitoare. A umili grațios înseamnă a privi înapoi, în timp ce a crește progresiv înseamnă a privi înainte, păstrându-ți picioarele pe un teren solid.

Degradare grațioasă

degradări grațioase capacitatea unui computer, a unei mașini, a unui sistem electronic sau a unei rețele de a menține o funcționalitate limitată chiar și atunci când cea mai mare parte a acestuia este distrusă sau dezactivată. Scopul degradării grațioase este de a preveni eșecul catastrofal.

degradarea grațioasă este o soluție. Este practica construirii unui site web sau a unei aplicații, deci oferă un nivel bun de experiență a utilizatorului în browserele moderne. Cu toate acestea, acest lucru se degradează grațios pe browserele mai vechi. Este posibil ca sistemul să nu fie la fel de frumos sau de frumos, dar funcționalitatea de bază va funcționa pe sisteme mai vechi.

un exemplu simplu este utilizarea PNG transparente Alpha pe 24 de biți. Aceste imagini pot fi afișate fără probleme în browserele moderne. IE5.5 și IE6 vor afișa imaginea, dar efectele de transparență nu vor funcționa (se poate face să funcționeze dacă este necesar). Browserele mai vechi care nu acceptă PNG vor afișa text alternativ sau spațiu alb.

dezvoltatorii care acceptă degradarea grațioasă indică adesea nivelul lor de suport pentru browser, cum ar fi browserele de nivel 1 (cea mai bună experiență) și browserele de nivelul 2 (experiență degradată).

Creștere graduală

creștere graduală este o strategie de proiectare web care pune accent pe accesibilitate, marcare HTML semantică și foi de stil externe și tehnologii de scriptare. Îmbunătățirea progresivă utilizează tehnologii web într-un mod stratificat care permite tuturor să acceseze conținutul de bază și funcționalitatea unei pagini web utilizând orice browser sau conexiune la internet și să ofere versiuni îmbunătățite ale paginii celor cu software de browser mai avansat sau lățime de bandă mai mare.

îmbunătățirea progresivă este similară cu conceptul de deteriorare grațioasă, dar invers. Site-ul web sau aplicația va stabili o experiență de bază a utilizatorului pentru majoritatea browserelor. Funcționalități mai avansate vor fi adăugate atunci când browserul o acceptă.

îmbunătățirea progresivă nu ne impune să selectăm browserele acceptate sau să revenim la aspectele bazate pe tabel. Alegem nivelul tehnologic, adică browserul trebuie să accepte HTML 4.01 și solicitări / răspunsuri standard de pagină.

înapoi la imaginea noastră de exemplu, putem decide că aplicația noastră ar trebui să funcționeze în toate browserele grafice. Am putea folosi în mod implicit imagini GIF de calitate inferioară, dar le putem înlocui cu png-uri pe 24 de biți atunci când browserul le acceptă.

link-uri

Wikipedia: Creștere graduală și

Cuprins:

Prefixul -webkit- este atât de dominant în CSS încât unele site-uri nu funcționează corect fără el. Acest lucru indică faptul că dezvoltatorii nu au urmat cele mai bune practici în ultimii ani și acest lucru a dus la o decizie nefericită, dar aproape forțată din partea Mozilla. În versiunea 46 sau 47 a Firefox (aceasta este aprilie sau mai 2016), Mozilla intenționează să implementeze suport pentru prefixele non-standard -webkit- pentru a îmbunătăți compatibilitatea Firefox cu site-urile care utilizează puternic -webkit (de obicei site-uri mobile).

Cu toate acestea, dezvoltatorii folosesc prefixe pentru a profita de cele mai recente capabilități ale browserului cât mai repede posibil. Prefixele au provocat confuzie cu dominanța WebKit, dar au împins și web-ul înainte într-un ritm accelerat.

Abordarea Mozilla și Microsoft este sigură pentru majoritatea site-urilor. Multe site-uri vor folosi prefixul -moz- sau nu vor trebui să facă nimic pentru a fi compatibile cu o viitoare actualizare Firefox. Dar, în calitate de dezvoltatori web profesioniști, trebuie să luăm în considerare și să înțelegem cu atenție implicațiile acestui lucru. Știți sigur care dintre site-urile dvs. pot fi afectate de această actualizare.

Deci, este timpul să regândim abordarea prefixelor și să testăm site-urile cu acestea.

Prefixe acceptate

Există o serie de prefixe -webkit- pe care Mozilla le poate implementa. Pe baza datelor pe care le-am adunat, Mozilla nu caută să se potrivească cu lista de proprietăți de prefix acceptate cu cea a Edge, deoarece nu toate sunt necesare pentru compatibilitatea motorului de aspect.

Dezvoltatorii Firefox sunt, de asemenea, aproape de o abordare similară:

Tendința actuală în Mozilla este de a evita prefixele furnizorului prin dezactivarea proprietăților disponibile și folosirea unei versiuni fără prefix, dacă este suficient de stabilă. Aceasta este o politică generală: excepții sunt posibile în unele cazuri - Boris din Mozilla

Microsoft Edge va renunța și la prefixele furnizorului:

„Microsoft caută, de asemenea, să renunțe la prefixele furnizorului în Edge. Aceasta înseamnă că dezvoltatorii care doresc să utilizeze caracteristicile specifice HTML și CSS nu vor folosi prefixul specific pentru Edge. În schimb, vor scrie doar codul conform standardelor. ”- Mashable

Nu va mai exista o degradare treptată bazată pe prefixe

Această îndepărtare de prefixele furnizorului înseamnă un lucru - degradarea treptată a prefixelor furnizorului nu are perspective.

Utilizarea prefixelor furnizorului pentru a aplica stiluri pentru un anumit browser (de exemplu, numai pentru Chrome) nu a fost scopul introducerii lor; recomandarea pentru dezvoltatori a fost întotdeauna să utilizeze toate prefixele (-webkit- la -o-). Dacă utilizați funcții care depind de proprietăți prefixate și utilizați prefixe pentru a vă degrada treptat designul în alte browsere, atunci acest lucru nu mai funcționează.

Concluzie

Vremurile se schimbă. Dominarea WebKit a dus, fără să vrea, la probleme de incompatibilitate, forțând alți furnizori de browsere să implementeze prefixele -webkit-. Această problemă va fi epuizată pe măsură ce furnizorii de browsere se îndepărtează de prefixele furnizorului, dar deocamdată dezvoltatorii trebuie să se asigure că prefixele nu cauzează rezultate neașteptate în browserele care nu sunt WebKit.

Industria designului web se schimbă constant, în parte, deoarece browserele și dispozitivele web se schimbă constant. Deoarece munca pe care o desfășurăm ca designeri și dezvoltatori web este vizualizată printr-un browser web, munca noastră va avea întotdeauna o relație simbiotică cu acest software.

Modificări ale browserelor web

Una dintre provocările cu care s-au confruntat întotdeauna designerii și dezvoltatorii de site-uri web nu este doar schimbările din browserele web, ci gama de browsere web diferite care vor fi utilizate pentru a accesa site-urile lor web. Ar fi minunat dacă toți vizitatorii site-ului ar folosi cel mai recent și mai bun software, dar acest lucru nu a fost niciodată așa (și probabil că nu va fi niciodată).

Unii vizitatori ai site-urilor dvs. vor naviga pe web cu browsere foarte depășite și cu funcții lipsă din browsere mai moderne. De exemplu, versiunile mai vechi ale browserului Microsoft Internet Explorer au constituit mult timp o problemă pentru mulți profesioniști din domeniul web. Chiar dacă compania a renunțat la asistența pentru unele dintre cele mai vechi browsere, există totuși oameni care le vor folosi - persoane cu care ați putea dori să vă adresați și să comunicați.

Definiția „degradării grațioase”

Realitatea este că oamenii care folosesc aceste browsere web depășite nu știu nici măcar că au un software depășit sau că experiența lor pe internet ar putea fi compromisă din cauza alegerii lor de software. Pentru ei, acest browser depășit este exact ceea ce au folosit pentru a accesa site-urile web de mult timp. Din perspectiva dezvoltatorului web, dorim să ne asigurăm că putem oferi acestor clienți o experiență plină de satisfacții, precum și să creăm site-uri web care funcționează excelent în browserele și dispozitivele mai moderne, cu funcții bogate disponibile astăzi.

„Degradarea grațioasă” este o strategie pentru gestionarea proiectelor de pagini web pentru diferite browsere, atât vechi, cât și noi.

Începând cu browserele moderne

Un design de site web conceput pentru o degradare treptată este dezvoltat în primul rând având în vedere browserele moderne. Acest site este conceput pentru a profita de capacitățile acestor browsere web moderne, dintre care multe sunt „actualizate automat”, astfel încât oamenii să folosească întotdeauna cea mai recentă versiune. Cu toate acestea, site-urile web care se degradează cu grație funcționează eficient și pentru browserele mai vechi. Atunci când aceste browsere mai vechi, mai puțin funcționale, vizualizează site-ul, acesta ar trebui să se degradeze în timp ce este încă funcțional, dar poate cu mai puține caracteristici sau alte elemente de afișare vizuale. Deși acest concept de a oferi un site mai puțin funcțional sau nu foarte atractiv poate părea ciudat pentru dvs., adevărul este că oamenii nici măcar nu vor ști că lipsesc. Nu vor compara site-ul pe care îl văd cu „cea mai bună versiune”, astfel încât atâta timp cât site-ul funcționează pentru ceea ce își doresc și nu pare a fi funcțional sau vizual rupt, veți fi într-o formă bună.

Îmbunătățire progresivă

Conceptul de degradare treptată seamănă mult cu un alt concept de web design despre care probabil ați auzit - îmbunătățirea progresivă. Principala diferență dintre o strategie de degradare și o strategie de îmbunătățire progresivă este locul în care începeți proiectarea. Dacă începeți cu cel mai mic numitor comun și apoi adăugați funcționalități de browser mai moderne la paginile dvs. web, utilizați îmbunătățiri progresive. Dacă începeți cu cele mai moderne funcții de ultimă generație și apoi micșorați, veți utiliza degradarea treptată. În cele din urmă, este posibil ca site-ul web rezultat să ofere aceeași experiență, indiferent dacă utilizați o îmbunătățire progresivă sau o degradare treptată. De fapt, scopul oricărei abordări este crearea unui site care să funcționeze excelent pentru browserele moderne, oferind în același timp o experiență ușor de utilizat pentru browserele web mai vechi și clienții care le utilizează în continuare.

Degradarea grațioasă nu înseamnă că le spuneți cititorilor dvs. „Descărcați cel mai recent browser”.

Unul dintre motivele pentru care mulți designeri moderni nu apreciază abordarea degradării grațioase este că se traduce adesea prin obligarea cititorilor să încarce cel mai modern browser pentru ca pagina să funcționeze. Aceasta nu este o degradare grațioasă. Dacă doriți să scrieți „încărcați browserul X pentru ca această caracteristică să funcționeze”, părăsiți zona degradării treptate și treceți la designul centrat pe browser. Da, este, fără îndoială, util să ajutați vizitatorii site-ului să treacă la un browser mai bun, dar acest lucru este adesea întrebat (amintiți-vă, mulți oameni nu înțeleg cum să descarce noi browsere, iar solicitarea dvs. de a face acest lucru poate fi înfricoșătoare). pe ei afară). Dacă doriți cu adevărat ca afacerea lor să le spună să le spună că părăsesc site-ul dvs. pentru a descărca software mai bun, este puțin probabil să fie posibil. Dacă site-ul dvs. nu are funcționalități de bază care necesită o versiune specifică a browserului sau o versiune superioară, descărcările forțate încalcă adesea experiența utilizatorului și ar trebui evitate.

O regulă bună este de a respecta aceleași reguli pentru deteriorarea treptată ca și pentru îmbunătățirea progresivă:

• Scrieți standarde HTML valide și conforme
• Utilizați foi de stil externe pentru design și aspect
• Utilizați scripturi conectate extern pentru interactivitate
• Asigurați-vă că conținutul este accesibil chiar și pentru browserele de nivel inferior fără CSS sau JavaScript

Având în vedere acest proces, puteți ieși și creați cel mai modern design pe care îl puteți! Asigurați-vă că funcționează în browsere mai puțin funcționale în timp ce funcționează în continuare.

Cât de departe ar trebui să mergi?

O întrebare pe care o au mulți dezvoltatori web este cât de mult ar trebui să acceptați versiunile browserului. Nu există un răspuns precis și uscat la această întrebare. Depinde de site-ul în sine. Dacă vă uitați la analiza traficului pe un site, puteți vedea ce browsere sunt utilizate pentru a vizita acel site. Dacă vedeți un procent semnificativ de oameni care utilizează un anumit browser mai vechi, atunci probabil că doriți să sprijiniți browserul respectiv sau riscați să pierdeți această afacere. Dacă vă uitați la analizele dvs. și vedeți că nimeni nu folosește o versiune mai veche a browserului, probabil că vă puteți decide să nu vă faceți griji cu privire la sprijinirea completă a acestui browser vechi și testarea acestuia. Așadar, răspunsul real la întrebarea cu privire la cât de mult înapoi are nevoie de asistență site-ul dvs. este „indiferent cât de mult înapoi analiștii dvs. vă spun ce folosesc clienții dvs.”.

Editat de Jeremy Girard.

Desigur, Internet Explorer conține un număr mare de bug-uri în diferite versiuni, dar cu ajutorul comentariilor condiționate le puteți lupta, realizând eliminarea lor. Dar ceea ce nu se poate face în legătură cu asta este că IE este depășit fără speranță. În timp ce alte browsere includ din ce în ce mai multe proprietăți CSS3, acceptă diverse tehnologii noi, IE marchează timpul. Versiunea IE9 nu va rezolva problema, versiunile anterioare nu se vor evapora peste noapte. Într-o astfel de situație, cea mai bună soluție ar fi degradarea grațioasă - principiul menținerii performanței în caz de pierdere a funcționalității.

Să aruncăm o privire la acest truc cu un mic exemplu care afișează textul într-un bloc și un buton. Blocul și butonul au colțuri rotunjite și o mică umbră este adăugată blocului. Până în prezent, browserele pentru CSS3 utilizează în principal proprietăți specifice cu propriile prefixe:

• Firefox - proprietăți care încep cu -moz-;
• Safari și Chrome - proprietăți care încep cu -webkit-;
• Opera - proprietăți care încep cu -o-.

Diferite versiuni ale acestor browsere pot înțelege unele proprietăți cu sau fără prefix, prin urmare, pentru universalitate, ele adaugă mai multe proprietăți simultan. Deci, pentru a crea colțurile rotunjite, avem nevoie de următorul stil.

Moz-border-radius: 10 px; / * Pentru Firefox * / -webkit-border-radius: 10px; / * Pentru Safari și Chrome * / border-radius: 10 px; / * Pentru Opera și IE9 * /

Deși utilizarea acestor proprietăți va duce la CSS nevalide, în acest caz este mai important să lucrați în browserele Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, precum și în versiunile lor mai vechi. Exemplul 1 arată cum să utilizați proprietățile CSS3 pentru a crea umbră și colțuri rotunjite.

Exemplul 1. Blochează cu umbră

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

Rezultatul exemplu este prezentat în Fig. 1.

Figura: 1. Blocați vizualizarea în Safari

Același exemplu în IE8 și mai jos este prezentat în Fig. 2.

Figura: 2. Vizualizarea blocului în IE8

Deși aspectul elementelor variază în detaliu, funcționalitatea paginii ca întreg rămâne. Butonul poate fi apăsat, textul rămâne același, inclusiv culoarea și fundalul său, nu există erori de afișare. De fapt, diferența este doar în lucrurile mici care îndeplinesc funcții decorative, nu aplicate. Toate principiile degradării grațioase sunt îndeplinite.

Ce oferă această abordare în practică?

• Vă permite să utilizați activ proprietățile decorative CSS3 fără a privi browserul.
• Motivează aplicarea diferitelor efecte CSS3.
• Face viața unui dezvoltator mult mai ușoară, deoarece nu mai trebuie să caute soluții pentru browsere depășite.
• Accelerează productivitatea muncii.

Desigur, degradarea grațioasă nu este întotdeauna aplicabilă. Dacă cerințele pentru aspect indică suport pentru versiunile mai vechi, atunci va trebui să căutați soluții alternative, de exemplu, utilizați imagini pentru colțurile rotunjite. Dar, în cea mai mare parte, cerințele pentru aspect sunt setate fără a lua în considerare situația generală. Și dacă comparați toate avantajele degradării grațioase cu dezavantajul care se manifestă doar prin faptul că browserele depășite, în special IE8, nu afișează pagina „frumos”, atunci simpatia va fi de partea progresului.

Nu am mai scris de mult, a trebuit să mă mut într-un loc fără internet (asta e groaza), în urma căruia nu am putut scrie pe blog. Astăzi vreau să vorbesc despre metoda de dezvoltare (layout), care este parțial utilizată în proiectarea blogului meu.

Cele mai recente versiuni ale browserelor inovatoare (cum ar fi FF 3.5, Opera 10) au introdus unele efecte decorative din specificația propusă CSS 3. Efectele de transparență, umbre și zebra (striping) sunt acum disponibile fără JavaScript sau marcaj suplimentar. Dar unele browsere mai vechi care încă folosesc aceste proprietăți nu o fac și ar fi trist să ne gândim că nu veți avea șansa de a folosi aceste efecte minunate încă câțiva ani.

În acest articol voi vorbi despre cum se pot face îmbunătățiri frumoase (treptate) în browserele care acceptă funcții CSS3 și, în același timp, arată un aspect care satisface alți utilizatori.

Ce este îmbunătățirea progresivă?

Pentru a înțelege conceptul de „îmbunătățire incrementală”, trebuie să înțelegem principiul „degradării grațioase”, care este bine descris de următorul citat:

Degradarea ușoară înseamnă că site-ul dvs. continuă să funcționeze chiar și atunci când este vizualizat într-un browser mai puțin optim, în care efectele avansate nu funcționează.
Gândirea fluidă, de Peter-Paul Koch

„Îmbunătățirea treptată” folosește aceeași metodă doar din partea opusă, în loc să ai grijă ca site-ul să nu se destrame în vechiul browser, trebuie mai întâi de toate să te gândești la conținut și să adaugi pur și simplu caracteristici ale programelor moderne la design pentru a îmbunătăți experiența utilizatorului, în timp ce starea de bază aspectele încă funcționează pe mașini mai vechi. Acesta este în prezent cel mai bun mod de a aplica noile caracteristici ale CSS 3.

Exemplu

De exemplu, să facem un meniu de navigare simplu, care arată puțin mai frumos, în funcție de suportul CSS din orice browser.

Aș dori să menționez că în acest exemplu nu folosesc grafică, hacks sau prefixe specifice browserului - toate îmbunătățirile se datorează capacităților declarate. Având în vedere acest lucru, unele dintre lucrurile de mai jos sunt doar de exemplu și este posibil să nu fie cea mai bună alegere pentru crearea de site-uri web reale.

Markup

Să facem un meniu simplu folosind o listă neordonată (ul):

• Lorem ipsum


• Lorem ipsum


• Lorem ipsum


• Lorem ipsum


• Lorem ipsum

Stil de bază

Ca unul de bază, voi folosi un stil care folosește doar selectoare de moștenire simple. Se creează o margine pe fiecare element și schimbă fundalul la trecerea mouse-ului (onmouseover). Acest lucru ar trebui să funcționeze în orice browser creat în ultimii 7-8 ani (și, eventual, mai mult).

CSS este foarte simplu:

Ul (
culoare de fundal: albastru;
partea de jos a frontierei: 1 px punctat # 999;
list-style: nici unul;
margine: 15px;
lățime: 150px;
}

li (
culoare de fundal: #fff;
chenar: 1px punctat # 999;
margine-fund-lățime: 0;
font: 1.2em / 1.333 Verdana, Arial, sans-serif;
}

li a (
culoarea neagra;
display: bloc;
înălțime: 100%;
umplutură: 0,25em 0;
text-align: centru;
decor-text: nici unul;
}

li a: hover (fundal-culoare: #efefef;)

Singura ciudățenie aici este fundalul albastru

; Voi explica asta mai târziu. Cu acest stil, vom avea următoarea vizualizare de bază, care va fi redată în IE6 astfel:

Aspect de bază așa cum va arăta în IE6 și în alte browsere vechi.

Aplicarea îmbunătățirilor

IE7 a fost primul din seria de browsere IE care a acceptat toate selectoarele de atribute CSS 2.1, ceea ce este comun în aproape toate celelalte browsere. Putem folosi unul dintre ele - selectorul pentru copii - pentru a începe îmbunătățirea. Deoarece IE6 nu acceptă selectoarele pentru copii, va ignora următoarele reguli:

Corp\u003e ul (lățimea marginii: 0;)

ul\u003e li (
border: 1px solid #fff;
lățimea chenarului: 1px 0 0 0;
}

li\u003e a (
culoare de fundal: # 666;
culoare albă;
font-weight: bold;
}

li: primul - copilul a (culoare: galben;)

li\u003e a: hover (fundal-culoare: # 999;)

Cu aceste reguli CSS, lista arată astfel:



Meniul are acum un fundal colorat și un text îndrăzneț, iar primul link este evidențiat într-o altă culoare.

Aceasta va afișa lista IE7, Firefox, Safari și Opera.

Să punem mai mult accent

Următorul pas este creșterea accentului utilizând o proprietate pe care IE nu o recunoaște: Opacitatea. Nu este nevoie să folosim selectoare speciale pentru asta, deoarece IE va ignora pur și simplu proprietățile pe care nu le acceptă:

Li (opacitate: 0,9;)

li: hover (opacitate: 1;)

Următoarea imagine arată cum funcționează această proprietate în operă, puteți vedea că elementele din listă au căpătat o ușoară nuanță albastră din fundal.

... La trecerea cu mouse-ul, fiecare element devine complet opac:



Puteți folosi desigur proprietatea filtrului IE pentru același efect în IE. La fel ca și prefixele specifice browserului (-moz-, -webkit-) pentru proprietățile de mai jos. Dar, în scopuri educaționale, voi rămâne la standardul CSS, deoarece filtrul nu este standard. proprietate, atunci nu este validă.

Firefox 2 acceptă transparența, dar în browserele ulterioare putem merge chiar mai departe. În Safari și Opera, putem decora text folosind proprietatea text-shadow:

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

Așa cum arată următoarea imagine, un element primește o ușoară umbră și se pare că iese ușor din pagină:



În cele din urmă, ne putem ocupa de suportul complet al Opera pentru noile selectoare CSS 3 și putem adăuga un alt strat de îmbunătățiri: culori variabile de fundal folosind selectorul n-copil:

Li: nth-child (2n + 1) a (fundal-culoare: # 333;)

li: nth-child (n) a: hover (
fundal-culoare: #aaa;
culoare: # 000;
}

li: first - child\u003e a: hover (culoare: galben;)

Vom vedea un meniu cu dungi în Opera:



Sumar si CONCLUZII

Imaginea de mai jos arată cum arată marcajul inițial în IE6, IE7, Firefox, Safari și Opera, după aplicarea regulilor CSS descrise în acest articol. după cum puteți vedea, pe măsură ce suportul pentru browser pentru CSS devine mai rafinat, meniurile devin mai elegante și mai sofisticate, iar prin utilizarea unei tehnici de îmbunătățire treptată, meniurile rămân funcționale chiar și în browsere foarte vechi.



Desigur, multe browsere au o grămadă de alte proprietăți pe care nu le-am acoperit aici, care pot fi utilizate, cum ar fi culorile RGBA și SVG ca culori de fundal.