7 uut funktsiooni tundliku veebisaidi loomiseks

Kaasaegne CSS võtab vajaliku JavaScripti abil kogu kontrolli veebisaidi kujundamise üle. Selles artiklis toome stiilide tuleviku lihtsustamiseks välja seitse uut CSS-i värskendust. Lisaks kaalume Chrome'i, Edge'i ja Firefoxi brauserituge. Lõpuks arutame probleeme, lahendusi ja peaaegu kõike, mida vajate kohe alustamiseks.

Kõiki trikke ja tehnikaid arvestades on siin mõned valitud CSS-i funktsioonid, mis on teie aega väärt. Niisiis, pikemalt mõtlemata, sukeldume otse sellesse.

1. CSS alamvõre

Erinevalt CSS flexboxi võimalusest liikuda ainult ühes suunas, saate mõlemad mõõtmed võrkudes määratleda. Kui need hakkavad lähikümnenditel muutuma võimsaks ja populaarseks, on veebidisainis näha tohutuid muutusi. Pesastatud ruudustikke kasutatakse ruudustike ruudustike sisse joonistamiseks. Kuid millised on peamised puudused, mis kutsusid üles kutsuma üles CSS-i alamvõrke?

• Pesastatud võrgud pärast 2. taset kasutasid sisu ülevoolu väljaspool suuremat võrku, mis mõjutas tugevalt veebisaidi reageerimisvõimet.
instagram viewer
• Pesastatud võrgud toimisid suurema võrgumahuti sees iseseisvate elementidena. Ühtegi muudatust ei viidatud üldse vanemkonteinerile.

Ilma alusvõrkudeta:

Pärast alamvõreid:

Alamruudustikke saate rakendada järgmiselt.

.konteiner {
laius: 700px;
kõrgus: 500px;
taust: rgb (214, 255, 139);
kuva: ruudustik;
ruudustiku-malli-veerud: 1fr 1fr 1fr 1fr;
ruudustiku-malli-read: 1fr 1fr 1fr 1fr;
}
.container div {
taust: rgb (72, 170, 137);
ruudustik: 2/3;
võre-veerg: 2/5;
kuva: ruudustik;
grid-template-columns: alamruudustik;
ruudustik-mall-read: alamruudustik;
}

Võite paigutada mitu alamruudustikku. Märkimisväärne erand on see, et alamvõred pärivad vanema ruudustiku-atribuudi. Selle tulemusel luuakse kõik vanemvõrgus kõik samade vaheomadustega alamvõred.

Parim asi alamruudustike puhul on see, et need on väga reageerivad, reguleeritavad ja skaleeritavad.

Brauseri ühilduvus: Firefox

2. kuvasuhte omadus

Saate kõrvaldada kõik kohandamis- ja arvutusprobleemid, muutes antud konteineri kuvasuhet. Kui soovite video sisestada, on vaja vaid fikseerida kuvasuhe erineva ekraani suuruse suhtes. Kuid kahemõõtmelise mitme võrguga töötades on ülevoolu ja vaikevaate võimalused.

Selle saate parandada, toetades atribuudiga laius kuvasuhte omadust. See muutub käepäraste piltide jaoks käepäraseks, kuna saate määrata kõrguse või laiuse.

Kuvasuhte atribuudi rakendamiseks toimige järgmiselt.

.konteiner {
laius: 700px;
kuvasuhe: 16/9;
taust: rgb (72, 170, 137);
}

Suhte määramise asemel võite sisestada ka kuvasuhte: auto. Automaatse vaikeväärtuse negatiivne külg on see, et brauser valib pildi algse mõõtme. Kahtlemata pärsib see saidi reageerimisvõimet.

Brauseri ühilduvus: Chrome, Edge, Firefox (osaline)

3. Flexboxi vahe

Võrgu vahe on üsna populaarne võrdse ruumi loomiseks iga võrgu vahel. Kuid te pidite rakendama negatiivseid veeriseid, pseudoklassi valijaid ja keerulisi valijaid, et hallata iga painduvate elementide vahelist ruumi. Seega annab Flexboxi vahe väiksemad koodiread suurema skaleeritavusega.

Flexboxi lõhe rakendamiseks toimige järgmiselt.

.konteiner {
laius: 700px;
kõrgus: 500px;
kuva: painduv;
joondavad elemendid: keskel;
õigusta-sisu: keskus;
vahe: 1em;
}

Väljund:

Brauserite ühilduvus: kõik suuremad brauserid, sealhulgas Chrome, Edge ja Firefox.

Kerimine aitab jagada rohkem teavet ühe veebisaidi kohta, ilma et see segaks veebikoopiat. Kuid kerimise peamine negatiivne külg on see, et see võib peatuda poole para või pildi juures. Mõnikord jäetakse lehitsetud sisu juhtimine keskele. Kerimist kohandamise vältimiseks kasutatakse läbimõeldult JavaScripti. Kuid see polnud täiesti rahuldav tulemus enne, kui CSS Scroll Snap tuli.

Scroll Snapi abil saate määratleda konkreetsed piirid antud konteineri paigutuse ja nähtavuse parandamiseks. Näiteks töötab suurepäraselt karussellide ja kindlate veebisaitide jaotiste loomine. Pange tähele, et te ei vaja JS-i korrigeerimiseks.

Kerimisnupu rakendamine toimub järgmiselt.

.konteiner {
laius: 100%;
kõrgus: 100%;
kuva: painduv;
overflow-x: kerige;
scroll-snap-type: x kohustuslik;
}
jaotis {
painduma: puudub;
kuva: painduv;
joondavad elemendid: keskel;
õigusta-sisu: keskus;
fondi suurus: 15em;
font-perekond: Arial, Helvetica, sans-serif;
kerimine-klõpsatus-joondamine: lõpp;
laius: 100%;
kõrgus: 100%;
}

Väljund:

CSS-i kerimisnupul on vanema ja lapse vara. Vanemate või konteinerite omadus otsustab kerimise suuna (x või y) ja kerimise käigu käitumise. Näiteks võite määrata scroll-snap-type: x kohustuslikuks. See annab kasutajale juhtimise võimaluse kerimispunkti otsustamiseks ilma kerimisasendit arvestamata.

Teisalt toimib scroll-snap-type: y lähedus ainult siis, kui veebisaidi külastaja on kerimispunktile lähemal.

Lapse atribuut on CSS-i kerimise ajal elementide joondamiseks kerimine-klõpsamine-joondamine. See sisestab algus-, lõpu- ja keskväärtused, et elemente vastavalt sellele joondada.

5. Funktsioonipäringud

Funktsioonipäringuid kasutatakse graatsilise degradeerumise lahendamiseks. Näiteks on CSS-võrgud tänapäeval üsna populaarsed. Kuid tasub mainida, et vanemad brauserid ei saa seda renderdada.

Siin kontrollivad funktsioonipäringud, kas see konkreetne brauser toetab konkreetset omadust või mitte annab tugisüsteemi, mis julgustab CSS-i atribuudile viitama ainult siis, kui see seda toetab brauser. Vastasel juhul arvestatakse vaikeväärtust. Sellisel juhul võite ennustatud varuvariantide jaoks võrkude asemel paigutada plokid.

Funktsioonipäringute rakendamiseks toimige järgmiselt.

@supports (sisu-nähtavus: automaatne) {
keha {
taust: sinakasroheline;
laius: 100%;
kõrgus: 100%;
}
}

Seetõttu on sinise taustavärvus ainult nendel brauseritel, mis muudavad sisu nähtavuse omadused; vastasel juhul arvestatakse vaikeväärtusega. Pange tähele, et @ sarnaneb meediumipäringute @ mediaga, kus peaksite ajutiste kohanduste jaoks määrama max-laiuse või min-laiuse. See lihtsustab funktsioonipäringute @supports meeldejätmist.

Loe rohkem: Kuidas kasutada meediumipäringuid HTML-is ja CSS-is

Brauserite ühilduvus: kõik suuremad brauserid, sealhulgas Chrome, Edge ja Firefox.

6. sisu-nähtavus Atribuut

Kiire renderdamine töötab kasutaja interaktiivse veebisaidi selgrooguna. Mobiilseadmete populaarsuse suurenemisega toimib veebisaidi renderdustegevus kitsaskohana ahvatleva veebisaidi saamiseks.

Siin mängib sisu nähtavuse omadus üliolulist rolli. Sest vaikimisi renderdavad brauserid kõiki veebisaidi elemente korraga. See vähendab laadimisaega ja saidi üldist jõudlust, eriti kui teie veebisaidil on palju raskeid animatsioone. Teisalt renderdab atribuut sisu-nähtavus ainult vaateava elemente ja näitab teisi elemente kogu lehe kerimisel.

#main {
sisu nähtavus: automaatne;
/ * sisemine sisemine suurus: 0 500 pikslit; */
}

Atribuudil sisu-nähtavus sisestatakse kolm väärtust. sisu-nähtavus: nähtav ei näita efekti, samas kui sisu-nähtavus: peidetud sarnaneb kuvatavale: ükski, kus element jätab ligipääsmatu sisu vahele. Sisu nähtavus: jätab ebaolulise sisu automaatselt vahele, kuid kasutajaagendi funktsioonidele on see saadaval tavalise lehena.

Mõõtkem sisu nähtavuse jõudu. Siin on tulemus:

7. Üleminek, teisendamine ja animatsioon

CSS-is on meil animatsiooni rakendamiseks kaks võimalust. Üleminekut kasutatakse elementide visuaalsete omaduste sujuvaks muutmiseks. Teisalt manipuleeriks transformatsioon ilma üleminekuta järsult ühest olekust teise.

Animatsioone kasutatakse @keyframe'idega, mis määravad stiilid animatsiooni kestuse ajal mitmes punktis. Huvitav on see @ võtmeraamid määravad, millal muudatus toimub, transformatsioon ja animatsioon võtavad muutuse üle kontrolli ning üleminek hoolitseb selle eest, kuidas muutus toimub (nt hõljumisefektid).

.child {
taust: sinakasroheline;
kõrgus: 150px;
laius: 150px;
värvus: valge;
üleminek: teisendage 0,2s hõlpsalt sisse-välja;
animatsioon: myAnimation 2s lõpmatu;
}
.child: hõljutage {
teisendamine: skaala (2, 2) pööramine (45deg);
}
@keyframes myAnimation {
0% {
}
50% {
muundamine: translateX (400px)
}
100% {
muundamine: translateX (0px)
}
}

Brauserite ühilduvus: kõik suuremad brauserid, sealhulgas Chrome, Edge ja Firefox.

Pakkimine

Kaskaadstiililehe märgistus areneb pidevalt paremate funktsioonidega. Siiani olete õppinud tundma neid seitset vinget funktsiooni, mis hõlmavad CSS-i alamruudustikku, kuvasuhte omadust, flexboxi lüngad, kerimisnupp, funktsioonipäringud, sisu nähtavuse omadus, üleminek, teisendamine ja animatsioon.

Päeva lõpuks peate tagama, millised funktsioonid lihtsustavad teie veebisaidi kujundamist.

7 uut funktsiooni, millele Bootstrapis tähelepanu pöörata 5

Kui arendate veebisaite ja rakendusi Bootstrap CSS-i raamistiku abil, on siin Bootstrap 5-s uus.

Loe edasi

Autori kohta