t3n News Entwicklung

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

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

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

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

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.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
9 Antworten
  1. von t3n ist mehr ein Übersetzer als ein Con… am 04.05.2014 (20:36 Uhr)

    "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 Teilen
  2. von Peter am 04.05.2014 (20:59 Uhr)

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

    Antworten Teilen
  3. von florence.maurice am 04.05.2014 (21:51 Uhr)

    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 Teilen
  4. von Webdesign_Berlin am 04.05.2014 (21:59 Uhr)

    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 Teilen
  5. von Konstantin am 05.05.2014 (07:40 Uhr)

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

    Antworten Teilen
  6. von Micha am 05.05.2014 (07:43 Uhr)

    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 Teilen
  7. von dazzle89 am 05.05.2014 (08:07 Uhr)

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

    Antworten Teilen
  8. von Mario Janschitz am 05.05.2014 (09:45 Uhr)

    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 Teilen
  9. von Vlad am 07.05.2014 (11:39 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder

Im besten Fall sorgen CSS für kompaktes und gekapseltes Styling für Webseiten. Im Schlimmsten Fall wird CSS zur Hölle in Sachen Übersichtlichkeit und Redundanz. CSS Purge zeigt, welche Seiten die … » weiterlesen

20 CSS-Cursor-Eigenschaften für bessere Usability
20 CSS-Cursor-Eigenschaften für bessere Usability

Schon mal darüber nachgedacht, den Cursor deinem Design anzupassen? Wir haben einige Beispiele rausgesucht, wie du mit dem Cursor deine Usability noch besser machen kannst. » weiterlesen

CSS-Hamburger: Leckere Menü-Animationen für eure Webseite
CSS-Hamburger: Leckere Menü-Animationen für eure Webseite

Das Hamburger-Menü ist inzwischen auf unzähligen Webseitee zu finden – spätestens bei einem kleineren Viewport ist es nicht mehr wegzudenken. Die drei horizontalen Balken visualisieren ein … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?