Funcții CSS interesante pe care ar trebui să le cunoașteți

Săptămâna trecută vorbeam despre pseudo-elemente și pseudo-clase în CSS. În acea postare, am văzut cum aceste caracteristici CSS ne permit să generăm cod mai concis, inteligibil și ușor de întreținut. Astăzi aș dori să vă împărtășesc câteva proprietăți CSS suplimentare pentru a construi site-uri web adaptabile care țin cont de preferințele vizitatorilor dvs.

Raport de aspect cu object-fit object-position

object-fit este o proprietate CSS care vă permite să setați modul în care un element de înlocuire (de exemplu, o imagine) ar trebui să fie redimensionat pentru a se potrivi containerului său. Să vedem ce înseamnă asta cu un exemplu concret, nu?

Să presupunem că avem următoarea imagine verticală:

și dorim să-l afișăm în următoarea zonă:

care are o înălțime de 15em și ocupă 80% din lățimea disponibilă. În principiu, ați putea crede că tot ce trebuie să facem este să setăm o anumită width și height imaginii noastre, nu?

 .custom-size { height: 15em; width: 80%; }

Ei bine, dacă o faci, vei vedea că raportul de aspect al imaginii este stricat:

Pentru a preveni distorsionarea unei imagini atunci când se folosea lățimea și înălțimea specifice, dezvoltatorii obișnuiau să se bazeze pe (și unii încă mai fac) proprietatea de background CSS a unui div . Deci, în loc să adăugăm imaginea folosind eticheta img , am creat un container div :

 <div></div>

setați dimensiunile corecte la respectivul div și apoi adăugați imaginea reală prin CSS utilizând proprietățile background-size și background-position :

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

Și aici puteți vedea rezultatul:

Scalarea și decuparea imaginilor prin utilizarea proprietăților de background CSS pe o etichetă div este o soluție proastă, deoarece nu mai utilizați eticheta HTML corectă din punct de vedere semantic: img . În plus, etichetele img includ o mulțime de proprietăți interesante care vor avea ca rezultat site-uri web mai rapide și mai accesibile: o proprietate alt care descrie imaginea, srcset pentru a o face receptivă, loading pentru a o încărca leneș și așa mai departe.

Dacă doriți să scalați și să decupați o imagine astfel încât să se potrivească cu anumite dimensiuni, fără a distorsiona imaginea în sine, tot ce trebuie să faceți este să utilizați proprietățile CSS object-fit object-position , care se comportă ca background-size background-position do:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

Dacă aplicați regulile anterioare unei etichete img :

 <img class="custom-size" src="…/image.jpg" />

acesta este rezultatul pe care îl obțineți:

care este exact ceea ce te-a interesat, nu-i așa?

Dacă doriți să aflați mai multe despre această proprietate, iată un link cu toate informațiile necesare.

Design adaptiv cu interogări media

Interogările media sunt un mecanism care vă permite să adăugați reguli CSS pe site-ul dvs. pe baza caracteristicilor dispozitivului sau aplicației de pe care vizitatorii dvs. accesează web-ul. Sunt destul de sigur că sunteți oarecum familiarizat cu ele, deoarece interogările media sunt baza pentru construirea de site-uri web receptive, dar puteți face mult mai multe cu ele!

Interogări media clasice

Utilizarea unei interogări media într-o foaie de stil CSS este la fel de ușoară ca și adăugarea cuvântului cheie @media cu două lucruri: pe de o parte, o condiție care descrie când interogarea media este activă și, pe de altă parte, setul de reguli CSS care ar trebui să fi încărcat atunci când condiția este îndeplinită. De aceea, interogările media stau la baza construirii design-urilor responsive: pur și simplu aplicați un set de reguli sau altul în funcție de width browserului vizitatorului.

De exemplu, să presupunem că doriți să schimbați bara laterală a următorului paragraf:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Leul de pe verandă moale urât uneori, dar tolbă element în aer liber. Dar nevoia de antreprenori numită stres termic. Cuptor cu microunde rezervat, dar ușa mea este întotdeauna sau uneori autor de masă. Android și Nunc sodales interdum, tincidunt erat ac, tincidunt elit. Cu toate acestea, ultricies ac, arcu metus Sed congue. Pentru comoditate, temeți-vă de proteinele leu. Este un tellus orci, tempor id egestas nec, măcar să ia niște jucători.

astfel încât să folosească toate culorile din curcubeu în funcție de lățimea browserului. Iată cum puteți obține acest comportament prin CSS:

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

Destul de ușor, nu? Trebuie pur și simplu să aplicăm o culoare diferită de fiecare dată când lățimea browserului depășește un anumit prag. Rețineți că implementăm acest lucru folosind o abordare mai întâi mobilă, deoarece regulile „noi” sunt aplicate pe măsură ce ecranul devine mai mare. Schimbați lățimea ferestrei și veți vedea rezultatul.

Cum să implementați modul întunecat cu CSS

Modurile întunecate sunt la modă acum, atât pe mobil, cât și pe desktop. Știați că există o interogare media pentru a vedea dacă utilizatorii preferă modurile întunecate? Folosind interogarea media prefers-color-scheme , puteți vedea dacă utilizatorul preferă o schemă de culori light sau una dark . Ceea ce înseamnă că acum aveți puterea de a crea două versiuni ale site-ului dvs., astfel încât să se potrivească cu preferințele tuturor vizitatorilor dvs.

De exemplu, luați în considerare următorul fragment HTML:

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

și aceste reguli CSS:

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

În funcție de configurația dvs., veți vedea că partea „Dinamică” a fragmentului HTML anterior arată fie ca tema luminoasă, fie ca tema întunecată:

Destul de misto, nu? Și simplu!

Alte cazuri de utilizare interesante cu interogări media

Există o mulțime de interogări media pe care le puteți folosi (aveți o listă completă aici), dar aș dori să mă concentrez asupra uneia în special. Mai exact, vreau să vă explic cum să aplicați diferite stiluri în funcție de faptul dacă pagina este afișată în browser sau este pe cale să fie tipărită. Tot ce trebuie să faceți este să utilizați cuvântul cheie print sau screen la interogarea media, după cum urmează:

 @media print { … } @media screen { … }

sau creați două fișiere CSS separate, câte unul pentru fiecare caz de utilizare și includeți-le în HTML folosind proprietatea media a unei etichete de link :

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

Lucrul interesant este că puteți crea o foaie de stil care să vă transforme site-ul într-o bucată de conținut care este proiectată pentru a fi tipărită. Astfel, de exemplu, ați putea ascunde părți dinamice ale web-ului care nu au sens într-o versiune tipărită (cum ar fi meniurile sau formularele). Sau puteți chiar să vă asigurați că unele lucruri care se pierd la imprimare devin vizibile, cum ar fi, de exemplu, adresa URL țintă a unui link:

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

al carui rezultat este urmatorul:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, at pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Variabile CSS

În cele din urmă, să vorbim despre o altă caracteristică CSS uimitoare: proprietăți personalizate CSS (cunoscute și ca variabile CSS). Site-urile web complexe au cantități foarte mari de CSS și este destul de obișnuit ca aceeași valoare să fie repetată iar și iar. De exemplu, paleta dvs. de culori, chenarele, căptușelile și așa mai departe sunt folosite peste tot. Ei bine, variabilele CSS simplifică această complexitate. Și sunt extrem de utile pentru implementarea modului întunecat cu ușurință!

Variabilele CSS sunt exact ceea ce vă gândiți: o modalitate de a stoca și reutiliza o anumită valoare CSS în spatele unui nume care are sens. Este mult mai ușor de înțeles ce --main-text-color decât #333 , nu-i așa?

Declararea unei proprietăți personalizate se face folosind un nume de proprietate personalizată care începe cu o cratimă dublă ( -- ) și o valoare a proprietății care poate fi orice valoare CSS validă. Ca orice altă proprietate, aceasta este scrisă într-un set de reguli, astfel:

 element { --main-color: red; --main-padding: 2em 1em; }

Selectorul pe care îl utilizați în blocul de reguli în care ați definit variabila CSS determină domeniul acesteia. Adică, dacă definiți o variabilă într-o regulă div.banner , acea variabilă va fi disponibilă numai în acel domeniu. Cu toate acestea, cel mai comun este de a crea variabile în domeniul global folosind pseudo-clasa :root :

 :root { --main-color: red; --main-padding: 2em 1em; }

Pentru a utiliza o variabilă CSS, trebuie pur și simplu să specificați numele acesteia în cadrul funcției var :

 p { color: var(--main-color); padding: var(--main-padding); }

CSS este aici pentru a vă ajuta

Structura HTML a unei pagini web este ca fundația unei case – aveți nevoie de o bază solidă dacă doriți să construiți ceva solid. Când creați o pagină web, asigurați-vă că utilizați un arbore HTML corect și curat din punct de vedere semantic. Acest lucru va avea ca rezultat o pagină care va funcționa pe toate browserele pentru toți vizitatorii, iar aplicarea trucurilor CSS pe deasupra va fi simplă și eficientă.

Sper că ți-a plăcut postarea de azi. Dacă ai făcut-o, împărtășește-l prietenilor tăi

Imagine prezentată de William Daigneault pe Unsplash.