Webdesign: CSS-Tipps
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 anders angezeigt werden (insbesondere die Helligkeit), sofern man nicht kalibriert, sollte man auch an mehreren Rechnern (Freunde, Arbeit,...) testen.
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 anhand der Optik, wohin sie ein Klick bringen wird (weg von der aktuellen Site 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 eingebettete Logos 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;
}
Anstelle des Zeichens 25E5 (◥) haben sich u.a. auch folgende Werte als sinnvoll/geeignet erwiesen – alles 4Byte-Hexadezimal-Unicode, also im normalen HTML-Dokumentenfluß als ◢ geschrieben:
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 ➤ 27A4 Dreieck nach rechts
linktext ➯ 27AF dicker, hohler Pfeil nach rechts
linktext ⏩ 23E9 2 Dreidecke wie Fast Forward
linktext ↝ 219D Pfeil nach rechts mit Wellenlinie
linktext ✈ 2708 Flugzeug, mittel gut zu erkennen
linktext 🏠 1F3E0 Haus (für lokal vorliegende Dateien, dazu zuerst so erstmal alle Links definieren, dann in einer zweiten Regel die externen anders definieren)
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)
Für weitere Werte einfach mal Unicode- und XHTML+MathML-Zeichentabellen ansehen – dafür ist BabelMap Portable super geeignet.
Created: 2006-08-09; Last modified: Fri, 2015-02-20 00:23 (CET)
