Heim > Artikel > Web-Frontend > Einige neue CSS-Funktionen in 4

Einige neue CSS-Funktionen in 4

DDDOriginal: 2024-10-30 17:01:02840Durchsuche

In diesem Artikel werden wir einige neue CSS-Funktionen im Jahr 2024 erkunden.

Wenn dir meine Artikel gefallen, kannst du mir gerne einen Kaffee spendieren :)
Some new features CSS in 4

1. CSS-Containerabfragen

Containerabfragen ermöglichen es Ihnen, abhängig von der Größe des Containers des Elements einen Stil auf ein Element anzuwenden. Containerabfragen funktionieren wie Medienabfragen.

Containerabfragen verwenden

Mithilfe von Containerabfragen können Sie den Stil untergeordneter Elemente innerhalb eines übergeordneten Elements entsprechend ihrer Größe dynamisch anpassen.

Dazu müssen Sie zunächst einen Containerkontext für das übergeordnete Element definieren. Dies legen Sie mit der Eigenschaft „container-type“ fest.

Behältertyp: Größe; Bei Einstellung können Sie sowohl nach Breiten- als auch nach Höhenwerten abfragen.
Containertyp: Inline-Größe; Bei Einstellung wird nur die Breite (horizontale Dimension) abgefragt.

Dank dieser Funktion können die Stileigenschaften von untergeordneten Elementen abhängig von der Größe des übergeordneten Elements geändert werden.

Beispiele :

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>

.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

Ausgabe:

Some new features CSS in 4

2. CSS-Verschachtelung

Mit CSS-Verschachtelung können Sie eine Regel in einer anderen platzieren. Dies ist besonders nützlich für die Verwaltung kontextabhängiger Stile. Wenn Sie beispielsweise eine .container-Klasse haben und deren .item-Elemente formatieren möchten, können Sie die .item-Regeln direkt in die .container-Regel schreiben. CSS Nesting wird direkt vom Browser analysiert. Das bedeutet, dass Sie keinen Präprozessor benötigen, um verschachtelte Regeln zu kompilieren; Sie funktionieren nativ im Browser.

Beispiele :

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

Ausgabe:

Some new features CSS in 4

3. :scope Pseudoklasse

Der Bereichsselektor wird verwendet, um den Bereich für Stile in CSS zu definieren.

Verwendung:

Wenn sich :scope auf der Stammebene eines CSS befindet, entspricht es :root

Beispiele :

<html></html>

:scope {
  background-color: orange;
}

Ausgabe:

Some new features CSS in 4

Die Verwendung von :scope innerhalb von @scope-Blöcken ermöglicht eine klare und gezielte Gestaltung basierend auf dem durch die Klassennamen definierten Kontext.

Beispiele :

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>

.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

Ausgabe:

Some new features CSS in 4

4. :has() Pseudoklasse

Mit dem :has()-Selektor in CSS können Sie ein übergeordnetes Element formatieren, wenn es ein bestimmtes untergeordnetes Element enthält.

Beispiele :

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

Ausgabe:

Some new features CSS in 4

5. Farbfunktionen

Mit neuen Farbfunktionen wie color-mix() und color-contrast() können Sie die Töne und Kontraste von Farben

viel besser steuern

Beispiele :

<html></html>

6. Ankerpositionierung

Das CSS-Ankerpositionierungsmodul definiert Funktionen, die es Ihnen ermöglichen, Elemente miteinander zu verbinden. Bestimmte Elemente werden als Ankerelemente definiert; Die Größe und Position von ankerpositionierten Elementen kann dann basierend auf der Größe und Position der Ankerelemente festgelegt werden, an die sie gebunden sind.

Abschluss

In diesem Artikel haben wir einige neue CSS-Funktionen im Jahr 2024 untersucht. Sie können diese Funktionen für die App nutzen.

Das obige ist der detaillierte Inhalt vonEinige neue CSS-Funktionen in 4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css define if for using class Property this location position

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie formatiere ich HTML-Elemente dynamisch mit Sass-Variablen: Includes vs. Mixins?Nächster Artikel：Wie formatiere ich HTML-Elemente dynamisch mit Sass-Variablen: Includes vs. Mixins?

In Verbindung stehende Artikel

Mehr sehen