CSS3 produktiv

© 2011 Mayflower GmbH

CSS3 Produktiv nutzen

Alberto Assmann I 03.11.2011

CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 2

I Jahrgang 1991

I Auszubildender zum Fachinformatiker für Anwendungsentwicklung I Seit 2010 bei der Mayflower GmbH

I PHP Erfahrung seit 2006

I OXID eShop Certified Engineer

It‘se me...

Vorführender

Präsentationsnotizen

Zwar nicht Mario, aber dafür Alberto, ebenfalls italienischer Name 1991 geboren, seit 2010 bei Mayflower Auszubildender für Anwendungsentwicklung Oxid Zertifizierung Aktuelles Nebenprojekt schokoladen-kunst.de -> Motivation für diesen Vortrag


Die Motivation

Vorführender


Online Shop für hochwertige Schokoladen & Pralinen Kunst im Namen, also auch kunstvoller Seite Etwas wie oben fällt damit raus


Die Motivation

Vorführender


Deutlich schöner ist so etwas Verläufe & runde Ecken, Schriftschatten, etc. sollen nicht als Bilder Umgesetzt werden sondern

Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 5

Vorführender


- Zum Glück gibt es CSS3


CSS3 ist Neu...

Vorführender


CSS3 ist seit 2000 in der Entwicklung Neu ist nur das inzwischen die meisten Browser eine sehr gute Unterstützung haben


Beispiel

Vorführender


- Mit Einschränkungen Es gibt noch keinen Standard, sondern nur einen Entwurf Daher ist es für die Browser neu Die Unterstützung sah letztes Jahr noch schlecht aus, das hat sich etwas gebessert IE6 und IE7 können kaum etwas, IE8 und IE9 schon etwas mehr, aber nur Microsoft spezifische Implementierung Auch akutelle Firefox und Webkit (Chrome, Safari) Browser machen ihr eigenes Ding Opera ist der einzige der einen Großteil der Spezifikation umsetzt (leider auch nur was dort drinne steht) + eigene Implementierungen


CSS3 ist wie ein Zaubertrank

Vorführender


CSS3 ist wie ein Zaubertrank Man kann coole Seiten machen, aber man braucht jede Menge Zutaten


Zutaten

Vorführender


CSS3 gibt einem viele neue Möglichkeiten zum Styling an die Hand, Textschatten, eigene Schriften, Farbverläufe, Animationen, etc. Schnelldurchlauf durch die neuen Stylingmöglichkeiten Selektoren werden gekonnt ignoriert, da dies ein gesondertes Thema wäre


Animationen (Animations):

animation-name: fall, fade; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out;

Browser

Unterstützung -webkit -webkit -moz progid:DXImageTransform

Vorführender


Zum Beispiel animierte Schriften Webkitbrowser aktuell mit Prefix –webkit Mozilla mit Prefix –moz Internet über IE spezifische Filter (Performance!!!) Opera kann es gar nicht (Umweg über SVG Animationen)


Farbverläufe (Gradients):

background-image: linear-gradient( bottom, rgb(71,117,252) 32%, rgb(100,153,255) 66%, rgb(42,97,97) 83% );

Browser

Unterstützung -webkit -webkit -moz -ms -o

Vorführender


Farbverläufe, zum Beispiel für 3D Effekte für Buttons Webkitbrowser aktuell mit Prefix –webkit (Safari weicht in der Syntax ab, mit color-stop) Mozilla mit Prefix –moz Ältere IE7 -> IE spezifische Filter (Performance!!!) Ab IE8 mit –ms Prefix Opera mit –o, bzw. SVG


Hintergrundgröße (Background-size):

background-size: 50% 25%;

Browser

Unterstützung -webkit -webkit -moz

Vorführender


Skalierung für Hintergrundbilder Webkitbrowser aktuell mit Prefix –webkit Mozilla mit Prefix –moz Internet über IE spezifische Filter (Performance!!!) Opera kann es


Bilderrand (Border-image):

border-image: url(pikachu.png) 49 41 repeat;

Browser

Unterstützung -webkit -webkit -moz -o

Vorführender


Zum Beispiel verschnörkelte Tabellenränder Webkitbrowser aktuell mit Prefix –webkit Mozilla mit Prefix –moz Intertnetexplorer geht gar nicht Opera mit Prefix -o


Runde Ecken (Border-radius):

border-radius: 5px 5px 5px 5px;

Browser


Vorführender


Runde Ecken zum Beispiel für geilere Buttons


Schatten (Box-shadow):

box-shadow: 5px 5px 5px #000000;

Browser

Unterstützung -webkit -webkit -moz progid:DXImageTransform

Vorführender


Runde Ecken zum Beispiel für geilere Buttons Webkit Prefix –webkit Firefox Prefix –moz Internetexplorer wieder nur über Filter (Performance) Opera kann es sogar laut Spezifikation (box-shadow ohne Prefix)


Textspalten (Column-count):

column-count: 4;

Browser


Vorführender


Textformatierung für mehrspaltige Layouts Webkit Prefix –webkit Firefox Prefix –moz IE und Opera setzten das schon richtig um


Farbigkeit (HSLa, RGBa):

Color: hsla(0,100%,50%,0.4); Background-color:

Browser

Unterstützung

Vorführender


Farben mit Transparenzen Können alle Browser, Safari erst ab der aktuellen Version Fehlerfrei


Worttrennung (Hyphen):

hyphens: auto;

Browser

Unterstützung -moz

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Vorführender


Feingranularere Einstellungen für Worttrennungen Nur im aktuellen Firefox mit Prefix –moz Alle anderen Browser können aktuell damit nicht umgehen


Mehrere Hintergrundbilder (Multiple backgrounds):

background-image: url(sheep.png), url(betweengrassandsky.png);

Browser

Unterstützung

Vorführender


Mehrere Bilde übereinander legen ohne dass verschiedene Node genutzt werden müssen Können alle aktuellen Browser


Deckkraft (Opacity):

Opacity: 0.5;

Browser

Unterstützung filter: alpha(opacity=50)

Vorführender


Deckkraft von Elementen (Hintergrundbilder, Farben, Farbverläufe) Alle Browser, IE erst ab 8 nativ, vorher per Filter


Text überlauf (text-overflow):

text-overflow: ellipsis-word;

Browser

Unterstützung -o

Buffer Overflow because off...

Vorführender


Einstellung ob Text abgeschnitten werden soll (und wie dies behandelt wird, entweder mit 3 Punkten zur Anzeige das da mehr ist oder abschneiden ohne Anzeige) Können alle Firefox erst ab Version 7 Opera mit Prefix -o


Textschatten (text-shadow):

Text-shadow: 10px 10px 3px #666;

Browser

Unterstützung

Vorführender


Möglichkeit für Text Schatten Können alle richtig, nur der IE nicht (in der aktuellen 10er Alpha kann er es ;) )


Umformungen (Transform):

transform: scale(0.6) rotate(33deg) translateX(136px) translateY(-45px) skewY(-16deg); transform-origin: 32% 0%;

Browser

Unterstützung -webkit -webkit -moz -ms -o

Vorführender


Möglichkeit Elemente zu drehen, zu verzerren und zu skalieren Jeder Browser hat sein eigenes Prefix Ebenfalls als 3D möglich


Übergänge (Transitions):

Div:hover { transition: rotate(360deg) scale(2.0) rotate(-90deg); }

Browser

Unterstützung -webkit -webkit -moz progid:DXImageTransform -o

Vorführender


Animationen ohne Javascript, nur durch CSS Wieder jeder Browser sein eigenes Prefix IE nur über Filter, Performancelast!!!


Verschiedene Druiden – verschiedene Tränke:

Vorführender


Wie bei ein Zaubertrank von 2 Druiden nicht immer gleich sind haben auch die Browser verschiedene Attribute -> bedeutet viel Mehrarbeit um Browserkompatibel zu werden


Das richtige Tool:

Vorführender


Und immer wenn etwas aufwendig wird greifen wir zu Tools


SASS

Vorführender


Eines der Tools ist SASS (wenn auch nicht das Einzige) Ruby, als Gem verfügbar Compiliert die SASS Datei in CSS


/** CSS */ .content-navigation { border-color: #3bbfce; } /** SASS */ .content-navigation border-color: #3bbfce

Vorführender


SASS kann kompakter geschrieben werden Geschweifte Klammern können weg gelassen werden, ebenso wie Semikolons -> ich finde es mit geschweiften Klammern übersichtlicher


$color: #3bbfce .content-navigation border-color: $color

Vorführender


SASS kann Variablen (für Farben, Größen, etc.) Ziemlich Cool weil man nur noch einmal Zentral seine Farben und Größen definiert und einfach ändern kann


/** CSS */ table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } /** SASS */ table.hl margin: 2em 0 td.ln text-align: right

Vorführender


Verschachtelung durch Einrückung


@mixin round-corners($radius) -moz-border-radius: $radius -webkit-border-radius: $radius -khtml-border-radius: $radius border-radius: $radius @include round-corners(5px)

Vorführender


Coolstes Feature für CSS3 sind mixins Möglichkeit Funktionen für CSS zu schreiben -> Abstraktion in CSS Mit und ohne Parameter möglich Sehr viel weniger Code


/** CSS */ div.foo { border: 3px; div.foo:hover { color: #FF0000; } } /** SASS */ div.foo border: 3px &:hover color: #FF0000

Vorführender


Parent Selektor für weniger Tippaufwand


I Größenberechnung (Bsp.: 2px + $width)

I Farbberechnung

I Stringkonkatenation

Berechnungen:

Vorführender


Größenberechnungen, zum Beispiel mit Variablen Farbberechnung -> Addieren von Farben Zeichenfolgen zusammenfügen


I @if/@else

I @for

I @each

I @while

Kontrollstrukturen:

Vorführender


Damit sind richtige Funktionalitäten möglich Beispiel eine Button-Factory (@include button(primary) )


Compiliertes CSS?

Vorführender


Compilieren dauert und ist nervig


sass –watch foo.scss:foo.css sass –watch /var/www/app/public/css

Vorführender


Dateien können auf Änderungen überwacht werden Auch ganze Ordner können überwacht werden Bei jeder änderung wird das SASS File in CSS compiliert Bei größeren Dateien kann das auch mal 2-3 Sekunden dauern


Vorführender


Wir alle sind Faul, geht‘s also noch leichter?


SASS Framework:

I Vordefinierte Mixins I Reset I Textools I Farbtools I Als gem verfügbar

Vorführender


Compass ist ein Framework auf SASS aufsetzend Bietet vordefinierte Mixins um CSS3 Crossbrowserkompatibel zu machen Funktionen um Resets zu erreichen (und damit Vererbungen zu verhindern) Tools für Textstyling Tool um die Kontrastfarbe zu finden Ganz einfach zu installiere als GEM


Vorführender


Tools sind Super, aber die wenigsten starten gerade ein neues Projekt Also, kann man das ganze auch bei altem Code einsetzten?


http://css2sass.heroku.com/

http://blog.mayflower.de/archives/745-Agiles-CSS.html#extended

Vorführender


Aus CSS SASS machen -> Mixins und Abstraktionen müssen selber nachgeschrieben werde Blogbeitrag zu SASS Refactoring

http://css2sass.heroku.com/�

http://blog.mayflower.de/archives/745-Agiles-CSS.html�








Unter dem Strich:

Vorführender


Mein Fazit: SASS ist super, ganz dringend einsetzten (oder andere Tools wie Stylus/Less)

© 2011 Mayflower GmbH

Alberto Assmann [email protected] +49 931 35965 1164 Mayflower GmbH Pleichertorstr. 2 97070 Würzburg

Referent

Vielen Dank für Ihre Aufmerksamkeit!

mailto:[email protected]�


I http://www.karzauninkat.com/Goldhtml/ I http://schokoladen-kunst.de I http://www.foxplex.com/components/uploads/qpcll5zh-CSS3_Logo.jpg I http://www.geo-reisecommunity.de/bild/405784/altes-Auto I http://www.normansblog.de/demos/browser-support-checklist-css3/ I http://www.asterix.com/news-de/unter-der-lupe/ I http://www.normansblog.de/css3-im-detail-background-size/ I http://www.normansblog.de/css3-im-detail-border-image/ I http://www.normansblog.de/css3-im-detail-columns/ I http://www.normansblog.de/css3-im-detail-multiple-backgrounds/ I http://www.spiegel.de/fotostrecke/fotostrecke-21123-3.html I http://www.ahnungslos.ch/wp-content/uploads/2009/12/schmuck.jpg I http://sass-lang.com http://xkcd.com/303/ I http://www.welt.de/politik/deutschland/article3660279/Erst-friedlich-dann-Krawall.html I http://portfo.li/umaar/841377-motivational-programming-posters-redux-the-code-strikes-back I http:// www.elbuhari.at/html1/images/stories/fragen.jpg

Quellen

http://www.karzauninkat.com/Goldhtml/�

http://schokoladen-kunst.de/�

http://www.foxplex.com/components/uploads/qpcll5zh-CSS3_Logo.jpg�

http://www.geo-reisecommunity.de/bild/405784/altes-Auto�

http://www.normansblog.de/demos/browser-support-checklist-css3/�

http://www.asterix.com/news-de/unter-der-lupe/�

http://www.normansblog.de/css3-im-detail-background-size/�

http://www.normansblog.de/css3-im-detail-border-image/�

http://www.normansblog.de/css3-im-detail-columns/�

http://www.normansblog.de/css3-im-detail-multiple-backgrounds/�

http://www.spiegel.de/fotostrecke/fotostrecke-21123-3.html�

http://www.ahnungslos.ch/wp-content/uploads/2009/12/schmuck.jpg�

http://sass-lang.com/�

http://xkcd.com/303/�

http://www.welt.de/politik/deutschland/article3660279/Erst-friedlich-dann-Krawall.html�

http://portfo.li/umaar/841377-motivational-programming-posters-redux-the-code-strikes-back�

http://www.geo-reisecommunity.de/bild/405784/altes-Auto�

http://www.elbuhari.at/html1/images/stories/fragen.jpg�

Technology

CSS3 produktiv