Anzeige
Anzeige
Listicle
Artikel merken

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

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

Von Mario Janschitz
3 Min. Lesezeit
Anzeige
Anzeige
© Artur Marciniec - Fotolia.com

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
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.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
9 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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
Peter

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

Antworten
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
Michael Raguse

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
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
dazzle89

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

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
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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige