Türchen #2: Text-Transform

von

Adventskalendertürchen Nummero Zwo – Text-Transform

Türchen #2 So da ihr jetzt hoffentlich euren echten Adventskalender für heute schon geplündert habt, gibts jetzt noch das zweite Türchen des CSS-Kalenders. Weniger süß, dafür umso informativer. ;)

Diesmal gehts um die Eigenschaft Text-Transform, die es uns ermöglicht Groß- und Kleinschreibung eines Textes zu verändern.

Browserunterstützung

Browser Firefox Safari Opera Chrome Internet Explorer
ab Version 1.0 1.0 3.5 1.0 4.0

text-transform gibt es schon seit CSS1 Zeiten und wird von allen Browsern unterstützt. Sie wird allerdings meiner Erfahrung nach recht wenig benutzt, bzw. erst spät von “CSS-Neulingen” entdeckt, dabei ist kann sie ziemlich nützlich sein.

Die Syntax der Eigenschaft erlaubt neben none und inherit genau drei Werte, die von uns von Bedeutung sind:

  1. capitalize, alle Wörter im Text beginnen mit einem Großbuchstaben
  2. uppercase, alle Buchstaben eines Textes werden zu Großbuchstaben
  3. lowercase, alle Wörter beginnen mit kleinen Buchstaben, auch Satzanfänge und Substantive

Schauen wir uns die Beispiele an.

Beispiele

Als Ausgangsbasis wird uns folgender Text, der genauso im Quellcode steht, dienen:

1
2
3
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore 
magna aliquyam erat, sed diam voluptua.</p>
text-transform: capitalize
1
2
3
.capitalize {
	text-transform:capitalize;
}
jedes Wort muss groß anfangen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

text-transform: uppercase
1
2
3
.capitalize {
	text-transform:uppercase;
}
alles großgeschrieben

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

text-transform: lowercase
1
2
3
.capitalize {
	text-transform:lowercase;
}
alles kleingeschrieben

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Ich denke, dass gerade die Fälle capitalize und uppercase bei Überschriften, Titeln oder Einleitungssätzen von Nutzen sein können.
Das wars für heute, bis morgen! :)

Die hier könnten dich auch interessieren…

1 Kommentar RSS

Daniel

Kannte ich schon, aber lange nicht mehr benutzt. Damit kann man tolle Efekte in Zusammenhang mit einem JS-Framework erzielen ;)

Kommentieren