CSS Profi-Tipps

Eine Sammlung an Tipps, um deine CSS-Fähigkeiten zu professionalisieren.

Für andere großartige Listen schaue dir [@sindresorhus](https://github.com/sindresorhus/)s kuratierte Liste von “awesome” Listen an.

Inhaltsverzeichnis

• Profi-Tipps
• Unterstützung
• Mitarbeitsrichtlinien

Profi-Tipps

1. Benutze ein CSS-Reset
2. Übernehme box-sizing
3. Benutze unset, anstatt alle Eigenschaften zurückzusetzen
4. Benutze :not() um Rahmen an die Navigation zu setzen oder zu entfernen
5. Kontroller, om skrifttypen er installeret lokalt
6. Ergänze line-height an body
7. Setze :focus für Form-Elemente
8. Zentriere alles vertikal
9. Kommaseparierte Liste
10. Selektiere Items mit einem negativen nth-child
11. Benutze SVG für Symbole
12. Benutze den “lobotomisierte Eule”-Selektor
13. Benutze max-height für reine CSS-Galerien
14. Setze Tabellenzellen auf die gleiche Weite
15. Benutze Flexbox, um von Margin-Hacks wegzukommen
16. Benutze den Attribut-Selektor mit leeren Verlinkungen
17. Gestalte “Standard”-Verlinkungen
18. Boxen mit zugehörigem Größenverhältnis
19. Gestalte defekte Bilder
20. Benutze rem für globales Ändern der Größe; Benutze em für lokale Größenveränderungen
21. Verstecke automatisch abspielende Videos, die nicht auf stumm gesetzt sind
22. Benutze :root für flexible Schrift
23. Setze font-size auf Formular-Elemente für eine bessere mobile Erfahrung
24. Benutze Pointer-Events um Mausereignisse zu kontrollieren
25. Stellen Sie bei Zeilenumbrüchen, die als Abstand verwendet werden, display: none ein

Benutze ein CSS-Reset

CSS Resets helfen dabei eine Gestaltungskonsistenz zwischen verschiedenen Browsern herzustellen, indem sie für einen sauberen Zustand zwischen den einzelnen Elementen sorgen. Du kannst eine CSS Resetsammlung wie Normalize, usw. benutzen, oder einen etwas einfacheren Ansatz wählen:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Nun werden Elemente von ihren Margins und Paddings befreit und box-sizing lässt dich das CSS Box-Modell handhaben.

Demo

Hinweis: Wenn du den Inherit box-sizing-Tipp im unten folgenden Punkt befolgst, kannst du dich dafür entscheiden keine box-sizing-Eigenschaft in dein CSS Reset aufzunehmen.

^{zurück zum Inhaltsverzeichnis}

Übernehme box-sizing

Übernehme box-sizing von html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Dies macht es einfacher das box-sizing über Plugins oder andere Komponenten zu verändern.

Demo

^{zurück zum Inhaltsverzeichnis}

Benutze unset, anstatt alle Eigenschaften zurückzusetzen

Wenn du die Eigenschaften eines Elements zurücksetzt, ist es nicht notwendig jede einzelne Eigenschaft individuell zurückzusetzen:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Du kannst alle Eigenschaften eines Elements spezifizieren, indem du das all-Kürzel verwendest. Der Wert unset setzt die Eigenschaften eines Elements auf den initialen Wert zurück:

button {
  all: unset;
}

Hinweis: Die Kurzform all und “unset” wird in IE11 nicht unterstützt.

^{zurück zum Inhaltsverzeichnis}

Benutze :not() um Rahmen an die Navigation zu setzen oder zu entfernen

Anstatt den Rahmen zu ergänzen…

/* füge den Rahmen hinzu */
.nav li {
  border-right: 1px solid #666;
}

…um ihn dann beim letzten Element wieder zu entfernen…

/* entferne den Rahmen */
.nav li:last-child {
  border-right: none;
}

…benutze die :not()-Pseudoklasse um nur die Elemente zu gestalten, die du willst:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Sicher, du kannst .nav li + li verwenden, aber mit :not() ist die Absicht sehr klar und der CSS Selektor definiert den Rahmen auf die Weise wie ihn auch ein Mensch beschreiben würde.

Demo

^{zurück zum Inhaltsverzeichnis}

Check If Font Is Installed Locally](#check-if-font-is-installed-locally)

Kontroller, om skrifttypen er installeret lokalt

Du kan kontrollere, om en skrifttype er installeret lokalt, før du henter den eksternt, hvilket også er et godt ydelsestip.

@font-face {
  font-family: "Dank Mono";
  src:
    /* Full name */
    local("Dank Mono"),
    /* Postscript name */
    local("Dank Mono"),
    /* Otherwise, download it! */
    url("//...a.server/fonts/DankMono.woff");
}

code {
  font-family: "Dank Mono", system-ui-monospace;
}

Hat tip til Adam Argyle for at dele denne protip og demoen.

^{zurück zum Inhaltsverzeichnis}

Ergänze line-height an body

Du brauchst kein line-height an jedes <p>, <h*>, usw separat zu schreiben. Ergänze es stattdessen an body:

body {
  line-height: 1.5;
}

Auf diese Weise können Textelemente dies einfach von body übernehmen.

Demo

^{zurück zum Inhaltsverzeichnis}

Setze :focus für Form-Elemente

Sehende Tastaturbenutzer_innen sind auf die Fokussierung angewiesen, um unterscheiden zu können wohin Tastaturevents auf der Seite gehen. Gestalte den Fokus für Formular-Elemente klar ersichtlich und konsistenter als die voreingestellte Browserimplementation:

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

Demo

^{zurück zum Inhaltsverzeichnis}

Zentriere alles vertikal

Nein, das ist keine Hexerei – du kannst wirklich alle Elemente vertikal zentrieren. Das machst du mit Flexbox…

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

…und ebenso mit CSS Grid:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

Möchtest du etwas anderes zentrieren? Vertikal, horizontal… alles, jederzeit, überall? CSS-Tricks hat eine schöne Ausarbeitung über all dies.

Hinweis: Passe auf das fehlerhafte Verhalten von Flexbox in IE11 auf.

Demo

^{zurück zum Inhaltsverzeichnis}

Kommaseparierte Liste

Lasse Listenpunkte wie eine echte kommaseparierte Liste aussehen:

ul > li:not(:last-child)::after {
  content: ",";
}

Benutze die :not()-Pseudoklasse, um nach dem letzten Listenpunkt kein Komma anzuzeigen.

Hinweis: Dieser Tipp mag hinsichtlich der Zugänglichkeit für Bildschirmvorleseprogramme nicht ideal sein. Auch Kopieren/Einfügen von browsergeneriertem Inhalt funktioniert nicht. Handle deswegen mit Vorsicht.

^{zurück zum Inhaltsverzeichnis}

Selektiere Items mit einem negativen nth-child

Benutze ein negatives nth-child im CSS um Items von 1 bis n auszuwählen.

li {
  display: none;
}

/* wähle die Listenpunkte 1 bis 3 und zeige sie an */
li:nth-child(-n+3) {
  display: block;
}

Anderweitig, da du nun ein bisschen über die Benutzung von :not() gelernt hast, versuche folgendes:

/* wähle alle Listenpunkte außer die ersten 3 und zeige sie an */
li:not(:nth-child(-n+3)) {
  display: block;
}

Demo

^{zurück zum Inhaltsverzeichnis}

Benutze SVG für Symbole

Es gibt keinen Grund SVG für Symbole nicht zu verwenden:

.logo {
  background: url("logo.svg");
}

SVG skaliert für alle verschiedenen Auflösungen sehr gut und wird von allen Browsern zurück bis zu IE9 unterstützt. Gebe deinen .png, .jpg, or .gif-jif-wasauchimmer-Dateien den Laufpass.

Hinweis: Wenn du nur SVG-Symbole in Button-Schaltflächen für sehende Benutzer_innen verwendest und das SVG nicht geladen wird, kannst du die Zugänglichkeit wie folgt erhalten:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

^{zurück zum Inhaltsverzeichnis}

Benutze den “lobotomisierte Eule”-Selektor

Er hat zwar einen seltsamen Namen aber der Universal-Selektor (*) mit dem angrenzenden Geschwister-Selektor (+) kann starke CSS-Möglichkeiten darbieten:

* + * {
  margin-top: 1.5em;
}

In diesem Beispiel bekommen alle Elemente im Fluss des Dokuments, die anderen Elementen folgen, margin-top: 1.5em.

Für mehr bezüglich des “lobotomisierte Eule”-Selektors lese Heydon Pickerings Eintrag auf A List Apart.

Demo

^{zurück zum Inhaltsverzeichnis}

Benutze max-height für reine CSS-Galerien

Implementiere reine CSS Galerien über max-height in Verbindung mit overflow: hidden:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

Das Element dehnt sich beim Überfahren zum Wert von max-height aus und die Galerie wird als das Ergebnis des Overflows dargestellt.

^{zurück zum Inhaltsverzeichnis}

Setze Tabellenzellen auf die gleiche Weite

Tabellen können ein ganz schönes Problem sein. Versuche table-layout: fixed, um die Tabellenzellen auf die gleiche Größe zu setzen:

.calendar {
  table-layout: fixed;
}

Schmerzfreie Tabellen-Layouts.

Demo

^{zurück zum Inhaltsverzeichnis}

Benutze Flexbox, um von Margin-Hacks wegzukommen

Wenn du mit Spaltenabständen arbeitest, kannst du dich von nth-, first- und last-child-Hacks verabschieden, indem du die Flexbox-Eigenschaft space-between verwendest:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Nun erscheinen Spaltenabstände immer gleichmäßig.

^{zurück zum Inhaltsverzeichnis}

Benutze den Attribut-Selektor mit leeren Verlinkungen

Zeige Verlinkungen an, wenn das <a>-Element keinen Textwert beinhaltet, das href-Attribut jedoch eine Verlinkung hat:

a[href^="http"]:empty::before {
  content: attr(href);
}

Das ist äußerst praktisch.

Demo

^{zurück zum Inhaltsverzeichnis}

Gestalte “Standard”-Verlinkungen

Ergänze eine Darstellung für die von Browsern voreingestellte Verlinkung:

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Nun werden Verlinkungen, die über ein CMS eingesetzt wurden – welche überlicherweise kein class-Attribut haben – unterscheidbar sein, ohne die Kaskade im Allgemeinen zu beeinflussen.

^{zurück zum Inhaltsverzeichnis}

Boxen mit zugehörigem Größenverhältnis

Um eine Box mit zugehörigem Größenverhältnis zu erstellen, brauchst du nur eine Padding-top/-bottom-Eigenschaft zu bezeichnen:

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Das Anwenden eines Wertes von 20% auf die Padding-Eigenschaft erzeugt eine Box mit der gleichen Höhe in Bezug auf 20% ihrer Breite. Ungeachtet der Weite des Ansichtsfensters, wird das Kind-Div sein Seitenverhältnis beibehalten (100% / 20% = 5:1).

Demo

^{zurück zum Inhaltsverzeichnis}

Gestalte defekte Bilder

Erzeuge mit einem kleinen bisschen CSS ästhetisch ansprechendere defekte Bilder:

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Nun ergänze Regeln für Pseudo-Elemente, die eine Nachricht für die Benutzer_innen darstellen, sowie eine URL-Referenz des defekten Bildes:

img::before {
  content: "Entschuldige bitte, das Bild ist leider defekt :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Lerne mehr über das Gestalten dieses Modells in Ire Aderinokuns ursprünglichen Beitrag.

^{zurück zum Inhaltsverzeichnis}

Benutze rem für globales Ändern der Größe; Benutze em für lokale Größenveränderungen

Nachdem du die grundlegende Schriftgröße (html { font-size: 100%; }) festgelegt hast, setze die Schriftgrößen für Textelemente auf em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Dann setze die Schriftgröße für Module auf rem:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

Nun sollte jedes Modul gegliedert, einfacher zu gestalten, wartbarer und flexibler sein.

^{zurück zum Inhaltsverzeichnis}

Verstecke automatisch abspielende Videos, die nicht auf stumm gesetzt sind

Das ist ein großartiger Trick für ein speziell angefertigtes Stylesheet. Vermeide es die Benutzer_innen mit den Geräuschen eines automatisch startenden Videos zu überfordern. Zeige das Video nicht, wenn die Töne nicht auf stumm geschaltet sind:

video[autoplay]:not([muted]) {
  display: none;
}

Erneut nutzen wir die :not()-Pseudoklasse zu unserem Vorteil.

^{zurück zum Inhaltsverzeichnis}

Benutze :root für flexible Schrift

Die Größe der Schriftart innerhalb eines responsive Layouts sollte mit jedem Ansichtsfenster veränderbar sein. Du kannst die Schriftgröße basierend auf der Höhe und Weite des Fensters berechnen, indem du :root verwendest:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

Nun kannst du die root em-Einheit verwenden, die auf den errechneten Werten von :root basiert:

body {
  font: 1rem/1.6 sans-serif;
}

Demo

^{zurück zum Inhaltsverzeichnis}

Setze font-size auf Formular-Elemente für eine bessere mobile Erfahrung

Um mobile Browser (iOS Safari, usw.) am Hereinzoomen in das HTML-Formular zu hindern sobald ein <select>-Dropdown betätigt wird, ergänze font-size zu der Regel des Selektors:

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

:dancer:

^{zurück zum Inhaltsverzeichnis}

Benutze Pointer-Events um Mausereignisse zu kontrollieren

Pointer-Events erlauben es dir zu spezifizieren wie die Maus mit dem Element interagiert sobald sie es berührt. Um beispielsweise das standardgemäß eingestellte Pointer-Event – beispielsweise bei einer Button-Schaltfläche – abzuschalten:

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

So einfach ist das.

^{zurück zum Inhaltsverzeichnis}

Stellen Sie bei Zeilenumbrüchen, die als Abstand verwendet werden, display: none ein

Wie Harry Roberts hervorhob, kann dies dazu beitragen, dass CMS-Benutzer keine zusätzlichen Zeilenumbrüche als Abstand verwenden:

br + br {
  display: none;
}

^{zurück zum Inhaltsverzeichnis}

Unterstützung

Aktuelle Versionen von Chrome, Firefox, Safari, Opera, Edge und IE11.