Un ghid pentru suportul CSS în browsere

Nu vom trăi niciodată într-o lume în care toată lumea care vizitează site-urile noastre are un browser și o versiune de browser identice, așa cum nu vom trăi niciodată într-o lume în care toată lumea are aceeași dimensiune a ecranului și rezoluție. Aceasta înseamnă că a face față cu browsere vechi – sau cu browsere care nu acceptă ceva ce dorim să folosim – face parte din munca unui dezvoltator web. Acestea fiind spuse, lucrurile sunt mult mai bune acum decât în ​​trecut și, în acest articol, voi arunca o privire asupra diferitelor tipuri de probleme de asistență pentru browser pe care le-am putea întâlni. Îți voi arăta câteva modalități de a le gestiona și, de asemenea, am să mă uit la lucruri care ar putea apărea în curând și care te pot ajuta.

De ce avem aceste diferențe?

Chiar și într-o lume în care majoritatea browserelor sunt bazate pe Chromium, acele browsere nu rulează toate aceeași versiune de Chromium ca și Google Chrome. Aceasta înseamnă că un browser bazat pe Chromium, cum ar fi Vivaldi, ar putea fi cu câteva versiuni în spatele Google Chrome.

Și, desigur, utilizatorii nu își actualizează întotdeauna rapid browserele, deși această situație s-a îmbunătățit în ultimii ani, majoritatea browserelor actualizându-se în tăcere.

Există, de asemenea, modul în care noile funcții intră în browsere, în primul rând. Nu este cazul că noile funcții pentru CSS sunt concepute de Grupul de lucru CSS și o specificație completă transmisă furnizorilor de browsere cu instrucțiuni pentru a le implementa. Destul de des, numai atunci când are loc o implementare experimentală, toate detaliile mai fine ale specificației pot fi elaborate. Prin urmare, dezvoltarea caracteristicilor este un proces iterativ și necesită ca browserele să implementeze aceste specificații în dezvoltare. În timp ce implementarea are loc în zilele noastre cel mai adesea în spatele unui steag în browser sau disponibilă numai într-o versiune Nightly sau de previzualizare, odată ce un browser are o funcție completă, este probabil să o pornească pentru toată lumea, chiar dacă niciun alt browser nu are încă suport.

Toate acestea înseamnă că, oricât de mult ne-ar plăcea, nu vom exista niciodată într-o lume în care funcțiile sunt disponibile în mod magic pe fiecare desktop și telefon simultan. Dacă ești un dezvoltator web profesionist, atunci treaba ta este să te ocupi de acest fapt.

Erori vs. Lipsa de suport

Există trei probleme cu care ne confruntăm în ceea ce privește suportul pentru browser:

1. Fără suport pentru o funcție
   Prima problemă (și cel mai ușor de rezolvat) este atunci când un browser nu acceptă deloc această funcție.
2. Tratarea „bugurilor” din browser
   Al doilea este atunci când browserul pretinde că acceptă funcția, dar o face într-un mod diferit de modul în care alte browsere acceptă caracteristica. O astfel de problemă este ceea ce avem tendința de a numi „bucă de browser”, deoarece rezultatul final este un comportament inconsecvent.
3. Suport parțial al proprietăților CSS
   Acesta devine din ce în ce mai comun; o situație în care un browser acceptă o caracteristică — dar numai într-un context.

Este util să înțelegeți cu ce aveți de-a face atunci când vedeți o diferență între browsere, așa că să aruncăm o privire la fiecare dintre aceste probleme pe rând.

1. Fără suport pentru o funcție

Dacă utilizați o proprietate sau o valoare CSS pe care un browser nu o înțelege, browserul o va ignora. Acest lucru este același dacă utilizați o funcție care nu este acceptată sau creați o caracteristică și încercați să o utilizați. Dacă browserul nu înțelege acea linie de CSS, o omite și continuă cu următorul lucru pe care îl înțelege.

Acest principiu de design al CSS înseamnă că poți folosi cu bucurie noi funcții, știind că nu se va întâmpla nimic rău unui browser care nu are suport. Pentru unele CSS, folosite doar ca îmbunătățire, asta este tot ce trebuie să faceți. Utilizați funcția, asigurați-vă că atunci când această caracteristică nu este disponibilă, experiența este încă bună și asta este tot. Această abordare este ideea de bază din spatele îmbunătățirii progresive, folosind această caracteristică a platformei care permite utilizarea în siguranță a lucrurilor noi în browsere care nu le înțeleg.

Dacă doriți să verificați dacă o funcție pe care o utilizați este acceptată de browsere, puteți consulta site-ul web Can I Use. Un alt loc bun pentru a căuta informații detaliate de asistență este pagina pentru fiecare proprietate CSS de pe MDN. Datele de suport pentru browser de acolo tind să fie foarte detaliate.

Noul CSS Înțelege vechiul CSS

Pe măsură ce sunt dezvoltate noi caracteristici CSS, se acordă atenție modului în care acestea interacționează cu CSS existente. De exemplu, în specificația Grid și Flexbox, este detaliat în ceea ce privește modul în care display: grid și display: flex se ocupă de scenarii precum atunci când un element flotant devine un element grid sau un container multicol este transformat într-o grilă. Aceasta înseamnă că anumite comportamente sunt ignorate, ajutându-vă să suprascrieți pur și simplu CSS-ul pentru browserul care nu este compatibil. Aceste înlocuiri sunt detaliate în pagina pentru Îmbunătățirea progresivă și Aspectul grilei pe MDN.

Detectarea suportului cu interogări de caracteristici

Metoda de mai sus funcționează numai dacă CSS-ul pe care trebuie să-l utilizați nu are nevoie de alte proprietăți pentru a-l folosi. Este posibil să fie nevoie să adăugați proprietăți suplimentare la CSS pentru browserele mai vechi, care ar fi apoi interpretate și de browserele care acceptă funcția.

Un bun exemplu în acest sens poate fi găsit atunci când utilizați Grid Layout. În timp ce un element flotant care devine un element de grilă pierde tot comportamentul de flotare, este probabil ca, dacă încercați să creați o rezervă pentru un aspect de grilă cu float, să aveți lățimi procentuale și, eventual, marje la elemente.

 .grid > .item { width: 23%; margin: 0 1%; } 

Aceste lățimi și margini se vor aplica în continuare atunci când elementul flotant este un element grilă. Lățimea devine un procent din traseul grilei, mai degrabă decât lățimea completă a containerului; se va aplica apoi orice marjă, precum și un decalaj pe care este posibil să l-ați specificat.

 .grid > .item { width: 23%; margin: 0 1%; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } 

Din fericire, există o caracteristică încorporată în CSS și implementată în browserele moderne care ne ajută să facem față acestei situații. Interogările de funcții ne permit să întrebăm direct browser-ul ce acceptă și apoi să acționăm în funcție de răspuns. La fel ca o interogare media – care testează anumite proprietăți ale dispozitivului sau ale ecranului – Interogările de caracteristici testează suportul unei proprietăți și valori CSS.

Test pentru suport

Testarea suportului este cel mai simplu caz, folosim @supports și apoi testăm o proprietate și o valoare CSS. Conținutul din interogarea caracteristicilor va rula numai dacă browserul răspunde cu true, adică acceptă caracteristica.

Testează fără suport

Puteți întreba browserul dacă nu acceptă o funcție. În acest caz, codul din interogarea caracteristicilor va rula numai dacă browserul indică că nu are suport.

 @supports not (display: grid) { .item { /* CSS from browsers which do not support grid layout */ } }

Testează pentru mai multe lucruri

Dacă aveți nevoie de mai mult de o proprietate pentru a fi acceptată, utilizați and .

 @supports (display: grid) and (shape-outside: circle()){ .item { /* CSS from browsers which support grid and CSS shapes */ } }

Dacă aveți nevoie de sprijin pentru o proprietate sau alta, utilizați or .

 @supports (display: grid) or (display: flex){ .item { /* CSS from browsers which support grid or flexbox */ } }

Alegerea unei proprietăți și a unei valori de testat

Nu trebuie să testați fiecare proprietate pe care doriți să o utilizați - doar ceva care ar indica suport pentru funcțiile pe care intenționați să le utilizați. Prin urmare, dacă doriți să utilizați Grid Layout, puteți testa display: grid . În viitor (și odată ce suportul subgrid ajunge în browsere), ar putea fi necesar să fiți mai specific și să testați funcționalitatea subgrid-ului. În acest caz, ați testa grid-template-columns: subgrid pentru a obține un răspuns adevărat doar de la acele browsere care au implementat suport pentru subgrid.

Dacă ne întoarcem acum la exemplul nostru de rezervă flotantă, putem vedea cum le vor rezolva interogările de caracteristici pentru noi. Ceea ce trebuie să facem este să interogăm browserul pentru a afla dacă acceptă aspectul grilei. Dacă se întâmplă, putem seta lățimea articolului înapoi la auto și marja la 0 .

 .grid > .item { width: 23%; margin: 0 1%; } @supports(display: grid) { .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } .grid > .item { width: auto; margin: 0; } } 

Rețineți că, deși am inclus tot codul de grilă în interogarea mea de caracteristici, nu este nevoie. Dacă un browser nu înțelege proprietățile grilei, le-ar ignora, astfel încât să poată fi în siguranță în afara interogării caracteristicilor. Lucrurile care trebuie să fie în interiorul unei interogări de caracteristică în acest exemplu sunt proprietățile de marjă și lățime, deoarece acestea sunt necesare pentru vechiul cod de browser, dar ar fi aplicate și de browserele compatibile.

Îmbrățișează Cascada

O modalitate foarte simplă de a oferi alternative este de a utiliza faptul că browserele ignoră CSS pe care nu le înțeleg și faptul că acolo unde orice altceva are o specificitate egală, ordinea surselor este luată în considerare în ceea ce privește CSS-ul aplicat unui element. .

Mai întâi scrieți CSS-ul pentru browsere care nu acceptă caracteristica. Apoi testați pentru suportul proprietății pe care doriți să o utilizați, dacă browserul confirmă că are suport, suprascrieți codul alternativ cu noul cod.

Aceasta este aproape aceeași procedură pe care ați putea-o utiliza atunci când utilizați interogări media pentru design responsive, urmând o abordare bazată pe mobil. În această abordare, începeți cu aspectul pentru ecrane mai mici, apoi adăugați sau suprascrieți lucruri pentru cele mai mari pe măsură ce treceți în sus prin punctele de întrerupere.

Pot folosi interogări de caracteristici CSS? Date despre suportul pentru interogări de caracteristici CSS în browserele majore de pe caniuse.com.

Modul de lucru de mai sus înseamnă că nu trebuie să vă faceți griji cu privire la browserele care nu acceptă funcții Interogări. După cum puteți vedea din Can I Use , Interogările de caracteristici au un suport foarte bun. Browserele remarcabile care nu le acceptă sunt orice versiune de Internet Explorer.

Cu toate acestea, este probabil ca noua caracteristică pe care doriți să o utilizați să nu fie acceptată și în IE. Deci, în prezent veți începe aproape întotdeauna prin a scrie CSS pentru browsere fără suport, apoi veți testa cu o interogare de caracteristici. Această interogare de funcții ar trebui să testeze pentru asistență.

1. Browserele care acceptă funcții de interogare vor returna true dacă au suport și astfel se va folosi codul din interiorul interogării, suprascriind codul pentru browserele mai vechi.
2. Dacă browserul acceptă Interogări de caracteristici, dar nu caracteristica testată, va returna false. Codul din interogarea caracteristicii va fi ignorat.
3. Dacă browserul nu acceptă interogări de caracteristici, atunci totul din interiorul blocului de interogări de caracteristici va fi ignorat, ceea ce înseamnă că un browser precum IE11 va folosi vechiul cod de browser, care este foarte probabil exact ceea ce doriți!

2. Tratarea „bugurilor” din browser

A doua problemă de asistență pentru browser devine, din fericire, mai puțin frecventă. Dacă citiți „What We Wished For” (publicat la sfârșitul anului trecut), puteți face un mic tur al unora dintre cele mai derutante erori ale browserului din trecut. Acestea fiind spuse, orice software este susceptibil să aibă bug-uri, browserele nu fac excepție. Și, dacă adăugăm la asta faptul că, din cauza naturii circulare a implementării specificațiilor, uneori un browser a implementat ceva și apoi specificațiile s-au schimbat, așa că acum trebuie să emită o actualizare. Până la livrarea acestei actualizări, s-ar putea să ne aflăm într-o situație în care browserele fac ceva diferit unul față de celălalt.

Interogările de funcții nu ne pot ajuta dacă browserul raportează că suportul pentru ceva îl acceptă prost. Nu există niciun mod prin care browserul să poată spune „ Da, dar probabil că nu vă va plăcea ”. Când apare o eroare reală de interoperabilitate, este în aceste situații în care ar putea fi necesar să fiți puțin mai creativ.

Dacă credeți că vedeți o eroare, atunci primul lucru de făcut este să confirmați asta. Uneori, când credem că vedem un comportament de erori și browserele fac lucruri diferite, vina este a noastră. Poate că am folosit o sintaxă nevalidă sau încercăm să stilăm HTML incorect. În acele cazuri, browserul va încerca să facă ceva; cu toate acestea, deoarece nu utilizați limbile așa cum au fost concepute, fiecare browser poate face față într-un mod diferit. O verificare rapidă a validității HTML și CSS este un prim pas excelent.

În acel moment, probabil că aș face o căutare rapidă și aș vedea dacă problema mea a fost deja înțeleasă pe scară largă. Există câteva repoziții de probleme cunoscute, de exemplu Flexbugs și Gridbugs. Cu toate acestea, chiar și doar câteva cuvinte cheie bine alese pot apărea postări sau articole Stack Overflow care acoperă subiectul și vă pot oferi o soluție.

Dar să presupunem că nu știi cu adevărat ce cauzează eroarea, ceea ce face destul de dificilă căutarea unei soluții. Deci, următorul pas este să creați un caz de testare redus al problemei dvs., adică să eliminați orice lucru irelevant pentru a vă ajuta să identificați exact ce declanșează eroarea. Dacă credeți că aveți o eroare CSS, puteți elimina orice JavaScript sau puteți recrea același stil în afara unui cadru? Folosesc adesea CodePen pentru a aduna un caz de testare redus al ceva ce văd; acest lucru are avantajul suplimentar de a-mi oferi codul într-un mod pe care îl pot împărtăși cu ușurință cu altcineva dacă trebuie să întreb despre el.

De cele mai multe ori, odată ce ați izolat problema, este posibil să vă gândiți la o modalitate alternativă de a obține rezultatul dorit. Veți descoperi că altcineva a venit cu o soluție vicleană sau puteți posta undeva pentru a cere sugestii.

Acestea fiind spuse, dacă credeți că aveți o eroare în browser și nu găsiți pe nimeni altcineva care vorbește despre aceeași problemă, este foarte posibil să fi găsit ceva nou care ar trebui raportat. Cu toate noile CSS care au aterizat recent, problemele pot apărea uneori pe măsură ce oamenii încep să folosească lucruri în combinație cu alte părți ale CSS.

Consultați această postare a Lea Verou despre raportarea unor astfel de probleme, „Ajută comunitatea! Raportați erori de browser!”. Articolul are, de asemenea, sfaturi excelente pentru crearea unui caz de testare redus.

3. Suport parțial al proprietăților CSS

Al treilea tip de problemă a devenit mai frecventă datorită modului în care sunt proiectate specificațiile CSS moderne. Dacă ne gândim la Grid Layout și Flexbox, ambele aceste specificații folosesc proprietățile și valorile din Box Alignment Level 3, pentru a face alinierea. Prin urmare, proprietăți precum align-items , justify-content și column-gap sunt specificate pentru a fi utilizate atât în ​​Grid, cât și în Flexbox, precum și în alte metode de aspect.

La momentul scrierii, totuși, proprietățile gap funcționează în Grid Layout în toate browserele care acceptă grilă, iar column-gap funcționează în Multicol; cu toate acestea, numai Firefox a implementat aceste proprietăți pentru Flexbox.

Dacă ar fi să folosesc margini pentru a crea o rezervă pentru Flexbox, apoi să testez pentru column-gap și să elimin marginile, casetele mele nu vor avea spațiu între ele în browserele care acceptă column-gap în Grid sau multicol, așa că spațierea mea de rezervă va fi îndepărtat.

 @supports(column-gap: 20px) { .flex { margin: 0; /* almost everything supports column-gap so this will always remove the margins, even if we do not have gap support in flexbox. */ } }

Aceasta este o limitare actuală a Interogărilor de caracteristici. Nu avem o modalitate de a testa suportul unei funcții într-o altă caracteristică. În situația de mai sus, ceea ce vreau să întreb browser-ul este: „Aveți suport pentru coloane-gap în Flexbox?” În acest fel, pot obține un răspuns negativ, astfel încât să îmi pot folosi alternativa.

Există o problemă similară cu proprietățile de fragmentare CSS break-before , break-after și break-inside . Deoarece acestea au un suport mai bun atunci când pagina este imprimată, browserele vor solicita adesea suport. Cu toate acestea, dacă testați pentru suport în multicol, obțineți ceea ce par a fi fals pozitive. Am ridicat o problemă la Grupul de lucru CSS pentru această problemă, cu toate acestea, nu este o problemă simplă de rezolvat. Dacă aveți gânduri, vă rugăm să le adăugați acolo.

Testare pentru asistență pentru selecție

În prezent, interogările de caracteristici pot testa numai proprietățile și valorile CSS. Un alt lucru pentru care ne-ar plăcea să testăm este suportul selectoarelor mai noi, cum ar fi cele de la Nivelul 4 al specificației Selectorilor. Există o notă explicativă și, de asemenea, o implementare în spatele unui semnalizare în Firefox Nightly a unei noi caracteristici pentru Interogări de caracteristici care va realiza acest lucru.

Dacă vizitați about:config în Firefox și activați layout.css.supports-selector.enabled , puteți testa pentru a vedea dacă sunt acceptați diferiți selectori. Sintaxa este în prezent foarte simplă, de exemplu pentru a testa selectorul : :has :

 @supports selector(:has){ .item { /* CSS for support of :has */ } }

Aceasta este o specificație în curs de dezvoltare, cu toate acestea, puteți vedea cum sunt adăugate funcții care să ne ajute să gestionăm problemele mereu prezente ale suportului pentru browser în timp ce vorbim.

Lectură suplimentară

Poate părea frustrant când doriți să utilizați o funcție și descoperiți că nu este acceptată de un browser major sau dacă lucrurile par să se comporte în moduri diferite. Am adunat câteva lecturi practice suplimentare care ar putea ajuta.

• „Utilizarea CSS Grid: Suport browsers Without Grid” Opțiuni pentru a face față browserelor mai vechi și CSS Grid
• Pagina de referință MDN „Interogări de funcții” pentru Interogări de caracteristici
• Ghid MDN „CSS Grid And Progressive Enhancement” pentru îmbunătățirea progresivă a Grid
• Ghid MDN „Compatibilitate inversă a Flexbox” pentru suportul Flexbox, inclusiv detalii despre implementările mai vechi cu prefix
• „În primul rând biblioteca de modele” Cum să gestionați codul alternativ folosind o bibliotecă de modele