• 
• 
• 
• 
• 
• 
• 
• 1

6. August 2010

Mehr als nur runde Ecken: Testumgebungen für CSS3

(Link zum Artikel: http://www.createordie.de/cod/news/056530)

CSS3 ist als kommender Standard schon sehr lange in der Diskussion. Die Unterstützung beschrankt sich derzeit auf alle modernen Browser (Mozilla, Opera, Safari, Chrome), also auf keinen der Internet Explorer. Im Sinne eines Progressive Enhancement kann man aber die große Verbreitung der modernen Browser nutzen und diesen mit einfachen Mitteln ein interessantes Layout verpassen, während der IE weiterhin eine funktionierende, aber featureärmere Seite geliefert bekommt.

Irritierend beim praktischen Einsatz ist oft, dass die meisten CSS3-Eigenschaften eine entsprechende Eigenschaft mit einem vendor-prefix für einen bestimmten Browsertypus kennen. Es kann dabei vorkommen, dass die browserspezifische Version anders geschrieben wird als in CSS3 vorgesehen. Deshalb ist es hilfreich, sich der zahlreichen Generatoren und Schnippsel-Seiten zu bedienen, die es mittlerweile im Netz gibt.

Eine der bekanntesten dürfte CSS3please sein. Die Popularität der Seite verwundert mich, da sie sehr schlecht lesbar ist und man sich die Bedienung im wesentlichen durch Raten und Testen erschliessen muss.

Abb. 1: CSS3, please! bietet Ratespaß für CSS3-willige

Der CSS-Gradient Generator ist auf die einfache Erstellung von Verläufen spezialisiert. Die Bedienung funktioniert intuitiv, die Seite ist klar und attraktiv. Man kann sogar eine IE-kompatible Ausgabe erwirken. Das Produkt der eigenen Bemühungen ist CSS-Code, den man in sein Projekt übernehmen kann. Hierbei kann man einen eigenen Klassennamen wählen und erklärende Kommentare zulassen oder unterdrücken.

Abb. 2: Mit dem CSS-Gradient Generator lassen sich ansprechende Verläufe generieren

Die unterschiedlichen Schreibweisen für runde Ecken kann man sich dagegen übrigens auf der Seite Border-Radius ausgeben lassen.

Richtig interessant ist allerdings der CSS3-Playground von Mike Plate. Dort kann man neben runden Ecken sowie Schatten für Boxen oder Text auch Transformationen austesten. Man bekommt ein direktes Feedback im Browser und eine sofortige Ausgabe des dafür zuständigen CSS-Codes.

Abb. 3: Direktes Feedback aller Funktionalitäten bietet der CSS3-Playground von Mike Plate

Jens Grochtdreis setzt sich als Gründer der Webkrauts für moderne, standardkonforme Webseiten ein.

powered by

thefox 21.08.2010
um 13:25 Uhr Danke für diesen Beitrag.
Ein weiterer CSS3 Generator wäre vielleicht noch css 3 maker (http://www.css3maker.com/)

Was sicherlich auch einige Interessieren könnte, man kann dem IE6-IE8 Schatten und Radius beibringen. Siehe css3pie.com (http://css3pie.com/) #zitieren

• css3,
• playgrounds