Leistungsstarkes und stabiles CSS für den Werkzeuggürtel, das Sie heute nutzen können.
Ich glaube, jeder Frontend-Entwickler sollte wissen, dass :has() mehr als nur ein übergeordneter Selektor ist
das Wie und Warum von subgrid, wie Sie mit integrierter CSS-Syntax verschachteln, wie Sie die
und die Verwendung von Container-Abfrageeinheiten.
Dieser Post ist eine Fortsetzung von Sechs CSS-Snippets aus dem letzten Jahr, die jeder Frontend-Entwickler 2023 kennen sollte.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has() war Ende 2023 in allen gängigen Browsern verfügbar. Dieser neue Selector scheint
klein und unschuldig sind. Sie werden jedoch überrascht sein, welche Anwendungsfälle damit möglich sind:
Spiele, Reaktivität, inhaltsbewusstes Layout, intelligente Komponenten
und viele weitere Informationen finden Sie in diesem Artikel von Jhey.
Hier sind einige Beispiele für die Verwendung von :has() als übergeordneten Selektor. Es hat diesen Namen, weil
Normalerweise befindet sich das Subjekt eines Selektors am Ende, z. B. ul li, wobei li der Betreff ist
und erhält die Stile. Mit :has() kann das Element am Anfang des Selektors zu
das Subjekt. Im folgenden Beispiel weist die Schaltfläche eine Lücke auf, wenn sich darin ein Element befindet.
mit der Klasse .icon. Die Ausrichtung der Karte ändert sich, wenn ein Bild darin enthalten ist.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Ein Selektor sollte ein Layout basierend auf der Anzahl der Elemente ändern. Dies ist jetzt möglich
durch :has(), da dadurch der Container als Betreff beibehalten kann, während die Anzahl der untergeordneten Elemente abgefragt wird.
main:has(> :nth-child(5)) {…}
Ein weiteres übergeordnetes Beispiel: Stile für das gesamte Dokument ändern Wenn ein bestimmtes Kästchen auf der Seite aktiviert ist:
html:has(#dark-mode:checked) {…}
Dies sind einfache Anwendungsfälle, bei denen sich das Thema des Selektors nicht ändert, wenn man sich nur die Beispiele ansieht.
wie hier dargestellt, könnten Sie denken, dass :has() nur ein Selektor für übergeordnete Elemente ist. Hier einige Tipps:
Beispiele. Diese suchen nach Inhalten, die auf einem gemeinsamen Vorgänger basieren, und pivotieren dann den Selektor
irgendwo auf der Seite einem Kind ausgesetzt sind.
Hier sehen Sie ein Fehlerelement für das Formular, wenn eine der Eingaben ungültig ist:
form:has(:user-invalid) .error {
display: block;
}
Hier wird der Hauptinhaltsbereich herausgeschoben, wenn eine seitliche Navigationsleiste die Klasse .--is-open hat:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Hier ist eine unterhaltsame Demo, in der :has() als übergeordneten Selektor verwendet wird, :has() mit Mengenabfragen,
und Containerabfragen erstellen, um ein Rasterlayout zu erstellen, das elegant verschiedene
1 bis 12 Elemente im Hoch- oder Querformat:
Subraster erstellen
subgrid
Viele Jahre lang bat die Frontend-Web-Community um Subgrid, die äußerst beliebte und leistungsstarke CSS-Raster-Engine. Es ist jetzt in allen drei großen Suchmaschinen verfügbar.
Weitere Informationen zu Subgrid
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
CSS verschachteln
nesting
Die integrierte CSS-Verschachtelung ist seit 2023 in allen gängigen Browsern verfügbar. Ich habe sogar meine Website aktualisiert, um den Erstellungsprozess zu entfernen, ein kleineres Stylesheet. Ja, Stylesheets mit Verschachtelung sind kleiner und die Entwicklertools bereit sind.
Hier finden Sie eine Übersicht über die Syntax für CSS-Verschachtelungen. . Das folgende Codebeispiel zeigt ein Syntaxbeispiel.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Den Browser ausbalancieren lassen
balance
pretty
Ohne text-wrap: balance müssen Entwickler und Texter Hinweise zum Zeilenumbruch einfügen
wie <wbr>-Elemente oder ­. Meistens ist es eine Niederlage, denn sobald die
übersetzt, gezoomt oder verändert wurde, gibt es keine Garantie dafür,
Wrapping-Hinweise an der richtigen Stelle für die neue Präsentation des Inhalts sein.
Mit dem ausgewogenen Textumbruch können Sie diese Arbeit dem Browser überlassen. Einen Vergleich sehen Sie im folgenden Codepen.
Container-Abfrageeinheiten verwenden
cqw
Der Beitrag aus dem letzten Jahr schlug vor, dass alle Frontend-Entwickelnden wissen sollten, wie ein Containerabfrage. Wenn Sie es noch nicht gelernt haben: Machen Sie 2024 zu dem richtigen Jahr, und auch Container-Abfrageeinheiten. Als Übersicht Ahmad Shadeed hat 2021 einen tollen Artikel über Container-Abfrageeinheiten verfasst.
Es gibt sechs neue Konzahleinheiten:
- Eine Inline-Variante
cqi. - Eine Variante für die Breite:
cqw. - Eine Blockvariante
cqb. - Eine Höhenvariante
cqh. - Eine Variante für die jeweilige Länge, die kürzer ist:
cqmin. - Eine Variante für die jeweilige Länge, die größer ist:
cqmax.
Stellen Sie sich ein Szenario mit relativen und unveränderlichen Animationen in einem Container vor. Ein untergeordnetes Element, das vollständig aus seinem Container herausgeschoben wird, mit 100cqi, also 100% der Inline-Größe des Containers.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Hier ist eine Karte mit einer Container-responsiven Typografie und einem Bild, das sich an die die Ausrichtung des Containers, also halb so groß, wenn das Querformat verwendet wird.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Falls Sie noch nicht mit diesen Einheiten vertraut sind, empfiehlt es sich, alle Einheiten ansehen, die dir 2024 zur Verfügung stehen.