Hier eine Sammlung von CSS-Schnipseln, die man für bestimmte Situationen oder einfach nur zum Spaß verwenden kann. Let´s start:

Bild-Rendering

img.QRcode {
  image-rendering: pixelated;
}

Diese Eigenschaft ist nützlich, um QR-Codes und Bildminiaturen zu rendern, um deren Qualität zu erhöhen.


Führen Sie den Stil auf Safari 11+ aus

@supports (padding: env(safe-area-inset)) {
  /* Your code for Safari 11+ */
}

Die Funktion env() und die Umgebungsvariablen sind in von Safary 11+ implementiert, um Apple iPhone X-Bildschirme zu unterstützen.
Sie können mehr Informationen hier lesen


Check empty nodes

my-component:empty {
display: none;
}

Elemente ohne Inhalt verstecken.
Returns und white spaces gelten als Inhalt.

Text gestalten

p {
shape-outside: polygon(0 0, 0 200px, 300px 600px);
}

Die Art und Weise verändern wie der Inhalt sich um die floated Elemente wickelt.

Einfaches SVG als Hintergrund

my-component {
  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');
}

Verwenden Sie <svg> als CSS-Hintergrund, ohne es in base64 zu konvertieren.

Deaktivieren Sie alle Benutzerinteraktionen

[data-untouchable] {
pointer-events: none;
}

Deaktivieren Sie alle Benutzerinteraktionen, sogar js-Ereignisse, mit nur einer Eigenschaft.

Saubere und in sich geschlossene Komponente

my-component {
all: initial;
contain: content;
}

Stilbereinigte und in sich geschlossene Komponente mit zwei Eigenschaften.
Mit contain: content wird ein neuer stacking-context erstellt / fixierte Koordinaten verweisen auf diese Eigenschaft.

Overflow snapping

my-component {
  scroll-snap-type: mandatory;
  scroll-snap-destination: 50% 50%;
}

Scrollfang für Elemente mit Überlauf steuern.

Systemschriftsatz

<my-component {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                Helvetica, Arial, Ubuntu, sans-serif,
                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Systemschriftarten verwenden, um eine konsistente Typografiedarstellung zu gewährleisten.

Bei Formularen prüfen, ob es keinen Wert gibt

.Note {
opacity: 0;
transition: opacity 200ms ease-out;
}

input:not(:placeholder-shown) + .Note {
opacity: 1;
}

Mit dieser Pseudoklasse können Sie prüfen, ob die Eingabe einen Wert hat.

 

Quelle