✪ 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.

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.

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.

In der Linkdatenbank für Webworker befinden sich nun 1000 Links. Zusammengetragen in den letzten 4 Jahren. Ok einige Links sind veraltet oder ungültig, trotzdem bleibt http://tag.schaufler.ch meine liebste Webzeugkiste.

Populäre Links:

• CSS (267 Favoriten)
• Tutorial (106 Favoriten)
• Gestaltung (103 Favoriten)
• PHP (86 Favoriten)
• Linux (65 Favoriten)

Herzlichen Dank auch denen, die mithelfen die nächsten 1000 Links zu sammeln.

Vier neue W3C Module für CSS Level 3.

Das W3C hat 4 neue Working Drafts veröffentlicht. Diese Module enthalten neue Funktionalitäten die es in den Versionen 1 und 2 nicht gegeben hat.

• http://www.w3.org/TR/css3-animations/
• http://www.w3.org/TR/css3-transitions/
• http://www.w3.org/TR/css3-2d-transforms/
• http://www.w3.org/TR/css3-3d-transforms/

Benötigen Webworker in Zukunft nun grafische CSS Editoren um die SVG Grafiken zu animieren, oder erstellt uns Inkscape und Illustrator cs5 nun auch ein CSS?  Nun gut, lernen wir jetzt halt dreidimensionales CSS (3).

Übrigens, der IE 8.1 kann es noch nicht

Browser kompatible inline Blockelemente. Z.B für Bildergalerien.

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<li>
        <div>
            <h4>This is awesome</h4>
            <img src="http://domain.test/bild.jpg"
            alt="lobster" width="75" height="75"/>
        </div>
</li>

Gefunden bei blog.mozilla.com/webdev

Schon wieder ein neues CSS Framework, werden jetzt vielleicht wieder einige stöhnen. Reichen denn blueprint, yaml, 960 Grid System und wie sie alle heissen nicht?

Doch, die reichen eigentlich. Viele dieser Frameworks habe ich gesehen, einige installiert, aber nie eines ernsthaft benutzt. Inspiriert von Content with Style, smashing magazine, und anderen gesammelten Artikeln habe ich cssSystem entwickelt.

Das modular aufgebaute Werkzeug habe ich in erster Linie als Arbeitserleichterung für mich erstellt. Teile aus anderen Frameworks wurden so in einem einfachen und schlanken (css)System vereint.

• die reset.css ist von Eric Meyer
• das Grid in % ist von emastic (von mir modifiziert, da nicht valid)
  
• den Printbereich ist von Hartija

cssSystem ist 12.5 KB schlank, als Demo verfügbar und kann in der Version 0.6 0.8 heruntergeladen werden.

Natalie Downe

Anleitung von Manuela Hoffmann, um sich den digitalen “Lebensfluss” zu organisieren.

Man nehme etwas XML und PHP, und mische das mit der Fertig-Ware Magpie (oder besser SimplePie). Damit erstellen Sie nun einen RSS Feed über ihre sämtliche (online) Aktivitäten. Das ganze nun kräftig schütteln mittels Pipes, oder kräftig rühren unter RSS-Combiner. Damit der Lifestream auch wirklich mundet, würzen Sie das Ganze mit einer kräftigen Prise CSS.

En Guete