Schauen wir uns über 50 interessante CSS-Eigenschaften  Werte an

Kann das mit CSS gemacht werden? Brauche ich JavaScript? Ich weiß, dass viele von uns diese Fragen stellen, wenn sie Designs und Interaktionen betrachten. Vor kurzem habe ich mich entschlossen, mich mit CSS zu beschäftigen und alle Eigenschaften zu lernen. Ich habe viel Zeit damit verbracht, Referenzmaterial zu lesen, Code zu schreiben und neue Lösungen für alte Probleme mit meinem neu gewonnenen Wissen zu finden.

Auf meiner Reise dachte ich, ich würde 50 der interessantesten Eigenschaften und Werte, die ich gefunden habe, dokumentieren und vorstellen. Ich habe für viele von ihnen Anwendungsfälle mit vereinfachten Codebeispielen erstellt, die Sie sich ansehen, referenzieren und damit experimentieren können. Ich habe auch eine Reihe von Eigenschaften aufgenommen, die noch experimentell sind, aber wahrscheinlich bald verwendbar sein werden. Außerdem habe ich mehrere bekannte Eigenschaften mit weniger bekannten Werten aufgenommen, damit Sie Ihr Wissen darüber vertiefen können, auch wenn Sie davon bereits gehört haben. Es gibt hier auch einige browserspezifische Dinge.

Los geht's!

all

Die Eigenschaft all setzt alle anderen Eigenschaften (außer unicode-bidi und direction) auf ihren Anfangs- oder geerbten Zustand zurück. Sie akzeptiert diese Werte

initial: setzt alle Eigenschaften des Elements oder des Elternelements auf ihren Anfangswert
inherit: setzt alle Eigenschaften des Elements oder des Elternelements auf den Wert ihres Elternelements
unset: setzt alle Eigenschaften des Elements oder des Elternelements auf den Wert ihres Elternelements, wenn diese vererbbar sind, oder auf ihren eigenen Wert, wenn nicht

Siehe den Pen reset: all von Greg Hovanesyan (@gregh) auf CodePen.

angle

Winkel können gültige CSS-Werte für einige Eigenschaften sein. Wir verwenden oft etwas wie transform: rotate(180deg), aber „deg“ ist hier nicht die einzige mögliche Einheit. Sie können auch grad, rad und turn verwenden. Unser transform: rotate(180deg) könnte beispielsweise auch als transform: rotate(0.5turn) geschrieben werden. Wenn Sie ein Element viermal drehen möchten, ist rotate(4turn) möglicherweise die einfachste Wahl.

Ich habe es in Chrome 54, Opera 41, Firefox 50 und Safari 10 getestet.

Siehe den Pen angle~ von Greg Hovanesyan (@gregh) auf CodePen.

animation-fill-mode

Diese Eigenschaft legt fest, welche Stile auf das Element angewendet werden, wenn die Animation *nicht* abgespielt wird. Stellen Sie sich eine @keyframe-Animation vor, die ein Element ausblendet (von opacity: 1; zu opacity 0;). Standardmäßig springt es nach Abschluss der Animation zurück in seinen Ausgangszustand.

Siehe den Pen Fading out animation von Greg Hovanesyan (@gregh) auf CodePen.

Durch die Verwendung von animation-fill-mode: forwards; können wir das Element ausgeblendet lassen, indem die Stile des letzten Keyframes beibehalten werden.

Siehe den Pen Fading out and keep styling von Greg Hovanesyan (@gregh) auf CodePen.

Es akzeptiert die folgenden Eigenschaften

none: (Standard) das Element erhält seinen Anfangsstil, wenn die Animation nicht ausgeführt wird
forwards: Die Animation wendet die Werte des zuletzt ausgeführten Keyframes an. Beachten Sie, dass dies nicht der Zustand des „100%“- oder „to“-Keyframes sein muss. Wenn Sie animation-iteration-count auf 1,5 setzen, ist der letzte Keyframe der 50%-Keyframe. Oder, wenn animation-direction auf reverse gesetzt ist, ist der letzte Keyframe der „0%“- oder „from“-Keyframe.
backwards: wendet die im Keyframe zu Beginn der Animation definierten Eigenschaftswerte an
both: die Animation folgt den Regeln von sowohl forwards als auch backwards
initial: setzt animation-fill-mode auf seinen Standardwert
inherit: das Element erbt den Wert von animation-fill-mode von seinem Elternelement

Sie können in der beliebten Bibliothek Animate.css sehen, dass die Klasse .animated animation-fill-mode: both verwendet.

animation-iteration-count

Diese Eigenschaft definiert die Anzahl der Wiederholungen einer @keyframe-Animation. Sie kann auch ein nicht-ganzzahliger Wert sein, wie animation-iteration-count: 1.5, was bedeutet, dass ein voller Animationszyklus plus die Hälfte des Zyklus abgespielt wird.

Siehe den Pen animation-iteration-count von Greg Hovanesyan (@gregh) auf CodePen.

backface-visibility

Diese Eigenschaft legt fest, ob die „Rückseite“ des Elements sichtbar ist, wenn das Element gedreht wird. Sie wird mit 3D-Transformationen verwendet. Akzeptiert die folgenden Werte

visible: (Standard) die Rückseite des Elements ist sichtbar, wenn es gedreht wird
hidden: die Rückseite des Elements ist nicht sichtbar
initial: setzt die Eigenschaft auf ihren Standardwert (visible)
inherit: übernimmt den Eigenschaftswert von seinem Elternelement

Diese Beispiele werden das veranschaulichen

Siehe den Pen backface-visibility von Greg Hovanesyan (@gregh) auf CodePen.

Siehe den Pen backface-visibility – flipping cards von Greg Hovanesyan (@gregh) auf CodePen.

background-attachment

Diese Eigenschaft legt fest, ob das background-image beim Scrollen der Seite fest im Ansichtsfenster bleibt oder mit der Seite scrollt.

Scroll: (Standard) der Hintergrund ist an das Element gebunden und scrollt nicht mit dem Inhalt
Fixed: der Hintergrund bleibt beim Scrollen der Seite (oder des Elements) fest
Local: scrollt mit dem Inhalt des Elements, wenn das Element scrollbar ist

Siehe den Pen background-attachment von Greg Hovanesyan (@gregh) auf CodePen.

background-blend-mode

Diese Eigenschaft legt fest, wie Hintergrundbilder, Farbverläufe und Farben von Elementen miteinander gemischt werden. Sie können zum Beispiel ein background-image und background-color hinzufügen und dann den blend-mode auf „lighten“ setzen. Sie können auch mehrere Mischmodi angeben, einen pro Hintergrund.

Die folgenden Mischmodi können verwendet werden

• color
• color-burn
• color-dodge
• darken
• difference
• exclusion
• hard-light
• hue
• lighten
• luminosity
• multiply
• overlay
• saturation
• screen
• soft-light

Siehe den Pen background-blend-mode von Greg Hovanesyan (@gregh) auf CodePen.

background-clip

Die Eigenschaft background-clip definiert den Bereich des Elements, auf den der Hintergrund angewendet wird. Sie können den Hintergrund unter seinen Rand laufen lassen oder nur den Bereich seines Inhalts füllen.

border-box: (Standard) erlaubt, dass sich der Hintergrund bis zur äußeren Kante des Rahmens erstreckt
content-box: der Hintergrund wird auf die Inhaltsbox des Elements zugeschnitten
padding-box: der Hintergrund wird auf die äußere Kante des Padding des Elements zugeschnitten, sodass er auf Inhalt und Padding angewendet wird, aber nicht unter dem Rand
text: der Hintergrund wird auf den Vordergrundtext zugeschnitten.

Siehe den Pen background-clip von Greg Hovanesyan (@gregh) auf CodePen.

background-origin

Diese Eigenschaft definiert, ob der Hintergrund nur auf den Inhaltsbereich des Elements oder auch auf den Padding- und Randbereich angewendet wird. Der Unterschied zu background-clip besteht darin, dass background-clip den Hintergrund zuschneidet und background-origin ihn skaliert.

box-decoration-break

Diese Eigenschaft legt fest, wie der Hintergrund, das Padding, der Rand, der Box-Schatten, der Abstand und der Ausschnitt eines Elements angewendet werden, wenn es auf mehrere Zeilen umbrochen wird. Wenn wir Text haben, der auf mehreren Zeilen umbrochen wird, würde dies normalerweise die Höhe des Elements erhöhen. box-decoration-break kann jedoch die Formatierung auf jede Zeile einzeln anwenden, anstatt auf das gesamte Element.

clone: jedes Fragment des Elements erhält eine Formatierung, Schatten und Abstände werden individuell für jedes Fragment angewendet
slice: das Element wird gerendert, als ob das Element nicht fragmentiert wäre

Hinweis: Sie können box-decoration-break nur auf Inline-Elemente anwenden. Laut MDN können Sie es nur in Firefox und Chrome für Inline-Elemente verwenden, aber ich habe es getestet und aktuelle Browser zeigen unterschiedliche Ergebnisse. Es funktioniert in Firefox und Chrome 54, Opera 41 und Safari 10 mit dem -webkit- Präfix.

Siehe den Pen box-decoration-break von Greg Hovanesyan (@gregh) auf CodePen.

calc()

Die Funktion calc() kann verwendet werden, um Werte zu erstellen. Zum Beispiel: width: calc(100% - 32px) lässt ein Element die volle Breite minus 32 Pixel haben. Es kann sehr nützlich sein, um eine Spaltenbreite festzulegen und die Abstände abzuziehen. Es ist kein Verschachteln von zwei Elementen und Zuweisen von Padding zum Elternelement mehr nötig, um das gleiche Ergebnis zu erzielen.

Sie akzeptiert einen Ausdruck mit Additions-, Subtraktions-, Multiplikations- und Divisionsoperatoren. Operanden können beliebige syntaxlange Werte sein. Sie können sogar so etwas tun wie calc(var(--someValue) / 2 - 2em)

Ein Fallback wäre so für Browser, die es nicht unterstützen

width: 98%; /* fallback for browsers without support for calc() */    
width: calc(100% - 1em);

column-count

Die Eigenschaft column-count legt die Anzahl der Spalten fest, die ein Element hat. column-count: 3 teilt den Text des Elements (oder Inline-Elemente) in 3 Spalten auf. Sie können sie auf inline-block und block Elemente anwenden. Dies funktioniert nicht bei einem Element mit display: table, aber bei table-cell.

Es gibt eine Reihe weiterer Spalten-* Eigenschaften

column-gap: die Eigenschaft legt die Größe des Abstands zwischen den Spalten fest
column-rule: ist eine vertikale Linie zwischen den Spalten, die sie visuell trennt. Es ist eine Kurzschreibweise für die Festlegung dieser 3 Eigenschaften (ähnlich wie border-*)
column-rule-color: legt die Farbe der Linie fest. Der Wert kann ein benannter Farbname (red, green, transparent), Hex, rgb/rgba, hsl/hsla-Farbwerte sein
column-rule-style: legt den Stil der Linie fest. Sie akzeptiert die folgenden Werte: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
column-rule-width: legt die Breite der Linie fest und akzeptiert benannte Werte (thin, medium, thick), px, em, initial, inherit und unset

Siehe den Pen columns von Greg Hovanesyan (@gregh) auf CodePen.

content

Die Eigenschaft content wird in Verbindung mit Pseudoelementen wie ::before und ::after verwendet. Hier ist ein Trick, den Sie damit machen können. Es ist eine gute Möglichkeit, eine durch Kommas getrennte <ul> zu erstellen.

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

counters

Zähler ermöglichen es uns, Elementen Nummern (Indizes) zu geben. Zum Beispiel haben Sie einen Artikel mit mehreren Themen, jedes Thema hat am Anfang eine <h2>-Überschrift und Sie haben <h3>-Unterüberschriften. Sie können diese automatisch nummerieren!

Es gibt vier Eigenschaften, um mit Zählern zu arbeiten

counter-reset: setzt einen Zähler zurück oder erstellt einen. Der Wert dieser Eigenschaft ist der Name des Zählers, den Sie definieren
counter-increment: erhöht den Zähler. Der Wert dieser Eigenschaft ist der Name des Zählers, den Sie erhöhen möchten
content() verwendet die :before Pseudoklasse und content(), um den Index zu den Elementen hinzuzufügen
counter() Funktion, um den Wert des Zählers abzurufen

body {
  counter-reset: heading; /* init the counter for headings (you can give it any other name) */
}
h2 {
  counter-increment: heading; /* increments the counter on every <h1> tag */
  counter-reset: subheading;  /* here we init or reset the subheading */
  /* so that we get 1.1, 1.2, 1.3, then after new heading it will go 2.1, 2.2, 2.3 */
}
h2:before {
  content: counter(heading) " - "; /* using :before selector and counter() function we can add the index to the heading */
}
h3 {
  counter-increment: subheading; /* increment the subheading counter on every <h2> tag */
}
h3:before {
  content: counter(heading) "." counter(subheading) " - ";
}

Siehe den Pen counters von Greg Hovanesyan (@gregh) auf CodePen.

currentColor

Das Schlüsselwort currentColor repräsentiert den berechneten Wert der Farbeigenschaft des Elements.

.parent {
  color: #ccc;
  border: 1px solid currentColor;
}
.child {
  background: currentColor;
}

Ein weiterer nützlicher Trick ist, SVG-Icons die Farbe von Button-Texten folgen zu lassen.

button {
  color: red;
}
button svg {
  fill: currentColor;
} 

filter

Die Eigenschaft filter wendet visuelle Effekte auf Elemente an. Sie enthält vordefinierte Funktionen wie blur, brightness, contrast, sepia; und Sie können auch benutzerdefinierte SVG-Filter anwenden.

Siehe den Pen filters von Greg Hovanesyan (@gregh) auf CodePen.

Sie können mehrere Filter kombinieren, um komplexe Effekte zu erzielen. Hier sind einige Beispiele, in denen Instagram-ähnliche Filter neu erstellt wurden mit Filtern.

Hier ist ein Trick: Sie können eine Basisfarbe in eine völlig andere Farbe umwandeln, indem Sie Filter verwenden. Dies geschieht durch Manipulation von Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness). Dazu müssen Sie Farben von RGB in HSL umwandeln, dann die H-, S- und L-Werte subtrahieren. Ich habe einen einfachen Rechner erstellt, der einen Filter generiert, der die Basisfarbe in eine ungefähr gegebene Zielfarbe umwandelt.

Siehe den Pen Converting colors using filters von Greg Hovanesyan (@gregh) auf CodePen.

flex

Die Eigenschaft flex ist eine Kurzschreibweise als Teil des Flexbox-Layouts. Die häufigste Verwendung ist flex: 1;, was ein Element dazu bringt, so viel Platz wie möglich einzunehmen, oder wie viel Platz es mit anderen Elementen teilt, die ebenfalls die Flex-Eigenschaft verwenden, ausbalanciert. Der Standardwert für flex ist 0 1 auto.

flex-flow

Die Eigenschaft flex-flow ist eine CSS-Kurzschreibweise für flex-direction und flex-wrap. Sie akzeptiert die Werte von flex-direction (row, row-reverse, column, column-reverse), Werte von flex-wrap (nowrap, wrap, wrap-reverse). Aber Sie können sie auch so verwenden: flex-flow: row nowrap;

flex-basis

Die Eigenschaft flex-basis legt die Anfangsgröße eines Flex-Elements fest (ähnlich wie width in einem horizontalen Flexbox-Layout). Sie akzeptiert Breitenwerte wie px, em und auto. Sie akzeptiert auch intrinsische Größen-Schlüsselwörter: fill, max-content, min-content und fit-content, aber diese funktionieren derzeit nur in Edge.

font-kerning

Die Eigenschaft font-kerning legt fest, ob der Browser die im Font gespeicherten Kerning-Informationen verwenden oder diese deaktivieren soll. Sie akzeptiert die folgenden Werte

auto: der Browser entscheidet, ob er die im Font gespeicherten Kerning-Informationen verwendet oder nicht
normal: Kerning wird angewendet
none: verhindert, dass der Browser Kerning-Informationen verwendet

Sie verwenden diese Eigenschaft nicht, um den Schriftsatz manuell anzupassen, was die manuelle Anpassung des Abstands zwischen einzelnen Zeichen bedeutet. Wenn Sie den Abstand zwischen allen Buchstaben anpassen müssen, gibt es dafür letter-spacing, auch bekannt als Tracking. Wenn Sie mehr über die tatsächliche Schriftsatzanpassung im Web erfahren möchten, finden Sie hier einige Artikel zum Erkunden

• Advanced web typography: Kerning von Elliot Jay Stocks
• Kerning on the Web von Bram Stein
• A Manual Kerning Method for the Web von Nathan Ford

font-smoothing

Die Eigenschaft font-smoothing steuert, wie Kantenglättung auf die Schrift angewendet wird. Das Problem ist, dass Ihre Schrift nach der Standard-Browser-Kantenglättung etwas anders aussehen kann als das, was Sie in Design-Software sehen. Hier ist die Situation zwischen Webkit und Firefox

-webkit-font-smoothing

none: schaltet die Kantenglättung aus, zeigt Schriften mit scharfen Kanten an
antialiased: glättet die Schrift auf Pixelebene, dies lässt helle Schrift auf dunklem Hintergrund heller aussehen
subpixel-antialiased: glättet die Schrift auf Subpixelebene für ein besseres Aussehen auf Nicht-Retina-Displays

-moz-osx-font-smoothing

auto: lässt den Browser die Glättungsmethode wählen
grayscale: rendert Text mit Graustufen-Kantenglättung. Dies ergibt eine ähnliche Ausgabe wie „antialiased“ in Webkit und lässt helle Schrift auf dunklem Hintergrund heller aussehen.

Siehe den Pen font-smoothing von Greg Hovanesyan (@gregh) auf CodePen.

font-variant

Der Wert small-caps für font-variant ermöglicht es uns, Text in kleinen Großbuchstaben anzuzeigen. Dies kann nützlich sein, wenn er zusammen mit dem CSS-Selektor ::first-line verwendet wird.

Siehe den Pen font-variant von Chris Coyier (@chriscoyier) auf CodePen.

grid

Grid-Layout in CSS ermöglicht es uns, zweidimensionale Grids zu erstellen, ohne die Probleme, die wir früher mit Tabellen und Floats hatten. Es ist eine gute Idee, es jetzt zu lernen, da die breite Unterstützung bald kommen wird.

Ein Grid besteht aus dem Container und den darin enthaltenen Elementen. Dann müssen Sie festlegen, wie der Platz zwischen Zeilen und Spalten verteilt wird. Die Werte repräsentieren Spaltengrößen und Sie können ihnen auch Namen geben.

.container {
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Beachten Sie in „grid-template-columns“, dass die erste und fünfte Spalte 40 Pixel breit sind, die zweite und vierte Spalte 50 Pixel breit sind und die Spalte in der Mitte den Rest des Platzes erhält. Sehen wir uns an, wie man ein Element innerhalb des Containers positioniert. Wir müssen tatsächlich den Start- und Endpunkt des Elements festlegen. Das Element hätte die folgende CSS-Anwendung darauf.

.item {
  grid-column-start: 2; // will start at the point where the second column starts
  grid-column-end: 5;   // will end at the point where the second column starts
  grid-row-start: 1;    // will start at the point where the first row starts
  grid-row-end: 3;      // will end at the point where the third row starts
}

hyphens

Die Eigenschaft hyphens legt fest, wie der Browser den Text mit Bindestrichen versieht.

none: keine Bindestriche angewendet, der Text wird den Container überlaufen
auto: der Browser wird den Text automatisch mit Bindestrichen versehen
manual: manuelle Angabe möglicher Bruchpunkte

Es gibt zwei Zeilenumbruchzeichen, die Sie verwenden können

­ – teilt dem Browser mit, dass es eine Stelle im Text ist, an der bei Bedarf eine Silbentrennung vorgenommen werden kann
&amphyphen; – rendert den Bindestrich, auch wenn die Zeile nicht umbrochen wird

Siehe den Pen hyphens von Greg Hovanesyan (@gregh) auf CodePen.

image-rendering

Die Eigenschaft image-rendering legt fest, wie das Bild gerendert wird, wenn es skaliert wird. Browser wenden automatisch Aliasing auf skalierte Bilder an, und Sie können dies mit diesen Eigenschaften steuern.

auto: (Standard) der Browser wendet automatisch Aliasing an
crisp-edges: der Kontrast und die Kanten werden beibehalten, damit sie beim Skalieren nicht geglättet oder verschwommen werden
pixelated: dieser Wert wird nur auf vergrößerte Bilder angewendet und lässt das Bild pixelig erscheinen

Siehe den Pen image-rendering von Greg Hovanesyan (@gregh) auf CodePen.

list-style-image

Obwohl wir meistens list-style-type: none; auf dem <ul> verwenden und dann einen Hintergrund auf dem <li> anwenden, können Sie immer noch die Eigenschaft list-style-image auf das <ul> Element anwenden, um ein Bild als Markierung in der Liste zu verwenden.

ul {
  list-style-image: url('square.gif');
}

list-style-position

Die Eigenschaft list-style-position gibt an, wo die Listenmarkierung erscheinen soll. Sie akzeptiert zwei Werte

inside: Markierungen erscheinen innerhalb der Inhaltsbox des Listenelements
outside: Markierungen erscheinen außerhalb der Inhaltsbox des Listenelements

object-fit

Die Eigenschaft object-fit gibt an, wie ein Bild (<img>) Element in die durch seine Höhe und Breite festgelegte Box passt. Standardmäßig wird ein Bild gequetscht oder gestreckt (wenn nötig), um sich den Abmessungen der Bildbox anzupassen. Aber mit dieser Eigenschaft können Sie andere Optionen wählen, um es zu skalieren, während seine Proportionen intern beibehalten werden.

fill: (Standard) Der Inhalt des Elements wird so bemessen, dass er die gesamte Inhaltsbox ausfüllt (ohne das Seitenverhältnis beizubehalten)
contain: Der Inhalt des Elements wird in die Inhaltsbox eingefügt, wobei das Seitenverhältnis beibehalten wird
cover: Der Inhalt des Elements wird in die Inhaltsbox eingefügt, wobei das Seitenverhältnis beibehalten wird, aber der gesamte Platz ausgefüllt wird
none: Der Inhalt wird nicht in der Größe verändert, sondern mit der angegebenen Höhe und Breite zugeschnitten
scale-down: wählt automatisch zwischen contain und none und wählt die Option, die die kleinste Objektgröße ergibt

Siehe den Pen object-fit von Greg Hovanesyan (@gregh) auf CodePen.

Ohne object-fit müssten wir ein übergeordnetes Element und absolute Positionierung (und andere Eigenschaften) verwenden, um ähnliche Ergebnisse zu erzielen

.element {
  width: 400px;
  height: 300px;
  position: relative;
}
.element img {
  position: absolute;
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

Mit object-fit: contain; wird es viel einfacher

img {
  width: 400px;
  height: 300px;
  object-fit: contain;
}

Seien Sie gewarnt, dass es in IE11 und Edge 14 und 15 nicht funktioniert. Opera Mini unterstützt es mit dem Präfix -o-. Bei den restlichen Browsern funktioniert es großartig ohne Präfixe.

orphans

Diese Eigenschaft hilft Ihnen, Zeilenumbrüche im Text zu steuern. Sie akzeptiert einen numerischen Wert, der die Mindestanzahl von Zeilen des Blockcontainers (z. B. eines Absatzes) angibt, die am Ende der Seite verbleiben sollen, wenn der gesamte Container nicht auf die Seite oder in die Spalte passt.

Leider wird dies derzeit nicht in Firefox unterstützt.

order

Die Eigenschaft order gibt die Elemente innerhalb eines Flex-Containers an. Der Wert ist eine Zahl, die auch negativ sein kann, oder "inherit", "initial", "unset".

<div class="flex-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.item:nth-child(1) { order: 3 }
.item:nth-child(2) { order: 1 }
.item:nth-child(3) { order: 2 }

Dieser Code zeigt die Elemente in der Reihenfolge 2, 3, 1 an.

overflow-wrap

Diese Eigenschaft gibt an, ob ein Zeilenumbruch in langen Wörtern erfolgen soll, wenn diese nicht als ganzes Wort in den Container passen.

normal: Zeilenumbrüche an normalen Umbruchstellen
break-word: Normalerweise ununterbrechbare Wörter umbrechen, wenn kein Platz vorhanden ist

Sie akzeptiert auch alle normalen globalen Werte: inherit, initial, unset.

page-break-*

Es gibt drei CSS-Eigenschaften, mit denen Sie Seitenumbrüche anpassen können

page-break-before: steuert Seitenumbrüche vor dem Element
page-break-after: steuert Seitenumbrüche nach dem Element
page-break-inside: steuert Seitenumbrüche innerhalb des Elements

Diese sind nützlich, wenn Sie steuern möchten, wie Seiten gedruckt werden. Dies sind die möglichen Werte dafür

auto: Seiten automatisch umbrechen
always: fügt immer einen Seitenumbruch vor oder nach dem Element ein (auch wenn viel Platz vorhanden ist)
avoid: vermeidet, wenn möglich, Seitenumbrüche vor/nach/innerhalb des Elements
left: fügt einen Seitenumbruch ein, sodass die nächste Seite als linke Seite formatiert wird
right: fügt einen Seitenumbruch ein, sodass die nächste Seite als rechte Seite formatiert wird
recto: wirkt wie rechts, wenn die Seite von links nach rechts verläuft, und wie links, wenn sie von rechts nach links verläuft
verso: wirkt wie links, wenn die Seite von links nach rechts verläuft, und wie rechts, wenn sie von rechts nach links verläuft

Es gibt mehrere Dinge, die Sie wissen sollten

1. Die Werte recto und verso sind noch experimentell
2. Die Eigenschaft page-break-* wird in naher Zukunft durch die generischere Eigenschaft break-* ersetzt werden
3. Die meisten Browser unterstützen *nur* page-break-inside (nicht page-break-before oder page-break-after)
4. Alle Browser außer Opera Mini, IE und Edge behandeln die Werte "left" und "right" wie "always"
   daher ist es eine gute Idee, zu prüfen, ob Sie es verwenden können.

percentage

Prozentuale Werte sind wie width: 10%. In diesem Beispiel wäre das Element, auf das es angewendet wird, 10% der Breite des übergeordneten Elements. Aber es gibt auch andere Eigenschaften, die auf der Breite des übergeordneten Elements basieren. Zum Beispiel padding. Wenn wir einen Container haben, der 400 Pixel breit und 300 Pixel hoch ist und padding-top: 10% und padding-left: 10% hat, dann ist der Abstand auf beiden Seiten 40 Pixel (nicht 40 Pixel und 30 Pixel)!

perspective

Die CSS-Eigenschaft perspective verleiht einem Element eine 3D-Perspektive (sie ist nur für 3D-transformierte Elemente relevant). Ihr Wert ist der Abstand von der Ansicht zum z-Plan der Elemente. Der Wert ist eine Länge, die in px oder em angegeben werden kann, oder das Schlüsselwort "none".

Die Eigenschaft muss auf das übergeordnete Element (den Container) oder das Element angewendet werden, auf das die Perspektive angewendet werden soll.

Siehe den Pen perspective von Greg Hovanesyan (@gregh) auf CodePen.

pointer-events

Diese Eigenschaft gibt an, wie Elemente auf Mausereignisse reagieren.

auto: das Element verhält sich normal
none: ignoriert alle Klicks, Auswahlen, Ziehaktionen usw.

Es hat auch spezielle Werte, die für SVG-Elemente einzigartig sind

visiblePainted: der gefüllte und der gestrichelte Teil des Elements sind ein Ziel. Die visibility muss auf visible und der stroke-Wert auf etwas anderes als none gesetzt sein.
visibleFill: nur der gefüllte Teil des Elements ist ein Ziel. Die visibility muss auf visible gesetzt sein.
visibleStroke: nur der gestrichelte Teil des Elements ist ein Ziel. Der stroke-Wert muss etwas anderes als none sein.
visible: der gefüllte und der gestrichelte Teil des Elements sind ein Ziel, wenn die visibility des Elements auf visible gesetzt ist.
painted: der gefüllte und der gestrichelte Teil des Elements sind ein Ziel. Die visibility des Elements beeinflusst die Ereignisverarbeitung nicht.
fill: nur der gefüllte Teil des Elements sind ein Ziel. Die visibility des Elements beeinflusst die Ereignisverarbeitung nicht.
stroke: nur der gestrichelte Teil des Elements sind ein Ziel. Die visibility des Elements beeinflusst die Ereignisverarbeitung nicht.
all: das gesamte Element ist ein Ziel. Die Eigenschaften fill, stroke und visibility des Elements beeinflussen die Ereignisverarbeitung nicht.

position

Sie sind wahrscheinlich mit Positionswerten wie static, relative, absolute und fixed vertraut. Es gibt noch einen weiteren interessanten Wertsticky.

Elemente mit position: sticky werden als relative behandelt, bis sie einen bestimmten Punkt erreichen, dann werden sie zu fixed. Denken Sie an: iPhone-Kontaktlisten-Buchstaben-Lesezeichen oder Scroll-then-Fix-Navigation. Dies ist normalerweise etwas, das wir mit JavaScript machen müssten, aber jetzt ist es in reinem CSS machbar.

Siehe den Pen position: sticky von Greg Hovanesyan (@gregh) auf CodePen.

resize

Die Eigenschaft resize definiert, ob das Element vom Benutzer in der Größe verändert werden kann. Sie können ein Element vertikal, horizontal oder beides resizebar machen.

none: das Element ist nicht resizebar. Dies ist der Standardwert für die meisten Elemente, außer textarea, das standardmäßig "both" ist
both: in beide Richtungen resizebar
horizontal: horizontal resizebar
vertical: vertikal resizebar

Wichtig: Damit ein Element resizebar ist, muss sein overflow auf etwas anderes als visible gesetzt sein.

shape-outside

Die Eigenschaft shape-outside ermöglicht es uns, Text in einer Form um ein gefloatetes Element zu fließen. Vielleicht ist es ein rundes Bild und Sie möchten, dass Text um diesen Kreis fließt. Die Eigenschaft wird auf das Element angewendet, um das der Inhalt fließen soll. Sie akzeptiert die folgenden Werte

Schlüsselwortwerte: none, margin-box, padding-box, border-box, padding-box
Funktionswerte: circle(), ellipse(), inset(), polygon()

Sie können auch eine URL zu einem Bild übergeben, um das herum der Inhalt fließen soll, und sie akzeptiert die globalen Werte initial, inherit und unset.

Wenn Sie sich entscheiden, ein Bild zu verwenden, definiert die Eigenschaft shape-image-threshold den Alphakanal-Schwellenwert, um die Form vom Bild zu trennen. Firefox und IE unterstützen diese Eigenschaft noch nicht, und Safari unterstützt sie mit dem -webkit- Präfix.

Mehr über all das im Almanac.

Siehe den Pen shape-outside von Greg Hovanesyan (@gregh) auf CodePen.

@supports

Diese CSS @-Regel gibt Ihnen die Möglichkeit zu prüfen, ob der Browser bestimmte Eigenschaften (oder Eigenschaft/Wert-Kombinationen) unterstützt, bevor Sie sie verwenden.

@supports (display: grid) {
  .container {
    display: grid;
  }
}            

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

Sie können mehrere Eigenschaften auf diese Weise kombinieren

@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {

}

var()

Die Funktion var() ist Teil der Verwendung von CSS-benutzerdefinierten Eigenschaften.

CSS-Variablen werden von Autoren definiert und repräsentieren spezifische Werte, die mehrmals im Dokument verwendet werden können. Die Funktion var() kann als Wert jeder Eigenschaft verwendet werden, aber nicht als Eigenschaft oder Selektor. Der erste Wert der Funktion ist der Name der benutzerdefinierten Eigenschaft; der zweite ist ein optionaler Fallback-Wert, der verwendet wird, wenn das erste Argument ungültig ist.

Schauen wir uns die Syntax an

:root {
  --primary-color: #cccccc;
}
body {
  color: var(--primary-color);
}

Mit einem Fallback-Wert

body {
  color: var(--primary-color, #cccccc);
}

In Sass wäre das genauso wie

$primary-color: #ccc;

body {
  color: $primary-color;
}

Aber beachten Sie, dass benutzerdefinierte Eigenschaften und Präprozessor-Variablen nicht ganz dasselbe sind.

Leider werden benutzerdefinierte Eigenschaften in IE11, Edge 14 und Opera mini nicht unterstützt. Edge 15 wird teilweise unterstützt.

table-layout

Wollten Sie schon einmal, dass alle Zellen in einer Tabelle die gleiche Breite haben?

table {
  table-layout: fixed;
}

Siehe den Pen table-layout: fixed von Greg Hovanesyan (@gregh) auf CodePen.

Hier gibt es mehr Informationen zu all dem.

text-transform

Die Eigenschaft text-transform kann die Groß-/Kleinschreibung von Text in lowercase oder uppercase ändern. Sie können auch den ersten Buchstaben jedes Wortes mit capitalize großschreiben.

Ein zu beachtender Punkt: Ist es korrekter, ALL CAPS-Schrift direkt im HTML zu verwenden oder normal geschriebenen Text zu verwenden und text-transform: uppercase in CSS zu verwenden, um ihn zu ändern? Es ist wahrscheinlich besser, CSS zu verwenden. Zum Beispiel, Kontaktieren Sie uns vs KONTAKTIEREN SIE UNS. Ein Screenreader könnte "Kontakt U.S." mit Großbuchstaben im HTML vorlesen, anstatt "Kontaktieren Sie uns".

transition-timing-function

Die Eigenschaft transition-timing-function gibt die Geschwindigkeitskurve des Übergangseffekts an, wie z. B. ease-in oder ease-out. Hier sind zwei weniger bekannte Werte

steps(n, start|end): anstatt glatte Übergänge mit Timing-Funktionen wie ease anzugeben, schließt dies die Animation in der von Ihnen definierten Anzahl von Schritten ab. Der zweite Parameter ist optional und gibt an, an welchem Punkt innerhalb des Intervalls die Änderung stattfinden soll. Die Standardwerte für den zweiten Parameter sind end. Sie können auch die Kurzschreibfunktionen step-start(n) und step-end(n) verwenden.
cubic-bezier(n, n, n, n): Ihre eigene kubische Bezier-Funktion.

Siehe den Pen transition-timing-function von Greg Hovanesyan (@gregh) auf CodePen.

Verwenden Sie dieses Tool, um kubische Bezier-Timing-Funktionen zu erstellen.
Sie können auch die Chrome-Entwicklertools verwenden, um die Bezier-Kurve zu modifizieren.

vh, vw, vmin, vmax

Diese Werte werden verwendet, um Dinge relativ zur Ansichtsfenstergröße zu dimensionieren. Während width immer relativ zum übergeordneten Container ist, verwenden vh oder vw immer die Ansichtsfenstergröße als Basis.

vh: 1 vh entspricht 1/100 der Ansichtsfensterhöhe
vw: 1 vw entspricht 1/100 der Ansichtsfensterbreite
vmin: es ist der kleinste Wert von vh und vw
vmax: ist der größte Wert davon

Für ein Browserfenster mit einem Ansichtsfenster von 1280x655px entspricht 1vh 6,55 Pixel, 1vw entspricht 12,8 Pixeln, vmin ist 6,55 Pixel (kleinster der beiden Werte) und vmax ist 12,8 Pixel (größter der beiden Werte).

white-space

Diese Eigenschaft definiert, wie der Leerraum innerhalb des Elements behandelt wird.

normal: Zeilenumbrüche zusammenführen, Leerzeichen und Tabs zusammenführen, Textumbruch
nowrap: Zeilenumbrüche zusammenführen, Leerzeichen und Tabs zusammenführen, kein Textumbruch
pre: Zeilenumbrüche beibehalten, Leerzeichen und Tabs beibehalten, kein Textumbruch
pre-wrap: Zeilenumbrüche beibehalten, Leerzeichen und Tabs beibehalten, Textumbruch
pre-line: Zeilenumbrüche beibehalten, Leerzeichen und Tabs zusammenführen, Textumbruch

Siehe den Pen dNPZpX von Greg Hovanesyan (@gregh) auf CodePen.

word-break

Diese Eigenschaft gibt die Zeilenumbruchregeln an.

normal: verwendet Standardregeln zum Umbrechen von Wörtern
break-all: Zeilen können zwischen zwei beliebigen Buchstaben umgebrochen werden
keep-all: Umbrüche zwischen Buchstaben sind verboten

Siehe den Pen word-break von Greg Hovanesyan (@gregh) auf CodePen.

word-spacing

Das Äquivalent von letter-spacing, aber für Wörter! Sie können den Abstand zwischen Wörtern erhöhen (oder verringern). Der Standardwert für diese Eigenschaft ist normal, der den Standard-Leerzeichen von 0,25em verwendet.

will-change

Die Eigenschaft will-change ermöglicht es Autoren, Browsern mitzuteilen, welche Änderungen an einem Element erwartet werden. Änderungen, also Änderungen an Eigenschaftswerten, wahrscheinlich als Teil einer Animation. Die Idee ist, dem Browser einen Hinweis auf geplante Animationen zu geben, da der Browser dies nicht immer vorhersagen kann. Wenn Sie einen Hinweis geben, kann er die Leistung optimieren.

normal: Standardoptimierungen durchführen
scroll-position: den Browser auf Änderungen der Scroll-Position vorbereiten
content: der Inhalt des Elements wird sich ändern

Sie können auch spezifische Eigenschaften festlegen, die Sie ändern werden, wie z. B.:

.will-be-animated {
  will-change: top, left;
}

Vor der Einführung dieser Eigenschaft haben wir Tricks wie diese verwendet, um den Browser dazu zu bringen, bestimmte Elemente mit besserer Leistung zu animieren (indem wir das Element "auf die GPU zwangen")

.will-be-animated {
  transform: translate3d(0, 0, 0);
}

Dieser Artikel ist eine gute tiefgehende Lektüre zum Thema.

writing-mode

Die Eigenschaft writing-mode definiert, ob der Text horizontal oder vertikal sowie die Richtung ist.

horizontal-tb: Inhalt fließt von links nach rechts, von oben nach unten
vertical-rl: Inhalt fließt von oben nach unten, von rechts nach links
vertical-lr: Inhalt fließt von oben nach unten, von links nach rechts

Siehe den Pen writing-mode von Greg Hovanesyan (@gregh) auf CodePen.

:-webkit-autofill

Diese CSS-Pseudoklasse entspricht Eingabeelementen, die vom Browser mit Autofill gefüllt wurden. Dies gibt Ihnen die Möglichkeit, diesen Stil zu ändern. In Chrome haben sie beispielsweise standardmäßig einen gelben Hintergrund.

-webkit-overflow-scrolling

Diese Eigenschaft ermöglicht es uns, das iOS-Schwungrad-Scrolling auf Elementen auf Touch-Geräten zu aktivieren. Es gibt zwei Werte

auto: normale Scrollfunktion verwenden, bei der das Scrollen stoppt, sobald Sie Ihren Finger vom Bildschirm nehmen
touch: Schwungrad-Scrolling verwenden

-webkit-touch-callout

Diese Eigenschaft ermöglicht es uns, den Standard-Callout auf iOS-Geräten zu verbergen. Wenn Sie das Ziel berühren und gedrückt halten, erscheint ein Menü mit Informationssteuerelementen.

none: deaktiviert den Callout
default: der Callout wird angezeigt

-webkit-scrollbar

Es gibt eine Möglichkeit, die Scrollleiste auf einem Element zu verstecken

#container::-webkit-scrollbar {
  display: none;
}

Es gibt auch eine Möglichkeit, Scrollleisten in IE10+ und Edge automatisch auszublenden.

html {
  -ms-overflow-style: ms-autohiding-scrollbar;
}

Animatable

Hier ist die vollständige Liste der CSS-Eigenschaften, die animiert werden können. Wir wenden Übergänge meistens auf Opacity, Hintergrundfarbe usw. an, aber es ist gut zu wissen, dass wir andere Dinge animieren können, wie zum Beispiel letter-spacing.

Siehe den Pen animating letter-spacing von Greg Hovanesyan (@gregh) auf CodePen.