mit diesem Slogan versucht http://ads-content.de/ für 15 bzw. 35 Euro ein Programm zu verkaufen. Damit sollen “normale” Webseiten in “mobile” Webseiten verwandelt werden.
Unfug sowas!
Zu diesem Zweck gibt es CSS. CSS löst genau diese Aufgabe, und zwar perfekt und maßgeschneidert.
Vor allem löst CSS diese Aufgabe, ohne eine zweite Version der gleichen Seite zu erstellen, und damit ohne Notwendigkeit, zwei Versionen zu pflegen. Eine wichtige Fehlerquelle weniger.

Erforderlich ist eine Browserweiche, sowie ein CSS für handhelds. Dieses CSS besteht im wesentlichen aus display:none für Alles, was auf handhelds nicht gezeigt werden soll, und einigen wenigen weiteren Anweisungen, wie z. B. in diesem CSS file

Damit sieht webdesign.weisshart.de auf dem iPhone oder anderen Smartphones so aus:

floats clearen. Dieses Thema füllt Bücher.
In aller Regel wird zu diesem Zweck so etwas wie
<br class="clearfix” /> ins Markup eingefügt, und die Klasse clearfix dann per CSS gestylt.

Noch einen Tick eleganter hat das Dan Cederholm gelöst. Es geht auch ohne jegliches zusätzliche Markup, allein mit CSS:

#content:after {
   visibility:hidden;
   display:block;
   clear:both;
   height: 0;
   font-size:0;
   content: " ";
}
* html #content {
   height:1%;
}
*:first-child+html #content {
   height:1%;
}

Nachzulesen im Aloe Studios Blog

Das Ende für alle Textersetzungstechniken - und vielleicht der Anfang typographisch schön gestalteter Seiten im Web?

Moderne Browser stellen auch Schriftarten dar, die der Besucher nicht auf seinem System installiert hat.
Moderne Browser nach dieser Lesart sind Firefox 3.5 und Safari 4.

Auf dieser Seite zeige ich, wie’s geht. Voraussetzung natürlich, Sie haben einen “modernen” Browser.

ich hab’ die Schnauze voll … vom IE 6

Mein aktuelles Projekt tbl-welt.de (ich mache dort vor allem Scripting und CSS) beinhaltet unter anderem einen Styleswitcher, und dort einen Style namens “Kontrast", der auch sehr stark sehbehinderten Besuchern einen Zugang zur Site ermöglichen soll.
Beim Erstellen des CSS für diesen Style ist mir irgendwann der Kragen geplatzt: Alle modernen Browser interpretieren das CSS einigermaßen vernünfig. Aber immer, wenn ich glaube, der Style steht, und ich den IE6 zum Test anwerfe, dann platzt mir der Kragen. Der IE6 ist, was CSS Unterstützung betrifft, wirklich ein Relikt aus dem letzten Jahrtausend.

Aber ich weiß mir jetzt zu helfen. Ich lass mich von dem Dinosaurier nicht mehr verrückt machen. Ich schließe den IE6 aus!

Microsoft selbst hat diese Funktionalität dankenswerterweise in die IEs eingebaut. Das Zauberwort heißt “conditional comment". Mit conditional comments kann man html-Elemente auf einer Seite vor bestimmten IE-Versionen verstecken.

Beispiel:

<!–[if gt IE 6]>
Anweisungen für IE Version höher als 6
<![endif]–>

Dummerweise betrachtet Microsoft nur eigene Produkte als “höherwertig". Mit diesem conditional comment werden also nur IE 7 und 8 als “höher” eingestuft, alle anderen Browser aber ausgeschlossen.

Nein, das wollte ich nicht.
Ich wollte den IE 6 ausschließen, IE ab Version 7, und alle ordentlichen Browser aber zulassen.

Das klappt mit folgendem conditonal comment:

<!–[if gt IE 6]><!–>
Anweisung für alle einigermaßen ordentlichen Browser, einschließlich IE ab Version 7
<!–<![endif]–>


Im vorliegenden Fall habe ich die Option “Kontrast” in der (select-) Auswahlliste einfach vor dem IE 6 versteckt.
Ich werde diese Methode in Zukunft immer dann anwenden, wenn ich keine Lust habe, meine Arbeitszeit für ein Produkt zu vergeuden, das schon im vorigen Jahrtausend sich nicht an Standards hielt .

Nachtrag:
Ich hab’ mir das nochmal überlegt, und gönne dem IE 6 jetzt das, was lange Zeit für den Netscape 4 üblich war: ein abgespecktes CSS.

Hoppla! Was ist denn mit dem Design passiert? Ganz einfach, webdesign weisshart beteiligt sich auch 2008 wieder am »CSS Naked Day«. Die Idee dahinter ist recht simpel: ist die Website noch benutzbar, wenn man sämtliche Formatierungen abschaltet? Verwendet die Website semantisches Markup, oder gehen ohne das Design wesentliche Informationen verloren?

Entstanden ist die Idee im Weblog von Dustin Diaz, der den »First Annual Naked Day: April 05« ausgerufen hat. Auf dieser Seite findet man auch eine lange Liste von Websites, die ebenfalls an der Aktion teilnehmen.

… wenn dir diese Ansicht nicht gefällt, dann wähle einfach aus meinem Styleswitcher einen Style aus; dann ist der Spuk vorbei, zumindest so lange, bis Du Deinen Browser neu startest. ;-)

Am 9. April ist es wieder so weit:
Meine Seiten werden einen Tag lang nackt, ohne jegliches Styling dargestellt.
Die Idee von Dustin Diaz ist jetzt schon im vierten Jahr.
Damit soll gezeigt werden, dass ordentlich strukturierte Seiten auch ohne Styling, ohne CSS, ordentlich lesbar und benutzbar bleiben. Der erste und wichtigste Schritt zur Barrierefreiheit.

Seiteninterne Sprunglinks, etwa zum Inhalt, oder zur Navigation, sind ein wichtiges Element, um die Benutzung von Webseiten öhne Maus, ausschließlich mit der Tastatur zu erleichtern.
Vielfach werden diese Sprunglinks per CSS versteckt, und nur beim Durchtabben mit der Tastatur angezeigt.
Hierfür gibt es eine etablierte Technik, die eigentlich immer und überall funktioniert.
Eigentlich.
Nur nicht mit dem IE6 auf der folgenden Testseite, die ich eigens erstellt habe, um diese Technik in verschiedenen Browsern zu testen.
http://webdesign.weisshart.de/test/skiptest/skip.html

Hier der Quelltext der Seite:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml” xml:lang="de” lang="de">

<head>
<title>Titel</title>
<meta http-equiv="Content-Style-Type” content="text/css” />

<style type="text/css">

#skip a:link,
#skip a:visited {
position:absolute;
left:-500px;
top:-500px;
width:0;
height:0;
display:inline;
}

#skip a:focus,
#skip a:hover,
#skip a:active {
position:absolute;
left:0;
top:0;
width:auto;
height:auto;
display:block;
}

</style>

</head>
<body>

<div id="skip"><a href="#navsprung">Sprung zur Navigation</a></div>

<div id="inhalt">
<h1>Titel</h1>
<p>Irgendwelche Inhalte</p>
<p><a href="http://www.example.com">ein normaler Link</a></p>
</div>

<p>Viele Trennlinien, um Raum zu schaffen:</p>
<hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr />

<h2><a name="navsprung">Navigation</a></h2>

</body>
</html>

Es ist passiert.
Ich hab den ersten CSS Hack speziell für den Internet Explorer 7 eingesetzt. Grausam! Wie ich das hasse. Aber es hilft nichts: der IE7 kann immer noch nicht ordentlich CSS interpretieren.
Jetzt gibt es 3 Deklarationen im CSS für ein und dasselbe Element :-(
Und wohl demnächst noch mehr für zukünftige Versionen des Internet Explorers.

Wie das aussieht?
Der ‘* html’-Hack für den IE6 dürfte inzwischen allen bekannt sein.
Für den IE7 gibt es einen ähnlichen Hack: ‘*+html’

Und so sieht es dann beispielsweise im CSS aus:

.opt {margin: 8px;} /* für Browser */
* html .opt {margin: 4px;} /* nur für den IE6 */
*+html .opt {margin: 4px;} /* nur für den IE7 */

Quelle: www.thestyleworks.de/tut-art/ie7.shtml#ie7-hacks

Mit sogenannten Browserweichen versuchen geplagte Seitenschreiberlinge seit Unzeiten, die unterschiedliche Interpretation von CSS durch die verschiedenen Browser in den Griff zu bekommen.
So bedauerlich die uneinheitliche Unterstützung der Standards durch die Browserhersteller auch ist - die vermeintliche, gutgemeinte, Abhilfe kann gründlich in die Hose gehen:

Screenshot der Seite von Michl’s Café
ohne CSS

Ich bin heute zufällig über die Seite von Michl’s Café gestolpert. Und hab’ nicht wenig gestaunt, eine Seite ohne jegliche Formatierung anzutreffen. HTML pur, kein CSS, aber auch keine Tabellen. Einfach HTML. Valide noch dazu, und semantisch korrekt ausgezeichnet, also anscheinend keine Stümperseite. Sollte es tatsächlich so etwas geben? Eine offensichtlich aktuelle Site, die korrektes, valides XHTML bietet, ganz ohne Formatierungen?
Hat mein Firefox ein Problem?
Also ein Versuch mit Opera.
Gleiches Ergebnis.

Erst ein Blick in den Quelltext zeigte die Ursache: Eine ausgefeilte Javascript Browserweiche, die nicht weniger als 3 x 10 = 30 unterschiedliche Betriebssystem/Browserkombinationen abfragt, und das jeweils passende CSS einbindet.

Wenn - ja wenn Javascript aktiviert ist.

Ist es aber bei mir erst mal nicht, wenn ich auf fremden Seiten surfe. Dank Firefox und seinen nützlichen Erweiterung. (Warum Opera das CSS nicht erkannte, obwohl ich dort Javascript nicht deaktiviert habe, hab’ ich nicht mehr untersucht. Vielleicht liegt es daran, dass ich die neueste Version 9.2 installiert hab’?)
Und ohne Javascript wird auf diesen Seiten gar kein Stylesheet eingebunden.

Ich bewundere den Eifer des Webdesigners, der 30! Stylesheets erarbeitet hat. Leider in meinem Fall vergeblich.

Die Moral von der Geschicht?
Javascript nie ohne fallback!

Der Webdesigner der zitierten Seite möge Nachsicht mit mir haben: Das Beispiel ist rein zufällig, und die Kritik absolut konstruktiv zu verstehen. Zumal es sich um eine vorbildlich barrierefreie Seite handelt.

CSS machts möglich: einfach alle hexadezimalen Farbwerte durch die jeweilige Komplementärfarbe ersetzt, und schon ensteht eine Darstellung in invertierten Farben. Der Name dieses Stils ergibt sich daher wie von selbst: »invertiert«

Die Vorgehensweise ist ganz einfach:
color: #ef66cc wird zu #109933 nach folgendem Schema:

01234567
||||||||
fedcba98

Daß mit dieser mechanischen Vorgehensweise ein halbwegs ansehnlicher Stil entsteht, ist schon erstaunlich.

Hoppla! Was ist denn mit dem Design passiert? Ganz einfach, webdesign weisshart beteiligt sich am »CSS Naked Day«. Die Idee dahinter ist recht simpel: ist die Website noch benutzbar, wenn man sämtliche Formatierungen abschaltet? Verwendet die Website semantisches Markup, oder gehen ohne das Design wesentliche Informationen verloren?

Entstanden ist die Idee im Weblog von Dustin Diaz, der den »First Annual Naked Day: April 05« ausgerufen hat. Auf dieser Seite findet man auch eine lange Liste von Websites, die ebenfalls an der Aktion teilnehmen. Die Technik dahinter ist übrigens denkbar einfach – man muss dazu einfach nur sein /css/-Verzeichnis umbenennen.

Nachtrag: auch wenn heute erst der 4. April ist, auf der anderen Seite unseres Planeten ist bereits der 5. April. Daher dauert es auch 48 statt 24 Stunden, bis dieser Zustand vorbei ist.

… es sei denn, Du wählst aus meinem Styleswitcher einen Style aus; dann ist der Spuk vorbei, zumindest so lange, bis Du Deinen Browser neu startest. ;-)

Nachtrag 2: … und weil’s so schön war, hab ich die »Nacktversion« auch noch meinem Styleswitcher hinzugefügt.

Ältere Browser verstehen CSS meist nur unvollständig. Mit diversen hacks kann man da zum Teil was machen. Aber wenn das alles nichts hilft, oder das Design vollkommen zerschossen wird, dann hilft nur noch: das CSS vor bestimmten Browsern gänzlich verstecken, und eine unformatierte Seite ausliefern.
Ob das dann auch noch ordentlich aussieht, ist davon abhängig, daß der Quelltext semantisch sauber geschrieben ist. Für diese Seite kann jeder das ganz einfach überprüfen: einfach den Style “ohne CSS” wählen.
Und wie mache ich das mit dem “Verstecken"?
Das ist hier beschrieben.

Weil das Design der Seiten unter IE5/mac zerschossen wurde, hatte ich diesem Browser bisher kein CSS geliefert.
Ich denke, daß ich den Fehler gefunden habe. IE5/mac erhält jetzt den gestylten Inhalt.
Da ich aber zum Testen leider keinen Mac zur Verfügung habe, sondern nur screeshots, bin ich auf entsprechende Rückmeldungen angewiesen.
Danke hierfür schon mal im Voraus.

Nur publizieren, was auch getestet werden kann.
Nach diesem Motto habe ich bisher dem Konqueror Browser kein CSS geliefert.
Nachdem ich jetzt auch mit dem Konqueror 3.2.1 testen kann, kriegt auch dieser Browser das CSS, und damit alle Style-Angaben.
… obwohl noch einige Darstellungsfehler nachgebessert werden müssen. Am auffälligsten: dynatext, die dynamische Textersetzung, funktioniert nicht. Und damit ist der Style Leonardo unbrauchbar. Warum, weiß ich noch nicht.

Für die Überschriften im Style “Leonardo” verwende ich eine Schriftart, die sicher nicht auf Ihrem PC installiert ist.
Wie so etwas geht, beschreibt Stewart Rosenberger in einem Artikel, der bei www.alistapart.com vorgestellt wurde.
Weil ich glaube, daß es gut auf meine Seite paßt, hab ich den Artikel ins Deutsche übersetzt.

Anregungen und Kritik sind diesmal ganz besonders willkommen.

Was für die Navigation gilt, gilt auch für den Styleswitcher:
die aktuelle Auswahl sollte gekennzeichnet und kein aktiver Link sein - ein häufig vernachlässigtes usability feature.
Ich hab das heute mal umgesetzt. Und da meine Navigation einschließlich Styleswitcher per PHP eingebunden wird, mußte ich noch eine Abfrage einbauen, welcher Style gerade aktiv ist. Und das funktioniert natürlich per cookie-Abfrage.