7 neue Funktionen für eine responsive Website

Modernes CSS übernimmt die gesamte Kontrolle über das Website-Styling mit Hilfe des erforderlichen JavaScripts. In diesem Artikel stellen wir sieben neue CSS-Updates vor, um die Zukunft des Stylings zu vereinfachen. Darüber hinaus erwägen wir die Browserunterstützung von Chrome, Edge und Firefox. Schließlich werden wir die Probleme, Lösungen und so ziemlich alles besprechen, was Sie brauchen, um sofort loszulegen.

In Anbetracht all der Tricks und Techniken sind hier einige handverlesene CSS-Funktionen, die Ihre Zeit wert sind. Lassen Sie uns also ohne weitere Umschweife direkt darauf eintauchen.

1. CSS-Unterraster

Im Gegensatz zu CSS flexbox's Fähigkeit, sich nur in eine Richtung zu bewegen, können Sie beide Dimensionen in Rastern definieren. Da sie in den kommenden Jahrzehnten immer mächtiger und beliebter werden, sind enorme Veränderungen in Webdesigns zu beobachten. Verschachtelte Raster werden verwendet, um Raster innerhalb der Raster zu zeichnen. Aber was sind die größten Nachteile, die den Ruf nach CSS-Untergittern ausgelöst haben?

• Verschachtelte Raster nach Level 2 wurden verwendet, um Inhalte außerhalb des größeren Rasters zu überlaufen, was sich stark auf die Reaktionsfähigkeit einer Website auswirkte.
• Verschachtelte Gitter fungierten als unabhängige Elemente innerhalb des größeren Gittercontainers. Es gab überhaupt keinen Verweis auf den übergeordneten Container für eine Änderung.

Ohne Unternetze:

Nach Teilnetzen:

So implementieren Sie Unterraster:

 .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;
 }

Sie können mehrere Unterraster platzieren. Die bemerkenswerte Ausnahme besteht darin, dass Unterraster die übergeordnete Rasterlückeneigenschaft erben. Dies führt dazu, dass alle Unterraster mit denselben Lückeneigenschaften innerhalb jedes übergeordneten Rasters erstellt werden.

Das Beste an Subgrids ist, dass sie sehr reaktionsschnell, anpassbar und skalierbar sind.

Browserkompatibilität: Firefox

2. Seitenverhältnis Eigenschaft

Sie können alle Anpassungs- und Berechnungsprobleme beseitigen, indem Sie das Seitenverhältnis eines bestimmten Containers ändern. Wenn Sie ein Video einfügen möchten, müssen Sie lediglich ein Seitenverhältnis relativ zur unterschiedlichen Bildschirmgröße festlegen. Bei der Arbeit mit zweidimensionalen Mehrfachgittern kann es jedoch zu Überläufen und Standardansichten kommen.

Sie können dies beheben, indem Sie die Seitenverhältnis-Eigenschaft mit dem width-Attribut unterstützen. Es ist praktisch für responsive Bilder, da Sie eine Höhe oder Breite definieren können.

So implementieren Sie die Seitenverhältnis-Eigenschaft:

 
.container {
 width: 700px;
 aspect-ratio: 16 / 9;
 background: rgb(72, 170, 137);
 }

Sie können auch das Seitenverhältnis: auto eingeben, anstatt das Verhältnis anzugeben. Der Nachteil des automatischen Standardwerts ist, dass der Browser die Originalabmessungen des Bildes auswählt. Zweifellos behindert dies die Reaktionsfähigkeit der Website.

Browserkompatibilität: Chrome, Edge, Firefox (teilweise)

3. Flexbox-Lücke

Gitterlücken sind sehr beliebt, um zwischen jedem Gitter einen gleichen Abstand zu schaffen. Sie sollten jedoch negative Ränder, Pseudoklassenselektoren und komplexe Selektoren anwenden, um den Abstand zwischen den einzelnen Flex-Elementen zu handhaben. Somit führt die Flexbox-Lücke zu weniger Codezeilen bei höherer Skalierbarkeit.

So implementieren Sie die Flexbox-Lücke:

 
.container {
 width: 700px;
 height: 500px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 1em;
 }

Ausgabe:

Browserkompatibilität: Alle gängigen Browser, einschließlich Chrome, Edge und Firefox.

4. Scroll-Snap

Scrollen hilft dabei, mehr Informationen über eine einzelne Website zu teilen, ohne die Webkopie zu überladen. Der größte Nachteil des Scrollens ist jedoch, dass es bei der Hälfte des Paras oder des Bildes anhalten kann. Manchmal wird die Kontrolle von paginiertem Inhalt auf halbem Weg verlassen. JavaScript wird mit Bedacht verwendet, um eine Scroll-Anpassung zu vermeiden. Aber es war kein völlig zufriedenstellendes Ergebnis, bis CSS Scroll Snap kam.

Mit Scroll Snap können Sie spezifische Grenzen definieren, um das Layout und die Sichtbarkeit eines bestimmten Containers festzulegen. Es funktioniert zum Beispiel großartig, Karussells und bestimmte Website-Abschnitte zu erstellen. Beachten Sie, dass Sie JS für keine Anpassungen benötigen.

So implementieren Sie den 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%;
 }

Ausgabe:

CSS-Scroll-Snap hat eine Parent- und Child-Eigenschaft. Die Eltern- oder Containereigenschaft bestimmt die Richtung des Bildlaufs (x oder y) und das Verhalten des Bildlauffangs. Sie können beispielsweise den Scroll-Snap-Typ festlegen: x obligatorisch. Es gewährt dem Benutzer die Kontrolle über den Bildlaufpunkt, ohne die Bildlaufposition zu berücksichtigen.

Auf der anderen Seite funktioniert der Scroll-Snap-Typ: y Proximity nur, wenn sich der Website-Besucher näher am Scrollpunkt befindet.

Die untergeordnete Eigenschaft ist scroll-snap-align, um die Elemente während des CSS-Scroll-Snaps auszurichten. Es gibt Start-, End- und Mittelwerte ein, um die Elemente entsprechend auszurichten.

5. Funktionsabfragen

Feature-Abfragen werden verwendet, um eine anmutige Verschlechterung zu behandeln. Zum Beispiel sind CSS-Grids heutzutage sehr beliebt. Es ist jedoch erwähnenswert, dass ältere Browser es nicht rendern können.

Hier überprüfen Funktionsabfragen, ob dieser bestimmte Browser eine bestimmte Eigenschaft unterstützt oder nicht, und bietet ein Unterstützungssystem, das den Verweis auf eine CSS-Eigenschaft nur dann anregt, wenn sie von diesem Browser unterstützt wird. Andernfalls wird der Standardwert berücksichtigt. In diesem Fall können Sie für jeden vorhergesagten Fallback Blöcke anstelle von Rastern platzieren.

So implementieren Sie Feature-Abfragen:

 @supports (content-visibility: auto) {
 body{
 background: teal;
 width: 100%;
 height: 100%;
 }
 }

Daher haben nur die Browser, die Inhaltssichtbarkeitseigenschaften rendern, eine blaugrüne Hintergrundfarbe. andernfalls würde der Standardwert berücksichtigt. Beachten Sie, dass @ @media von Medienabfragen ähnelt, bei denen Sie eine maximale Breite oder eine minimale Breite festlegen sollten, um behelfsmäßige Anpassungen vorzunehmen. Es vereinfacht das Erinnern an die Feature-Abfragen @supports.

Lesen Sie mehr: So verwenden Sie Media Queries in HTML und CSS

Browserkompatibilität: Alle gängigen Browser, einschließlich Chrome, Edge und Firefox.

6. Inhaltssichtbarkeitseigenschaft

Schnelles Rendering dient als Rückgrat für eine benutzerinteraktive Website. Mit der zunehmenden Popularität mobiler Geräte fungiert die Rendering-Performance einer Website als Flaschenhals, um eine ansprechende Website zu erhalten.

Dabei spielt die Content-Sichtbarkeitseigenschaft eine entscheidende Rolle. Denn standardmäßig rendern die Browser alle Elemente der Website auf einmal. Es verringert die Ladezeit und die Gesamtleistung der Website, insbesondere wenn Ihre Website viele umfangreiche Animationen enthält. Auf der anderen Seite rendert die content-visibility-Eigenschaft nur die Ansichtsfensterelemente und zeigt andere Elemente an, während Sie durch die Seite scrollen.

 #main {
 content-visibility: auto;
 /* contain-intrinsic-size: 0 500px; */
 }

Die Eigenschaft content-visibility gibt drei Werte ein. content-visibility: visible zeigt keinen Effekt, während content-visibility: hidden ähnlich wie display: none ist, wenn das Element den unzugänglichen Inhalt überspringt. Die Inhaltssichtbarkeit: überspringt automatisch den irrelevanten Inhalt, steht jedoch als normale Seite für die Benutzeragentenfunktionen zur Verfügung.

Lassen Sie uns die Macht der Inhalts-Sichtbarkeit messen. Hier ist das Ergebnis:

7. Übergang, Transformation und Animation

In CSS haben wir zwei Möglichkeiten, Animationen anzuwenden. Der Übergang wird verwendet, um sanfte Änderungen der visuellen Eigenschaften von Elementen vorzunehmen. Andererseits würde die Transformation ohne Übergang abrupt von einem Zustand in einen anderen manipulieren.

Animationen werden mit @keyframes verwendet, die Stile an mehreren Punkten während der Animationsdauer festlegen. Das Interessante ist, dass @keyframes definieren, wann die Änderung stattfindet , Transformation und Animation die Kontrolle über die Änderung übernehmen und Transition sich darum kümmert, wie die Änderung erfolgt (z. B. Hover-Effekte).

 .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)
 }
 }

Browserkompatibilität: Alle gängigen Browser, einschließlich Chrome, Edge und Firefox.

Einpacken

Cascading Stylesheet Markup wird ständig mit besseren Funktionen weiterentwickelt. Bisher haben Sie diese sieben großartigen Funktionen kennengelernt, darunter CSS-Untergitter, Seitenverhältnis-Eigenschaft, Flexbox-Lücken, Bildlauf-Snap, Funktionsabfragen, Inhaltssichtbarkeits-Eigenschaft, Übergang, Transformation und Animation.

Letztendlich müssen Sie sicherstellen, welche Funktionen Ihr Website-Styling vereinfachen.