✪ blog.schaufler

Heute sind CSS Dateien von 200 – 300 KB grösse keine Seltenheit. Auch in Zukunft werden Cascading Style Sheets immer grösser und komplexer werden. Natürlich gibt es Werkzeuge die CSS komprimieren. Beim Minimieren und/oder Komprimieren, leidet oft die Übersichtlichkeit in den entsprechenden Dateien. Gegen das Aufsplitten in einzelne Teile spricht die Performance (zu viele Requests).

Hier eine elegante Idee, wie man die Übersichtlichkeit von CSS erhöht, und deren Grösse massiv reduziert. Die CSS – Datei wird dabei durch den PHP Parser geschickt und heisst nun style.php.

<link rel="stylesheet" href="css/style.php" type="text/css" media="screen, projection" />

Danach werden die einzelnen CSS Dateien geladen und vom Server komprimiert (ohne Kommentare und Zeilenabstände) ausgeliefert.

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /*Kommentar entfernen */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* entfernen von abständen, Zeilen usw.*/
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
  /*lade CSS Dateien */
  include('css/reset.css');
  include('css/layout.css');
  include('css/navi.css');
  include('css/forms.css');
  ob_end_flush();
?>

Das gefällt mir. Sauber zum arbeiten und schlank in der Anwendung ist Die Reinhold Weber – Methode. Gefunden bei catswhocode.com.

Microsoft hat eine Internet Explorer Platform Preview online gestellt. Was der neue IE9 schon kann ist ermutigend. Damit wird sich der Abstand zu den “modernen Browsern” verkleinern. So hat man sich endlich dazu entschlossen SVG 1.1 zu implementieren.

Der neue IE9 soll auch HTML5 sprechen und dadurch das <video> Element verstehen. Damit wird es auch dem IE möglich sein Videos ohne Flash – Plugin abzuspielen. CSS3 Elemente sind eingebaut, runde Ecken / mehrere Hintergründe funktionieren schon in der Preview. Die Geschwindigkeit (Javascript kompilieren) hat sich massiv gesteigert. Ein Entwicklerwerkzeug für die Tester steht auch bereit (F12).

Leider sieht der neue Browser beim Acid3 Test noch nicht so gut aus. Aber die 55% sind immer noch besser als das Resultat vom IE8. Bis zur finalen Version kann sich ja noch was tun. Im IE Blog kann man sich auf jeden Fall weiter informieren.

Natürlich werden Webseiten auch mal ausgedruckt. Nicht selten erlebt man dabei einige Überraschungen. Navigationen, Suchfelder und Banner haben auf einem Ausdruck nicht viel verloren. Eine dem Medium angepasste Typographie, klare Gliederung der Inhalte werden auch auf Papier geschätzt. Das alles kann ein spezielles Stylesheet für den print – Bereich erreichen. Der Link dazu wird in den Header der  Webseite eingebunden.

<link rel="stylesheet" type="text/css" media="print" href="http://DeineWebseite/print.css" />

Die print.css Datei erhält nun die Informationen der Anzeigebreite (100%), floating wird deaktiviert und auch die Typographie wird Seitenweit optimiert. im Printbereich wird die Schriftgrösse in Punkte angegeben (pt).

body {
font-family: Garamond,"Times New Roman", serif;
color: #000;
background: none;
font-size: 12pt;
background:none;
color:#000;
width:100%;
float:none;
margin:0;
}

Alle Elemente die nicht ausgedruckt werden, können mit dem Befehl “display:none” ausgeblendet werden.

#header,#menu,#navigation,#Sidebar,#footer{
display:none;

Im Web nutzen wir ja schon lange “sprechende Links”. Hier benötigen wir aber “schreibende links”. Mit wenigen Code – Zeilen sorgen wir dafür dass die URL’s der Links mit ausgedruckt werden (Geht im IE nicht).

a:link[href^="http://"]:after, a[href^="http://"]:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
a[href^="http://"] {
color:#000;
}

Danach sollten noch die Linkfarben (Kontrast) verändert werden. Natürlich kann man auch noch Überschriften Code, Zitate und weiteres aufhübschen.

a:link,a:visited {
color:#520;
background:transparent;
font-weight:700;
text-decoration:underline;
}

code {
font:10pt Courier, monospace;
}

blockquote {
font-size:10pt;
margin:1.3em;
padding:1em;
}

h1,h2,h3,h4,h5,h6 {
font-family:Helvetica, Arial, sans-serif;
}

h1 {
font-size:16pt;
}

h2 {
font-size:15pt;
}

Dieses css Script kann man sich auch im Stück runterladen. Weitere Informationen um Thema Print Stylesheet gibt es bei Selfhtml oder Chris Coyier. Wie das mit den manuellen Seitenumbrüchen geht sagt uns David Walsh.

Chapeaux! Die Schweiz hat die Richtlinien für die Gestaltung von barrierefreien Internetangeboten auf die Grundlage der Web Content Accessibility Guidelines 2.0 gestellt.

Neue Webseiten des Bundes müssen nun den Bedingungen der WCAG 2.0 entsprechen. Bestehende Websites müssen bis zum 31.12.2010 den Konformitätsbedingungen WCAG 2.0 (mindestens Stufe AA) entsprechen. Die Bundeskanzlei will die Standards jährlich überprüfen und die Resultate im Internet veröffentlichen.

Beim Code schreiben, sind die Snippets gern und oft gebrauchte Abkürzungen um den Code schneller und effizienter zu erstellen. Neben den Snippets die ich auch aktiv in meinem Lieblingseditor einsetze, nutze ich seit letztem Jahr Zen-Coding. Zen-Coding ist in etwa eine intelligente Codeschnipsel-Verwaltung. Es erleichtert das schreiben von Code ungemein. Die Idee, Code effizient mit Snippets zu schreiben, verbreitet sich unter allen Betriebssystemen. Einer der ersten war wohl Textmate (mac), auch gedit (linux) nutzt eine Snippet-Verwaltung und unter Windows verwende ich als Code-Editor gerne Intype.

Nun habe ich festgestellt, dass es auch für den Dreamweaver CS4 (MAC und WIN) eine Zen-coding Extension gibt. die .mxp Datei kann man nach dem download mit dem Extension Manager installieren.

Für alle nicht wysiwyg-Coder:
Gedit gibt es nun auch für Windows. Sogar eine  portable Betaversion habe ich gefunden.
Wie Zen-Coding mit dem Editor Espresso (MAC) funktioniert, zeigt dieses Video.

Diejenigen wenigen Linksammler die meine Linkdatenbank nicht nur belesen wollen, sondern tatkräftig mithelfen, beim Link eintragen, möchte ich unterstützen. Aus diesem Grund habe ich ein veraltetes Plugin modifiziert. Das Plugin funktioniert mit dem Firefox ab 3.5 zusammen und erleichtert das eintragen der Links beträchtlich. Ein Login für dich, gibt es auf Anfrage.

scuttle-032

scuttle-033

Das Importieren von Schriften mit dem @font-face Befehl erfreut sich ja wieder grosser Beliebtheit. Implementiert wurde die Regel schon in CSS2, in CSS2.1 wurde sie dann wieder verworfen. Nun wird die @font-face Regel vom W3C wieder zum Standard bestimmt (CSS3). Unterstützt werden die Browser IE6-9, FF3.5, Safari3.2, Opera10.*.

Bei dem Google Browser Chrom ist die Unterstützung der eingebetteten Schriften deaktiviert. Erst wenn man den Browser mit dem Befehl –enable-remote-fonts Startet kommt man in den Genuss der eingebetteten Schriften.