Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

10 CSS-Properties, die mehr können, als ihr ahnt

    10 CSS-Properties, die mehr können, als ihr ahnt
© Artur Marciniec - Fotolia.com

In diesem Artikel zeigen wir euch 10 Fakten rund um CSS, die ihr so noch nicht kanntet – jedenfalls haben mich zwei davon überrascht.

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.

1. CSS-Property color: Mehr als nur Textfarbe

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.

2. CSS-Property visibility: Lässt Tabellen „einstürzen“

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.

3. CSS-Property background: Shorthand umfasst acht Attribute

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.

4. Clipping funktioniert nur bei position:absolute

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.

5. Vertikale Prozentangaben sind relativ zur Element-Breite – und nicht zur Höhe

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.

6. border-Property: Die Hydra von CSS

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.

7. Plötzlich Shorthand: text-decoration

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;
}

8. Keyword-Values für border-width

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.

9. Mit empty-cells Tabellen aufräumen

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

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

10. Eigentlich dasselbe: word-wrap vs. overflow-wrap

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.

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

9 Reaktionen
Vlad

Mal eine ketzerische Frage an den Autor: die Übersetzung "CSS-Eigenschaft" ist den deutschsprachigen Webentwicklern durchaus bekannt. Warum also der Einsatz von"CSS-Properties" im Text?

Antworten
Mario Janschitz

Hallo! Ich habe in diesem Artikel 6 (SECHS) Links auf den Artikel von Sitepoint gesetzt. Neben der direkten Verlinkung zum Artikel in der Quellenangabe zeigt jeder Link in den Code-Beispielen auf den Artikel von Sitepoint.

Danke @Konstantin für den Hinweis.

Antworten
dazzle89
dazzle89

kann mich auch nur anschließen. wahrscheinlich dachten die, dass niemand sitepoint kennt.

Antworten
Micha

Ich schließe mich meinen Vorrednern an.
Noch ein Fehler: 4. Clipping: Stimmt nicht ganz, funktioniert auch bei position: fixed. Generell sollten Bilder auch eher Serverseitig beschnitten werden, bzw. Ausschnitte gewählt werden. Mich würde freuen wenn jemand mal ein sinnvolles Beispiel für das clip Property hat.

Antworten
Konstantin

Da fehlt ein "d" bei : "8. Keyword-Values für border-wi>>d<<th".

Antworten
Webdesign_Berlin
Webdesign_Berlin

Ich schließe mich meinen Vorrednern an.
Noch ein Fehler: 4. Clipping: Stimmt nicht ganz, funktioniert auch bei position: fixed. Generell sollten Bilder auch eher Serverseitig beschnitten werden, bzw. Ausschnitte gewählt werden. Mich würde freuen wenn jemand mal ein sinnvolles Beispiel für das clip Property hat.

Antworten
florence.maurice
florence.maurice

In dem Punkt gebe ich meinen Vorkommentatoren recht: saubererweise sollte der Verweis auf den sitepoint-Artikel schon weiter oben stehen und nicht ganz unten ...

... und noch eine Anmerkung zu color: Dass damit die Vordergrundfarbe und nicht die Textfarbe gemeint ist, erkennt man auch daran, dass es eben nicht font-color o.Ä. heißt, sondern nur color.

Antworten
Peter
Peter

Das Abschreiben/Übersetzen ohne Verlinkung der Quelle scheint langsam zum Standard bei t3n zu werden - schade. Ist heute schon der zweite Artikel.

Antworten
t3n ist mehr ein Übersetzer als ein Content Ersteller
t3n ist mehr ein Übersetzer als ein Content Ersteller

"Ein Autor ist der Verfasser oder geistige Urheber eines sprachlichen Werkes."
Davon kann hier wohl kaum die Rede sein ;) (http://www.sitepoint.com/12-little-known-css-facts/)
Finde ich echt ein wenig dreist, auch wenn ihr die Quelle angibt.
Guten Inhalt sucht man hier vergeblich!

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen