Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Google und die Suche auf Smartphones

Mittwoch, 23. März 2011

Vor einem Jahr habe ich gezeigt, wie Google hilft, Webseiten auf Handhelds und Smartphones besser darzustellen. Ein Feature, das ich nach wie vor für sinnvoll halte.

Jetzt habe ich zufällig ein neues Symbol auf der mobilen Websuche entdeckt:

Screenshot


Was macht dieses Symbol wohl?

Screenshot



Hm? Ein Vorschaubild der Suchtreffer. Mit Wischen kann man auf dem iPhone die Vorschaubilder durchsuchen. Also das Gegenstück für das, was auf der Websuche sich hinter dem Lupensymbol versteckt.

Screenshot


CSS Hacks für diverse IE-Versionen

Samstag, 19. März 2011

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:
Screenshot


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


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;
Screenshot IE


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.


Versteckte Inhalte sichtbar machen

Mittwoch, 2. März 2011

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:
Screenshot Web Developer CSS bearbeiten


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.
Screenshot 2 Web Developer CSS bearbeiten


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


Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE