Majoritatea utilizatorilor utilizează mai multe fișiere pentru a crea CSS pentru diferite tipuri de dispozitive (tipuri de suporturi), cum ar fi ecrane de monitorizare, imprimante sau PDA-uri. În acest caz, fișierele sunt atașate la pagina web sau prin elemente de legătură cu atributul media. sau prin intermediul unei reguli @import care specifică unul sau mai multe tipuri de suporturi media.
Nu este nimic greșit în schimbul CSS în mai multe fișiere, și îmbinându-le în acest fel (ca din acest scris în acest mod este pus în aplicare pe site-ul nostru), dar există două dezavantaje: aceasta duce la HTTP-cereri un număr mai mare de browser-ul la server și Aveți nevoie de suport pentru starea actuală a mai multor fișiere CSS în același timp.
Unele persoane preferă să distribuie CSS-ul pe mai multe fișiere și nu numai din cauza diferitelor tipuri de suporturi media, dar și pentru că aparțin secțiunilor site-ului sau scopul conținutului foilor de stil corespunzătoare (poziționare, culori, tipografie).
Din fericire pentru mine și cei care fac la fel ca mine, există o modalitate de a combina toate CSS-urile într-un fișier.
Utilizați regula @media
Regula @media vă permite să grupați regulile CSS într-un singur fișier în funcție de tipul de dispozitive pentru care sunt destinate. Orice reguli în afara normelor @media se aplică tuturor tipurilor de dispozitive cărora li se aplică fișierul CSS.
Mai jos este un exemplu de foaie de stil în care sunt utilizate regulile @media:
Pe baza faptului că regulile de mai sus sunt într-un fișier CSS care se aplică tuturor tipurilor de dispozitive, se aplică următoarele prevederi:
- Pentru tipurile de medii de ecran și de proiecție, textul va fi gri închis, iar fundalul va consta într-o imagine repetată.
- Pentru tipărirea de tip media, textul va fi negru, iar fundalul va fi alb.
- Agenții utilizator care folosesc dispozitivul portabil de tip media. aplicați o culoare verde închis textului și fundalul va deveni alb.
- Pentru toate celelalte tipuri de materiale, textul va fi gri închis și fundalul alb.
Puteți folosi această metodă sau nu, însă am constatat că aceasta conduce la o reducere a redundanței și reduce riscul ca unul sau mai multe tipuri de suporturi să fie ignorate de mine în timpul următoarei editări CSS.