CSS Variablen, benutzerdefinierte Eigenschaften

Das W3C hat vor ein paar Tagen (27.06.2013) den Entwurf zu den CSS Custom Properties for Cascading Variables Module Level 1 aktualisiert.

Es soll bald möglich sein, benutzerdefinierte Eigenschaften verwenden zu können. Man könnte hier auch von Variablen sprechen. Wie das funktionieren soll? Wer LESS oder SASS kennt, hat diese Funktionalität ja schon, ich noch nicht; Variablen in CSS.

Beispiel-CSS:

:root {
var-color-scheme-background-dunkel: #000;
var-color-scheme-background-hell: #ccc;
var-color-scheme-schrift-auf-dunkel: #fff;
var-color-scheme-schrift-auf-hell: #000;
}

p.dunklerHintergrund {
color: var(color-scheme-schrift-auf-dunkel);
background: var(color-scheme-background-dunkel);
}

Mittels var-* (prefix, durch Voranstellen der Vorsilbe) definierst Du dir (quasi) eine eigene (nutzerdefinierte) Eigenschaft. Den Wert der Eigenschaft kannst du dann in deinem folgenden css-file durchgängig abrufen.

Vorteil, einmal gesetzte Variablen können immer wieder abgerufen werden, eine Änderung eines Wertes muss dann nur einmal vorgenommen werden. Toll zum Beispiel bei Farbvariationen eines Layouts. Cool, he? Da freu ich mich doch drauf!

  • Veröffentlicht in: CSS3

Unterschiede zwischen CSS3 transition und animation per @keyframes

Ich hänge aktuell immer noch an dem Thema Transitionen und Animationen. Weil es mir für mich und vielleicht auch für den ein- oder anderen von Euch wichtig ist, habe ich im folgenden einmal versucht, die Unterschiede festzuhalten.

CSS3 transition versus @keyframes animation:

  1. Eine Transition hat jeweils einen definierten Start- und Endzustand. Die Animation dazwischen, also ab Start des Überganges bis zum Erreichen des Endzustandes, kann nicht beeinflusst werden. Eine Animation gibt dem Designer dagegen neben definierten Start- und Endpunkten die Möglichkeit, weitere keyframes, Ziwschenstationen, zu definieren.
  2. Eine Transition braucht zwingend einen Auslöser, einen Trigger. Dies ist die Reaktion auf eine Eigenschaftsänderung eines Elementes durch Benutzeraktion (z.B. mouseover :hover). Wenn hierfür javascript benutzt wird, liegt in der Regel auch eine “Vortäuschung” einer Eigenschaftsänderung z.B. durch Ändern von Klassen vor. Eine Animation braucht keinen Trigger und läuft, wenn gewünscht, z.B. nach dem Laden der Seite ab.
  3. Eine Transition läuft nur einmal bis der Endzustand erreicht, oder die vorherige Eigenschaftsänderung zurückgenommen wurde (z. B. mouseout). Eine Animation kann mehrmals oder in einer Schleife durchlaufen.

Wer weitere Unterschiede weiß, oder das oben geschriebene korrigieren möchte, bitte her damit, ich nehme das gerne mit auf!

  • Veröffentlicht in: CSS3

neue cursor-styles in CSS3

Mir war das ehrlich gesagt noch gar nicht so bewusst aufgefallen, muss ich eingestehen. Meine Schwerpunkte beim Betrachten einer Seite liegen doch meist woanders.

CSS3 bringt uns gegenüber CSS2 eine Reihe von neuen Cursor-Styles mit. Diese sollten mit allen neueren Browsern (IE > 8) funktionieren. Falls nicht, steht es hinter dem jeweiligen Cursor-Style in Klammern dabei. Beim Überfahren mit der Maus (:hover) sind die verschiedenen Cursor-Styles zu sehen.

cursor: copy; (funktioniert nicht mit Safari)
cursor: no-drop;
cursor: not-allowed;
cursor: ew-resize;
cursor: ns-resize;
cursor: nesw-resize;
cursor: nwse-resize;
cursor: col-resize;
cursor: row-resize;
cursor: all-scroll
cursor: none; (funktioniert nicht mit IE, Safari und Opera)
cursor: context-menu; (funktioniert nicht mit Firefox und Chrome)
cursor: cell; (funktioniert nicht mit Safari)
cursor: vertical-text;
cursor: alias; (funktioniert nicht mit Safari)

 

  • Veröffentlicht in: CSS3

quicktip CSS-Code einsparen bei den css-Animationen

CSS-Code einsparen? Immer gut! Ein kurzer Tip zu den CSS Animationen, auf den Lea Verou bereits im Dezember 2012 hingewiesen hat, mir aber bisher noch nicht bewusst war.

Bei den @keyframes Animationen muss man nicht zwingend den Status 0% und 100% oder from und to definieren, wenn dieser dem Wert der Eigenschaft des animierten Elements entspricht.

@keyframes deineanimation {
from { Eigenschaft: Wert; }
50% { Eigenschaft: Wert; }
to { Eigenschaft: Wert; }
}

#DeinAnimiertes Element {
/* ... */
animation: deineanimation .5s infinite;
}

Der “from”-Zustand wird dynamisch von den Browsern erzeugt, hier reicht dann:

@keyframes deineanimation {
to { Eigenschaft: Wert; }
}

Schon ausprobiert?

  • Veröffentlicht in: CSS3

CSS @supports Regel

David Walsh berichtet heute über weiter reichende Unterstützung diverser Browser der @supports – Regel, auch das W3C hat Ende März sein Dokument zu den Conditional Rules aktualisiert.

Wer es noch nicht schon gelesen hat, die @supports-Regel dient zum Abfragen, Testen und Filtern per CSS oder JavaScript, ob bestimmte CSS-Eigenschaften auf dem jeweiligen Browser verfügbar sind, oder eben nicht.

Grundsätzliche Funktionsweise hierbei:

<style>
@supports (Eigenschaft:Wert) {
Element {
/* Elementeigenschaften */
}
}
</style>

Zu deutsch: Wenn der Browser die Darstellung dieser Eigenschaft mit diesem Wert unterstützt, dann (und nur dann) wende die folgenden Style-Deklarationen für ein Element xy an. (diese folgenden Eigenschaften müssen aber nicht zwangsläufig zu der wenn-Frage gehören!)

Hierzu gibt es auch eine Verneinung, also eine Negation:

<style>
@supports not (Eigenschaft:Wert) {
Element {
/* Elementeigenschaften */
}
}
</style>

Weiterlesen

  • Veröffentlicht in: CSS3