Teilen Sie 12 fantastische CSS-Kenntnisse

Die folgenden fortgeschrittenen CSS-Techniken

• Verwenden Sie :not(), um Rahmen im Menü anzuwenden bzw. die Anwendung aufzuheben

• Zeilenhöhe zum Text hinzufügen

• Alles ist vertikal zentriert

• Durch Kommas getrennte Liste

• Verwenden Sie negatives n-tes Kind, um Elemente auszuwählen

• Verwenden Sie SVG

• für Symbole Anzeigetext optimieren

• Für reine CSS-Schieberegler verwenden Sie max-height

• ErbenBox-Größe

• TabelleGleichmäßige Breite der Zellen

• Verwenden Sie Flexbox, um verschiedene Hacks von Margen

• loszuwerden Verwenden Sie die Attributauswahl für leere Links

Verwenden Sie :not(), um Rahmen im Menü anzuwenden bzw. die Anwendung aufzuheben

Fügen Sie zunächst jedem Menüpunkt einen Rahmen hinzu

/* add border */
.nav li {
  border-right: 1px solid #666;
}

…und dann das letzte Element entfernen…

//* Rand entfernen */

.nav li:last-child {
  border-right: none;
}

...Sie können die Pseudoklasse :not() direkt verwenden, um Elemente anzuwenden:

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

Auf diese Weise ist der Code sauber, lesbar und leicht zu verstehen.

Wenn Ihr neues Element über Geschwisterelemente verfügt, können Sie natürlich auch den universellen Geschwisterselektor (~) verwenden:

..nav li:first-child ~ li {

  border-left: 1px solid #666;
}

Zeilenhöhe zum Text hinzufügen

Sie müssen line-height nicht separat zu jedem

, usw. hinzufügen. Fügen Sie es einfach zum Text hinzu:

body {
  line-height: 1;
}

Auf diese Weise können Textelemente problemlos von body erben.

Alles ist vertikal zentriert

Um alle Elemente vertikal zu zentrieren, ist es so einfach:

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

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

Sehen Sie, ist das nicht ganz einfach?

Hinweis: Seien Sie vorsichtig mit Flexbox in IE11.

Durch Kommas getrennte Liste

Lassen Sie HTML-Listenelemente wie eine echte, durch Kommas getrennte Liste aussehen:

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

Verwenden Sie die Pseudoklasse :not() für das letzte Listenelement.

Verwenden Sie ein negatives n-tes Kind, um das Element auszuwählen

Verwenden Sie in CSS das negative n-te Kind, um Element 1 bis Element n auszuwählen.

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

So einfach ist das.

Verwenden Sie SVG

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

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

SVG verfügt über eine gute Skalierbarkeit für alle Auflösungstypen und unterstützt alle Browser, die zu IE9 zurückkehren. Auf diese Weise können Sie .png-, .jpg- oder .gif-Dateien vermeiden.

Anzeigetext optimieren

Manchmal werden Schriftarten nicht auf allen Geräten optimal angezeigt. Lassen Sie sich daher von Ihrem Gerätebrowser helfen:

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

Hinweis: Bitte verwenden Sie „optimizeLegibility“ verantwortungsbewusst. Darüber hinaus bietet IE/Edge keine Unterstützung für die Textwiedergabe.

Verwenden Sie max-height

für reine CSS-Schieberegler Verwenden Sie die maximale Höhe und das Ausblenden von Überläufen, um einen reinen CSS-Schieberegler zu implementieren:

.slider ul {
  max-height: 0;
  overlow: hidden;
}

.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease;
}

Boxgröße übernehmen

Lassen Sie die Boxgröße HTML erben:

html {
  box-sizing: border-box;
}

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

Dadurch ist es einfacher, die Boxgröße in Plugins oder anderen Komponenten zu ändern, die andere Verhaltensweisen nutzen.

Tabellenzellen sind gleich breit

Die Arbeit mit Tabellen ist umständlich. Stellen Sie daher sicher, dass Sie table-layout:fixed verwenden, um die Zellen gleich breit zu halten:

.calendar {
  table-layout: fixed;
}

Verschiedene Hacks, um mit Flexbox Margen loszuwerden

Wenn Sie Spaltentrennzeichen verwenden müssen, können Sie die Hacks für das n-te, erste und letzte untergeordnete Element durch die Leerzeichen-Between-Eigenschaft von Flexbox beseitigen:

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

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

Listentrennzeichen werden jetzt in gleichmäßigen Abständen angezeigt.

Verwenden Sie die Attributauswahl für leere Links

Zeigen Sie den Link an, wenn das Element keinen Textwert, das href-Attribut jedoch einen Link hat:

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