7 uutta ominaisuutta reagoivan verkkosivuston luomiseen

Moderni CSS hallitsee verkkosivustojen tyylin hallinnan vaaditun JavaScriptin avulla. Tässä artikkelissa korostamme seitsemää uutta CSS-päivitystä tyylin tulevaisuuden yksinkertaistamiseksi. Lisäksi harkitsemme Chromen, Edgen ja Firefoxin selaintukea. Lopuksi keskustelemme ongelmista, ratkaisuista ja melkein kaikesta, mitä tarvitset heti aloittaaksesi.

Kun otetaan huomioon kaikki temput ja tekniikat, tässä on joitain valitsemiasi CSS-ominaisuuksia, jotka ovat vaivan arvoista. Joten, ilman mitään lisäkysymyksiä, sukeletaan suoraan siihen.

1. CSS-aliruudukko

Toisin kuin CSS flexboxin kyky liikkua vain yhteen suuntaan, voit määrittää molemmat mitat ruudukoissa. Kun ne alkavat tulla voimakkaiksi ja suosituiksi tulevina vuosikymmeninä, verkkosuunnitelmissa nähdään valtavia muutoksia. Sisäkkäisiä ruudukoita käytetään piirtämään ruudukot ruudukkojen sisälle. Mutta mitkä ovat suurimmat haitat, jotka herättivät vaatimuksen CSS-aliverkkoihin?

• Sisäkkäiset ruudukot tason 2 jälkeen käytetään liikaa sisältöä isomman ruudukon ulkopuolella, mikä vaikutti voimakkaasti verkkosivuston reagoivuuteen.
  instagram viewer
• Sisäkkäiset ruudukot toimivat itsenäisinä elementteinä suuremman ruudukon sisällä. Mitään muutosta ei viitattu lainkaan emosäiliöön.

Ilman aliverkkoja:

Aliverkkojen jälkeen:

Näin voit toteuttaa aliruudukot:

.container {
leveys: 700px;
korkeus: 500px;
tausta: rgb (214, 255, 139);
näyttö: ruudukko;
ruudukko-malli-sarakkeet: 1fr 1fr 1fr 1fr;
ruudukko-malli-rivit: 1fr 1fr 1fr 1fr;
}
.container div {
tausta: rgb (72, 170, 137);
ruudukkorivi: 2/3;
ristikkopylväs: 2/5;
näyttö: ruudukko;
ruudukko-malli-sarakkeet: aliruudukko;
ruudukko-malli-rivit: aliruudukko;
}

Voit sijoittaa useita aliruudukoita. Huomattava poikkeus on, että aliverkot perivät vanhemman ruudukkovälin. Tuloksena on luoda kaikki aliruudukot, joilla on samat aukko-ominaisuudet jokaisen vanhemman ruudukon sisällä.

Parasta aliruudukossa on, että ne ovat erittäin reagoivia, säädettäviä ja skaalautuvia.

Selaimen yhteensopivuus: Firefox

2. kuvasuhde Ominaisuus

Voit poistaa kaikki säätö- ja laskentakysymykset muuttamalla tietyn säiliön kuvasuhdetta. Jos haluat lisätä videon, sinun tarvitsee vain korjata kuvasuhde vaihtelevaan näytön kokoon nähden. Mutta työskenneltäessä kaksiulotteisen moniruudukon kanssa on olemassa mahdollisuuksia ylivuotoihin ja oletusnäkymään.

Voit korjata sen tukemalla kuvasuhdeominaisuutta leveysmääritteellä. Siitä tulee kätevä reagoiville kuville, koska voit määrittää korkeuden tai leveyden.

Voit ottaa kuvasuhdeomaisuuden käyttöön seuraavasti:

.container {
leveys: 700px;
kuvasuhde: 16/9;
tausta: rgb (72, 170, 137);
}

Voit myös syöttää kuvasuhteen: auto sen sijaan, että määrität suhde. Automaattisen oletusarvon haittapuoli on, että selain valitsee kuvan alkuperäisen ulottuvuuden. Epäilemättä se haittaa sivuston reagointikykyä.

Selaimen yhteensopivuus: Chrome, Edge, Firefox (osittainen)

3. Flexbox-aukko

Ruudukko-aukko on varsin suosittu luomaan yhtä suuri tila kunkin ruudukon välille. Mutta sinun piti soveltaa negatiivisia marginaaleja, pseudoluokan valitsimia ja monimutkaisia ​​valitsimia käsittelemään kunkin joustavien kohteiden välistä tilaa. Siten Flexbox-aukko johtaa pienempiin koodiriveihin, joilla on suurempi skaalautuvuus.

Näin voit toteuttaa flexbox-aukon:

.container {
leveys: 700px;
korkeus: 500px;
näyttö: joustava;
kohdista tuotteet: keskellä;
perustella sisältö: keskus;
aukko: 1em;
}

Tuotos:

Selainten yhteensopivuus: Kaikki tärkeimmät selaimet, mukaan lukien Chrome, Edge ja Firefox.

Vieritys auttaa jakamaan lisätietoja yhdestä verkkosivustosta sekoittamatta verkkokopiota. Mutta vierityksen suurin haittapuoli on, että se voi pysähtyä puoleen para tai kuvasta. Joskus sivutetun sisällön hallinta jätetään puoliväliin. JavaScriptiä käytetään harkitusti vierityksen mukauttamisen välttämiseksi. Mutta se ei ollut täysin tyydyttävä tulos, ennen kuin CSS Scroll Snap tuli.

Scroll Snapin avulla voit määrittää tietyt rajat tietyn säilön asettelun ja näkyvyyden korjaamiseksi. Esimerkiksi karusellien ja tiettyjen verkkosivusto-osien luominen on mahtavaa. Huomaa, että sinun ei tarvitse JS: ää mitään säätöjä varten.

Näin voit ottaa käyttöön vierityksen napsautuksen:

.container {
leveys: 100%;
korkeus: 100%;
näyttö: joustava;
overflow-x: vieritä;
scroll-snap-type: x pakollinen;
}
osio {
joustava: ei mitään;
näyttö: joustava;
kohdista tuotteet: keskellä;
perustella sisältö: keskus;
kirjasinkoko: 15em;
fonttiperhe: Arial, Helvetica, sans-serif;
vieritä-napsauta-kohdista: loppu;
leveys: 100%;
korkeus: 100%;
}

Tuotos:

CSS-vierityspätkällä on vanhemman ja lapsen omaisuus. Ylempi tai konttiominaisuus päättää vierityksen suunnan (x tai y) ja vierityksen napsautuksen käyttäytymisen. Voit esimerkiksi asettaa scroll-snap-type: x pakolliseksi. Se antaa käyttäjälle hallinnan päättää vierityspiste ottamatta huomioon vierityspaikkaa.

Toisaalta scroll-snap-type: y-läheisyys toimii vain, kun verkkosivuston kävijä on lähempänä vierityspistettä.

Lapsiominaisuus on vieritys-napsautus-tasaus elementtien kohdistamiseksi CSS-vierityksen napsautuksen aikana. Se syöttää alku-, loppu- ja keskiarvot elementtien kohdistamiseksi vastaavasti.

5. Ominaisuuskyselyt

Ominaiskyselyjä käytetään siroan huonontumiseen. Esimerkiksi CSS-ruudukot ovat nykyään varsin suosittuja. Mutta on syytä mainita, että vanhemmat selaimet eivät voi tehdä sitä.

Tässä ominaisuuskyselyillä tarkistetaan, tukeeko kyseinen selain tiettyä ominaisuutta vai ei antaa tukijärjestelmän, joka kannustaa viittaamaan CSS-omaisuuteen vain, jos sitä tuetaan siinä selain. Muussa tapauksessa otetaan huomioon oletusarvo. Tällöin voit sijoittaa lohkoja ruudukkojen sijasta ennakoidulle palautukselle.

Näin voit toteuttaa ominaisuuskyselyjä:

@supports (sisällönäkyvyys: auto) {
runko {
tausta: sinivihreä;
leveys: 100%;
korkeus: 100%;
}
}

Siksi vain niillä selaimilla, jotka tekevät sisällön näkyvyysominaisuuksista, on sinivihreä taustaväri; muuten oletusarvo otettaisiin huomioon. Huomaa, että @ on samanlainen kuin mediakyselyjen @ media, jossa sinun piti asettaa enimmäisleveys tai minileveys välitöntä säätöä varten. Se helpottaa ominaisuuskyselyjen @supports muistamista.

Lue lisää: Mediakyselyjen käyttäminen HTML- ja CSS-tiedostoissa

Selainten yhteensopivuus: Kaikki tärkeimmät selaimet, mukaan lukien Chrome, Edge ja Firefox.

6. content-visibility Property

Nopea renderointi toimii käyttäjän interaktiivisen verkkosivuston selkärangana. Mobiililaitteiden suosion kasvaessa verkkosivuston renderointi toimii pullonkaulana houkuttelevan verkkosivuston saamiseksi.

Tässä sisällönäkyvyysominaisuudella on ratkaiseva rooli. Koska oletuksena selaimet hahmottavat kaikki verkkosivuston elementit kerralla. Se vähentää latausaikaa ja sivuston yleistä suorituskykyä, varsinkin jos verkkosivustollasi on paljon raskaita animaatioita. Toisaalta sisällönäkyvyysominaisuus renderöi vain näkymäelementit ja näyttää muita elementtejä, kun vierität sivua.

#main {
sisällön näkyvyys: auto;
/ * sisäinen sisäinen koko: 0 500 kuvapistettä; */
}

Sisällönäkyvyysominaisuus syöttää kolme arvoa. content-visibility: visible ei näytä mitään vaikutusta, kun taas content-visibility: hidden on samanlainen kuin display: none jossa elementti ohittaa sisällön, johon ei pääse. Sisällönäkyvyys: Ohittaa epäolennaisen sisällön automaattisesti, mutta se on saatavana normaalina sivuna käyttäjäagentin ominaisuuksiin.

Mitataan sisällön näkyvyyden voima. Tässä on tulos:

7. Siirtyminen, muunnos ja animaatio

CSS: ssä meillä on kaksi tapaa soveltaa animaatiota. Siirtymää käytetään tekemään sujuvia muutoksia elementtien visuaalisiin ominaisuuksiin. Toisaalta, ilman siirtymää, muunnos manipuloi äkillisesti tilasta toiseen.

Animaatioita käytetään @ avainkehysten kanssa, jotka asettavat tyylit useisiin pisteisiin animaation keston aikana. Mielenkiintoinen asia on se @keyframes määrittää, milloin muutos tapahtuu, muunnos ja animaatio hallitsevat muutoksen, ja siirtyminen huolehtii siitä, miten muutos tapahtuu (esim. leijuefektit).

.child {
tausta: sinivihreä;
korkeus: 150px;
leveys: 150px;
väri valkoinen;
siirtymä: muunnos 0,2 s helppo sisään-ulos;
animaatio: myAnimation 2s ääretön;
}
.child: vie hiiri {
muunnos: asteikko (2, 2) kiertää (45 astetta);
}
@keyframes myAnimation {
0% {
}
50% {
muunnos: translateX (400px)
}
100% {
muunnos: translateX (0px)
}
}

Selainten yhteensopivuus: Kaikki tärkeimmät selaimet, mukaan lukien Chrome, Edge ja Firefox.

Käärimistä

Porrastetun tyylitaulukon merkinnät kehittyvät jatkuvasti paremmilla ominaisuuksilla. Tähän mennessä olet oppinut tuntemaan nämä seitsemän mahtavaa ominaisuutta, jotka sisältävät CSS-aliruudukon, kuvasuhdeominaisuuden, flexbox-aukot, vieritys napsautus, ominaisuuskyselyt, sisällön näkyvyysominaisuus, siirtyminen, muunnos ja animaatio.

Päivän lopussa sinun on varmistettava, mitkä ominaisuudet yksinkertaistavat verkkosivustosi muotoilua.

7 uutta ominaisuutta, joita kannattaa varoa Bootstrap 5: ssä

Jos kehität verkkosivustoja ja sovelluksia Bootstrap CSS -kehyksen avulla, tässä on uutta Bootstrap 5: ssä.

Lue seuraava

Kirjailijasta