7 caracteristici noi pentru a crea un site web receptiv

CSS modern preia întregul control al stilării site-urilor web cu ajutorul JavaScript-ului necesar. În acest articol, vom evidenția șapte noi actualizări CSS pentru a simplifica viitorul stilului. În plus, luăm în considerare suportul browserului Chrome, Edge și Firefox. În cele din urmă, vom discuta problemele, soluțiile și cam tot ceea ce veți avea nevoie pentru a începe imediat.

Având în vedere toate trucurile și tehnicile, iată câteva funcții CSS selectate manual, care merită timpul tău. Deci, fără alte îndemnuri, să ne aruncăm direct în el.

1. Subgrilă CSS

Spre deosebire de capacitatea CSS flexbox de a se deplasa doar într-o singură direcție, puteți defini ambele dimensiuni în grile. Pe măsură ce încep să devină puternici și populari în deceniile următoare, în design-urile web sunt observate schimbări extraordinare. Grilele imbricate sunt folosite pentru a trage grile în interiorul grilelor. Dar, care sunt dezavantajele majore care au generat un apel pentru subgrile CSS?

• Grilele imbricate după nivelul 2 au folosit pentru a revărsa conținutul în afara grilei mai mari, care a afectat puternic capacitatea de reacție a unui site web.
  instagram viewer
• Grilele imbricate au acționat ca elemente independente în interiorul containerului de grilă mai mare. Nu a existat deloc referire la containerul părinte pentru nicio modificare.

Fără subgrile:

După subgrile:

Iată cum puteți implementa subgrile:

.container {
lățime: 700px;
înălțime: 500 px;
fundal: rgb (214, 255, 139);
afișaj: grilă;
grilă-șablon-coloane: 1fr 1fr 1fr 1fr;
grilă-șablon-rânduri: 1fr 1fr 1fr 1fr;
}
.container div {
fundal: rgb (72, 170, 137);
grilă-rând: 2/3;
coloană grilă: 2/5;
afișaj: grilă;
grilă-șablon-coloane: subgrilă;
grilă-șablon-rânduri: subgrilă;
}

Puteți plasa mai multe subgrile. Excepția notabilă este că subgrilele moștenesc proprietatea părinte a grilei. Va avea ca rezultat crearea tuturor subgrilelor cu aceleași proprietăți de spațiu în fiecare grilă părinte.

Cel mai bun lucru despre subgrile este că sunt foarte receptive, reglabile și scalabile.

Compatibilitate browser: Firefox

2. Proprietatea raportului de aspect

Puteți elimina toate problemele de ajustare și de calcul prin schimbarea raportului de aspect al unui container dat. Dacă doriți să inserați un videoclip, tot ce trebuie să faceți este să stabiliți un raport de aspect în raport cu dimensiunea diferită a ecranului. Dar, în timp ce lucrați cu grile multiple bidimensionale, există șanse de revărsare și vizualizare implicită.

O puteți remedia susținând proprietatea raportului de aspect cu atributul de lățime. Devine la îndemână pentru imaginile receptive, deoarece puteți defini o înălțime sau o lățime.

Iată cum puteți implementa proprietatea raportului de aspect:

.container {
lățime: 700px;
raport de aspect: 16/9;
fundal: rgb (72, 170, 137);
}

De asemenea, puteți introduce raportul de aspect: auto în loc să specificați raportul. Dezavantajul valorii automate implicite este că browserul va alege dimensiunea originală a imaginii. Fără îndoială, aceasta împiedică receptivitatea site-ului.

Compatibilitate browser: Chrome, Edge, Firefox (parțial)

3. Flexbox Gap

Grid-gap este destul de popular pentru crearea de spațiu egal între fiecare grilă. Dar, trebuia să aplicați marje negative, selectoare de pseudo-clasă și selectoare complexe pentru a gestiona spațiul dintre fiecare element flexibil. Astfel, decalajul Flexbox are ca rezultat linii mai mici de cod cu scalabilitate mai mare.

Iată cum puteți implementa diferența flexbox:

.container {
lățime: 700px;
înălțime: 500 px;
display: flex;
align-items: centru;
justify-content: centru;
decalaj: 1em;
}

Ieșire:

Compatibilitate browser: toate browserele principale, inclusiv Chrome, Edge și Firefox.

Derularea ajută la partajarea mai multor informații despre un singur site web, fără a aglomera copia web. Dar, dezavantajul major al defilării este că se poate opri la jumătate din para sau imagine. Uneori, controlul conținutului paginat este lăsat la jumătatea drumului. JavaScript este folosit cu atenție pentru a evita personalizarea scroll-ului. Dar nu a fost un rezultat complet satisfăcător până când a apărut CSS Scroll Snap.

Folosind Scroll Snap, puteți defini limite specifice pentru a remedia aspectul și vizibilitatea unui container dat. De exemplu, funcționează minunat pentru a crea caruseluri și secțiuni de site web definite. Rețineți că nu veți avea nevoie de JS pentru nicio ajustare.

Iată cum puteți implementa snap-ul de derulare:

.container {
lățime: 100%;
înălțime: 100%;
display: flex;
overflow-x: scroll;
scroll-snap-type: x obligatoriu;
}
secțiune {
flex: none;
display: flex;
align-items: centru;
justify-content: centru;
dimensiunea fontului: 15em;
font-family: Arial, Helvetica, sans-serif;
scroll-snap-align: end;
lățime: 100%;
înălțime: 100%;
}

Ieșire:

Funcția de defilare CSS are proprietatea părinte și copil. Proprietatea părinte sau container decide direcția derulării (x sau y) și comportamentul clipului de derulare. De exemplu, puteți seta scroll-snap-type: x obligatoriu. Acesta va acorda utilizatorului controlul pentru a decide punctul de derulare fără a lua în considerare poziția de derulare.

Pe de altă parte, scroll-snap-type: y funcționează de proximitate numai atunci când vizitatorul site-ului este mai aproape de punctul de defilare.

Proprietatea copil este scroll-snap-align pentru a alinia elementele în timpul CSS snap scroll. Intră valori de început, sfârșit și centru pentru a alinia elementele în consecință.

5. Interogări cu funcții

Interogările cu funcții sunt utilizate pentru a face față degradării grațioase. De exemplu, grilele CSS sunt destul de populare în zilele noastre. Dar, merită menționat faptul că browserele mai vechi nu o pot reda.

Aici, interogările de caracteristici verifică dacă acel browser acceptă sau nu o anumită proprietate și oferă un sistem de asistență care încurajează referirea la o proprietate CSS numai dacă este susținută pe aceasta browser. În caz contrar, se ia în considerare valoarea implicită. În acest caz, puteți plasa blocuri în locul grilelor pentru orice rezervă previzionată.

Iată cum puteți implementa interogări de caracteristici:

@supports (vizibilitate conținut: automată) {
corp{
fundal: teal;
lățime: 100%;
înălțime: 100%;
}
}

Prin urmare, numai acele browsere care redau proprietăți de vizibilitate a conținutului vor avea culoare de fundal teal; în caz contrar, valoarea implicită ar fi luată în considerare. Rețineți că @ este similar cu @media de interogări media, unde trebuia să setați o lățime maximă sau o lățime minimă pentru a face ajustări improvizate. Simplifică amintirea interogărilor de caracteristici @supports.

Citeste mai mult: Cum se utilizează interogări media în HTML și CSS

Compatibilitate browser: toate browserele principale, inclusiv Chrome, Edge și Firefox.

6. Proprietate de vizibilitate a conținutului

Redarea rapidă funcționează ca o coloană vertebrală pentru un site web interactiv cu utilizatorul. Odată cu creșterea popularității dispozitivelor mobile, performanța de redare a unui site web acționează ca un blocaj pentru obținerea unui site web atrăgător.

Aici, proprietatea de vizibilitate a conținutului joacă un rol crucial. Deoarece, în mod implicit, browserele redau toate elementele site-ului web simultan. Scade timpul de încărcare și performanța generală a site-ului, mai ales dacă site-ul dvs. web are multe animații grele. Pe de altă parte, proprietatea de vizibilitate a conținutului redă doar elementele din fereastra de vizualizare și afișează alte elemente pe măsură ce parcurgeți pagina.

#main {
vizibilitate de conținut: auto;
/ * contain-intrinsec-size: 0 500px; */
}

Proprietatea de vizibilitate a conținutului introduce trei valori. vizibilitatea conținutului: vizibil nu arată niciun efect în timp ce vizibilitatea conținutului: ascuns este similar cu afișarea: niciunul în cazul în care elementul omite conținutul inaccesibil. Vizibilitatea conținutului: omite automat conținutul irelevant, dar este disponibil ca pagină normală pentru funcțiile agentului utilizator.

Să măsurăm puterea vizibilității conținutului. Iată rezultatul:

7. Tranziție, transformare și animație

În CSS, avem două moduri de a aplica animația. Tranziția este utilizată pentru a face modificări ușoare ale proprietăților vizuale ale elementelor. Pe de altă parte, fără tranziție, transformarea ar manipula brusc de la o stare la alta.

Animațiile sunt folosite cu @keyframes care stabilesc stiluri în mai multe puncte pe durata animației. Interesant este că @keyframes definesc când se va întâmpla schimbarea, transformarea și animația preiau controlul asupra schimbării, iar tranziția se ocupă de modul în care se va întâmpla schimbarea (de exemplu, efectele de zbor).

.child {
fundal: teal;
înălțime: 150px;
lățime: 150px;
culoare albă;
tranziție: transformați ușurința de intrare 0,2s;
animație: myAnimation 2s infinit;
}
.child: hover {
transformare: scară (2, 2) rotire (45deg);
}
@keyframes myAnimation {
0% {
}
50% {
transform: translateX (400px)
}
100% {
transform: translateX (0px)
}
}

Compatibilitate browser: toate browserele principale, inclusiv Chrome, Edge și Firefox.

Încheierea

Marcarea în cascadă a foii de stil evoluează continuu cu funcții mai bune. Până acum, ați aflat despre aceste șapte caracteristici minunate care includ subgrila CSS, proprietatea raportului de aspect, goluri flexbox, snap de derulare, interogări de caracteristici, proprietate de vizibilitate a conținutului, tranziție, transformare și animaţie.

La sfârșitul zilei, trebuie să vă asigurați care caracteristici simplifică stilul site-ului dvs. web.

7 Funcții noi de căutat în Bootstrap 5

Dacă dezvoltați site-uri web și aplicații utilizând cadrul Bootstrap CSS, iată ce este nou în Bootstrap 5.

Citiți în continuare

Despre autor