7 jaunas funkcijas, lai izveidotu atsaucīgu vietni

Mūsdienu CSS pārņem visu vietnes veidošanas kontroli, izmantojot nepieciešamo JavaScript. Šajā rakstā mēs uzsvērsim septiņus jaunus CSS atjauninājumus, lai vienkāršotu stila nākotni. Turklāt mēs apsveram pārlūkprogrammu atbalstu pārlūkiem Chrome, Edge un Firefox. Visbeidzot, mēs apspriedīsim jautājumus, risinājumus un gandrīz visu, kas jums nepieciešams, lai sāktu darbu tūlīt.

Ņemot vērā visus trikus un paņēmienus, šeit ir dažas izvēlētas CSS funkcijas, kas ir jūsu laika vērts. Tātad, bez jebkādas turpmākas aizķeršanās, ienirsim tieši tajā.

1. CSS apakšrežģis

Atšķirībā no CSS flexbox iespējas pārvietoties tikai vienā virzienā, abas dimensijas varat definēt režģos. Kad tie nākamajās desmitgadēs sāk kļūt spēcīgi un populāri, web dizainā ir vērojamas milzīgas izmaiņas. Ligzdotus režģus izmanto, lai zīmētu režģus režģu iekšpusē. Bet kādi ir galvenie trūkumi, kas izraisīja aicinājumu izveidot CSS apakšrežģus?

• Ligzdoti režģi pēc 2. līmeņa tiek izmantoti, lai pārpildītu saturu ārpus lielākā režģa, kas ļoti ietekmēja vietnes atsaucību.
instagram viewer
• Ligzdoti režģi darbojās kā neatkarīgi elementi lielāka režģa konteinerā. Par izmaiņām vispār nebija atsauces uz vecāku konteineru.

Bez apakšrežģiem:

Pēc apakšrežģiem:

Apakšrežģus var ieviest šādi:

.konteiners {
platums: 700 pikseļi;
augstums: 500 pikseļi;
fons: rgb (214, 255, 139);
displejs: režģis;
režģis-veidne-kolonnas: 1fr 1fr 1fr 1fr;
režģis-veidne-rindas: 1fr 1fr 1fr 1fr;
}
.container div {
fons: rgb (72, 170, 137);
režģa rinda: 2/3;
režģa kolonna: 2/5;
displejs: režģis;
grid-template-kolonnas: apakštīkla;
grid-template-rows: apakštīkla;
}

Jūs varat ievietot vairākus apakšrežģus. Ievērojams izņēmums ir tas, ka apakšrežģi manto vecāku tīkla atstarpes īpašumu. Tā rezultātā katrā vecāku tīklā tiks izveidoti visi apakšrežģi ar vienādām atstarpju īpašībām.

Vislabāk apakštīkliem ir tas, ka tie ir ļoti reaģējoši, pielāgojami un pielāgojami.

Pārlūkprogrammu saderība: Firefox

2. malu attiecība Īpašums

Visas korekcijas un aprēķināšanas problēmas var novērst, mainot konkrētā konteinera malu attiecību. Ja vēlaties ievietot videoklipu, viss, kas jums jādara, ir salabot proporcijas attiecībā pret mainīgo ekrāna izmēru. Bet, strādājot ar divdimensiju vairākiem režģiem, pastāv pārpildes un noklusējuma skata iespējas.

To var salabot, atbalstot proporcijas proporcijas ar platumu. Tas kļūst ērts atsaucīgiem attēliem, jo ​​jūs varat noteikt augstumu vai platumu.

Lūk, kā jūs varat ieviest proporcijas proporcijas:

.konteiners {
platums: 700 pikseļi;
malu attiecība: 16/9;
fons: rgb (72, 170, 137);
}

Varat arī ievadīt proporcijas: automātisko, nevis noteikt attiecību. Noklusējuma automātiskās vērtības mīnuss ir tas, ka pārlūkprogramma izvēlēsies attēla sākotnējo izmēru. Neapšaubāmi, tas kavē vietnes atsaucību.

Pārlūkprogrammu saderība: Chrome, Edge, Firefox (daļēja)

3. Flexbox atstarpe

Režģa atstarpe ir diezgan populāra, lai izveidotu vienādu vietu starp katru režģi. Bet, lai apstrādātu atstarpi starp visiem elastīgajiem priekšmetiem, jums vajadzēja izmantot negatīvās robežas, pseidoklases selektorus un sarežģītus atlasītājus. Tādējādi Flexbox plaisa rada mazākas koda rindas ar lielāku mērogojamību.

Lūk, kā jūs varat ieviest flexbox plaisu:

.konteiners {
platums: 700 pikseļi;
augstums: 500 pikseļi;
displejs: elastīgs;
align-items: centrs;
attaisnot-saturs: centrs;
atstarpe: 1em;
}

Izeja:

Pārlūkprogrammu saderība: visas galvenās pārlūkprogrammas, tostarp Chrome, Edge un Firefox.

Ritināšana palīdz dalīties vairāk informācijas par vienu vietni, neapgrūtinot tīmekļa kopiju. Ritināšanas galvenais trūkums ir tas, ka tā var apstāties uz pusi no para vai attēla. Dažreiz pāršķirotā satura kontrole tiek atstāta pusceļā. JavaScript tiek pārdomāti izmantots, lai izvairītos no ritināšanas pielāgošanas. Bet tas nebija pilnīgi apmierinošs rezultāts, līdz nāca CSS Scroll Snap.

Izmantojot Scroll Snap, varat noteikt konkrētas robežas, lai labotu konkrētā konteinera izkārtojumu un redzamību. Piemēram, lieliski darbojas karuseļu un noteiktu vietņu sadaļu izveidošana. Ņemiet vērā, ka jums nav nepieciešama JS nekādai pielāgošanai.

Lūk, kā jūs varat ieviest ritināšanas snapu:

.konteiners {
platums: 100%;
augstums: 100%;
displejs: elastīgs;
pārpilde-x: ritiniet;
scroll-snap-type: x obligāts;
}
sadaļa {
elastība: nav;
displejs: elastīgs;
align-items: centrs;
attaisnot-saturs: centrs;
fonta lielums: 15em;
fontu saime: Arial, Helvetica, sans-serif;
scroll-snap-align: end;
platums: 100%;
augstums: 100%;
}

Izeja:

CSS ritināšanas snapam ir vecāku un bērnu īpašums. Sākotnējais vai konteinera rekvizīts izlemj ritināšanas virzienu (x vai y) un ritināšanas momenta darbību. Piemēram, jūs varat iestatīt scroll-snap-type: x obligātu. Tas piešķirs lietotājam kontroli, lai izlemtu ritināšanas punktu, neņemot vērā ritināšanas pozīciju.

No otras puses, scroll-snap-type: y tuvums darbojas tikai tad, ja vietnes apmeklētājs atrodas tuvāk ritināšanas punktam.

Bērna rekvizīts ir ritināms-pielīdzināms, lai izlīdzinātu elementus CSS ritināšanas laikā. Tas ievada sākuma, beigu un centra vērtības, lai attiecīgi izlīdzinātu elementus.

5. Funkciju vaicājumi

Funkciju vaicājumi tiek izmantoti, lai risinātu graciozu degradāciju. Piemēram, mūsdienās CSS tīkli ir diezgan populāri. Bet ir vērts pieminēt, ka vecākas pārlūkprogrammas to nevar atveidot.

Šeit funkciju vaicājumi pārbauda, ​​vai konkrētais pārlūks atbalsta noteiktu īpašumu vai nē sniedz atbalsta sistēmu, kas mudina atsaukties uz CSS īpašumu tikai tad, ja tas tiek atbalstīts tajā pārlūku. Pretējā gadījumā tiek ņemta vērā noklusējuma vērtība. Šajā gadījumā režģu vietā jūs varat ievietot blokus jebkuram paredzamam atkāpes gadījumam.

Funkciju vaicājumus varat ieviest šādi:

@supports (satura redzamība: automātiska) {
ķermenis {
fons: zilganzaļa;
platums: 100%;
augstums: 100%;
}
}

Tādēļ tikai tām pārlūkprogrammām, kas padara satura redzamības īpašības, būs zilganzaļa fona krāsa; pretējā gadījumā tiktu ņemta vērā noklusējuma vērtība. Ņemiet vērā, ka @ ir līdzīgs multivides vaicājumu @ media vidē, kur jums vajadzēja iestatīt maksimālo platumu vai min platumu, lai veiktu improvizētus pielāgojumus. Tas vienkāršo iespēju atcerēties funkciju vaicājumus @supports.

Lasīt vairāk: Kā izmantot multivides vaicājumus HTML un CSS

Pārlūkprogrammu saderība: visas galvenās pārlūkprogrammas, tostarp Chrome, Edge un Firefox.

6. content-visibility Property

Ātra renderēšana darbojas kā lietotāju interaktīvas vietnes pamats. Pieaugot mobilo ierīču popularitātei, vietnes renderēšanas veiktspēja darbojas kā sašaurinājums, lai iegūtu pievilcīgu vietni.

Šeit izšķiroša loma ir satura redzamības īpašumam. Tā kā pēc noklusējuma pārlūkprogrammas visus vietnes elementus atveido vienlaikus. Tas samazina ielādes laiku un kopējo vietnes veiktspēju, īpaši, ja jūsu vietnē ir daudz smagu animāciju. No otras puses, satura redzamības rekvizīts atveido tikai skata elementus un parāda citus elementus, ritinot lapu.

#main {
satura redzamība: automātiska;
/ * satur iekšējo izmēru: 0 500 pikseļi; */
}

Īpašumā Satura redzamība tiek ievadītas trīs vērtības. satura redzamība: redzams nerāda nekādu efektu, savukārt saturs redzamība: slēpts ir līdzīgs attēlam: neviens, kur elements izlaiž nepieejamo saturu. Satura redzamība: automātiski izlaiž neatbilstošo saturu, taču tas ir pieejams kā aģenta lapa lietotāja aģenta funkcijām.

Mērīsim satura redzamības spēku. Lūk, rezultāts:

7. Pāreja, pārveidošana un animācija

CSS mums ir divi veidi, kā izmantot animāciju. Pāreju izmanto, lai vienmērīgi mainītu elementu vizuālās īpašības. No otras puses, bez pārejas transformācija pēkšņi manipulētu no viena stāvokļa uz otru.

Animācijas tiek izmantotas kopā ar @keyframes, kas animācijas ilguma laikā vairākos punktos iestata stilus. Interesanti ir tas @ keyframes nosaka, kad notiks izmaiņas, pārveidošana un animācija pārņem kontroli pār izmaiņām, un pāreja rūpējas par to, kā izmaiņas notiks (piemēram, kursora efekti).

.bērns {
fons: zilganzaļa;
augstums: 150 pikseļi;
platums: 150 pikseļi;
krāsa: balta;
pāreja: pārveidot 0,2s vieglumu-ieeju;
animācija: myAnimation 2s bezgalīgs;
}
.child: lidiniet {
pārveidot: mērogs (2, 2) pagriezt (45deg);
}
@keyframes myAnimation {
0% {
}
50% {
pārveidot: translateX (400 pikseļi)
}
100% {
pārveidot: translateX (0px)
}
}

Pārlūkprogrammu saderība: visas galvenās pārlūkprogrammas, tostarp Chrome, Edge un Firefox.

Iesaiņošana

Kaskādes stila lapas marķējums nepārtraukti attīstās, izmantojot labākas funkcijas. Līdz šim jūs uzzinājāt par šīm septiņām lieliskajām funkcijām, kas ietver CSS apakšrežģi, malu proporcijas īpašību, flexbox nepilnības, ritināšanas snap, funkciju vaicājumi, satura redzamības īpašums, pāreja, pārveidošana un animācija.

Dienas beigās jums jāpārliecinās, kuras funkcijas vienkāršo jūsu vietnes veidošanu.

7 jaunas funkcijas, kuras jāpievērš uzmanībai Bootstrap 5

Ja izstrādājat vietnes un lietotnes, izmantojot Bootstrap CSS ietvaru, lūk, kas jauns Bootstrap 5.

Lasiet Tālāk

Par autoru