Cum vă poate ajuta Modernizr să implementați soluții de rezervă CSS

Publicat: 2021-04-05

În calitate de web designeri, suntem adesea încurajați să folosim cele mai recente și mai bune funcții pe care CSS le are de oferit. Și există o mulțime de motive convingătoare pentru a face acest lucru. Tehnici precum CSS Grid și Flexbox realizează rapid funcționarea machetelor comune, în timp ce animațiile CSS adaugă mișcare și interactivitate. Acesta este doar vârful aisbergului.

Cu toate acestea, implementarea acestor caracteristici poate veni uneori cu prețul compatibilității browserului. Pentru site-urile web care au încă un număr semnificativ de utilizatori cu browsere mai vechi sau pentru funcții care sunt foarte noi, există riscul de a lăsa pe unii oameni afară.

Din punct de vedere filosofic, unii designeri sunt în regulă cu asta – și asta este în regulă. Dar implementarea alternativelor pentru aceste funcții poate fi mai ușoară decât credeți. Aceste măsuri de siguranță oferă o copie rezonabilă a unui anumit aspect sau element de design și sunt compatibile cu browserele web vechi.

Astăzi, vă vom arăta cum să utilizați biblioteca de detectare a caracteristicilor Modernizr în acest scop. Începem!

Ce este Modernizr?

Modernizr este unul dintre acele instrumente utile pe care designerii web se bazează de ani de zile. Este o bibliotecă care poate fi personalizată pentru a „detecta” (în realitate, execută teste) caracteristici specifice pe măsură ce se încarcă o pagină web. De acolo, adaugă clase CSS la elementul <HTML> al paginii, permițând designerilor să își vizeze codul în funcție de ceea ce găsește biblioteca.

În cazul nostru, îl vom folosi pentru a detecta CSS Flexbox. Cu toate acestea, este capabil să caute și funcții legate de HTML și JavaScript. De exemplu, îl puteți folosi pentru a determina dacă un browser acceptă HTML5. Dacă nu, scriptul HTML5 shiv disponibil poate fi folosit pentru a-l aduce la cod, ca să spunem așa.

Ceea ce este cu adevărat frumos este că poți personaliza Modernizr pentru a răspunde nevoilor proiectului tău. Interfața de utilizare a site-ului lor vă va permite să alegeți și să alegeți numai elementele pe care doriți să le detectați. După ce ați făcut selecțiile, faceți clic pe butonul „Build” pentru a genera un pachet personalizat care poate fi descărcat.

Construcția noastră

Pentru scopurile noastre (și pentru a menține lucrurile simple), construim pachetul Modernizr pentru a detecta Flexbox. De asemenea, vom alege să reducem codul și să adăugăm și clase CSS .

Site-ul Modernizr.

Pasul 1: Configurarea demonstrației

Pentru a demonstra cum funcționează toate acestea, va fi nevoie de câteva fișiere - ambele disponibile pe GitHub:

  • flexgrid.css – Acesta este sistemul nostru simplu de grilă CSS Flexbox. Veți observa că are clase pentru diferite aliniamente și lățimi de coloane. În plus, există un set special de clase .no-flexbox care utilizează, de asemenea, flotari CSS vechi. Acest lucru ne va ajuta să creăm un stil de aspect similar în browserele vechi.
  • modernizr-custom.js – Scriptul menționat mai sus va detecta dacă CSS Flexbox este sau nu acceptat de browserul curent.

În continuare, vom dori să creăm un nou document HTML care apelează ambele fișiere de mai sus în zona <head> . În plus, documentul va avea nevoie de un exemplu de aspect CSS Flexbox și de conținut.

Vă puteți simți liber să utilizați fișierul demonstrativ de mai jos pentru experimentare. Conține un aspect simplu cu 3 coloane, împreună cu câteva îmbunătățiri vizuale minore (mai multe despre asta într-un pic).

Pasul 2: Vizualizați documentul HTML într-un browser modern

Acum este timpul să vedem cum arată demonstrația noastră într-un browser. Pentru început, să folosim un browser web modern care acceptă Flexbox.

Un aspect CSS cu 3 coloane.

Cel puțin, bănuim că acceptă Flexbox. Cum putem spune cu siguranță? Asta este ceea ce Modernizr este aici pentru a face.

În cazul nostru, vom dori să ne uităm la sursa paginii noastre demo, în special la elementul <HTML> . Dacă există o clasă de flexbox adăugată elementului, știm că browserul nostru acceptă caracteristica. Continuați și vizualizați sursa paginii în browserul dvs. - vom aștepta.

Unde este clasa?

Dacă ați încercat să vizualizați sursa completă a paginii, este posibil să fi observat că elementul <HTML> nu conține o clasă. Nu vă faceți griji - acest lucru este normal.

Asta pentru că clasa este adăugată în timpul execuției, după testele Modernizr pentru caracteristica selectată. Prin urmare, nu va apărea în codul sursă complet.

Utilizați instrumentele pentru dezvoltatori ale browserului dvs

În schimb, deschideți instrumentele de dezvoltare ale browserului web (apăsați butonul F12 de pe tastatură). Aceasta va oferi o privire precisă asupra elementului <HTML> .

Aici, folosim cea mai recentă versiune a Firefox Developer Edition. Potrivit Modernizr, acesta acceptă CSS Flexbox. Yay!

Instrumentele pentru dezvoltatori Firefox care afișează suport CSS Flexbox.

Pasul 3: Testați CSS Fallback într-un browser vechi

Totul arată destul de bine în browserul nostru modern. Dar ce zici de software-ul moștenit?

Stilurile noastre sunt setate să utilizeze floats CSS în browsere care nu acceptă Flexbox. Această rezervă ar trebui să ne permită să creăm un aspect cu mai multe coloane, chiar și în configurații antice.

Potrivit Can I use, Flexbox are suport parțial încă din Internet Explorer 10, Firefox 2, Chrome 4 și Safari 3.1. Au trecut mulți ani de când aceste browsere au fost utilizate pe scară largă. Cu toate acestea, IE, în special, continuă să rămână aici și acolo.

Modernizr poate fi configurat să testeze suport parțial, dar devine dezordonat. Aceasta duce la scrierea mai multor alternative CSS care iau în considerare o serie de situații diferite. Nu este foarte eficient. Prin urmare, căutăm asistență totul sau nimic în testele noastre.

Să aruncăm o privire la demonstrația noastră în IE 10 (prin intermediul unui serviciu de testare a browserului) și să vedem ce se întâmplă.

Un aspect CSS cu 3 coloane, cu a treia coloană împinsă pe un nou rând.

Nu prea ponosit. A treia coloană a noastră este împinsă în jos la următorul rând, care poate fi ajustat. Dar cum rămâne cu suportul Flexbox?

O vedere rapidă a instrumentelor pentru dezvoltatori IE arată că elementul nostru <HTML> afișează o clasă de no-flexbox . Aceasta înseamnă că Flexbox nu este acceptat aici, iar alternativa CSS este utilizată.

Instrumentele pentru dezvoltatori Internet Explorer nu afișează suport pentru CSS Flexbox.

Remedierea aspectului pentru CSS Floats

Flotantele noastre CSS de rezervă nu vor coopera cu îmbunătățirile vizuale pe care le-am făcut. A treia coloană este împinsă în jos pe un al doilea rând, ceea ce nu arată prea frumos.

Acest lucru se datorează faptului că floats adaugă umplutură și chenare la lățimea coloanei pe care am stabilit-o anterior în foaia de stil. Flexbox, pe de altă parte, se poate adapta la aceste elemente fără a adăuga lățimea totală a coloanei. De aici și diferența de rezultate.

Există câteva lucruri diferite pe care le-am putea face pentru a remedia situația. S-ar putea să reducem lățimea coloanelor sau chiar să micșorăm marginea dintre coloane. Să încercăm să reducem lățimea coloanei de la 30.66% la 28.66% .

Comparație: aspect CSS Flexbox (sus) și CSS flotant alternativ (jos).

A mers! Coloanele noastre sunt acum afișate cu bucurie și similare în mod rezonabil cu versiunile Flexbox. Lăsând deoparte unele diferențe de spațiere, acesta este cel puțin utilizabil într-un browser vechi. Am putea intra și face alte modificări pentru a ne apropia și mai mult de original.

Detectați caracteristicile browserului și ajustați în consecință

În timp ce demonstrația noastră s-a concentrat pe detectarea CSS Flexbox, Modernizr poate face mult mai mult. Poate căuta alte caracteristici comune, cum ar fi HTML Canvas, suport SVG, CSS Grid și o serie de alte informații utile.

Ideea este că, odată ce știți de ce este capabil browserul unui utilizator, vă puteți ajusta codul pentru a urma exemplul. Acest lucru face ca adoptarea unor specificații CSS mai noi, de exemplu, să fie un proces mult mai puțin îngrijorător.

Poate că nu va trebui să utilizați alternative în toate cazurile. Dar e bine de știut că implementarea lor este ușor de făcut, cu ajutorul Modernizr.