20 html5 Tipps von der Herdplatte

Vor kurzem ist meine Aufmerksamkeit auf die fantastische Ressource der WebEntwickler Paul Irish und Dicya Manian gelenkt worden. Die HTML5 Boilerplate ist ein starker Startpunkt als Grundlage für die Entwicklung von Webseiten und Webanwendungen. Paul Irish selbst beschreibt sein Projekt als "essenzielles Template von html und css Dokumenten in einer Verzeichnissstruktur die funktioniert, eingetütet mit jahrelanger Erfahrung durch professionelle Web Front-End Entwickler".

Es ist eine absolut atemberaubende Sammlung fantastischer code-schnippsel die sich lohnen genauer zu beleuchten, auch wenn die html5 boilerplate nicht als Basis-Template eingesetzt werden soll.

HTML

Fangen wir mit den Schnippseln aus dem HTML Bereich an. Diese Schnippsel lohnen sich deffinitiv eingebettet zu werden, auch in deinen html-Dokumenten.

Favicons und Apple iPad und iPhone Favicons

Der Einsatz von Favicons ist heutzutage nichts neues. Das Interessante ist das MetaTag zum einbetten eines Favicon für apple-touch, um Bookmarks auf den Home-Screen eines Apple Geräts zu platzieren. Lustigerweise unterstützt auch Android dieses MetaTag. Soweit mir bekannt, haben die apple-touch-icons eine Pixelgrösse von 60px x 60px.

<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Schneller Seitenaufbau hack

Dieser leere conditional-comment hack wird zur Steigerung der Seitenperformance genutzt. Wenn conditional-comments auf der Seite genutzt werden, blockt der Browser weitere downloads bis zum abgeschlossenen conditional-comment download. Um dieses Problem aus der Welt zu schaffen wird ein leeres conditional-comment eingebaut. Weitere Informationen hierzu gibt es in diesen Artikel.

<!--[if IE]><![endif]-->

X-UA-Compatible

Der Internet Explorer kommt mit verschiedenen Rendering-Engines daher. Um den IE dazu zu zwingen die neueste Rendering-Engine zu benutzen dient der Einsatz des folgenden Schnippsels. Wenn Google Chrome installiert sein sollte, wird auch im IE die starke Rendering-Engine von Chrome eingesetzt. Um weitere Informationen zum Chrome-Frame und der Installation zu erfahren lese diesen Bericht.

<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Conditional body tag

Dieses Schnippsel ist ein Paul Irish original. Es erlaubt den IE direkt anzusprechen, anstatt unnützige http-requests für seperate stylesheets zu produzieren. Im Grunde wird jedem IE Browser eine eigene class im Body-Tag zugewiesen. Dies erlaubt das zielgerichtete Ansprechen von verschiedenen IE Browserversionen als css Klassen im Haupt-Stylesheet, ohne seperate Stylesheets laden zu lassen. Für weitere Informationen lese diesen Artikel.

jQuery loading fallback

jQuery Library kommt inzwischen auf vielen Webseiten zum Einsatz. Hierzu lädt man im head-Bereich der Seite die besagte Library. Oftmals wird diese direkt von Google selbst laden gelassen. Was passiert aber, wenn die Library nicht gedownloaded werden kann bzw. wir das ganze etwas beschleunigen wollen? Das folgende Schnippsel kommt hier zum Einsatz. Es ist ein Fallback-Script welches die Library entweder von Google oder lokal lädt.

<!-- Grab Google CDNs jQuery. fall back to local if necessary -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

Optimierte Google Analytics

Zur Beschleunigung des Ladens der Google Analytics stellte google ein optimiertes Code-Schnippsel vor. Dieses wird allerdings nicht in der Analytics-Verwaltungsoberfläche zur Verfügung gestellt. Um mehr darüber zu Erfahren was optimiert wurde und warum es schneller lädt lese diesen Artikel.

<script>
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-XXXXX-X']);
 _gaq.push(['_trackPageview']);
 (function() {
  var ga = document.createElement('script');
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ga, s);
 })();
</script>

CSS

Jetzt geht es weiter mit dem CSS Teil. Auch hier können tolle Code-Schnippsel gefunden werden. Lasst euch nich von den Einzeilern abschrecken, auch diese haben genau soviel Power wie die grösseren Schnippsel.

Html5 ready reset

Viele von euch werden Eric Meyer's css reset eingesetzt haben. Es ist bereits in vielen Frameworks implementiert. Hier nun eine aufpolierte Version dieses reset, mit voller Unterstützung für html5. Es setzt die ganzen neuen Struktur-Elemente in den Block-Modus und überschreibt somit die individuellen default-styles, damit sie sich verhalten wie erwartet.

/*   html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, figure, footer, header,
hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* END RESET CSS */

Font Normalisierung

Um die Unterschiede in der Darstellung bei verschiedenen Browsern und Betreibssystemen loszuwerden setzen wir dieses CSS Schnipsel ein. Hierdurch ermöglicht es uns die Font-Grössen und Zeilenhöhen genau zu bestimmen und eine konstante Darstellung in den verschiedenen Plattformen zu gewährleisten. Anschliessend setzt du deine Font-Grössen in Prozent, wie nachfolgend dargestellt.

/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
*/
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }

Force scrollbar

Immer wieder kommen Kunden auf mich zu, die behaupten, dass Ihre Website in der Breite "springt". Die Begründung ist ziemlich einfach. Einige Inhaltsseiten lassen sich komplett darstellen, bei anderen kann man nach unten scrollen. Hier wird der Scrollbalken also abwechselnd angezeigt und ausgeblendet, so kommt es zum "springen". Um diesen Effekt zu unterbinden lässt sich der Scrollbalken dazu zwingen, immer eingeblendet zu sein.

html { overflow-y: scroll; }

Quote Code Formatierungen

Um einen Zeilenumbruch in pre-Tags zu bekommen und somit sicherzustellen, das diese sich weiterhin in Container-Bereichen befinden setzen wir folgendes Schnippsel ein. Mehr Informationen hierzu gibt es in diesen Artikel.

pre {
padding: 15px;
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

Labels ausrichten

Die Ausrichtung von Formular-Labels und Eingabefeldern in älteren Browsern kann viel Zeit kosten und Kopfschmerzen verursachen. Um dieses Problem aus der Welt zu schaffen kommt folgendes CSS-Schnippsel zum Einsatz.

/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

Input-Felder zum anklicken

Eine Verschönerung für Formulare ist folgendes Schnippsel. Es lässt den Maus-Cursor beim Fahren über Input-Eingabefelder zur "Hand" werden.

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }

Link Outlines für ScreenReader

Link Outlines werden oftmals als störend empfunden. Um mehr über dieses Schnippsel zu erfahren lese diesen Artikel

a:hover, a:active { outline: none; }
a, a:active, a:visited { color:#607890; }
a:hover { color:#036; }

IE7 image resizing

IE7 nutzt einen Algorithmus zum verkleinern von Images der weit entfernt von Schönheit ist. Um Herr über dieses Problem zu werden aktivieren wir mit folgenden Schnippsel einen anderen Algorithmus, der wesentlich bessere Ergebnisse abliefert. Um mehr über dieses Phänomenen zu erfahren lese folgenden Artikel von flickr

/* bicubic resizing for non-native sized IMG:
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

Print styles

Ja, es gibt sie noch. Die Menschen, die sich das Internet ausdrucken. Wir verschmelzen die Print Styles mit diesen Schnippsel und es kommt kein extra Stylesheet für den Print zum Einsatz um die Ladezeiten zu erhöhen. Denn auch, wenn der User die Seite nicht ausdruckt, wird der seperate Print-Style geladen, was einen zusätzlichen http-Request erfordert.

/*
* print styles
* inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; }
  abbr:after { content: " (" attr(title) ")"; }    .ir a:after { content: ""; }  /* Don't show links for images */    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }    img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

Device orientation Stylesheet

Viele Smartphones oder andere Geräte wie das iPad erlauben den Nutzer inzwischen den Wechsel der Darstellung zwischen Portrait und Landscape Ansicht. Um diesen Nutzern verschiedene Styles für die Darstellung zu geben nutzen wir folgendes CSS Schnippsel.

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}
 
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
}

.htaccess

Ein weiteres Feature der html5 boilerplate ist das Template für das .htaccess File. Nachfolgend die atemberaubenden Snippets für das Tuning deiner .htaccess .

X-UA-Compatible Server sided

Die X-UA Einstellungen, die wir bereits oben in den MetaTags erwähnt haben können auch serverseitig im .htaccess hinterlegt werden. Welche Version man selbst nutzt bleibt dem Webdesigner überlassen, es sollte nur eine der beiden Versionen eingesetzt werden. Hier das Schnippsel um den IE zu zwingen die aktuellste Rendering-Engine einzusetzen. Wahrscheinlich ist die .htaccess Lösung eleganter, da sie im header jedes aufgerufenen Dokuments automatisch übertragen wird.

<IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  IfModule>
IfModule>

Gzip compression

Die Kompression mit Gzip erlaubt eine drastische Reduzierung der Dateigrössen. Somit werden Seiten schneller geladen und übertragen, des weiteren wird Bandbreite gespart.

# gzip compression.
<IfModule mod_deflate.c>
  # html, xml, css, and js:
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript text/javascript application/javascript application/json
  # webfonts and svg:
  <FilesMatch "\.(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

Cache Filetypes und das Expiry date

Wenn die Dateien auf dem Computer des Nutzers im Cache sind möchten wir möglicherweise direkten Einfluss darauf haben, wie lange diese dort verweilen. Dies kann abhängig davon sein, wie oft wir selbst diese Dateien verändern. Nachfolgendes Schnippsel berücksichtigt gängige FileTypes und gibt dir die Möglichkeit direkten Einfluss auf die Verfallsdauer zu nehmen.

# these are pretty far-future expires headers
# they assume you control versioning with cachebusting query params like
#
<script type="text/javascript" src="application.js?20100608">// <![CDATA[
# additionally, consider that outdated proxies may miscache
#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
# if you don't use filenames to version, lower the css and js to something like
#   "access plus 1 week" or so
<IfModule mod_expires.c>
  Header set cache-control: public
  ExpiresActive on
 
  # Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"
  # cache.manifest needs re-reqeusts in FF 3.6 (thx Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"
  # your document html
  ExpiresByType text/html                  "access"
  # rss feed
  ExpiresByType application/rss+xml       "access plus 1 hour"
  # favicon (cannot be renamed)
  ExpiresByType image/vnd.microsoft.icon  "access plus 1 week"
  # media: images, video, audio
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  # webfonts
  ExpiresByType font/ttf                  "access plus 1 month"
  ExpiresByType font/woff                 "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  # css and javascript
  ExpiresByType text/css                  "access plus 1 month"
  ExpiresByType application/javascript    "access plus 1 month"
  ExpiresByType text/javascript           "access plus 1 month"
</IfModule>
 
# Since we're sending far-future expires, we don't need ETags for
# static content.
#   developer.yahoo.com/performance/rules.html
#etags
FileETag None

Weiterführende Informationen

Ich empfehle euch den Besuch bei der html5 boilerplate. Es wird ständig weiterentwickelt und auch bei github zur Verfügung gestellt. Ihr findet sicherlich noch weitere nützliche Schnippsel in der "Herdplatte" denen ich in diesen Artikel noch keine Beachtung geschenkt habe.