Cereri media CSS - descriere, utilizare și recomandări

Solicitările media reprezintă o caracteristică CSS care permite ca conținutul unei pagini web să se adapteze diferitelor dimensiuni și rezoluții ale ecranului. Acestea fac parte integrantă din designul flexibil de web și sunt folosite pentru a personaliza aspectul site-urilor web pentru mai multe dispozitive cu dimensiuni diferite ale ecranului. Deci, interogările media - Acest modul CSS3 care convertește conținutul condițiilor, cum ar fi rezoluția ecranului telefonului smartphone sau de pe computer. A devenit standardul W3C recomandat în iunie 2012 și este utilizat în prezent în dezvoltarea web și în designul grafic.

Media interogări CSS sunt utile dacă doriți să aplicați stiluri în funcție de tipul general al dispozitivului (de exemplu, prin imprimarea sau ecran), caracteristicile specifice (de exemplu, portul de vizualizare lățimea browser) sau mediu (de exemplu, cu privire la condițiile de lumină ambientală). Un număr imens de dispozitive conectate la Internet disponibile astăzi fac solicitările mass-media un instrument important pentru crearea de site-uri și aplicații care sunt suficient de stabile pentru a lucra cu orice echipament.

poveste

Solicitările media au fost identificate pentru prima dată în propunerea originală CSS Hocon Wium Lie în 1994, dar la acea dată nu au făcut parte din CSS1. Recomandarea HTML4 din 1997 prezintă un exemplu de modul în care aceste componente pot fi adăugate în viitor.

În 2000, W3C a început să lucreze la interogările media. Primul proiect public de lucru pentru anchetele media a fost publicat în 2001. Specificația a devenit recomandarea W3C în 2012, după ce browserele au adăugat suport.

Cum sunt formulate cererile media în CSS?

Interogările pot fi inserate în fișierul HTML al unei pagini Web sau incluse într-un fișier .CSS separat, la care se referă. Mai jos este o descriere și un exemplu de interogare media în CSS:

Ecranul @media și (max-width: 768px)

{

header {height: 70px; }

articol {font-size: 14px; }

img {max-lățime: 480px; }

}

Cererea multimedia de mai sus este activată dacă fereastra browserului utilizatorului are o lățime de 768 de pixeli sau mai mică. Acest lucru se poate întâmpla dacă scurtați fereastra de pe un computer desktop sau utilizați un dispozitiv mobil, cum ar fi o tabletă, pentru a vizualiza conținutul web.

Cum se utilizează interogările media CSS3?

Ca răspuns la designul web, solicitările media acționează ca filtre pentru diferite dimensiuni ale ecranului. Ca toate modulele din foaia de stil cascadă, cele care apar în lista de mai sus depășesc cele care sunt deasupra lor. Prin urmare, stilurile implicite sunt de obicei definite mai întâi în documentul CSS, urmate de interogări media pentru diferite dimensiuni ale ecranului. De exemplu, puteți defini mai întâi stilurile de desktop, apoi o interogare multimedia cu stiluri pentru utilizatorii de tablete și apoi pentru utilizatorii de smartphone-uri. Stilurile pot fi de asemenea definite în ordine inversă.

În timp ce lățimea minimă este cea mai obișnuită funcție folosită în interogările media, multe altele sunt de asemenea disponibile pe scară largă. Dimensiunile imaginii din solicitările mass-media CSS includ:

• lățimea minimă a dispozitivului;
• înălțimea minimă a dispozitivului;
• aspect de aspect;
• indice de culoare maxim;
• rezoluția maximă;
• orientarea ecranului.

De exemplu, valoarea rezoluției poate fi utilizată pentru a detecta afișajele HiDPI (cum ar fi imaginile retinei) și a descărca grafice de înaltă rezoluție în locul imaginilor standard.

Utilizare și erori

De ce nu funcționează solicitările mass-media CSS? Această componentă constă într-un tip de suport media și una sau mai multe expresii utilizând funcții media care se întorc fie false, fie false. Rezultatul interogării este adevărat dacă tipul de media specificat în ea corespunde tipului de dispozitiv pe care este afișat documentul și toate expresiile din interogarea media sunt adevărate. În cazurile în care solicitările mass-media CSS nu funcționează, trebuie să verificați regulile de stil adecvate și regulile de cascadă. Poate că aceste date conțin o eroare.

Tipuri media

Tipul media poate fi declarat în antetul documentului HTML utilizând atributul "media" din interiorul elementului . Valoarea atributului "media" indică pe ce dispozitiv va fi afișat documentul asociat. Tipurile media pot fi, de asemenea, declarate în instrucțiunile de procesare XML, @import at-rule și @media at-rule. Vizualizarea multimedia "toate" poate fi de asemenea utilizată pentru a indica faptul că foaia de stil este aplicată tuturor tipurilor de suporturi media.

Ce este CSS?

CSS (Foaia de stil cascadă sau Cascading Style Sheets) este utilizat pentru formatarea paginilor web stiluri definition aspect de text, dimensiuni, tabele și alte aspecte de conținut web care anterior ar putea fi definit numai în pagina HTML-structura.

CSS ajută dezvoltatorii web să creeze un singur format pentru mai multe pagini ale site-ului. În loc să definească aspectul fiecărui tabel și fiecărui bloc de text în HTML, stilurile sunt definite doar o singură dată în documentul CSS. Atunci când un format este definit într-o foaie de stil cascadă, acesta poate fi utilizat de orice pagină care face trimitere la un fișier CSS. În plus, CSS ușurează schimbarea stilurilor pe mai multe pagini în același timp. De exemplu, un dezvoltator web poate programa o creștere a dimensiunii standard a textului de la 10 la 12 puncte pe cincizeci de pagini ale unui site web. Dacă toate paginile se referă la aceeași foaie de stil, dimensiunea textului va fi modificată numai în tabel, iar în toate paginile va fi dimensiunea corectă.

Deși CSS este minunat pentru crearea stilurilor de text, este utilă și pentru formatarea altor aspecte ale aspectului unei pagini web. De exemplu, puteți utiliza CSS pentru a defini umplerea celulelor într-un tabel, stilul, grosimea și culoarea frontierei sau pentru a completa elemente de imagine sau alte obiecte. CSS, în comparație cu HTML, oferă dezvoltatorilor web un control mai precis asupra modului în care vor arăta paginile web.

Tipuri de interogări multimedia

Tipurile de materiale descriu categoria generală a dispozitivului. În timp ce site-urile sunt de obicei concepute în funcție de ecrane, un programator poate crea stiluri create pentru dispozitive speciale, cum ar fi imprimante sau editoare audio. De exemplu, această bucată de cod CSS este pentru imprimante: @media print {...}.

De asemenea, puteți viza mai multe dispozitive. De exemplu, această regulă @media utilizează două solicitări media pentru a viza dispozitivele de tipărire și de imprimare: ecranul @media, tipăriți {...}.

Caracteristicile CSS Media

Funcțiile multimedia descriu caracteristicile specifice ale agentului utilizator, ale dispozitivului de ieșire sau ale mediului. De exemplu, puteți aplica anumite stiluri la monitoarele cu ecran lat, computerele sau dispozitivele care sunt utilizate în condiții de iluminare scăzută. În acest exemplu, stilurile sunt aplicate atunci când mecanismul principal de intrare al utilizatorului (de exemplu un mouse) poate să stea peste elemente: @media (hover: hover) {...}.

Multe funcții multimedia sunt funcții ale gamei, ceea ce înseamnă că pot avea un prefix "min;" sau "max;" pentru a exprima constrângerile minime sau maxime. De exemplu, această comandă va aplica stiluri numai dacă lățimea ferestrei de vizualizare a browserului este egală sau mai mică de 12.450px: @media (max-width: 12450px) {...}.

Dacă creați o interogare a funcției multimedia fără a specifica o valoare, stilurile imbricate vor fi utilizate până când valoarea funcției va fi zero. De exemplu, acest CSS se va aplica pentru orice dispozitiv cu ecran color: @media (culoare) {...}.

Dacă funcția nu se aplică dispozitivului pe care rulează browserul, expresiile care conțin această funcție multimedia sunt întotdeauna false. De exemplu, stilurile imbricate în următoarea interogare nu vor fi folosite niciodată, deoarece niciun dispozitiv de vorbire nu are un format de ecran: discursul @media și (raportul de aspect: 11/5) {...}.

Specificații tehnice

Întrebările media sunt o componentă cheie a designului adaptiv care vă permite să adaptați CSS pe baza diferiților parametri sau caracteristici ale dispozitivului. De exemplu, o interogare multimedia poate aplica stiluri diferite dacă ecranul este mai mic decât o anumită dimensiune sau dacă utilizatorul ține dispozitivul în modul portret sau peisaj.

Sintaxa cererilor de multimedia este utilizată și în alte contexte, de exemplu, în atributul media al unui element , care poate fi reglată la un șir de interogări multimedia pentru a determina dacă să se utilizeze această sursă atunci când se selectează o anumită imagine pentru a fi utilizată într-un element .

metodă Window.matchMedia () poate fi folosit pentru a verifica fereastra la cererea din mass-media. De asemenea, puteți aplica funcția MediaQueryList.addListener () pentru a notifica când se modifică starea solicitărilor. Cu această caracteristică, site-ul sau aplicația dvs. va putea răspunde la configurația, orientarea sau modificările de stare ale dispozitivului.

Interogări multimedia pentru stilurile de apeluri

Designul web adaptiv a întâmpinat o descărcare lentă a conținutului. Acum, procesul de eliminare a acestui neajuns este bine documentat. Există câteva moduri prin care dezvoltatorii folosesc pentru a descărca mai bine conținut și imagini pe diferite dispozitive.

Una dintre ele este utilizarea de interogări media care funcționează pentru a invoca stilurile unui dispozitiv de utilizator pe baza dimensiunii acestuia. În trecut, programatorii au argumentat dacă solicitările mass-media sunt cea mai bună soluție în cazul dispozitivelor mobile și această dezbatere continuă. Acum, recunoscut oficial că interogări media CSS (interogări media) - este un mod simplu și eficient pentru a deservi o varietate de conținut pentru un număr de dispozitive, precum și cele mai frecvent utilizate interogări - cele referitoare la înălțimea și lățimea imaginii curente.

Apelarea utilizând o foaie de stil externă

Stilurile CSS pentru interogările media verifică mai întâi tipul de suport din șirul de agenți utilizator înainte de a verifica atributele fizice ale ferestrei de vizualizare. Ele sunt o declarație CSS care poate fi invocată folosind o foaie de stil externă. Apelul extern va arăta astfel: <link rel = "stylesheet" = media "și (min-lățime: 320px) și (max lățime: 480 x)" href = "css / yourstylesheet.css" />.

Apelarea directă a CSS va arăta astfel:

Ecranul @media și (min-width: 320px)

și (max-lățime: 480px) {

/ * Introduceți aici stilurile

}.

Întrebările media CSS nu sunt modulare, ceea ce înseamnă că pot face munca lor mai dificilă. O cerere de element este similară cu o interogare media, deoarece folosește CSS atunci când sunt îndeplinite anumite condiții. Cu toate acestea, aceste tipuri de date se bazează pe elemente, nu pe browser, care în prezent nu sunt acceptate în CSS3. Întrebările elementare sunt în creștere, mai ales că acestea completează cererile de presă ale CSS. Acest lucru înseamnă că ambele pot colabora în cele din urmă pentru a crea modele mai modulare și mai flexibile.

Lucrul cu imaginile

Scalarea imaginilor pentru un design flexibil este un proces destul de simplu. Cu toate acestea, există mai multe probleme care trebuie abordate. Este vorba despre pierderea pieselor și a imaginilor în timpul comprimării pentru a plasa conținut pe o pagină pe dispozitive mai mici. Pentru a crea imagini scalabile, pur și simplu adăugați următorul cod în foaia de stil:

img {

max-lățime: 100% -

}

Acest lucru va reduce imaginea pentru a se potrivi cu dimensiunea containerului care este mai mică decât lățimea imaginii. Setarea lățimii maxime la 100% înseamnă că imaginea nu va crește mai mult decât dimensiunea reală.

Cu toate acestea, aceasta poate fi o problemă atunci când vine vorba de performanța site-ului, pentru că, în mod esențial, furnizați o imagine de dimensiune completă fiecărui dispozitiv. Pentru aceasta nu există o soluție simplă, mai ales dacă lucrați la un site cu imagini învechite. Cu toate acestea, Adaptive Images este un plug-in care vă poate optimiza imaginile pe baza dimensiunilor ecranului. Proiectul adaptat bazat pe Media Foundation Framework vă permite de asemenea să împărțiți imagini pe baza dimensiunilor ecranului.

Când lucrați cu imagini, trebuie să utilizați SVG, fonturi web, tip web și CSS.