7 naujos funkcijos, leidžiančios sukurti interaktyvią svetainę

Šiuolaikinė CSS perima visą svetainės stiliaus kontrolę, naudodama reikiamą „JavaScript“. Šiame straipsnyje mes išryškinsime septynis naujus CSS atnaujinimus, kad supaprastintume ateities stilių. Be to, svarstome „Chrome“, „Edge“ ir „Firefox“ palaikymą naršyklėje. Galiausiai aptarsime klausimus, sprendimus ir beveik viską, ko jums reikės norint pradėti iš karto.

Atsižvelgiant į visas gudrybes ir metodus, pateikiame keletą pasirinktų CSS funkcijų, kurios vertos jūsų laiko. Taigi, be jokių tolesnių veiksmų, pasinerkime tiesiai į jį.

1. CSS antrinis tinklelis

Skirtingai nei CSS „flexbox“ galimybė judėti tik viena kryptimi, tinkle galite apibrėžti abu matmenis. Kai jie ateinančiais dešimtmečiais pradeda tapti galingi ir populiarūs, interneto dizainuose pastebimi didžiuliai pokyčiai. Tinkleliai tinkleliams piešti naudojami tinklelio viduje. Bet kokie yra pagrindiniai trūkumai, dėl kurių kilo poreikis sukurti CSS antrinius tinklus?

• Po 2 lygio įdėti tinkleliai naudojami turinio perpildymui už didesnio tinklelio ribų, o tai labai paveikė svetainės reagavimą.
instagram viewer
• Lizdinės tinkleliai veikė kaip nepriklausomi elementai didesnio tinklelio konteinerio viduje. Apie pagrindinį sudėtinį rodinį nebuvo jokių nuorodų.

Be antrinių tinklelių:

Po potinkliais:

Štai kaip galite įdiegti antrinius tinklelius:

.container {
plotis: 700 taškų;
aukštis: 500 taškų;
fonas: rgb (214, 255, 139);
rodyti: tinklelis;
tinklelio-šablono-stulpeliai: 1fr 1fr 1fr 1fr;
tinklelis-šablonas-eilutės: 1fr 1fr 1fr 1fr;
}
.container div {
fonas: rgb (72, 170, 137);
tinklelio eilutė: 2/3;
tinklelio stulpelis: 2/5;
rodyti: tinklelis;
tinklelis-šablonas-stulpeliai: subgrid;
grid-template-rows: subgrid;
}

Galite įdėti kelis antrinius tinklelius. Pažymėtina tai, kad antriniai tinkleliai paveldi tėvų tinklelio spragų savybę. Tai sukurs visus pagrindinius tinklelius su vienodomis spragų savybėmis kiekviename pagrindiniame tinklelyje.

Geriausia, kad subgridai yra labai jautrūs, reguliuojami ir keičiami.

Naršyklės suderinamumas: „Firefox“

2. kraštinių santykis Nuosavybė

Galite pašalinti visas koregavimo ir skaičiavimo problemas pakeisdami konkretaus sudėtinio rodinio proporcijas. Jei norite įterpti vaizdo įrašą, jums tereikia nustatyti proporcijas, palyginti su skirtingu ekrano dydžiu. Tačiau dirbant su dviejų matmenų keliais tinkleliais yra perpildymo ir numatytojo rodinio tikimybė.

Galite tai išspręsti palaikydami kraštinių santykio ypatybę su atributu plotis. Tai tampa patogu reaguojantiems vaizdams, nes galite nustatyti aukštį arba plotį.

Štai kaip galite įdiegti kraštinių santykio ypatybę:

.container {
plotis: 700 taškų;
formato santykis: 16/9;
fonas: rgb (72, 170, 137);
}

Taip pat galite įvesti formato koeficientą: automatinis, užuot nurodę santykį. Numatytosios automatinės vertės trūkumas yra tas, kad naršyklė pasirinks pradinį vaizdo dydį. Neabejotinai tai trukdo svetainės reagavimui.

Naršyklės suderinamumas: „Chrome“, „Edge“, „Firefox“ (dalinis)

3. „Flexbox“ tarpas

Tinklelio atotrūkis yra gana populiarus kuriant vienodą erdvę tarp kiekvieno tinklelio. Bet jūs turėjote pritaikyti neigiamas paraštes, pseudo klasės selektorius ir sudėtingus selektorius, kad tvarkytumėte erdvę tarp kiekvieno lankstaus elemento. Taigi dėl „Flexbox“ spragos atsiranda mažesnės kodo eilutės, kurių mastelis didesnis.

Štai kaip galite įgyvendinti „flexbox“ spragą:

.container {
plotis: 700 taškų;
aukštis: 500 taškų;
ekranas: lankstus;
lygiuoti daiktai: centras;
pateisinti-turinys: centras;
tarpas: 1em;
}

Išvestis:

Naršyklių suderinamumas: visos pagrindinės naršyklės, įskaitant „Chrome“, „Edge“ ir „Firefox“.

Slinkimas padeda dalytis daugiau informacijos apie vieną svetainę, netvarkant žiniatinklio kopijos. Tačiau pagrindinis slinkimo trūkumas yra tas, kad jis gali sustoti ties puse para ar vaizdu. Kartais puslapių puslapių valdymas paliekamas pusiaukelėje. „JavaScript“ yra apgalvotas, kad būtų išvengta slinkties pritaikymo. Tačiau tai nebuvo visiškai patenkinamas rezultatas, kol pasirodė CSS Scroll Snap.

Naudodami „Scroll Snap“ galite nustatyti konkrečias ribas, kad pataisytumėte konkretaus sudėtinio rodinio išdėstymą ir matomumą. Pvz., Nuostabiai veikia kuriant karuseles ir konkrečias svetainės skiltis. Atminkite, kad JS nereikalaus jokiam koregavimui.

Štai kaip galite įdiegti slinkimo momentą:

.container {
plotis: 100%;
aukštis: 100%;
ekranas: lankstus;
overflow-x: slinkite;
scroll-snap-type: x privaloma;
}
skyrius {
lankstumas: nėra;
ekranas: lankstus;
lygiuoti daiktai: centras;
pateisinti-turinys: centras;
šrifto dydis: 15em;
šriftų šeima: Arialas, Helvetica, sans-serifas;
scroll-snap-align: pabaiga;
plotis: 100%;
aukštis: 100%;
}

Išvestis:

CSS slinkties momentas turi tėvų ir vaikų nuosavybę. Pagrindinė arba sudėtinio rodinio ypatybė nustato slinkties kryptį (x arba y) ir slinkties spragtuko elgesį. Pavyzdžiui, galite nustatyti „scroll-snap-type: x“ privalomą. Tai suteiks vartotojui galimybę nuspręsti slinkties tašką neatsižvelgiant į slinkties padėtį.

Kita vertus, „scroll-snap-type: y“ artumas veikia tik tada, kai svetainės lankytojas yra arčiau slinkties taško.

Vaiko ypatybė yra slinkti-sulieti-sulygiuoti, kad sulygintumėte elementus CSS slinkties metu. Jis įveda pradžios, pabaigos ir centro vertes, kad atitinkamai sulygintų elementus.

5. Funkcijų užklausos

Funkcijų užklausos naudojamos grakščiam degradavimui spręsti. Pavyzdžiui, CSS tinklai šiais laikais yra gana populiarūs. Tačiau verta paminėti, kad senesnės naršyklės negali jo pateikti.

Čia funkcijų užklausos patikrina, ar ta konkreti naršyklė palaiko konkrečią ypatybę, ar ne suteikia palaikymo sistemą, skatinančią nurodyti CSS nuosavybę tik tuo atveju, jei ji yra palaikoma naršyklė. Kitu atveju atsižvelgiama į numatytąją vertę. Tokiu atveju galite numatyti blokus, o ne tinklelius, kad galėtumėte numatyti atsargą.

Štai kaip galite įgyvendinti funkcijų užklausas:

@supports (turinio matomumas: automatinis) {
kūnas{
fonas: žalsvai mėlyna;
plotis: 100%;
aukštis: 100%;
}
}

Todėl tik tos naršyklės, kurios pateikia turinio matomumo savybes, turės žalsvai mėlyną fono spalvą; priešingu atveju būtų atsižvelgiama į numatytąją vertę. Atminkite, kad @ yra panašus į medijos užklausų @media, kur jūs turėjote nustatyti maksimalų arba min. Plotį laikiniems koregavimams. Tai palengvina funkcijų užklausų @supports prisiminimą.

Skaityti daugiau: Kaip naudoti medijos užklausas HTML ir CSS

Naršyklių suderinamumas: visos pagrindinės naršyklės, įskaitant „Chrome“, „Edge“ ir „Firefox“.

6. turinio matomumo ypatybė

Greitas atvaizdavimas yra interaktyvios svetainės pagrindas. Didėjant mobiliųjų įrenginių populiarumui, svetainės pateikimo našumas yra kliūtis norint gauti patrauklią svetainę.

Čia turinio matomumo savybė vaidina svarbų vaidmenį. Nes pagal numatytuosius nustatymus naršyklės pateikia visus svetainės elementus vienu metu. Tai sumažina įkėlimo laiką ir bendrą svetainės našumą, ypač jei jūsų svetainėje yra daug sunkių animacijų. Kita vertus, turinio matomumo ypatybė pateikia tik peržiūros srities elementus ir rodo kitus elementus, kai slenkate visame puslapyje.

#main {
turinio matomumas: automatinis;
/ * yra-vidinis dydis: 0 500 taškų; */
}

Turinio matomumo ypatybė įveda tris reikšmes. „content-visibility: matomas“ nerodo jokio efekto, o „content-visibility: hidden“ yra panašus į „display: none“, kur elementas praleidžia nepasiekiamą turinį. Turinio matomumas: automatiškai praleidžia nesusijusį turinį, tačiau jį galima naudoti kaip įprastą puslapį vartotojo agento funkcijoms.

Išmatuokime turinio matomumo galią. Štai rezultatas:

7. Perėjimas, transformacija ir animacija

CSS turime du būdus, kaip pritaikyti animaciją. Perėjimas naudojamas sklandžiai keisti elementų vizualines savybes. Kita vertus, be perėjimo transformacija staiga manipuliuotų iš vienos būsenos į kitą.

Animacijos naudojamos su @keyframes, kurios nustato stilius keliuose taškuose per animacijos trukmę. Įdomu tai @keyframes apibrėžia, kada pasikeis, transformacija ir animacija perima pokyčių kontrolę, o perėjimas rūpinasi, kaip pasikeitimas įvyks (pvz., užvedimo efektai).

.child {
fonas: žalsvai mėlyna;
aukštis: 150 taškų;
plotis: 150 taškų;
spalva: balta;
perėjimas: transformuoti 0,2s palengvėjimą;
animacija: „myAnimation 2s“ begalinis;
}
.child: užveskite pelės žymeklį {
transformuoti: skalė (2, 2) pasukti (45 laipsniai);
}
@keyframes myAnimation {
0% {
}
50% {
transformuoti: translateX (400 taškų)
}
100% {
transformuoti: translateX (0px)
}
}

Naršyklių suderinamumas: visos pagrindinės naršyklės, įskaitant „Chrome“, „Edge“ ir „Firefox“.

Apvyniojimas

Kaskadinio stiliaus lapo žymėjimas nuolat tobulinamas su geresnėmis funkcijomis. Iki šiol sužinojote apie šias septynias nuostabias funkcijas, įskaitant CSS antrinį tinklelį, kraštinių santykio ypatybę, „flexbox“ spragos, slinkties momentas, funkcijų užklausos, turinio matomumo ypatybė, perėjimas, transformavimas ir animacija.

Dienos pabaigoje turite įsitikinti, kurios funkcijos supaprastina jūsų svetainės stilių.

7 naujos funkcijos, į kurias reikia atkreipti dėmesį į „Bootstrap 5“

Jei kuriate svetaines ir programas naudodami „Bootstrap CSS“ sistemą, „Bootstrap 5“ naujienos yra šios.

Skaitykite toliau

Apie autorių