Webdesign: CSS-Tips
Hier sollen nach und nach gute Literatur, Websites, Code-Schnipsel, ... eingepflegt werden.Grundlegende Ansätze / Architektur
Einbinden von CSS
Da alle Browser unterschielich mit CSS umgehen, muß man in mehreren Browsern testen. Empfehlenswert ist die FireFox-Extension "Launchy", da diese die aktuelle Seite bequem in anderen Programmen öffnen kann. Da Farben auf jedem Rechner angezeigt werden (insbesondere die Helligkeit), sollte man auch an mehreren Rechnern (Freunde, Arbeit,...) testen.
Weiterhin empfiehlt es sich, die Fallstricke des IE 5 und 5.5 und 6 mit konditionalen Blöcken zum umgehen, damit also ein Stylesheet nur von IE bearbeitet zu lassen. Nachteil dieses Ansatzes: Dieselbe Formatierung (also z.B. #menu #navi ul) ist über verschiendene Dateien verstreut, so daß man bei der Wartung ab und an inkonsistente Zustände erzeugt (eine der Dateien nicht geändert). Ich persönlich fahlre einen Kompromiß: Was per CSS-Hack sehr sicher funktioniert und nur ein Attribut oder eine kurze Regel betrifft, wird im zentralen, allegemeinen CSS gemacht (zB Bilder als GIF oder PNG?). Dagegen setze ich bei umfangreichen CSS-Blöcken oder weniger sicher funktionierenden Hacks auf mehrere, voneinander getrennte CSSs. So sieht ein konditionaler Block aus:
<!--[if gte IE 5]><![if lt IE 7]>
<style type="text/css">
</style>
<![endif]><![endif]-->Lokales CSS auch bei zentralen CSS-Dateien
Bei manchen Seiten (nicht Sites!) sollte nicht (nur) das zentrale CSS genutzt werden, sondern lokales CSS definiert werden. Dies ist insbesondere bei Seiten
- mit sehr speziellen Inhalten, die für gute Benutzbarkeit eine besondere Formatierung benötigen, sinnvoll.
- mit Checklisten, Wegbeschreibungen etc., die also sehr wahrscheinlich heruntergeladen werden, sinnvoll. Je nach Browser, Betriebssystem, Konfiguration und Workflow werden nur eventuell Zusätze zur HTML-Datei mit heruntergeladen bzw. deren URLs von relativen in absolute umgewandelt. Es ist durchaus wahrscheinlich, daß nur die "nackte" HTML-Datei übrig bleibt. Diese sollte einigermaßen ordentlich aussehen.
Links
Links zu externen Seiten als solche markieren
Indem man Links zu externen Seiten anders gestaltet als interne, wissen Nutzer schon von der Optik wohin sie ein Klick bringen wird (weg von der aktuellen Seite oder nicht?).
Man kann das via JavaScript machen, was aber a) weniger zuverlässig (ist JS aktiv? Welche JS-Version welchen Dialekts?) und b) ineffizient verarbeitet (=unnötig stark CPU belastend) ist.
Ich benutze :after und damit generierten Inhalt, weil damit (auch der Maschine) ganz klar ist, daß dieser Pfeil zum Link gehört (der Pfeil ist sogar klickbar). Hintergrundbilder sind auch weit verbreitet, wobei ich diese nicht so dolle finde, da sie im Gegensatz zu Text mehr Ressourcen benötigen und nicht so problemlos bei der Weiterverarbeitung sind (Duck, Konvertierung in eBook-Formate etc). Solange es nur um einen statischen Pfeil geht, tut es auch ein Zeichen – wobei die animierten WebIcons schon schick sind...
Bilder innerhalb eines Links stellen eine gewisse Schwierigkeit dar: Bei einigen macht es Sinn, daß sie einen kleinen Pfeil neben sich stehen haben (zB im Fließtext eingebetteteLogos von Programmen, Firmen etc), während bei anderen der Pfeil stört oder verwirrt (besonders bei Nutzung von float weil Bild und Pfeil nicht direkt beieinander liegen). Entsprechend halte ich es für sinnvoll, bei jedem einzelnen Bild-Link explizit zu sagen, ob eine Markierung gewünscht ist oder nicht.
Internet Explorer kann den ganzen Spaß natürlich bis incl. Version 6 nicht.
a[href^="http"]:after {
/* Alle Links, die mit http starten (statt irgendwo enthalten)
als extern markieren*/
content:"\25E5";
}
a[href^="http://www.Schoschi.de"]:after, a.noArrowForExternal:after {
/* Seiten meiner Domain nicht als extern markieren */
display: none;
}
linktext ↷ 021B7 gebogener Pfeil
linktext ↪ 021AA Haken-Pfeil
linktext ⇗ 021D7 Doppelpfeil o re (<11pt klumpig+unschön)
linktext ⋰ 022F0 3-Punkt-Linie o re
linktext ≫ 226B >> (viel größer als) (<11pt klumpig+unschön)
linktext ⋙ 022D9 viel viel größer als
linktext ⊿ 22BF normales leeres Dreieck
linktext ◢ 25E2 normales gefülltes Dreieck
linktext ► 25BA gefülltes 3eck nach re
linktext ◥ 25E5 gefülltes 3eck nach o re
linktext ↧ 021A7 oben Strich, von da aus Pfeil nach unten (<11pt klumpig+unschön)
linktext ↥ 021A5 unten Strich, von da aus Pfeil nach oben (<11pt klumpig+unschön)
linktext ↣021A3 links Strich, von da aus Pfeil nach rechts (<11pt klumpig+unschön)
Created: 2006-08-09; Last modified: Sun, 2010-08-01 16:43 (CEST)
