„CSS & Performance“ Vortrag auf dem TYPO3camp München

Mein Vortrag beim TYPO3camp 2010 in München handelte von CSS und was man beim Stylesheet-Schreiben beachten kann um Dateigröße und Ladezeiten von CSS zu verringern. Nachfolgend die Präsentation: CSS & Performance auf Prezi-Basis.

Teil 1: CSS

Das Optimierungspotenzial beim Komprimieren einer CSS-Datei liegt zwischen 30%-70%, je nachdem wie gut man im Vorfeld schon gearbeitet hat. Was kann also man im Vorfeld beachten?

Schnelle Selektoren

Die unterschiedlichen Selektoren in CSS sind sicherlich bekannt, man kann HTML-Elemente direkt oder durch deren Attribute „class“ und „id“ ansprechen. Dabei sind die schnellsten Selektoren die Typ-Selektoren, Klassen- und ID-Selektoren sind ebenfalls schnell. Langsam hingegen sind die Kombinatoren, am häufigsten Verwendung finden sicherlich die Nachfahrenkombinatoren (descent combinators), der der langsamste aller Selektoren ist. Etwas schneller ist da der Kindkombinator (child combinators).

Beispiel:

  
  schnellste  ->  a
auch schnell  ->  .link
     langsam  ->  div > div > div > p > a.link
sehr langsam  ->  div div div p a.link

Warum ist das langsam?


Der Browser liest CSS von RECHTS nach LINKS.
Er sucht erst alle „a“-Tags, schaut dann welche von denen ein „li“ als Elternelement haben, sortiert diese aus und schaut danach welche „ul“ als Elternelement haben und weist dann die Farbe #f00 zu. Das ist durchaus anders als man erwarten könnte und z.B. in Javascript gehandhabt wird.

Extrem langsam ist der Universal-Selektor, der sogenannte „star“-Selektor. Einen Vergleich verschiedener Selektoren hat Steve Sounders auf http://stevesouders.com/efws/css-selectors/universal.php veröffentlicht.

Wie werden die Selektoren gewichtet?

* {}             /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {}            /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {}         /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {}      /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up] {}/* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {}         /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""         /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

Typ-Selektoren und Pseudo-Klassen werden quasi als Einerstellen gewichtet. Attribut-Selektoren und Klassen als Zehner-Stellen, ID-Selektoren als Hunderter-Stellen. Und das style-Attribut in HTML ist sozusagen die Tausender-Stelle. Das einmal verinnerlicht, hilft, wenn mal wieder eine Eigenschaft überschrieben werden muss.

CSS-Reset

Bei einem CSS-Reset werden Browservorgaben zurückgesetzt, man fängt bei Null an zu gestalten. Ein einfacher Reset ist 

* {
    margin: 0;
    padding: 0;
}

Dabei werden bei allen Elementen über den Universal-Selektor alle Innen- und Außenabstände genullt. Gerade aber bei Formularen ist es dann schwierig dies browserweit neu zu implementieren. Deshalb hat Eric Meyer einen etwas „besseren Reset“ entwickelt. 

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

CSS Shorthands

Shorthand sind Kurzschreibweisen in CSS. Man kann einige Eigenschaften zusammen-fassen. Beispielsweise kann man margin-top: 10px schreiben oder margin: 10px 0 0. Gleichzeitig hat man damit die Eigenschaften margin-right, margin-left und margin-bottom abgedeckt, und zwar mit dem Wert 0.

Beispiel:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

wird zu:

margin: 10px 20px 30px 40px

Gibt es für Margin 4 verschiedene Werte, werden diese in Uhrzeigerrichtung angegeben, also top, right, bottom und left.

Sind left und right gleich, wird der Wert an der 2. Stelle für beide Seiten verwendet.

margin: 10px 20px 30px

Sind jeweils top und bottom sowie left und right gleich, verwendet man folgende Schreibweise:

margin: 10px 20px

Letztlich werden alle 4 Seiten so zusammen gefasst:

margin: 10px

Man sollte immer und ausschließlich mit Shorthands arbeiten, da ein späteres Überschreiben von „Langanweisungen“ mit einer Shorthand-Anweisung nicht möglich ist. Wir haben z.B.

margin-top: 10px;
margin: 5px 0 0;

Der neue Wert für margin-top wird in dem Fall ignoriert.

Weitere Kurzschreibweisen

padding: 10px 20px 30px 40px;
border: 1px solid red;
background: #000 url(pic.png) no-repeat right bottom;
font: bold 16px/1.2 Arial, Helvetica, sans-serif;
list-style: square inside url(images/bullet.png);

und natürlich Kurzschreibweise für Farbwerte:

#ffffff -> #fff

 

Best practice

Zuweisungen zusammenfassen

  • Mehrere Selektoren mit der gleichen Zuweisung können zusammengefasst werden
  • h1, h2, h3 {margin: 10px 0}

multiple Klassen im HTML zuweisen

  • anstatt immer neue spezifische Klassen zu erfinden, weitestgehende generische Klassen verwenden und dann im HTML mehrere Klassen zuweisen
  • <div class=“box right“></div>

Das letzte Semikolon kann weg gelassen werden

  • Eine Einsparmaßnahme, die beim Komprimieren meist automatisch passiert

Null-Werte ohne Einheit => h3 {margin: 0}

  • Es ist nicht notwendig 0px zu schreiben, die Einheit kann weggelassen werden

font-weight: 700 => bold, font-weight: 400 => normal

  • Kurzschreibweise für bold = 700, für normal = 400 (minimales Einsparpotential)

CSS-Hacks vermeiden => Conditional Comments

CSS komprimieren

Kommentare

Print-Styles in das default-Stylesheet übernehmen

body {
  color:#333;
  background-color:#ccc
}
@media screen, projection {
  body {background-image:url(background.png)}
}
@media print {
  body {background-color: #fff; color:#000}
}

In Teil 2 geht es um die Performance-Optimierung im Browser. Im nächsten TY-MA zeige ich, was man bei der Einbindung von CSS und Javascript in HTML optimieren werden kann.

Welche Tipps habt ihr noch?

One thought on “„CSS & Performance“ Vortrag auf dem TYPO3camp München”

  1. Pingback: “CSS & Performance” Artikel Teil 2 | maddesigns

Kommentare sind geschlossen.