Odern CSS-Stile, die Sie kennen sollten in 4

TL;DR: Dieser Blog verwendet Codebeispiele, um fünf der besten CSS-Stile und -Funktionen für die Webentwicklung zu erkunden: Containerabfragen, Unterraster, Pseudoklassen, logische Eigenschaften und Laborfarbraum. Sie verbessern die Reaktionsfähigkeit, vereinfachen Layouts und verbessern die Designkonsistenz.

Cascading Style Sheets (CSS) ist eine bekannte Stilsprache, die zum Gestalten von Webseiten verwendet wird. Mit CSS können Sie HTML-Elemente anpassen, indem Sie Leerzeichen hinzufügen. Definieren von Farben, Schriftgrößen und Schriftstilen; und mehr. CSS hat sich in den letzten Jahren mit neuen Funktionen stark verbessert, um das Entwicklererlebnis zu verbessern.

In diesem Artikel werden fünf innovative CSS-Funktionen besprochen, die Sie in Ihrem nächsten Projekt verwenden können.

1. Containerabfragen

CSS-Containerabfragen führten einen neuen Ansatz für die Reaktionsfähigkeit ein. Zuvor haben wir Medienabfragen verwendet, um Benutzeroberflächen zu erstellen, die sich an unterschiedliche Bildschirmgrößen anpassen. Aber es war nicht so einfach, wie es sich anhört. Es gab Probleme in Bezug auf Wartung, Leistung, Flexibilität und Stilüberschneidungen.

Containerabfragen lösen diese Probleme, indem sie es Entwicklern ermöglichen, Elemente abhängig von der Größe ihres übergeordneten Containers anzupassen. Da diese Methode nicht von der Größe des Ansichtsfensters abhängt, werden die HTML-Komponenten vollständig modular und in sich geschlossen.

Im Folgenden finden Sie ein einfaches Beispiel dafür, wie Containerabfragen funktionieren.

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
@container (min-width: 500px) {
  .profile-card {
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 20px;
  }

  .profile-card header,
  .profile-card .bio {
    grid-column: 2;
  }

  .profile-card .profile-image {
    grid-row: 1 / 3;
    grid-column: 1;
  }
}

Diese Containerabfrage passt das Layout der Profilkarte an, wenn ihre Breite 500 Pixel oder mehr erreicht. Dadurch wird die Karte von einem gestapelten Layout (mit dem Bild oben) in ein zweispaltiges Layout geändert, bei dem das Bild links erscheint und der Textinhalt rechts ausgerichtet wird.

Siehe die folgenden Bilder.

Gestapeltes Layout

Zweispaltiges Layout

Containerabfragen sind in Designsystemen sehr nützlich, in denen Komponenten basierend auf ihrer unmittelbaren Umgebung und nicht auf der Grundlage des gesamten Ansichtsfensters angepasst werden müssen. Bei Containerabfragen fehlt jedoch immer noch die vollständige Browserunterstützung. Wenn Ihre Benutzer nicht unterstützte Browser oder ältere Versionen verwenden, kann es zu Stilproblemen kommen.

Quelle: CSS-Containerabfragen

Hinweis: Sehen Sie sich diese funktionierende Demo für CSS-Containerabfragen an.

2. Untergitter

Subgrid ist eine spannende Ergänzung zum CSS-Rasterlayoutmodell, mit der Sie die Rasterstruktur des übergeordneten Rastercontainers in untergeordnete Rasterelemente übernehmen können. Mit einfachen Worten: Mit einem Unterraster können Sie untergeordnete Elemente entsprechend den Zeilen oder Spalten des übergeordneten Rasters ausrichten. Mit dieser Methode können Sie problemlos komplexe verschachtelte Gitter erstellen, ohne verschachtelte Gitterüberschreibungen zu verwenden.

Im folgenden Codebeispiel verwendet das Layout einen Subgrid-Ansatz innerhalb einer Liste.

.product-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.product-card {
  display: grid;
  grid-template-rows: subgrid; /* Allows the nested grid to align directly with the parent grid */
}

Im Beispiel erstellt der Produkt-Wrapper ein flexibles Rasterlayout, um die Anzahl der Spalten basierend auf der Containerbreite zu steuern. Anschließend richtet jede Produktkarte ihre Zeilen direkt an den durch den Produkt-Wrapper definierten Rastern aus.

Subgrid ist besonders nützlich für E-Commerce-Websites, bei denen Produktkarten unterschiedliche Mengen an Inhalten enthalten können, aber ein einheitliches Erscheinungsbild beibehalten müssen.

Siehe die folgenden Bilder.

Übergeordnete Raster

Untergeordnetes Raster erstellt mit Untergitter-CSS

Hinweis: Sehen Sie sich die funktionierende Demo für CSS-Subgrid an.

3. Pseudoklassen

Pseudoklassen wie :hover, :focus und :first-child sind Optionen, die HTML-Elemente basierend auf ihrem Status und nicht auf ihrem Status auswählen Hierarchie oder Reihenfolge im Dokument. Mit diesen Selektoren können Entwickler interaktivere und reaktionsfähigere Benutzeroberflächen erstellen, ohne JavaScript zu verwenden.

Das folgende Codebeispiel demonstriert mehrere Pseudoklassen in Aktion.

// HTML
...
.hover-section:hover {
  background-color: rgb(82, 11, 145); /* Changes the background color on hover */
  color: white;
}
.input-section input[type="text"]:focus {
  border-color: orange; /* Highlights the input field when focused */
  background-color: lightyellow;
}
.list-section li:first-child {
  color: green; /* Styles the first item in a list */
}
.list-section li:last-child {
  color: red; /* Styles the last item in a list */
}

Dieses CSS-Codebeispiel zeigt, wie Sie die Benutzerinteraktion verbessern können, indem Sie Stile basierend auf Benutzeraktionen ändern, z. B. indem Sie mit der Maus darüber fahren oder sich auf Elemente konzentrieren, und wie Sie bestimmte untergeordnete Elemente eines Containers formatieren.

Diese Pseudoklassen sind sehr nützlich bei der Entwicklung von Formularen, Navigationsmenüs und interaktiven Inhalten, die visuelle Hinweise zur Steuerung von Benutzerinteraktionen erfordern.

Siehe das folgende Bild.

CSS Pseudo-Class Demo

Note: Check out this working demo for pseudo-classes.

4. Logical properties

CSS logical properties allow developers to manage layout and spacing in a direction-agnostic way. In other words, with CSS logical properties, you can use different writing modes, such as left-to-right (LTR) and right-to-left (RTL), without changing the structural code.

Here’s an example that uses logical properties for layout adjustments.

.lab-gradient-generator {
  margin-inline-start: 2rem; /* Responsive margin that adjusts based on text direction */
}
.lab-gradient-display {
  background: linear-gradient(
    to right, 
    lab(var(--l-start) var(--a-start) var(--b-start)), 
    lab(var(--l-end) var(--a-end) var(--b-end))
  ); /* Creates a gradient using LAB colors */
}

In this code example, margin-inline-start uses logical properties to ensure margins are always on the content starting side, adapting automatically to different writing systems. The background property with a LAB color gradient illustrates the use of logical properties in defining visually consistent color transitions.

Logical properties are particularly useful in global apps that require support for multiple languages, keeping the layouts the same regardless of directionality.

Refer to the following image.

Logical properties demo

Note: Refer to the working demo of how CSS logical properties can be used with internationalization.

5. Lab Color Space

Lab color space allows you to specify colors to align more closely with human vision. This method provides a broader and more precise range of colors, facilitating greater consistency across different displays.

Here’s a code example showcasing the usage of lab color space in CSS.

.color-strip:nth-child(1) {
  --l: 90%;
  --a: -80;
  --b: 80;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(2) {
  --l: 75%;
  --a: -40;
  --b: 40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(3) {
  --l: 60%;
  --a: 0;
  --b: 0;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(4) {
  --l: 45%;
  --a: 40;
  --b: -40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(5) {
  --l: 30%;
  --a: 80;
  --b: -80;
  background-color: lab(var(--l) var(--a) var(--b));
}

This code example sets up a series of divs (color-strip), each with a unique background color defined in the lab color space. It shows how lab colors produce a variety of hues and shades that are consistent across various displays.

Lab colors are invaluable in digital design, particularly in industries where color accuracy is critical, like digital art, online commerce, and brand design.

Refer to the following image.

Exploring LAB Colors

Note: For more details, refer to the lab color space demo.

Conclusion

Thanks for reading! These CSS features offer unique advantages and new possibilities to improve the functionality and the user experience of your app. They also improve the developer experience, since these features simplify complex tasks for them.

So, make sure to try these examples yourself and implement them in your next web app to make it a modern one.

Related blogs

• React Styling: Essential Tips and Tricks for Designers
• Top 7 Ways to Write CSS in Your React or Next.js App
• Responsive Web Design Evolved: Introducing CSS Container Queries
• CSS Flex: What Every Developer Should Know

Das obige ist der detaillierte Inhalt vonOdern CSS-Stile, die Sie kennen sollten in 4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!