7 nieuwe functies om een ​​responsieve website te maken

Moderne CSS neemt de volledige controle over de website-styling met behulp van het vereiste JavaScript. In dit artikel zullen we zeven nieuwe CSS-updates uitlichten om de toekomst van styling te vereenvoudigen. Daarnaast denken we na over de browserondersteuning van Chrome, Edge en Firefox. Ten slotte bespreken we de problemen, oplossingen en vrijwel alles wat u nodig heeft om meteen aan de slag te gaan.

Gezien alle trucs en technieken, zijn hier enkele zorgvuldig uitgekozen CSS-functies die uw tijd waard zijn. Dus, zonder verder oponthoud, laten we er meteen in duiken.

1. CSS-subraster

In tegenstelling tot de mogelijkheid van CSS flexbox om slechts in één richting te bewegen, kunt u beide dimensies in rasters definiëren. Naarmate ze de komende decennia krachtig en populair worden, zijn er enorme veranderingen te zien in webontwerpen. Geneste rasters worden gebruikt om rasters binnen de rasters te tekenen. Maar wat zijn de belangrijkste nadelen die hebben geleid tot een oproep voor CSS-subgrids?

• Geneste rasters na niveau 2 werden gebruikt om inhoud buiten het grotere raster te laten overlopen die een grote invloed had op de reactiesnelheid van een website.
• Geneste rasters fungeerden als onafhankelijke elementen in de grotere rastercontainer. Er was helemaal geen verwijzing naar de bovenliggende container voor enige wijziging.

Zonder subroosters:

Na subroosters:

U kunt als volgt subrasters implementeren:

.container {
breedte: 700px;
hoogte: 500px;
achtergrond: rgb (214, 255, 139);
weergave: raster;
raster-sjabloon-kolommen: 1fr 1fr 1fr 1fr;
raster-sjabloon-rijen: 1fr 1fr 1fr 1fr;
}
.container div {
achtergrond: rgb (72, 170, 137);
rasterrij: 2/ 3;
rasterkolom: 2 / 5;
weergave: raster;
raster-sjabloon-kolommen: subraster;
raster-sjabloon-rijen: subraster;
}

U kunt meerdere subrasters plaatsen. De opmerkelijke uitzondering is dat subrasters de eigenschap van de bovenliggende rasterafstand overnemen. Het zal resulteren in het creëren van alle subrasters met dezelfde gap-eigenschappen binnen elk bovenliggend raster.

Het beste van subgrids is dat ze zeer responsief, aanpasbaar en schaalbaar zijn.

Browsercompatibiliteit: Firefox

2. beeldverhouding Eigenschap

U kunt alle aanpassings- en rekenproblemen elimineren door de beeldverhouding van een bepaalde container te wijzigen. Als u een video wilt invoegen, hoeft u alleen maar een beeldverhouding vast te stellen ten opzichte van de variërende schermgrootte. Maar tijdens het werken met tweedimensionale meervoudige rasters, zijn er kansen op overlopen en standaardweergave.

U kunt dit oplossen door de eigenschap aspectverhouding te ondersteunen met het kenmerk width. Het wordt handig voor responsieve afbeeldingen, omdat u een hoogte of breedte kunt definiëren.

Hier leest u hoe u de eigenschap aspectverhouding kunt implementeren:

.container {
breedte: 700px;
beeldverhouding: 16 / 9;
achtergrond: rgb (72, 170, 137);
}

U kunt ook de beeldverhouding: auto invoeren in plaats van de verhouding op te geven. Het nadeel van de standaard automatische waarde is dat de browser de oorspronkelijke afmeting van de afbeelding kiest. Ongetwijfeld belemmert het de responsiviteit van de site.

Browsercompatibiliteit: Chrome, Edge, Firefox (gedeeltelijk)

3. Flexbox-opening

Grid-gap is behoorlijk populair voor het creëren van gelijke ruimte tussen elk raster. Maar je zou negatieve marges, pseudo-klasse selectors en complexe selectors moeten toepassen om de ruimte tussen elke flex-item te verwerken. De Flexbox-gap resulteert dus in minder regels code met een hogere schaalbaarheid.

Hier leest u hoe u de flexbox-opening kunt implementeren:

.container {
breedte: 700px;
hoogte: 500px;
weergave: flexibel;
align-items: midden;
rechtvaardigen-inhoud: centrum;
tussenruimte: 1em;
}

Uitgang:

Browsercompatibiliteit: alle belangrijke browsers, inclusief Chrome, Edge en Firefox.

Scrollen helpt bij het delen van meer informatie over een enkele website zonder de webkopie te vervuilen. Maar het grootste nadeel van scrollen is dat het kan stoppen bij de helft van de para of afbeelding. Soms wordt de controle over gepagineerde inhoud halverwege gelaten. JavaScript wordt zorgvuldig gebruikt om scrollaanpassing te voorkomen. Maar het was geen volledig bevredigend resultaat totdat CSS Scroll Snap kwam.

Met Scroll Snap kunt u specifieke grenzen definiëren om de lay-out en zichtbaarheid van een bepaalde container te corrigeren. Het werkt bijvoorbeeld geweldig om carrousels en definitieve websitesecties te maken. Houd er rekening mee dat u geen JS nodig heeft voor aanpassingen.

Hier leest u hoe u scroll-snap kunt implementeren:

.container {
breedte: 100%;
hoogte: 100%;
weergave: flexibel;
overloop-x: scrollen;
scroll-snap-type: x verplicht;
}
sectie {
flexibel: geen;
weergave: flexibel;
align-items: midden;
rechtvaardigen-inhoud: centrum;
lettergrootte: 15em;
font-familie: Arial, Helvetica, schreefloos;
scroll-snap-align: einde;
breedte: 100%;
hoogte: 100%;
}

Uitgang:

CSS scroll snap heeft parent en child eigendom. De ouder- of containereigenschap bepaalt de richting van de scroll (x of y) en het gedrag van de scroll-snap. U kunt bijvoorbeeld scroll-snap-type: x verplicht instellen. Het geeft de gebruiker controle om het scrollpunt te bepalen zonder rekening te houden met de scrollpositie.

Aan de andere kant werkt scroll-snap-type: y proximity alleen wanneer de websitebezoeker zich dichter bij het scrollpunt bevindt.

De onderliggende eigenschap is scroll-snap-align om de elementen uit te lijnen tijdens CSS-scroll snap. Het voert begin-, eind- en middenwaarden in om elementen dienovereenkomstig uit te lijnen.

5. Functiequery's

Functiequery's worden gebruikt om met een elegante degradatie om te gaan. CSS-rasters zijn tegenwoordig bijvoorbeeld behoorlijk populair. Maar het is vermeldenswaard dat oudere browsers het niet kunnen weergeven.

Hier controleren functiequery's of die bepaalde browser een specifieke eigenschap ondersteunt of niet en geeft een ondersteuningssysteem dat het verwijzen naar een CSS-eigenschap alleen aanmoedigt als het daarop wordt ondersteund browser. Anders wordt de standaardwaarde beschouwd. In dit geval kunt u blokken plaatsen in plaats van rasters voor een voorspelde terugval.

U kunt als volgt functiequery's implementeren:

@supports (zichtbaarheid inhoud: automatisch) {
lichaam{
achtergrond: blauwgroen;
breedte: 100%;
hoogte: 100%;
}
}

Daarom zullen alleen die browsers die eigenschappen voor de zichtbaarheid van inhoud weergeven, een groenblauwe achtergrondkleur hebben; anders zou de standaardwaarde worden overwogen. Merk op dat @ vergelijkbaar is met @media van mediaquery's, waarbij je verondersteld werd een max-width of min-width in te stellen voor geïmproviseerde aanpassingen. Het vereenvoudigt het onthouden van de functiequery's @supports.

Lees verder: Mediaquery's gebruiken in HTML en CSS

Browsercompatibiliteit: alle belangrijke browsers, inclusief Chrome, Edge en Firefox.

6. content-visibility Property

Snelle weergave werkt als een ruggengraat voor een gebruikersinteractieve website. Met de toenemende populariteit van mobiele apparaten, fungeren de weergaveprestaties van een website als een knelpunt voor het krijgen van een aantrekkelijke website.

Hierbij speelt content-visibility property een cruciale rol. Omdat de browsers standaard alle elementen van de website in één keer weergeven. Het vermindert de laadtijd en de algehele prestaties van de site, vooral als uw website veel zware animaties heeft. Aan de andere kant geeft de eigenschap content-visibility alleen de viewport-elementen weer en worden andere elementen weergegeven terwijl u door de pagina bladert.

#hoofd {
inhoud-zichtbaarheid: auto;
/* bevat-intrinsieke-grootte: 0 500px; */
}

De eigenschap content-visibility voert drie waarden in. content-visibility: zichtbaar toont geen effect terwijl content-visibility: hidden is vergelijkbaar met display: geen waarbij het element de ontoegankelijke inhoud overslaat. De zichtbaarheid van de inhoud: automatisch slaat de irrelevante inhoud over, maar is beschikbaar als een normale pagina voor de user-agent-functies.

Laten we de kracht van de zichtbaarheid van inhoud meten. Hier is het resultaat:

7. Overgang, transformatie en animatie

In CSS hebben we twee manieren om animatie toe te passen. Overgang wordt gebruikt om vloeiende wijzigingen aan te brengen in visuele eigenschappen van elementen. Aan de andere kant, zonder overgang, zou transformatie abrupt manipuleren van de ene toestand naar de andere.

Animaties worden gebruikt met @keyframes die stijlen instellen op verschillende punten tijdens de duur van de animatie. Het interessante is dat @keyframes bepalen wanneer de wijziging plaatsvindt, transformatie en animatie nemen de verandering over, en transitie zorgt voor hoe de verandering zal plaatsvinden (bijv. hover-effecten).

.kind {
achtergrond: blauwgroen;
hoogte: 150px;
breedte: 150px;
kleur wit;
overgang: transform 0.2s gemak-in-out;
animatie: myAnimation 2s oneindig;
}
.child: zweef {
transformeren: schaal (2, 2) roteren (45deg);
}
@keyframes myAnimation {
0% {
}
50% {
transformeren: translateX(400px)
}
100% {
transformeren: translateX(0px)
}
}

Browsercompatibiliteit: alle belangrijke browsers, inclusief Chrome, Edge en Firefox.

Afsluiten

Trapsgewijze stylesheet-opmaak evolueert voortdurend met betere functies. Tot nu toe heb je kennis gemaakt met deze zeven geweldige functies, waaronder CSS-subraster, aspect-ratio-eigenschap, flexbox-hiaten, scroll-snap, functiequery's, eigenschap voor zichtbaarheid van inhoud, overgang, transformatie en animatie.

Aan het eind van de dag moet u ervoor zorgen welke functies de styling van uw website vereenvoudigen.

7 nieuwe functies om op te letten in Bootstrap 5

Als u websites en apps ontwikkelt met behulp van het Bootstrap CSS-framework, is dit wat er nieuw is in Bootstrap 5.

Lees volgende

Over de auteur