SlideShare ist ein Scribd-Unternehmen logo
SESSION»CSS3 einsetzen in Contao«Thomas Weitzel   think-contao.dePeter Müller   pmueller.de道3. Juni 2011 14 bis 15 Uhr
KurzvorstellungPeter MüllerThomas Weitzelpmueller.dethink-contao.de
Inhaltsübersicht
Eine kurze Geschichte von CSS 1 bis CSS3 1. Das CSS Einszweidrei
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
Und was ist mit CSS3? Ich freu' mich schon drauf, wenn CSS3 endlich fertig ist und ich es einsetzen kann. anonymous
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
Status der CSS3-Module  Quelle: css3.info/modules/  --- Stand: 7. April 2011
Jeder so wie er kann... 2. Progressive Enhancement
CSS3 kommt für mich derzeit noch nicht in Frage. Es gibt noch zu viele Besucher mit alten Browsernoft gelesen
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.
Papierdenken+Webseiten=AuftraggeberSurferEnttäuschte ErwartungenSeitenbauer
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.
dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com bit.ly/css3-cederholm Unterschiedliches Verhalten ist okay.
Im IE6 ist das alles.
Im FF4 sieht es anfangs genauso aus.
Maus bewegen = Sternenhimmel
Hover on Nope.
Klick = Greetings, modern browserpeople.
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.
und wofür besser noch nicht... 3. Wofür man CSS3 einsetzen kann
Die Browser bestimmen was geht
Die Browser-PräfixeBrowserPräfixLayout-EngineSafari-webkit-WebkitChrome-webkit-WebkitFirefox-moz-Gecko Opera-o-Presto Internet Explorer-ms-Trident
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
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.
Vielen Dank für Ihre Aufmerksamkeit.道Praxisbeispiele auf ck2011.think-contao.de

Weitere ähnliche Inhalte

Andere mochten auch

Practica 26 gaem
Practica 26 gaemPractica 26 gaem
Practica 26 gaem
Marco Maguito
 
Evaluacionfinal 37
Evaluacionfinal 37Evaluacionfinal 37
Evaluacionfinal 37
Sol Ortiz
 
El derecho en la edad media
El derecho en la edad mediaEl derecho en la edad media
El derecho en la edad media
Emelia Constantino
 
Präsentation zum Info-Abend der Gesamtschule Oppum
Präsentation zum Info-Abend der Gesamtschule OppumPräsentation zum Info-Abend der Gesamtschule Oppum
Präsentation zum Info-Abend der Gesamtschule Oppum
Armin
 
Contaminación ambiental
Contaminación ambientalContaminación ambiental
Contaminación ambiental
Andrea Carolina Corzo Rincón
 
Medio ambiente
Medio ambienteMedio ambiente
Lectura tarea para segunda sesión
Lectura tarea para segunda sesiónLectura tarea para segunda sesión
Lectura tarea para segunda sesión
pacojavierradio
 
Ig m
Ig mIg m
Vorstellung SmartExposé - Apps zur Immobilienvermarktung für Bauträger, Makle...
Vorstellung SmartExposé - Apps zur Immobilienvermarktung für Bauträger, Makle...Vorstellung SmartExposé - Apps zur Immobilienvermarktung für Bauträger, Makle...
Vorstellung SmartExposé - Apps zur Immobilienvermarktung für Bauträger, Makle...
Jürgen Böhm
 
Social Media - Quo Vadis
Social Media - Quo VadisSocial Media - Quo Vadis
Social Media - Quo Vadis
Prof. Dr. Manfred Leisenberg
 
Pereira bernadette-final
Pereira bernadette-finalPereira bernadette-final
Pereira bernadette-final
Bernadette Pereira Fabeiro
 
Andere Länder – Andere (Un)Sitten?
Andere Länder – Andere (Un)Sitten?Andere Länder – Andere (Un)Sitten?
Andere Länder – Andere (Un)Sitten?
Martin Ladstaetter / BIZEPS
 
holtmann landesstiftung_stuttgart
holtmann landesstiftung_stuttgartholtmann landesstiftung_stuttgart
holtmann landesstiftung_stuttgart
Carsten Holtmann
 
Apple, Apps & Social Media: Der Mobilfunkmarkt 2009/10
Apple, Apps & Social Media: Der Mobilfunkmarkt 2009/10Apple, Apps & Social Media: Der Mobilfunkmarkt 2009/10
Apple, Apps & Social Media: Der Mobilfunkmarkt 2009/10
Uwe Baltner
 
114987243 samba
114987243 samba114987243 samba
114987243 samba
Guadalupe Del Rosario D.
 
Practica pedagogica
Practica pedagogicaPractica pedagogica
Das Reiss Profile
Das Reiss ProfileDas Reiss Profile
sustancias quimicas
sustancias quimicassustancias quimicas
sustancias quimicas
victormanuelcorrale
 
Ingenio Incubadora
Ingenio IncubadoraIngenio Incubadora
Ingenio Incubadora
INGENIO Incubadora de Empresas
 

Andere mochten auch (20)

Practica 26 gaem
Practica 26 gaemPractica 26 gaem
Practica 26 gaem
 
Evaluacionfinal 37
Evaluacionfinal 37Evaluacionfinal 37
Evaluacionfinal 37
 
ROED_Portfolio_2015_Web
ROED_Portfolio_2015_WebROED_Portfolio_2015_Web
ROED_Portfolio_2015_Web
 
El derecho en la edad media
El derecho en la edad mediaEl derecho en la edad media
El derecho en la edad media
 
Präsentation zum Info-Abend der Gesamtschule Oppum
Präsentation zum Info-Abend der Gesamtschule OppumPräsentation zum Info-Abend der Gesamtschule Oppum
Präsentation zum Info-Abend der Gesamtschule Oppum
 
Contaminación ambiental
Contaminación ambientalContaminación ambiental
Contaminación ambiental
 
Medio ambiente
Medio ambienteMedio ambiente
Medio ambiente
 
Lectura tarea para segunda sesión
Lectura tarea para segunda sesiónLectura tarea para segunda sesión
Lectura tarea para segunda sesión
 
Ig m
Ig mIg m
Ig m
 
Vorstellung SmartExposé - Apps zur Immobilienvermarktung für Bauträger, Makle...
Vorstellung SmartExposé - Apps zur Immobilienvermarktung für Bauträger, Makle...Vorstellung SmartExposé - Apps zur Immobilienvermarktung für Bauträger, Makle...
Vorstellung SmartExposé - Apps zur Immobilienvermarktung für Bauträger, Makle...
 
Social Media - Quo Vadis
Social Media - Quo VadisSocial Media - Quo Vadis
Social Media - Quo Vadis
 
Pereira bernadette-final
Pereira bernadette-finalPereira bernadette-final
Pereira bernadette-final
 
Andere Länder – Andere (Un)Sitten?
Andere Länder – Andere (Un)Sitten?Andere Länder – Andere (Un)Sitten?
Andere Länder – Andere (Un)Sitten?
 
holtmann landesstiftung_stuttgart
holtmann landesstiftung_stuttgartholtmann landesstiftung_stuttgart
holtmann landesstiftung_stuttgart
 
Apple, Apps & Social Media: Der Mobilfunkmarkt 2009/10
Apple, Apps & Social Media: Der Mobilfunkmarkt 2009/10Apple, Apps & Social Media: Der Mobilfunkmarkt 2009/10
Apple, Apps & Social Media: Der Mobilfunkmarkt 2009/10
 
114987243 samba
114987243 samba114987243 samba
114987243 samba
 
Practica pedagogica
Practica pedagogicaPractica pedagogica
Practica pedagogica
 
Das Reiss Profile
Das Reiss ProfileDas Reiss Profile
Das Reiss Profile
 
sustancias quimicas
sustancias quimicassustancias quimicas
sustancias quimicas
 
Ingenio Incubadora
Ingenio IncubadoraIngenio Incubadora
Ingenio Incubadora
 

Ähnlich wie CSS3 einsetzen in Contao

tarent TechTalk: Bootstrap nutzen
tarent TechTalk: Bootstrap nutzentarent TechTalk: Bootstrap nutzen
tarent TechTalk: Bootstrap nutzen
Ingo Reinhart
 
design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
Flash cs3, ajax und php
Flash cs3, ajax und phpFlash cs3, ajax und php
Flash cs3, ajax und php
sameerpclab1
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Mediencampus Website Grobkonzept
Mediencampus Website GrobkonzeptMediencampus Website Grobkonzept
Mediencampus Website Grobkonzept
Marisa Wollner
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
Christoph Reinartz
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
Michael Oeser
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Amazee Labs
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Peter Rozek
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
Offline-first Architekturen: Wer bitte braucht schon Internet
Offline-first Architekturen: Wer bitte braucht schon InternetOffline-first Architekturen: Wer bitte braucht schon Internet
Offline-first Architekturen: Wer bitte braucht schon Internet
OPEN KNOWLEDGE GmbH
 
Mojo, Twitter und Konsorten
Mojo, Twitter und KonsortenMojo, Twitter und Konsorten
Mojo, Twitter und Konsorten
Philipp Naderer
 
Mobile- & Offline-First: Mehr als nur Buzzword-Bingo
Mobile- & Offline-First: Mehr als nur Buzzword-BingoMobile- & Offline-First: Mehr als nur Buzzword-Bingo
Mobile- & Offline-First: Mehr als nur Buzzword-Bingo
OPEN KNOWLEDGE GmbH
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
Noël Bossart
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
Oseon
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
Henning Schmidt
 
DevDay 2017: Ralf Knobloch - "Einfacher leben mit DevOps bei der MMS !!" - De...
DevDay 2017: Ralf Knobloch - "Einfacher leben mit DevOps bei der MMS !!" - De...DevDay 2017: Ralf Knobloch - "Einfacher leben mit DevOps bei der MMS !!" - De...
DevDay 2017: Ralf Knobloch - "Einfacher leben mit DevOps bei der MMS !!" - De...
DevDay Dresden
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
 

Ähnlich wie CSS3 einsetzen in Contao (20)

tarent TechTalk: Bootstrap nutzen
tarent TechTalk: Bootstrap nutzentarent TechTalk: Bootstrap nutzen
tarent TechTalk: Bootstrap nutzen
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Flash cs3, ajax und php
Flash cs3, ajax und phpFlash cs3, ajax und php
Flash cs3, ajax und php
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Mediencampus Website Grobkonzept
Mediencampus Website GrobkonzeptMediencampus Website Grobkonzept
Mediencampus Website Grobkonzept
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Offline-first Architekturen: Wer bitte braucht schon Internet
Offline-first Architekturen: Wer bitte braucht schon InternetOffline-first Architekturen: Wer bitte braucht schon Internet
Offline-first Architekturen: Wer bitte braucht schon Internet
 
Mojo, Twitter und Konsorten
Mojo, Twitter und KonsortenMojo, Twitter und Konsorten
Mojo, Twitter und Konsorten
 
Mobile- & Offline-First: Mehr als nur Buzzword-Bingo
Mobile- & Offline-First: Mehr als nur Buzzword-BingoMobile- & Offline-First: Mehr als nur Buzzword-Bingo
Mobile- & Offline-First: Mehr als nur Buzzword-Bingo
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
DevDay 2017: Ralf Knobloch - "Einfacher leben mit DevOps bei der MMS !!" - De...
DevDay 2017: Ralf Knobloch - "Einfacher leben mit DevOps bei der MMS !!" - De...DevDay 2017: Ralf Knobloch - "Einfacher leben mit DevOps bei der MMS !!" - De...
DevDay 2017: Ralf Knobloch - "Einfacher leben mit DevOps bei der MMS !!" - De...
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 

CSS3 einsetzen in Contao