Modern CSS tar hela kontrollen över webbdesign med hjälp av erforderlig JavaScript. I den här artikeln kommer vi att lyfta fram sju nya CSS-uppdateringar för att förenkla framtidens styling. Dessutom överväger vi webbläsarstödet för Chrome, Edge och Firefox. Slutligen kommer vi att diskutera problemen, lösningarna och i stort sett allt du behöver för att komma igång direkt.
Med tanke på alla knep och tekniker, här är några handplockade CSS-funktioner som är värda din tid. Så, utan vidare, låt oss dyka direkt in i det.
1. CSS Subgrid
Till skillnad från CSS flexbox förmåga att bara röra sig i en riktning, kan du definiera båda dimensionerna i rutnät. När de börjar bli kraftfulla och populära under de kommande decennierna, bevittnas enorma förändringar i webbdesign. Kapslade galler används för att rita galler inuti gallren. Men vilka är de största nackdelarna som väckte ett krav på CSS-undernät?
Kapslade rutnät efter nivå 2 brukade svämma över innehåll utanför det större rutnätet som kraftigt påverkade responsen på en webbplats. Kapslade galler fungerade som oberoende element inuti den större gallerbehållaren. Det fanns inte alls hänvisning till den överordnade behållaren för någon förändring.
Utan undernät:
Efter undernät:
Så här kan du implementera subgrids:
.container {
width: 700px;
height: 500px;
background: rgb(214, 255, 139);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
.container div {
background: rgb(72, 170, 137);
grid-row: 2/ 3;
grid-column: 2 / 5;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
Du kan placera flera undernät. Det anmärkningsvärda undantaget är att subgrids ärver överordnade grid-gap-egenskapen. Det kommer att resultera i att alla undernät skapas med samma gapegenskaper i varje överordnat rutnät.
Det bästa med subgrids är att de är mycket lyhörda, justerbara och skalbara.
Webbläsarkompatibilitet: Firefox
2. bildförhållande Egenskap
Du kan eliminera alla justeringar och beräkningsproblem genom att ändra bildförhållandet för en given behållare. Om du siktar på att infoga en video är allt du behöver göra att fixa ett bildförhållande i förhållande till den varierande skärmstorleken. Men när du arbetar med tvådimensionella multipla rutnät, finns det risk för översvämningar och standardvy.
Du kan fixa det genom att stödja egenskapen bildförhållande med width-attributet. Det blir praktiskt för responsiva bilder eftersom du kan definiera en höjd eller bredd.
Så här kan du implementera egenskapen bildförhållande:
.container {
width: 700px;
aspect-ratio: 16 / 9;
background: rgb(72, 170, 137);
}
Du kan också mata in bildförhållande: auto istället för att ange förhållandet. Nackdelen med det automatiska standardvärdet är att webbläsaren väljer bildens ursprungliga dimension. Utan tvekan hämmar det sajtens lyhördhet.
Webbläsarkompatibilitet: Chrome, Edge, Firefox (delvis)
3. Flexbox Gap
Grid-gap är ganska populärt för att skapa lika utrymme mellan varje rutnät. Men det var meningen att du skulle använda negativa marginaler, pseudoklassväljare och komplexa väljare för att hantera utrymmet mellan varje flex-objekt. Således resulterar Flexbox-gapet i färre rader kod med högre skalbarhet.
Så här kan du implementera flexbox-gapet:
.container {
width: 700px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
}
Produktion:
Webbläsarkompatibilitet: Alla större webbläsare, inklusive Chrome, Edge och Firefox.
Rullning hjälper till att dela mer information om en enskild webbplats utan att belamra webbkopian. Men den stora nackdelen med att rulla är att det kan stanna vid hälften av paragrafen eller bilden. Ibland lämnas kontrollen över paginerat innehåll halvvägs. JavaScript används eftertänksamt för att undvika rullningsanpassning. Men det var inte ett helt tillfredsställande resultat förrän CSS Scroll Snap kom.
Med hjälp av Scroll Snap kan du definiera specifika gränser för att fixa layouten och synligheten för en given behållare. Till exempel fungerar det fantastiskt att skapa karuseller och bestämda webbsektioner. Observera att du inte behöver JS för någon justering.
Så här kan du implementera scroll snap:
.container {
width: 100%;
height: 100%;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
section {
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 15em;
font-family: Arial, Helvetica, sans-serif;
scroll-snap-align: end;
width: 100%;
height: 100%;
}
Produktion:
CSS scroll snap har överordnad och underordnad egendom. Den överordnade eller behållaregenskapen bestämmer riktningen för rullningen (x eller y) och beteendet för rullningssnäppet. Till exempel kan du ställa in scroll-snap-typ: x obligatorisk. Det ger användaren kontroll att bestämma rullningspunkten utan att ta hänsyn till rullningspositionen.
Å andra sidan, scroll-snap-type: y närhet fungerar endast när webbplatsbesökaren är närmare rullningspunkten.
Den underordnade egenskapen är scroll-snap-align för att justera elementen under CSS scroll snap. Den matar in start-, slut- och mittvärden för att justera element därefter.
5. Funktionsfrågor
Funktionsfrågor används för att hantera graciös försämring. Till exempel är CSS-rutnät ganska populära nuförtiden. Men det är värt att nämna att äldre webbläsare inte kan rendera det.
Här kontrollerar funktionsfrågor om just den webbläsaren stöder en specifik egenskap eller inte och ger ett stödsystem som uppmuntrar att hänvisa till en CSS-egenskap endast om den stöds i den webbläsaren. I annat fall beaktas standardvärdet. I det här fallet kan du placera block istället för rutnät för alla förutspådda reservdelar.
Så här kan du implementera funktionsfrågor:
@supports (content-visibility: auto) {
body{
background: teal;
width: 100%;
height: 100%;
}
}
Därför kommer endast de webbläsare som återger egenskaper för innehållssynlighet att ha blågrön bakgrundsfärg; annars skulle standardvärdet beaktas. Observera att @ liknar @media för mediefrågor, där du skulle ställa in en maxbredd eller minbredd för provisoriska justeringar. Det förenklar att komma ihåg funktionsfrågorna @supports.
Webbläsarkompatibilitet: Alla större webbläsare, inklusive Chrome, Edge och Firefox.
6. egendom för innehållssynlighet
Snabb rendering fungerar som en ryggrad för en användarinteraktiv webbplats. Med den ökande populariteten för mobila enheter, fungerar renderingsprestandan för en webbplats som en flaskhals för att få en tilltalande webbplats.
Här spelar innehållssynlighetsegenskapen en avgörande roll. Eftersom webbläsarna som standard renderar alla webbplatsens element på en gång. Det minskar laddningstiden och webbplatsens övergripande prestanda, särskilt om din webbplats har många tunga animationer. Å andra sidan renderar egenskapen innehållssynlighet endast viewport-elementen och visar andra element när du rullar genom sidan.
#main {
content-visibility: auto;
/* contain-intrinsic-size: 0 500px; */
}
Content-visibility-egenskapen matar in tre värden. content-visibility: visible visar ingen effekt medan content-visibility: hidden liknar display: none där elementet hoppar över det otillgängliga innehållet. Innehållssynlighet: automatiskt hoppar över det irrelevanta innehållet, men det är tillgängligt som en normal sida för användaragentfunktionerna.
Låt oss mäta kraften i innehållssynlighet. Här är resultatet:
7. Övergång, transformation och animering
I CSS har vi två sätt att tillämpa animering. Övergång används för att göra jämna förändringar i visuella egenskaper hos element. Å andra sidan, utan övergång, skulle transformation abrupt manipulera från ett tillstånd till ett annat.
Animationer används med @keyframes som ställer in stilar på flera punkter under animeringens varaktighet. Det intressanta är att @keyframes definierar när förändringen kommer att ske, transformation och animering tar kontroll över förändringen, och transition tar hand om hur förändringen kommer att ske (t.ex. hovringseffekter).
.child {
background: teal;
height: 150px;
width: 150px;
color: white;
transition: transform 0.2s ease-in-out;
animation: myAnimation 2s infinite;
}
.child:hover {
transform: scale(2, 2) rotate(45deg);
}
@keyframes myAnimation {
0% {}
50% {
transform: translateX(400px)
}
100% {
transform: translateX(0px)
}
}
Webbläsarkompatibilitet: Alla större webbläsare, inklusive Chrome, Edge och Firefox.
Avslutar
Överlappande stilmallsuppmärkning utvecklas kontinuerligt med bättre funktioner. Hittills har du lärt dig om dessa sju fantastiska funktioner som inkluderar CSS-undernät, bildförhållandeegenskaper, flexbox-luckor, scroll snap, funktionsfrågor, innehållssynlighet, övergång, transformering och animering.
I slutet av dagen måste du se till vilka funktioner som förenklar din webbdesign.
Om författaren
Naincy Mourya (19 artiklar publicerade)
Naincy är specialiserat på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologi.
Mer från Naincy Mourya
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
