7 novih značajki za izradu responzivnog web mjesta

Suvremeni CSS preuzima cijelu kontrolu nad oblikovanjem web stranica uz pomoć potrebnog JavaScript-a. U ovom ćemo članku istaknuti sedam novih CSS ažuriranja kako bismo pojednostavili budućnost stila. Uz to, razmatramo podršku za preglednike Chrome, Edge i Firefox. Na kraju ćemo razgovarati o problemima, rješenjima i gotovo svemu onome što će vam trebati da odmah započnete.

Uzimajući u obzir sve trikove i tehnike, evo nekoliko ručno odabranih CSS značajki koje vrijede vašeg vremena. Dakle, bez daljnjeg zalaženja, zaronimo odmah u to.

1. CSS podmreža

Za razliku od sposobnosti CSS flexboxa da se kreće samo u jednom smjeru, obje dimenzije možete definirati u mrežama. Kako u narednim desetljećima počinju postajati moćni i popularni, u web dizajnu svjedoče ogromne promjene. Ugniježđene rešetke koriste se za crtanje mreža unutar mreža. Ali, koji su glavni nedostaci koji su pokrenuli poziv za CSS podmreže?

• Ugniježđene mreže nakon razine 2 koristile su se za prelijevanje sadržaja izvan veće mreže koja je jako utjecala na odziv web mjesta.
instagram viewer
• Ugniježđene mreže djelovale su kao neovisni elementi unutar većeg spremnika mreže. Nije bilo referenci na nadređeni spremnik za bilo kakvu promjenu.

Bez podreža:

Nakon podreža:

Evo kako možete implementirati podmreže:

.container {
širina: 700px;
visina: 500px;
pozadina: rgb (214, 255, 139);
prikaz: mreža;
rešetka-predložak-stupci: 1fr 1fr 1fr 1fr;
grid-template-redovi: 1fr 1fr 1fr 1fr;
}
.container div {
pozadina: rgb (72, 170, 137);
red rešetke: 2/3;
rešetka-stupac: 2/5;
prikaz: mreža;
grid-template-columns: podmreža;
grid-template-redovi: podmreža;
}

Možete postaviti više podmreža. Iznimna je iznimka da podmreže nasljeđuju nadređeno svojstvo mreže-jaz. To će rezultirati stvaranjem svih podmreža s istim svojstvima praznine unutar svake roditeljske mreže.

Najbolja stvar kod podmreža je što su vrlo odzivne, prilagodljive i skalabilne.

Kompatibilnost preglednika: Firefox

2. omjer proporcija Svojstvo

Sve probleme s podešavanjem i izračunavanjem možete eliminirati promjenom omjera određenog spremnika. Ako želite umetnuti videozapis, sve što trebate jest popraviti omjer slike u odnosu na različitu veličinu zaslona. No, dok radite s dvodimenzionalnim višestrukim mrežama, postoje šanse za preljeve i zadani prikaz.

Možete ga popraviti podržavanjem svojstva omjera s atributom širine. To postaje zgodno za responzivne slike jer možete definirati visinu ili širinu.

Evo kako možete implementirati svojstvo omjera:

.container {
širina: 700px;
omjer slike: 16/9;
pozadina: rgb (72, 170, 137);
}

Također možete unijeti omjer slike: automatski, umjesto da navedete omjer. Loša strana zadane automatske vrijednosti je ta što će preglednik odabrati izvornu dimenziju slike. Nesumnjivo, to koči odziv web stranice.

Kompatibilnost preglednika: Chrome, Edge, Firefox (djelomično)

3. Flexbox praznina

Grid-gap je vrlo popularan za stvaranje jednakog prostora između svake mreže. Ali, trebali ste primijeniti negativne margine, selektore pseudo-klase i složene selektore za obradu prostora između svake flex-stavke. Dakle, jaz Flexbox-a rezultira manjim redovima koda s većom skalabilnošću.

Evo kako možete primijeniti flexbox jaz:

.container {
širina: 700px;
visina: 500px;
zaslon: flex;
align-items: sredina;
justify-content: centar;
razmak: 1em;
}

Izlaz:

Kompatibilnost preglednika: Svi glavni preglednici, uključujući Chrome, Edge i Firefox.

Pomicanje pomaže u dijeljenju više informacija o jednom web mjestu bez nereda na web kopiji. Ali, glavni nedostatak pomicanja je taj što se može zaustaviti na polovici paragrafa ili slike. Ponekad se kontrola paginiranog sadržaja ostavlja na pola puta. JavaScript se zamišljeno koristi kako bi se izbjeglo prilagođavanje pomicanja. Ali, to nije bio potpuno zadovoljavajući rezultat dok nije došao CSS Scroll Snap.

Pomoću pomicanja pomicanja možete definirati određene granice kako biste popravili raspored i vidljivost određenog spremnika. Na primjer, izvrsno djeluje na stvaranju vrtuljaka i određenih odjeljaka web stranica. Imajte na umu da vam neće biti potreban JS za bilo kakvu prilagodbu.

Evo kako možete implementirati pomicanje pomicanja:

.container {
širina: 100%;
visina: 100%;
zaslon: flex;
overflow-x: pomicanje;
scroll-snap-type: x obavezno;
}
odjeljak {
fleks: nijedan;
zaslon: flex;
align-items: sredina;
justify-content: centar;
veličina slova: 15em;
obitelj fontova: Arial, Helvetica, sans-serif;
scroll-snap-align: kraj;
širina: 100%;
visina: 100%;
}

Izlaz:

CSS pomicanje pomicanja ima svojstvo roditelja i djeteta. Svojstvo roditelja ili spremnika odlučuje smjer pomicanja (x ili y) i ponašanje pucanja pomicanja. Na primjer, možete postaviti scroll-snap-type: x obavezna. Korisniku će dodijeliti kontrolu nad odlučivanjem točke pomicanja bez razmatranja položaja pomicanja.

S druge strane, blizina pomicanja tipa: y blizina funkcionira samo kada je posjetitelj web mjesta bliži točki pomicanja.

Podređeno svojstvo je scroll-snap-align da poravna elemente tijekom CSS snap pomicanja. Unosi vrijednosti početka, kraja i središta kako bi se elementi poravnali u skladu s tim.

5. Upiti o značajkama

Upiti za značajke koriste se za rješavanje graciozne degradacije. Na primjer, CSS mreže su danas prilično popularne. Ali, vrijedno je spomenuti da ga stariji preglednici ne mogu generirati.

Ovdje upiti za značajke provjeravaju podržava li određeni preglednik određeno svojstvo ili ne i daje sustav podrške koji potiče pozivanje na CSS svojstvo samo ako je na tome podržano preglednik. Inače se uzima u obzir zadana vrijednost. U tom slučaju možete postaviti blokove umjesto mreža za bilo koji predviđeni zamjenski način.

Evo kako možete implementirati upite o značajkama:

@supports (content-visibility: auto) {
tijelo{
pozadina: teal;
širina: 100%;
visina: 100%;
}
}

Prema tome, samo oni preglednici koji prikazuju svojstva vidljivosti sadržaja imat će boju pozadine teal; u suprotnom, uzela bi se u obzir zadana vrijednost. Imajte na umu da je @ sličan @media medijskih upita, gdje ste trebali postaviti max-width ili min-width za improvizirane prilagodbe. Pojednostavljuje pamćenje značajki upita @supports.

Čitaj više: Kako koristiti medijske upite u HTML-u i CSS-u

Kompatibilnost preglednika: Svi glavni preglednici, uključujući Chrome, Edge i Firefox.

6. svojstvo vidljivosti sadržaja

Brzo prikazivanje djeluje kao okosnica za interaktivno web mjesto korisnika. S porastom popularnosti mobilnih uređaja, izvedba prikazivanja web mjesta djeluje kao usko grlo za dobivanje privlačne web stranice.

Ovdje svojstvo vidljivosti sadržaja igra presudnu ulogu. Jer, prema zadanim postavkama, preglednici generiraju sve elemente web stranice odjednom. Smanjuje vrijeme učitavanja i ukupne performanse web mjesta, pogotovo ako vaše web mjesto ima mnogo teških animacija. S druge strane, svojstvo vidljivosti sadržaja generira samo elemente okvira za prikaz i prikazuje ostale elemente dok se krećete po stranici.

#main {
vidljivost sadržaja: automatski;
/ * sadrže-intrinsic-size: 0 500px; */
}

Svojstvo vidljivosti sadržaja unosi tri vrijednosti. content-visibility: visible ne pokazuje učinak, dok content-visibility: hidden sličan je displayu: none gdje element preskače nepristupačan sadržaj. Vidljivost sadržaja: automatski preskače nevažni sadržaj, ali dostupan je kao uobičajena stranica značajkama korisničkog agenta.

Izmjerimo snagu vidljivosti sadržaja. Evo rezultata:

7. Prijelaz, transformacija i animacija

U CSS-u imamo dva načina za primjenu animacije. Prijelaz se koristi za glatke promjene vizualnih svojstava elemenata. S druge strane, bez tranzicije, transformacija bi naglo manipulirala iz jednog stanja u drugo.

Animacije se koriste s @keyframes koji postavljaju stilove u nekoliko točaka tijekom trajanja animacije. Zanimljivost je ta @keyframes definiraju kada će se promjena dogoditi, transformiranje i animacija preuzima kontrolu nad promjenom, a prijelaz brine o tome kako će se promjena dogoditi (npr. efekti lebdenja).

.dijete {
pozadina: teal;
visina: 150px;
širina: 150px;
boja: bijela;
prijelaz: pretvorba 0,2 s jednostavnost ulaska-van;
animacija: myAnimation 2s beskonačno;
}
.dijete: hover {
transformirati: skala (2, 2) rotirati (45deg);
}
@keyframes myAnimation {
0% {
}
50% {
pretvori: translateX (400px)
}
100% {
pretvori: translateX (0px)
}
}

Kompatibilnost preglednika: Svi glavni preglednici, uključujući Chrome, Edge i Firefox.

Završavati

Kaskadno označavanje stilskog lista kontinuirano se razvija s boljim značajkama. Do sada ste saznali za ovih sedam sjajnih značajki koje uključuju CSS podmrežu, svojstvo omjera, flexbox praznine, pomicanje pomicanja, upiti značajki, svojstvo vidljivosti sadržaja, prijelaz, transformacija i animacija.

Na kraju dana morate osigurati koje značajke pojednostavljuju stil vašeg web mjesta.

7 novih značajki na koje treba obratiti pažnju u Bootstrapu 5

Ako razvijate web stranice i aplikacije pomoću Bootstrap CSS okvira, evo što je novo u Bootstrapu 5.

Pročitajte Dalje

O autoru