Derzeit gibt es rund 330 CSS-Properties – alles in allem überschaubar, aber trotzdem bewegt sich der Webworker irgendwie immer um die gleichen CSS-Properties wie width, height, background et cetera. Und wer hätte es gedacht: Selbst bei den „gängigen“ CSS-Properties gibt es noch Neues zu entdecken.

Jeder, der mit CSS zu tun hat, wird es schon verwendet haben: das color-Property. Aber dieses Property kann mehr als nur die Textfarbe zu definieren.

This property describes the foreground color of an element’s text
content. In addition it is used to provide a potential indirect value
… for any other properties that accept color values.W3C

Das color-Property dient also um eine grundlegende Vordergrundfarbe zu definieren, und somit können damit auch alt-Attribute, border-Attribute und die Aufzählungszeichen bei un- beziehungsweise geordneten Listen verändert werden.

Im Gegensatz zu display:none besetzt visibility:hidden Raum im DOM, blendet das HTML-Element selbst aber aus.

Im Zusammenspiel mit Tabellen gibt es neben visible und hidden noch einen dritten Status: collapse. Ähnlich wie display:none sorgt der dritte Visibility-Status dafür, dass andere Zeilen den ausgeblendeten Raum im DOM befüllen können. Allerdings ist die Darstellung aktuell noch von Browser zu Browser unterschiedlich und somit inkonsitent.

Seit CSS Level 2.1 kann das Shorthand-background-Property fünf Attribute umfassen, nämlich: background-color, background-image, background-repeat, background-attachment und background-position. Level 3 von CSS ergänzt diese fünf mit drei weiteren Properties:

background: [background-color] [background-image] [background-repeat]
            [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];

See the Pen New background shorthand values by SitePoint (@SitePoint CSS) on CodePen.

Der Slash erlaubt euch die background-size anzugeben, nachfolgend die Angabe zu background-origin und background-clip.

Neben dem background-clip-Property gibt es auch noch clip. Dieses Property ermöglicht es Webworkern eine Beschneidung vorzunehmen – zum Beispiel von Bildern.

See the Pen clip property requires position: absolute by SitePoint (@SitePoint) on CodePen.

Allerdings funktioniert dieses Property nur, wenn das zu beschneidenen Element als absolute definiert wurde.

Prozentuelle Breitenangaben werden – wie man das erwarten darf – anhand der Container-Breite berechnet. Auch die prozentualen Wertangaben bei den top– und bottom-Werten der margin– und padding-Properties werden über die Breite eines Elements berechnet. Aber nicht aus der eigenen Breite, sondern aus der Breite des Elternelements.

See the Pen Percentages on top/bottom padding/margins by SitePoint (@SitePoint) on CodePen.

Das gelbe Feld wurde mit padding und margin deklariert, mit Attributwerten für top und bottom. Wenn ihr jetzt den Slider benutzt, könnt ihr die Container-Breite verändern – aber auch die Höhe des Rechtecks verändert sich.

Dass border eigentilch ein Shorthand für border-style, border-width und border-color ist, sollte bekannt sein.

See the Pen multiple border shorthands by SitePoint (@SitePoint) on CodePen.

Aber vergesst nicht, dass jedes einzelne Property wiederdum selbst ein Shorthand ist – nämlich jeweils für vier Seiten.

In Bezug auf die Spezifikation wurden die drei Properties text-decoration-line, text-decoration-color und text-decoration-style zu einer Shorthand zusammengefasst:

a {
  text-decoration: overline aqua wavy;
}

Gut zu wissen: Das border-width-Property unterstützt auch Keyword-Values wie medium, thin und thick – wobei der Initialwert von border-width als medium festgelegt wurde.

Die Spezifikation selbst definiert keine genauen Pixel-Werte, aber wie es scheint verwenden alle Browser 1px, 3px und 5px.

Das empty-cells-Property erlaubt es euch, leere Zellen einfach ausblenden zu lassen.

See the Pen empty-cells demo by SitePoint (@SitePoint) on CodePen.

CSS3 kennt nun das word-wrap-Property, das eigentlich das Gleiche ist wie overflow-wrap – unter neuem Namen. Somit können Links auch getrennt werden, ohne die Funktionalität des Links zu zerstören oder einen unangenehmen „overflow“ – der das Layout zerreißen würde – zu produzieren.

Wenn ihr also eine Silbentrennung erreichen und ein Zerreißen des Containers verhindern wollt, dann solltet ihr in Zukunft word-break in Kombination mit word-wrap verwenden.

Wusstet ihr, dass das color-Property eigentlich die Vordergrundfarbe definiert?

Vielleicht auch interessant: Ihr wollt Dropdown-Menüs mit CSS erstellen?? Hier findet ihr Tutorials und Demos, die euch weiterhelfen.