Kategorie: JavaScript

CSS und JavaScript Dateien kleiner machen

Auf http://compressor.ebiene.de/ kann man seine CSS und JavaScript Dateien einfach und smart komprimieren. Es gibt dabei zwei unterschiedliche Stufen (basic compress und powerful compress), die die Leserlichkeit des Codes unterschiedlich stark einschränken. Falls man mit der CSS-Datei danach noch weiter arbeiten möchte, empfehle ich die Basis-Kompression.

Die CSS-Datei von bennyn.de (v1) konnte von 7028 Bytes auf 3879 Bytes geschrumpft werden. Das sind gut 45%. Die erweiterte Kompression würde nochmals 7% einbringen, was aber dazu führen würde, dass ich mich als Mensch ziemlich schwer tun würde, den Code noch zu entziffern. Einem Webserver macht sowas jedoch nichts aus, im Gegenteil.

Viewport herausfinden

Im Internet Explorer 7 sehen Benutzer mit einer Auflösung von 1280×800 Pixel nur 1259×597 Pixel. Das liegt daran, dass die Navigationsleiste, die Taskleiste sowie weitere Schaltflächen den sichtbaren Bereich des Browsers verkleinern. In der Fachsprache nennt man das, was dann noch übrig bleibt, den Viewport.

Zur Bestimmung des Viewports gibt es ein JavaScript, dass die Breite in der Variablen viewportwidth und die Höhe in der Variablen viewportheight speichert.

<script type=“text/javascript“>
<!–

var viewportwidth;
var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != ‚undefined‘)
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != ‚undefined‘
&& typeof document.documentElement.clientWidth !=
‚undefined‘ && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
viewportwidth = document.getElementsByTagName(‚body‘)[0].clientWidth,
viewportheight = document.getElementsByTagName(‚body‘)[0].clientHeight
}
document.write(‚<p>Your viewport width is ‚+viewportwidth+’x’+viewportheight+'</p>‘);
//–>
</script>

Vielen Dank an Andy Langton.