Heim >Web-Frontend >CSS-Tutorial >Einige neue CSS-Funktionen in 4
Einige neue CSS-Funktionen in 4
- DDDOriginal
- 2024-10-30 17:01:02908Durchsuche
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 :)
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:
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:
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:
- 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:
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:
5. Farbfunktionen
Mit neuen Farbfunktionen wie color-mix() und color-contrast() können Sie die Töne und Kontraste von Farben
viel besser steuernBeispiele :
<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!