Seit CSS 3 gibt es Hyphenation, die automatische Silbentrennung. Unterstützt wird das von Firefox seit Version 6.0, vom Safari auf OS X und iOS, und vom IE 10.

Die Syntax:
body{ -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto;}

Meines Wissens funktioniert das in allen o.a. Browsern bisher nur mit dem Vendor-Prefix.

Fließtest sieht damit auf jeden Fall besser aus, selbst wenn noch die eine oder andere »merkwürdige« Trennung passiert. Überschriften mit Silbentrennung gefallen mir jedoch gar nicht. Deshalb schließe ich automatische Silbentrennung für Überschriften aus, durch

h1, h2, h3, h4{-webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; hyphens:manual;}

Fallweise ist damit immer noch die manuelle bedingte Trennung durch ­ möglich.

Blog / Artikel empfehlen:

Styleswitcher, die Möglichkeit, alternative Seitenstile auf einer Website zu wählen, sind etwas aus der Mode gekommen.
Zu Recht?
Eva Papst setzt auf Ihrer Website aus-meiner-feder.at seit vielen Jahren auf helle Schrift und dunklen Seitenhintergrund - “ein Zugeständnis an blendempfindliche Leser".
In einem ausführlichen Gedankenaustausch anlässlich des A-TAG 2012 haben wir die Grundzüge eines zweiten, hellen Seitenstils für Evas Site festgelegt:

• Wiedererkennbarkeit: Der Stammgast muss sofort erkennen, dass er sich nach wie vor auf Evas Site befindet.
• Lesbarkeit hat oberste Priorität. WCAG 2 - Wahrnehmbarkeit
• Der zusätzliche Stil soll nicht nur einfach die Farben des bisherigen Stils invertieren, sondern insgesamt freundlich und einladend wirken, zum Verbleiben auf der Site animieren. Dabei darf er ruhig auch etwas moderner daherkommen.

Ich glaube, dass ich diese Prinzipien gut umgesetzt habe.

Der zusätzliche, helle Seitenstil auf aus-meiner-feder.at. Unterhalb der Navigation der Styleswitcher, überschrieben mit “Seitenstil”

Blog / Artikel empfehlen:

Das für mich längst unentbehrliche Web Developer Addon von Chris Pederick gibt es in einer neuen Beta. Mit einem fantastischen neuen Feature:

Display Style Information zeigte bisher nur den ancestor path , etwa in der Form
html > body > div#wphead
Für Arbeiten am CSS musste man nun das esistierende CSS Zeile für Zeile durchsuchen, um relevante (auch vererbte) Deklarationen zu finden.

Die Beta machts jetzt einfach:

In Web Developer Menü (Toolbar) den Punkt CSS - Display Style Information wählen

Es öffnet sich eine Sidebar mit dem Hinweis: Select an element to display the styles applied to it Das zu untersuchende Element im Browserfenster mit der Maus auswählen.

In der Sidebar werden alle CSS Anweisungen für das ausgewählte Element übersichtlich aufgelistet.

Übersichtlicher geht’s nicht mehr.
Wie bisher kann man mit CSS - Edit CSS eventuelle Änderungen direkt in Web Developer testen, und gegebenenfalls speichern.

Nachtrag 15.07.2012

Die Version 1.2 final gibt es hier zum Download

Blog / Artikel empfehlen:

Seit langem biete ich für Smartphones ein angepasstes CSS. Eine Vorschaufunktion für dieses spezielle Layout habe ich jetzt in meinem Styleswitcher eingebaut. Unter dem Namen »Mobil«

Blog / Artikel empfehlen:

Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites.

schreibt das FONTDECK Blog.
Warum Websites keine Silbentrennung einsetzen, ist schnell erklärt: Weil die Laufweite der Zeilen, anders als im Print, nicht bekannt ist. Sie hängt nämlich von den Benutzereinstellungen ab.
HTML bietet in diesem Fall eine Art Automatik - den bedingten Trennstrich “soft hyphens” - an: ­ - inzwischen unterstützen alle modernen Browser das.
Das manuelle Setzen von soft hyphens rechtferigt den Aufwand aber nur in wenigen, speziellen Fällen. Deshalb gibt es Techniken, das Setzen von soft hyphens automatisch von JavaScript erledigen zu lassen. Am bekanntesten dürfte Hyphenator.js sein.

Wann macht automatische Silbentrennung Sinn?

1. Wenn Blocksatz eingesetzt wird.
2. Bei extrem kurzen Zeilenweite, z. B. wenn Text Bilder umfließt.

Die Ergebnisse mit Hyphenator.js sind ordentlich. Mit einer gravierenden Einschränkung: Screen Reader (nicht alle, aber die meisten) “verschlucken sich” an den soft hyphens. Das Ergebnis ist unverständlich bis unzumutbar. Wer Wert darauf legt, dass seine Seiten für Screen Reader zugänglich sind, muss auf automatische Silbentrennung mittels Hyphenator.js verzichten.

Ein erster Schritt in die richtige Richtung

Puristen hätten längst eingewendet:
Silbentrennung hat nichts im Markup zu suchen (Markup ist Inhalt), und auch nichts im JavaScript (JavaScript ist zuständig für das Verhalten einer Webseite). Silbentrennung ist Darstellung, und gehört ins CSS! Und dort hat es jetzt, mit der CSS3-Deklaration “hyphens:auto” auch Einzug gefunden. Bisher unterstützen diese Deklaration der brandneue Firefox 6, und Safari 5.1 bzw. Safari / iOS. Und beide Browser auch nur mit Vendor-Prefix. Der CSS Code muss also lauten:

.hyphen {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Damit ist der Safari bedient.
Für den Firefox ist zusätzlich lang="en” für das entsprechende Element (oder ein Elternelement) nötig. Jawohl: “en", auch wenn die Sprache des Dokument eine andere ist. Also

<div class="hyphen" lang="en" >

Das funktioniert. Zumindest auf dem Monitor. Aber es ist natürlich ein absolutes No-Go - nicht nur wegen des Kauderwelsch’, das Screen Reader dann ausgeben.

Was bleibt? - Fazit

Also alles noch Spielerei, nicht in der Praxis einsetzbar?
DOCH!
Es gibt einen Anwendungsfall, der geradezu nach “hyphens:auto” schreit: Das iPhone! Dort sind die Zeilen kurz, und das iPhone versteht die Deklaration.
Also ran ans CSS:

body {
    -webkit-hyphens: auto;
}

Das versteht nur der Safari, und es erfordert kein Verbiegen der Dokumentensprache. Und, weil die Silbentrennung jetzt dort ist, wo sie hingehört, nämlich im CSS, “verschluckt” sich auch der Screeen Reader (VoiceOver) nicht. Wer das Ergebnis sehen will, hier ein Testcase.
Hinweis: Die Testseite ist mit < body lang="en” > ausgezeichnet. Die Anzeige funktioniert also auch im Firefox 6. Wer sich die Seite mit VoiceOver im Safari anhört, weiß, warum das ein No-Go ist.

Nachtrag 08.11.2011

Firefox in der Version 8 versteht jetzt -moz-hyphens:auto, auch ohne die Vergewaltigung mittels lang="en". Und ältere Versione ignorieren diese Auszeichnung einfach. Weil das niemandem schadet, habe ich es sofort in meine Seiten eingebaut.

Nachtrag 19.11.2011

Und auch Safari/Mac in der aktuellen Version 5.1.1 kann jetzt Hyphenation. Ohne Die oben genannten VoiceOver-Probleme.

Kuriositäten im Firefox

Nobody is perfect. “Merkwürdige” Trennungen im Firefox, die mir so untergekommen sind.

• iPho-ne
• VoiceO-ver
• vi-elleicht
• App-le
• Seitende-sign
• JavaS-cript

Blog / Artikel empfehlen:

Seit vielen Jahren hat sich die Erkenntnis durchgesetzt, dass grafische Effekte auf Webseiten besser mit CSS als mit Grafiken dargestellt werden können. Stichworte: Barrierefreiheit und Ladezeit/Traffic.
Als Beispiel möge dieser plastisch wirkende Submit-Button dienen, den ich gerne verwende:



Das CSS für diesen Button umfasst nur wenige Zeilen:

#button {
-moz-border-radius:2em;
-webkit-border-radius:2em;
border-radius:2em;
background: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#444));
background: -moz-linear-gradient(top, #ccc, #444);
background: -o-linear-gradient(top, #ccc, #444); /* Opera ab V. 11.10 */
}

Damit werden alle großen Browser bedient, mit Ausnahme (wie auch anders!?) des Internet-Explorer.
Der IE 6 kann weder border-radius, noch gradient. Aber der IE 6 ist ja ohnehin kein Thema mehr.
IE 7 und 8 können kein border-radius, aber mit einem Hack via filter bzw. -ms-filter wenigstens einen Verlauf darstellen.
Zu sehen ist das mit detaillierten Beschreibungen bei maddesigns.
Nun kommt der mit vielen Vorschusslorbeeren bedachte IE 9, und der macht die von maddesigns beschriebene Lösung kaputt. Der Verlauf läuft über den Radius hinaus und füllt ein Rechteck.



maddesigns hat flugs auch hierfür eine Lösung parat. Ich sag’ mal höflich danke dafür.
Aber ich werde diesen Unfug nicht mehr mitmachen. Vendor-Prefixe (-moz-border-radius anstelle von border-radius) sind nicht schön. Aber was ist eine Zeile zusätzlicher CSS-Code für eine Browser-Engine gegen die CSS-Hack-Ungetüme, die jede neue IE-Version erfordert.
Mein Fazit: Der IE in allen Versionen wird so behandelt, wie er es verdient: Wenn er eine CSS-Deklaration nicht versteht, kriegt er das Fallback. Im vorliegenden Fall eben einen einfarbigen Background ohne Verlauf mit background: #999;



Und ich werde zukünftig keinerlei IE-spezifische CSS-Hacks verwenden. Ich habe schlicht keine Lust mehr, mich über jede neue IE Version zu ärgern, und x CSS Dateien nacharbeiten.

Blog / Artikel empfehlen:

Vorbemerkung

Bei der Erstellung barrierefreier Webseiten ist ein fester Bestandteil das Einfügen von Elementen, die ausschließlich für Screen Reader sichtbar sind. Ein Beispiel: Die Kennzeichnung der aktuellen Seite im Navigationsmenü erfolgt in der Regel in Form von optischen Merkmalen - Farbe, Hintergrundfarbe oder ähnliches.
Da diese Merkmale für Screen Reader nicht erkennbar sind, kann man man der aktuellen Seite im Menü ein “Standort:” voranstellen, und diesen Zusatz unsichtbar machen.
Dieses unsichtbar machen erfolgt per CSS. Aber natürlich nicht, wie immer noch häufig anzutreffen, per display:none!
Die richtige Technik ist vielmehr, diese Elemente aus dem Viewport zu schieben. Zu diesem Zweck werden die betreffenden Elemente mit einer bestimmten Klasse ausgezeichnet, z. b. class="hide", und ins CSS kommt etwas wie
.hide {
position:absolute;
left:-9000px;
overflow:hidden;
display:inline;
}


Versteckte Inhalte sichtbar machen

Nun kann durchaus der Wunsch aufkommen, die solchermaßen versteckten Elemente wieder sichtbar zu machen. Insbesondere Webworker, die sich um Barrierefreiheit bemühen, könnten sich ein entsprechendes Werkzeug wünschen.
Ich glaube allerdings nicht, dass sich die Anzeige von aus dem Viewport geschobenen Elementen automatisieren lässt. Zu vielfältig sind die möglichen Umsetzungen via CSS. Ich habe mir daher eine Technik erarbeitet, die mit wenig Handarbeit auskommt, und einem Firefox Add-on, das vermutlich jeder ernsthafte Webworker ohnehin installiert hat: Das Web Developer Add-on

Die Vorgehensweise

Im Web Developer “CSS bearbeiten” aufrufen.
Im CSS suche ich nun die Deklaration für das aus dem Viewport schieben. Häufig hilft eine Suche nach dem String “000″ - weil eben häufig nach - 1000px oder einem Vielfachen davon verschoben wird.
So sieht das dann aus:



Nun hänge ich an die gefundene Deklaration einfach ein paar Zeilen an, und überschreibe damit das Verschieben:
position:relative;
left:0;
top:0;
color: #222;
background: yellow;
font-weight:normal;

Das sollte für die meisten Fälle genügen. Eventuell ist hier noch ein wenig Nacharbeit erforderlich.



Das Ergebnis erscheint jedenfalls sofort im Browser. Alle aus dem Viewport geschobenen Elemente sind sichtbar, und markiert.

Blog / Artikel empfehlen:

Ich hab’ mal mit dem Schriftstil der Überschriften experimentiert. Wer einen Browser benutzt, sieht das Ergebnis.
Für Benutzer des IE: So sollte es aussehen
So sah es aus:


Das CSS dazu:

h1, h2 {
-webkit-text-stroke: 1px #242;
letter-spacing: 4px;
color: #c7c7a8 !important;
text-shadow:
3px 3px 0 #242,
-1px -1px 0 #242,
1px -1px 0 #242,
-1px 1px 0 #242,
1px 1px 0 #242;
}

h1, h2 {
color: #454\9 !important;
letter-spacing: 1px\9;
}

Danke an css-tricks.com dafür.
Ach ja: Was bedeutet eigentlich die letzte CSS-Deklaration? Insbesondere das \9?
Da der IE das CSS3 nicht versteht, würde er die Überschriften in der Farbe #c7c7a8 darstellen; also viel zu blass, um lesbar zu sein. Mit color: #454\9 wird die Farbe für den IE auf #454 eingestellt.
Das “\9″ ist ein CSS-Hack für alle IE einschließlich IE 8. Danke an David Bloom dafür.

Blog / Artikel empfehlen:

Seit langem bediene ich mobile Geräte (Handys usw.) mit einem eigenen CSS, um der Bildschirmgröße Rechnung zu tragen. Siehe z. B. diesen Beitrag. Auch das iPhone fällt nach meinem Dafürhalten darunter, obwohl das auch mit Standard-CSS und einigem Gepfriemel seitens des Benutzers noch einigermaßen klar kommt.

Für die Unterscheidung setze ich folgende PHP-Funktion ein:

function check_mobile() {
$agents = array(
‘Windows CE’, ‘Pocket’, ‘Mobile’,
‘Portable’, ‘Smartphone’, ‘SDA’,
‘PDA’, ‘Handheld’, ‘Symbian’,
‘WAP’, ‘Palm’, ‘AvantGo’, ‘iPhone’, ‘BlackBerry’, ‘MOT-’,
‘cHTML’, ‘BlackBerry’, ‘Opera Mini’,
‘Nokia’, ‘Palm’, ‘Blazer’, ‘SonyEricsson’, ‘Minimo’
);

for ($i=0; $i<count($agents); $i++) {
if(isset($_SERVER["HTTP_USER_AGENT"])
&& strpos($_SERVER["HTTP_USER_AGENT"], $agents[$i]) !== false
)
return true;
}
return false;
}


Ja, ich weiß: Der String ‘iPhone’ im array ist redundant. Weil das iPhone ohnehin schon ‘Mobile’ im User Agent String mitschickt:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Jetzt zum iPad:
Auch das iPad trägt das ‘Mobile’ im User Agent String:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Aber dem iPad ein ‘mobiles CSS’ liefern? Nein! Und den String ‘Mobile’ will ich aus meinem array nicht herausnehmen. Daher wird die Abfrage jetzt erweitert zu:

for ($i=0; $i<count($agents); $i++) {
if(isset($_SERVER["HTTP_USER_AGENT"])
&& strpos($_SERVER["HTTP_USER_AGENT"], $agents[$i]) !== false
&& strpos($_SERVER["HTTP_USER_AGENT"], ‘iPad’) === false)
return true;
}


und das iPad erhält das, was ihm zu Gesicht steht: nämlich mein ‘normales’ CSS.

Blog / Artikel empfehlen:

Der Firefox macht um den Absende-Button von Formularen einen gepunkteten Rahmen, wenn man den Button per Tabulator-Taste ansteuert.
Das kann im Falle eines sorgfältig gestaltetes Designs arg stören. Ein Beispiel ist der per CSS “rund gemachte” Absende-Button meines Suchformulars. (siehe diesen Beitrag.)

Ein eckiger Rahmen um einen runden Button, das sieht wirklich nicht gut aus.
Aber dieser Rahmen widersetzt sich sich allen Versuchen, ihn per CSS zu entfernen, recht störrisch.

Und es geht doch

Dirk Ginader hat es ganz kurz und trocken getwittert.

Die CSS Anweisung dazu lautet:

input[type=submit]::-moz-focus-inner {border: 1px dotted transparent;}

Ja, genau so. Auch wenn die Syntax fremd erscheint.

Wer nicht generell alle Submit-Buttons stylen will, sondern nur bestimmte mit id oder class ausgezeichnete Buttons, kann die CSS Anweisung natürlich entsprechend abändern. Für einen Button mit der Klasse senden :

.senden::-moz-focus-inner {border: 1px dotted transparent;}
bzw. für einen Button mit der id senden:
#senden::-moz-focus-inner {border: 1px dotted transparent;}

Wichtig: Bitte unbedingt sicherstellen, dass der Fokus, wenn nicht mittels des gepunkteten Rahmens, dann auf andere Art klar kenntlich gemacht wird! Dies ist unentbehrlich für Tastatur-Nutzer, damit sie den Fokus sehen, d. h. wissen, welches Seitenelement gerade aktiv ist.

PS: Kennt jemand eine Methode, den Rahmen auch für Webkit (Chrome, Safari) und Opera zu entfernen. Nach dem IE frag’ ich erst gar nicht. Dort fällt es übrigens gar nicht so sehr ins Gewicht, weil der IE ohnehin den per CSS rund gestalteten Submit-Button nicht darstellen kann.

Blog / Artikel empfehlen:

Seit langem statte ich meine Seiten mit einem fürs mobile Surfen optimierten CSS aus. Weil mobil Surfen, so ist jedenfalls mein Eindruck, erst wirklich Spaß macht, seit es das iPhone gibt, habe ich mir auch angewöhnt, die Anzeige gleich auf die verfügbare Breite des Geräts (in der Hochformat-Ansicht) einzustellen.
Dazu dient folgender Meta-Tag:

<meta name="viewport" content="width=320" />
Weil das Display des iPhone eben 320 px in der Breite auflöst.

Aber jetzt kommt das iPhone 4 mit 640 px. Und obiger Meta-Tag wird dazu führen, dass die Anzeige die doppelte Breite des Displays einnimmt, also zu horizontalem Scrollen zwingt. Eine Horrorvorstellung. Was tun?

<meta name="viewport" content="width=640" />
führt auf iPhones < 4 dazu, dass eine Webseite nur noch in Briefmarkengröße dargestellt wird.

Aber Safari stellt eine wesentlich elegantere Methode zur Verfügung:

<meta name="viewport" content="width=device-width, user-scalable=yes" />

Der Wert device-width liest die auf dem Gerät verfügbare Breite aus, anstelle einer festen Angabe in Pixel.
Und user-scalable=yes ermöglicht das Zoomen. Ohne diese Angabe lässt das Meta-Tag Zoomen nicht zu. Ganz Böse! Man wäre auf horizontales Scrollen angewiesen, um die Seite zu lesen.

Demoseite
Die Demo macht natürlich nur mit dem iPhone Sinn, oder einem User Agent Switcher, z. B. diesem Firefox Add-on

Referenz

Anmerkung: Was das iPad mit diesen Angaben wohl macht? Vielleicht könnte mal ein “iPadler” einen Blick darauf werfen.

Blog / Artikel empfehlen:

Ich habe das Suchfeld auf dieser Seite mal ein wenig “aufgehübscht". Ohne ein einziges Bild, ausschließlich mit CSS. Und weil inzwischen alle modernen Browser CSS3 unterstützen, habe ich ausgiebig Gebrauch gemacht von den CSS3-Eigenschaften radius, gradient und box-shadow.
Im Browser sieht das Suchfeld so aus:

Demo mit CSS im Quelltext

Blog / Artikel empfehlen:

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:

Blog / Artikel empfehlen:

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

Blog / Artikel empfehlen:

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.

Blog / Artikel empfehlen:

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 (Quelle: Wikipedia):

<!‐‐[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.

Blog / Artikel empfehlen:

Hoppla! Was ist denn mit dem Design passiert? Ganz einfach, webdesign weisshart beteiligt sich jedes Jahr 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.

Blog / Artikel empfehlen:

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.

Blog / Artikel empfehlen:

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>

Blog / Artikel empfehlen:

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

Blog / Artikel empfehlen:

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.

Blog / Artikel empfehlen:

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.

Blog / Artikel empfehlen:

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.

Blog / Artikel empfehlen:

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

Blog / Artikel empfehlen:

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.

Blog / Artikel empfehlen:

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.

Blog / Artikel empfehlen:

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.

Blog / Artikel empfehlen:

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.

Blog / Artikel empfehlen: