News

Dieser visuelle Guide erklärt dir die wichtigsten CSS-Properties

(Screenshot: cssreference.io)

Welche CSS-Properties werden am häufigsten verwendet? Und was eignet sich für Anfänger und Fortgeschrittene? Eine neue Seite liefert jetzt die Antwort.

Derzeit gibt es über 330 CSS-Properties. Und die sind nicht immer überschaubar, vor allem nicht für Neueinsteiger im Bereich Web. Eine CSS-Property kann zum Beispiel font-weight, background, color oder width und height sein.

CSS-Properties auf einen Blick

Cssreference.io sammelt die bekanntesten CSS-Properties – ein kostenloser, visueller CSS-Guide. Cssreference zeigt die meist verwendeten Eigenschaften und visualisiert die Funktion anhand von animierten Beispielen. Besonders geeignet ist die Sammlung für Anfänger. Aber auch für alle Fortgeschrittenen ist die Sammlung ein echter Helfer – denn auch alte Hasen müssen gelegentlich Funktionen erneut testen und suchen. Besonders bei den zunehmenden CSS-Properties. Durch die visuellen und animierten Beispiele wird unter anderem das Ausprobieren der Funktionen im eigenen Browser erspart. Das wiederum kann viel Zeit sparen.

Die wichtigsten CSS-Properties. (Screenshot: cssreference.io)Die wichtigsten CSS-Properties. (Screenshot: cssreference.io)

Alle CSS-Properties sind in einer linken Spalte alphabetisch aufgelistet. Die Sammlung geht von align-content bis z-index. Eine einzelne CSS-Property, zum Beispiel text-shadow, wird kurz und knapp erklärt und mit allen möglichen Werten inklusive Beispiel aufgelistet. In dem Fall sind das: no shadow, two values, color und third value. Die jeweiligen Werte werden ebenfalls erläutert.

Darüber hinaus lässt sich jede einzelne Funktion in einem separaten Link einsehen und teilen oder auf MDN noch detaillierter ansehen.

Fazit

Cssreference ist ein Helfer und gehört in die Bookmarks aller Webworker. Die Properties sind auf den Punkt erklärt und anschaulich sowie übersichtlich dargestellt. Was leider fehlt, ist eine Übersicht des jeweiligen Browser-Supports. Dafür müssen die Besucher die Website verlassen – und dies zum Beispiel über den direkten MDN-Link oder auf caniuse.com manuell nachschauen.

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

3 Kommentare
indi
indi

nicht schlecht, aber auch nicht richtig gut: browser-support fehlt!

Antworten
E.
E.

Dafür gibt es doch caniuse… :)

Antworten
E.
E.

Bitte unbedingt noch Jeremy Thomas erwähnen, Jessy. He is the hero of cssreference.io! :))

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

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

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

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung