Das Dokument behandelt die Entwicklung von CSS von Version 1 bis CSS3 und betont die Bedeutung von progressivem Enhancements, um Webseiten sowohl für alte als auch moderne Browser ansprechend zu gestalten. Es wird darauf hingewiesen, dass CSS3 nicht nur neue Funktionen bietet, sondern auch flexibel in der Anpassung an verschiedene Browser ist. Zudem werden die aktuellen CSS3-Module und deren Anwendbarkeit in verschiedenen Layouts und Designs beleuchtet.

1. SESSION»CSS3 einsetzen in Contao«Thomas Weitzel think-contao.dePeter Müller pmueller.de道3. Juni 2011 14 bis 15 Uhr

2. KurzvorstellungPeter MüllerThomas Weitzelpmueller.dethink-contao.de

3. Inhaltsübersicht

4. Eine kurze Geschichte von CSS 1 bis CSS3 1. Das CSS Einszweidrei

5. CSS 1 und 2CSS Level 1W3C-Empfehlung im Dezember 1996 Elemente und Inhalte gestaltenCSS Level 2W3C-Empfehlung im Mai 1998 Elemente positionieren CSS Level 2 Revision 1Working Draft im August 2002W3C-Empfehlung 12. April 2011

6. Und was ist mit CSS3? Ich freu' mich schon drauf, wenn CSS3 endlich fertig ist und ich es einsetzen kann. anonymous

7. CSS3 ist schon daCSS Level 3begonnen im April 2000ist keinmonolithischer Standard besteht aus zahlreichen Modulen Modules will enable CSS to be updated in a more timely and precise fashion, thus allowing for a more flexible and timely evolution of the specification as a whole…w3.org/TR/css3-roadmap/#whymods

8. Status der CSS3-Module Quelle: css3.info/modules/ --- Stand: 7. April 2011

9. Jeder so wie er kann... 2. Progressive Enhancement

10. CSS3 kommt für mich derzeit noch nicht in Frage. Es gibt noch zu viele Besucher mit alten Browsernoft gelesen

11. Das Web ist nicht aus PapierWir sind alle mit Papierdenken groß geworden. PapierdenkenDer Autor einer Seite hat die vollständige Kontrolle. Nach der Fertigstellung sieht die Seite bei jedem Betrachter gleich aus. Im Web ist das anders. Der Autor einer Seite hat keine vollständige Kontrolle. Nach der Fertigstellung sieht die Seite bei jedem Betrachter anders aus. It's not a bug, it's a feature.

12. Papierdenken+Webseiten=AuftraggeberSurferEnttäuschte ErwartungenSeitenbauer

13. Progressive EnhancementWebseiten… werden benutzt und nicht nur betrachtet. … müssen nicht in jedem Browser gleich aussehen.… müssen sich nicht in jedem Browser gleich verhalten.Progressive EnhancementAlte Browser zeigen die Seite so wie sie können. Moderne Browser zeigen sie in ihrer vollen Pracht. Jeder so wie er kann. It's not a bug, it's a feature.

14. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com bit.ly/css3-cederholm Unterschiedliches Verhalten ist okay.

15. Im IE6 ist das alles.

16. Im FF4 sieht es anfangs genauso aus.

17. Maus bewegen = Sternenhimmel

18. Hover on Nope.

19. Klick = Greetings, modern browserpeople.

20. Progressive Enhancement in den 60ernEinige Programme wurden bereits in Farbe gesendet, obwohl es noch Schwarzweiß-Fernseher gab. Und Leute mit einem Schwarzweiß-Gerät haben die Sendung nicht in Farbe gesehen.

21. und wofür besser noch nicht... 3. Wofür man CSS3 einsetzen kann

22. Die Browser bestimmen was geht

23. Die Browser-PräfixeBrowserPräfixLayout-EngineSafari-webkit-WebkitChrome-webkit-WebkitFirefox-moz-Gecko Opera-o-Presto Internet Explorer-ms-Trident

24. CSS3 - in ZukunftMehrspaltige Layouts»Multi-column Layout Module«(Candidate Recommendation)»Template Layout Module«(Working Draft)»Flexible Box Layout Module«(Working Draft) »Grid Modules«Ideenzu Positioning und LayoutAktueller Stand auf w3.org/Style/CSS/current-workFloatbasierte Layouts begleitenunsnocheinStück des Weges

25. CSS3 im Hier und JetztCSS3 statt Grafik Abgerundete Ecken SchlagschattenLineare Farbverläufe TransparenzenUnschärfe Transformationen Contao V2.10 Einige CSS3-Eigenschaften werden im internen CSS3-Editor integriert. Alte IE-Versionen werden automatisch mit CSS3-Pie versorgt.

26. Vielen Dank für Ihre Aufmerksamkeit.道Praxisbeispiele auf ck2011.think-contao.de