7 nya funktioner för att skapa en lyhörd webbplats

Modern CSS tar hela kontrollen över webbplatsstyling med hjälp av JavaScript som krävs. I den här artikeln kommer vi att lyfta fram sju nya CSS-uppdateringar för att förenkla stylingens framtid. Dessutom överväger vi webbläsarstöd för Chrome, Edge och Firefox. Slutligen kommer vi att diskutera frågor, lösningar 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 flexboxs 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 bevittnar man enorma förändringar i webbdesign. Kapslade galler används för att rita in nät i gallren. Men vad är de största nackdelarna som väckte en uppmaning till CSS-subgrids?

• Kapslade rutnät efter nivå 2 brukade flyta över innehåll utanför det större rutnätet som kraftigt påverkade responsen på en webbplats.
instagram viewer
• Kapslade galler fungerade som oberoende element i den större rutnätbehållaren. Det var inte alls hänvisning till den överordnade behållaren för någon ändring.

Utan subgrids:

Efter subgrids:

Så här kan du implementera delnät:

.behållare {
bredd: 700 px;
höjd: 500px;
bakgrund: rgb (214, 255, 139);
display: rutnät;
rutmall-kolumner: 1fr 1fr 1fr 1fr;
rutmall-rader: 1fr 1fr 1fr 1fr;
}
.container div {
bakgrund: rgb (72, 170, 137);
rutnät: 2/3;
rutnät-kolumn: 2/5;
display: rutnät;
rutmall-kolumner: subgrid;
rutmall-rader: subgrid;
}

Du kan placera flera underrutor. Det anmärkningsvärda undantaget är att undergrupper ärver den överordnade rutnät-gap-egenskapen. Det kommer att resultera i att alla underrutor med samma gapegenskaper skapas i varje överordnat rutnät.

Det bästa med subgrid är att de är mycket lyhörda, justerbara och skalbara.

Webbläsarkompatibilitet: Firefox

2. bildförhållande

Du kan eliminera alla justerings- och beräkningsfrågor genom att ändra bildförhållandet för en viss behållare. Om du vill sätta in en video behöver du bara fixa ett bildförhållande i förhållande till den olika skärmstorleken. Men medan du arbetar med tvådimensionella flera rutnät finns det chanser för överflöden och standardvy.

Du kan fixa det genom att stödja egenskapen bildförhållande med breddattribut. Det blir praktiskt för responsiva bilder eftersom du kan definiera en höjd eller bredd.

Så här kan du implementera fastighetsförhållande:

.behållare {
bredd: 700 px;
bildförhållande: 16/9;
bakgrund: rgb (72, 170, 137);
}

Du kan också mata in bildförhållande: auto istället för att ange förhållandet. Nackdelen med standard autovärde är att webbläsaren väljer bildens ursprungliga dimension. Utan tvekan hindrar det webbplatsens 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 du skulle använda negativa marginaler, pseudoklassväljare och komplexa väljare för att hantera utrymmet mellan varje flex-objekt. Flexbox-gapet resulterar således i mindre kodrader med högre skalbarhet.

Så här kan du implementera flexbox-luckan:

.behållare {
bredd: 700 px;
höjd: 500px;
display: flex;
align-items: center;
justify-content: center;
gap: 1 em;
}

Produktion:

Webbläsarkompatibilitet: Alla större webbläsare, inklusive Chrome, Edge och Firefox.

Scrolling hjälper till att dela mer information om en enda webbplats utan att röra webbkopian. Men den största nackdelen med att rulla är att den kan stanna vid hälften av para eller bild. Ibland lämnas kontrollen av paginerat innehåll halvvägs. JavaScript används med omtanke för att undvika anpassning av rullning. Men det var inte ett helt tillfredsställande resultat förrän CSS Scroll Snap kom.

Med Scroll Snap kan du definiera specifika gränser för att fixa layout och synlighet för en viss container. Det fungerar till exempel fantastiskt att skapa karuseller och bestämda webbplatsavsnitt. Observera att du inte behöver JS för någon justering.

Så här kan du implementera scroll snap:

.behållare {
bredd: 100%;
höjd: 100%;
display: flex;
överflöd-x: bläddra;
scroll-snap-type: x obligatoriskt;
}
sektion {
flex: ingen;
display: flex;
align-items: center;
justify-content: center;
font-storlek: 15em;
font-family: Arial, Helvetica, sans-serif;
scroll-snap-align: slut;
bredd: 100%;
höjd: 100%;
}

Produktion:

CSS scroll snap har föräldra- och barnegendom. Föräldra- eller behållaregenskapen bestämmer riktningen för rullningen (x eller y) och uppförandet av rullningsknappen. Du kan till exempel ställa in scroll-snap-type: x obligatorisk. Det ger användaren kontroll att bestämma rullningspunkten utan att överväga rullningspositionen.

Å andra sidan, scroll-snap-type: y närhet fungerar bara när webbplatsbesökaren är närmare rullningspunkten.

Underegenskapen rullar-snäpp-justeras för att justera elementen under CSS-bläddring. Den matar in start-, slut- och mittvärden för att anpassa elementen i enlighet därmed.

5. Funktionsfrågor

Funktionsfrågor används för att hantera graciös nedbrytning. Till exempel är CSS-nät ganska populära nuförtiden. Men det är värt att nämna att äldre webbläsare inte kan göra det.

Här kontrollerar funktionsfrågor om just den webbläsaren stöder en viss egenskap eller inte och ger ett stödsystem som uppmuntrar att hänvisa till en CSS-egenskap endast om den stöds på det webbläsare. Annars beaktas standardvärdet. I det här fallet kan du placera block i stället för rutnät för eventuell förväntad reserv.

Så här kan du implementera funktionsfrågor:

@supports (innehållssynlighet: automatisk) {
kropp{
bakgrund: kricka;
bredd: 100%;
höjd: 100%;
}
}

Därför är det bara de webbläsare som återger innehållssynlighetsegenskaper som har kricka bakgrundsfärg; annars skulle standardvärdet övervägas. Observera att @ liknar @media för mediefrågor, där du skulle ange en maxbredd eller minbredd för att göra snabba justeringar. Det förenklar att komma ihåg funktionsfrågorna @supports.

Läs mer: Hur man använder mediefrågor i HTML och CSS

Webbläsarkompatibilitet: Alla större webbläsare, inklusive Chrome, Edge och Firefox.

6. innehållssynlig egendom

Snabb rendering fungerar som en ryggrad för en användarinteraktiv webbplats. Med den ökande populariteten hos mobila enheter fungerar rendering av en webbplats som en flaskhals för att få en tilltalande webbplats.

Här spelar egenskapen för innehållssynlighet en avgörande roll. Eftersom webbläsarna som standard återger alla webbplatsens element på en gång. Det minskar laddningstiden och webbplatsens totala prestanda, särskilt om din webbplats har många tunga animationer. Å andra sidan gör egenskapen innehållssynlighet endast visningselementen och visar andra element när du rullar genom hela sidan.

#main {
innehåll-synlighet: auto;
/ * innehålla inneboende storlek: 0 500 pixlar; */
}

Innehållssynlighetsegenskapen matar in tre värden. innehåll-synlighet: synlig visar ingen effekt medan innehåll-synlighet: dold liknar visning: ingen där elementet hoppar över det oåtkomliga innehållet. Innehållssynligheten: automatiskt hoppar över det irrelevanta innehållet, men det är tillgängligt som en vanlig sida för användaragentfunktionerna.

Låt oss mäta kraften i innehållssynlighet. Här är resultatet:

7. Övergång, omvandling och animering

I CSS har vi två sätt att tillämpa animering. Övergång används för att göra smidiga förändringar i elementens visuella egenskaper. Å andra sidan, utan övergång, skulle transformation plötsligt manipulera från ett tillstånd till ett annat.

Animationer används med @keyframes som ställer in stilar vid flera punkter under animationens varaktighet. Det intressanta är att @keyframes definierar när ändringen ska ske, transformering och animering tar kontroll över förändringen, och övergången tar hand om hur förändringen kommer att ske (t.ex. svävareffekter).

.barn {
bakgrund: kricka;
höjd: 150px;
bredd: 150px;
färg vit;
övergång: omvandla 0,2 s lätthet-in-ut;
animation: myAnimation 2s oändlig;
}
.barn: sväva {
transformera: skala (2, 2) rotera (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

Kaskad stilarkmarkering utvecklas kontinuerligt med bättre funktioner. Hittills fick du veta om dessa sju fantastiska funktioner som inkluderar CSS subgrid, aspect-ratio property, flexbox-luckor, bläddra snap, funktionen frågor, innehåll-synlighet egendom, övergång, transformera och animering.

I slutet av dagen måste du se till vilka funktioner som förenklar din webbplatsstyling.

7 nya funktioner att se upp för i Bootstrap 5

Om du utvecklar webbplatser och appar som använder Bootstrap CSS-ramverk, här är vad som är nytt i Bootstrap 5.

Läs Nästa

Om författaren