HTML and CSS Reference
In-Depth Information
JaV0GAEEEECA2wGCpWcBgmW1fDOCAXhaUs6OYFzBWCC2jGA8wpdDdIwpmByixQE4omHsgdkjGItocY
gHYxO+C8QnIxAA/hVwAP4OAAA2Ccwx7MAxxLchAMD6gFBGrhFJdTxcXce1ZXWHXwLwiEF/xQIIII-
AAZwJ+7PGabKrsTMYAAAAASUVORK5CYII=);
}
2
Listing 2.16
Das Hintergrundbild, kodiert im Base64-Format
Anstelle des Dateinamens steht nun also das komplette Bild im CSS-Code
url()
. Das
vorgestellte
data:image/png;base64
, sagt dem Browser, dass es sich um ein Bild vom
Typ
png
handelt, codiert im Base64-Format.
All in one
Mit dieser Technik können Sie schon mal alle Bilddateien in Ihren Quellcode einbin-
den, aber was ist mit den JavaScript- und CSS-Dateien? Auch die können Sie natürlich
als Codefragment in die HTML-Datei schreiben, dafür müssen Sie nur die umschlie-
ßenden Tags leicht verändern:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<style>
// CSS-Definitionen
</style>
</head>
<body>
<!-- HTML-Elemente -->
<script>
// JavaScript-Code
</script>
</body>
</html>
Listing 2.17
Das HTML-Grundgerüst, um alle CSS-Definitionen und
JavaScript-Befehle direkt in dieser zu plazieren.
Im Idealfall befindet sich nun Ihre App in einer einzigen Datei, der
index.html
. Sie
haben nicht nur die Downloadgröße massiv reduziert, auch die Anzahl der Serverver-
bindungen ist auf ein Minimum geschrumpft. Das macht das Laden Ihrer App nicht
nur schneller, sondern auch zuverlässiger - und sorgt für ein deutlich besseres Erleb-
nis beim Nutzer.
Search WWH ::
Custom Search