Mit CSS3 werden heute schon viele Möglichkeiten geboten, ein ansprechendes Webdesign zu realisieren. Die Präsentation geht über CSS3 und wie man es einsetzt. Praxisbeispiele gibt es auf http://ck2011.think-contao.de/

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

2. Kurzvorstellung Peter Müller Thomas Weitzel pmueller.de think-contao.de

3. Inhaltsübersicht

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

5. CSS 1 und 2 CSS Level 1 W3C-Empfehlung im Dezember 1996 Elemente und Inhalte gestalten CSS Level 2 W3C-Empfehlung im Mai 1998 Elemente positionieren CSS Level 2 Revision 1 Working Draft im August 2002 W3C-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 da CSS Level 3 begonnen im April 2000 ist 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 Browsern oft gelesen

11. Das Web ist nicht aus Papier Wir sind alle mit Papierdenken groß geworden. Papierdenken Der 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 = Auftraggeber Surfer Enttäuschte Erwartungen Seitenbauer

13. Progressive Enhancement Webseiten … werden benutzt und nicht nur betrachtet. … müssen nicht in jedem Browser gleich aussehen. … müssen sich nicht in jedem Browser gleich verhalten. Progressive Enhancement Alte 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 60ern Einige 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äfixe Browser Präfix Layout - Engine Safari - webkit - Webkit Chrome - webkit - Webkit Firefox - moz - Gecko Opera - o - Presto Internet Explorer - ms - Trident

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

25. CSS3 im Hier und Jetzt CSS3 statt Grafik Abgerundete Ecken Schlagschatten Lineare Farbverläufe Transparenzen Unschä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