Acest curs este în română. Am tradus anumite expresii, uneori forțat, dar aici nu am știut cum să traduc denumirea "at rules". Nu puteam să le spun "reguli at" pentru că unii vorbitori de limbă română nu citesc simbolul @ ca „at”, nici măcar „la”. Poate ar fi avut ceva sens să le spun „reguli a-rond”, dar mi s-a părut mai amuzant să folosesc denumirea antică (popularizată în anii 1990 de Horia Brenciu) „coadă de maimuță”.
Capitolul 9: Pseudo-CSSReguli de maimuță (@ rules)
Am văzut deja câteva chestii care încep cu @: media query (unde am pomenit și de feature/support query) și animații, Mai sunt câteva chestii de CSS care altfel nu au legătură între ele, doar faptul că încep cu această coadă de maimuță și se pun în afara selectorilor.
@font-face
@font-face @font-face {
font-family: "Numele fontului";
font-weight: 500;
font-style: italic;
src: url("font.woff2") format("woff2"),url("font.woff") format("woff");
}
Folosind @font-face putem folosi orice font avem dreptul să folosim în paginile noastre web. Trebuie să avem fișierele acelui font, pe care le vom încărca pe server, împreună cu fișierele HTML și CSS.
Apoi, în proprietatea src vom pune adresa către fișier prin funcția url(). Diferite browsere și sisteme de operare pot suporta doar anumite tipuri de font, așa că e o idee bună să folosim toate formatele de fișier de care avem nevoie.
Unele fonturi au grosime variabilă, așa că am putea folosi orice valoarea pentru font-weight la elementele care folosesc acel font. Dar dacă fontul pe care ni-l dorim nu are grosime variabilă va trebui să punem mai multe declarații @font-face, cu surse diferite și valori corespunzătoare la font-weight.
Dacă nu avem la dispoziție fonturi de grosime diferită, browserul va încerca să îngroșeze și să subțieze artificial literele, dar e posibil ca rezultatul să nu arate bine mereu.
O poveste asemănătoare avem cu font-style dacă vrem text înclinat.
@import
@importPutem separăm codul nostru CSS în mai multe fișiere, pe care să le importăm în fișierul nostru, opțional cu niște condiții.
Importare necondiționată
@import url("exemplu.css");
În acest mod, pur și simplu dăm fișierul (sau URL-ul) pe care vrem să îl importăm.
Tot CSS-ul din fișierul importat va fi aplicat pe pagina noastră.
Există și opțiunea de a face import direct cu numele fișierului, fără a folosi url(), dar e posibil să ne încurce când trecem la Sass.
Importare condiționată
@import url("exemplu.css") screen and (min-width: 62rem);
Putem folosi media query pentru a importa fișierul doar atunci când acestea se potrivesc.
Astfel, putem separa stilurile noastre în fișiere dedicate fiecărui query.