Introducere în Web Development

În codul CSS, trebuie să separăm selectorii pe care vrem să se aplice doar pe anumite medii. Asta se îndeplinește cu ajutorul blocului @media, care arată cam așa:

                    @media «condiții» {
  .«selector» {
    «proprietăți» : «valori»;
  }
}
                

Ne vom uita mai târziu la ce condiții se pot seta.

Atunci când condițiile se îndeplinesc, toți selectorii dintre acolade vor fi activați.

Unele condiții primesc o valoare. În acele cazuri, condiția împreună cu valoarea trebuie pusă între paranteze.

Media type

Pentru a specifica pe ce mediu vrem să se aplice proprietățile noastre, avem 3 reguli simple:

                    @media screen {
  /* ecrane */
  .target {
    width: 10rem;
  }
}

@media print {
  /* imprimantă */
  .target {
    width: 10mm;
  }
}

@media all {
  /* toate */
  .target {
    aspect-ratio: 1/1;
  }
}
                

Dimensiuni

De departe, cele mai folosite condiții pentru Media Query sunt cele legate de dimensiunile ecranului. Acestea folosesc proprietățile de dimensiune din CSS:

Ca valori, se pot folosi orice unități de mărime valabile în CSS (px, rem, etc.).

                    @media (min-width: 768px) {
  .target {
    font-size: 16px;
  }
}

@media (max-height: 62rem) {
  .target {
    line-height: 1.1;
  }
}
                

Sintaxa nouă

Un nou mod de a ținti dimensiuni va fi disponibil în următorii ani. Deocamdată este suportat de ultimele versiuni de Firefox și Chrome. Mai trebuie să fie adoptat de Safari, și îl vom putea folosi în siguranță.

Noua sintaxă ne va permite să folosim operatori de comparație, ca în programare:

                    @media(width <= 400px) {
  /* Media query pentru ecrane mai mici sau fix 400 de pixeli lățime */
}
                

Putem chiar combina comparațiile:

                    @media(400px <= width < 700px) {
  /* 
Media query pentru ecrane 
între 400 și 700 de pixeli lățime 
  */
}
                

Orientare

Folosind un media query cu proprietatea orientation, putem ști care este mai mare dintre înălțime și lățime.

Din nefericire, această proprietate nu este suficient folosită, dar atunci când e, poate ajuta la crearea unor interfețe foarte interesante.

Operatori logici

Putem combina mai multe comparații, folosind operatorii logici and și or, sau putem inversa cu totul operațiunea folosind not.

                    @media(min-width: 400px) and (max-width: 699px) {
  /* 
Media query pentru ecrane între 
400 și 700 pixeli lățime 
  */
}

@media(width: 1080px) or (orientation: portrait) {
  /* 
Media query pentru ecrane de 1080px, 
sau orientate vertical 
  */
}

@media not(min-width: 720px) {
  /* 
Media query pentru ecrane 
mai mici de 720 pixeli 
  */
}
                

Alte trucuri

@supports (Feature Query)

Browserele moderne de câțiva ani suportă Feature Query.

Cu ajutorul lor, putem defini CSS care se aplică doar atunci când browserul știe cum să trateze anumite valori și proprietăți.

Ca parametru, îi vom da o proprietate CSS, împreună cu valoarea ce poate fi problematică, iar browserul va activa CSS din interior doar atunci când suportă acea valoare.

Ca exemplu, având în vedere că proprietatea gap este suportată de relativ puțin timp, am putea să o punem într-un Feature query.

                    @supports(gap: 1rem) {
  .target {
    gap: 2rem;
  }
}