expertinnen-web.de » CSS

Nützliche Tools für CSS-Entwickler

Renate — Tue, 05 May 2009 17:33:15 +0000

Eine ziemlich umfangreiche Liste nützlicher Tools für alle, die ihre Layouts mit CSS realisieren, gibt es bei W3Avenue. Alles ist schön übersichtlich in Kategorien geordnet. Kriterien für die Aufnahme in die Liste war ein benutzerfreundliches Interface und eine verständlich erklärte Anleitung.

Firefox mißachtet Stylesheets

Susanna — Sun, 21 Jan 2007 15:52:20 +0000

Wenn es daran geht, nicht standardkonformes Verhalten eines Browsers anzuprangern, ergießen sich Haßtiraden, Spott und Hohn ja gewöhnlich über den Interner Explorer. Manchmal tritt aber auch unser geliebtes Arbeitspferd, der Firefox, daneben. So geschehen, als ich ein Druckstylesheet einbinden wollte:

<link href=“extended.css” rel=“stylesheet” type=“text/css” media=“screen, projection” title=“ambranet Lieblings-Stylesheet” />
<link href=“basis.css” rel=“alternate stylesheet” type=“text/css” media=“screen, projection” title=“Linearisierte Darstellung” />
<link href=“print.css” rel=“stylesheet” type=“text/css” media=“print” title=”Druckstylesheet” />

Die beiden ersten Stylesheets lassen dem Anwender die Wahl. Im Firefox kann er sich das Standard-Styling oder die einfachere Alternative auswählen. Beide sind durch das title-Attribut griffig beschrieben. Auch das Druck-Stylesheet hat einen title. Soll ja auch nicht arm dastehen.

Dann kommt die Überraschung: Die Druckvorschau erscheint vollständig ohne Styling. Der Validator sagt nichts dazu, die Seite ist also valide. Die Lösung des Problems:

<link href=“print.css” rel=“stylesheet” type=“text/css” media=“print” />

Das Print-Stylesheet darf keinen title haben und sollte auch an letzter Stelle stehen, da in einigen Fällen nachfolgende alternative Stylesheets für die Bildschirmausgabe auch nicht dargestellt werden. Der Bug ist zwar bekannt, aber auch in Firefox 2.0 noch nicht behoben.

list-style-image umschiffen

Susanna — Wed, 23 Aug 2006 08:22:21 +0000

Individuelle Spiegelstriche sind zwar nett, aber schlecht zu positionieren. Internet Explorer und Firefox ordenen sie unterschiedlich an, so dass man nicht einmal mit etwas Hintergrund um den Punkt zum gewünschten Ergebnis kommen kann.

Besser:

ul {list-style-type: none;}
li {padding-left: 20px;background-image:url(pics/punkt.gif); background-repeat:no-repeat; background-position: 5px 5px;}

Die Liste wird ohne Punkte angezeigt, die Spiegelstriche als Grafik in das Padding des einzelnen Listenelements verlagert und nach Wunsch positioniert.

TYPO3: Links mit CSS formatieren

Renate — Mon, 07 Aug 2006 10:36:18 +0000

Das ist bestimmt schon vielen aufgefallen: Typo3 erzeugt eine falsche Reihenfolge der HTML-Tags, wenn man über das Template-Setup einem Link ein spezielles Format zuordnen will.

Beispiel:
Die Typoscript-Anweisung ACT.wrap = | erzeugt für den aktiven Link in einem TMENU diesen Link: Link. Normalerweise müsste die Verschachtelung aber so aussehen: Link.

Obwohl den eingeschlossenen Text auch ohne spezielle CSS-Formatierung von selbst fettet, bleibt hier die Wirkung aus. Sie wird von der vorhandenen Formatierung für den normalen Link überschrieben.
Effekt: Der Link ist nicht fett und die Kennzeichnung des Aktivstatus bleibt aus. Das gleiche gilt auch für ein umschließendes dem z.B. eine Klasse .bold zugeordnet wird.

Was hilft dagegen?
Da die o.g. Links in Typo3 dynamisch von System generiert werden, lässt sich die Formatierung nicht an die richtige Stelle schreiben. Also kann man das nur mit CSS ausbügeln. Für das Strong-Beispiel ginge das beispielsweise so:

CSS-Code:
strong a {
font-weight: bold;
}

Der Fettdruck von “strong” wird durch das nachfolgende “a” mit dem Normalformat überschrieben. Um das aufzuheben, benötigt der Link “a” innerhalb von “strong” eine neue, eigene Formatierung. Gleiches gilt für andere Element-Verschachtelungen wie “span” oder “p”.

Fazit:
Auch ohne eine explizite Klassenzuweisung, lassen sich verschachtelte Elemente allein per CSS stylen. Das ist insbesondere bei mehrfach verschachtelten Linklisten innerhalb von Textmenüs interessant und verschlankt den Quellcode enorm. Das Stichwort hier heisst “Kontext sensitiv”.

Barrierefreie Image Maps

Renate — Sat, 10 Jun 2006 13:16:57 +0000

Image Maps habe ich nicht mehr verwendet, seit ich mich mit CSS gesteuerten Webseiten beschäftige – und das sind inzwischen ein paar Jährchen. Aber z.Z. arbeite ich an einem Auftrag, der so etwas erfordert und barrierefrei muss es auch sein. Also habe ich mich mal mit “Night of the Image Map” von Stuart Robertson beschäftigt. Die Idee dahinter ist, unsichtbare Links zu erzeugen, sie per position: absolute über einem Basisbild zu verteilen und ihnen für die Buttonfunktion im :hover-Status jeweils ein eigenes Hintergrundbild mitzugeben. Mit CSS haben wir eine perfekte Image Map, ohne CSS benutzbare Links.

Funktioniert eigentlich ganz gut, bis auf die 5er Internet Explorer. Hier bleibt das Hover-Bild leider stehen, wenn es einmal mit der Maus berührt wurde. Stuart Robertson zeigt dazu einen Workaround (:hover bekommt ein border:none). Bei mir hat es allerdings nicht geholfen.

Was mir auffiel: Die meisten meiner Buttons funktionieren auch im IE5 problemlos. Sie sind aber im Gegensatz zum Tutorial von Robertson nicht im Basisbild integriert. Ich habe wie bei einem Mouseover jeweils eine On- und Off-Ansicht, also auch im “a:link” ein Hintergrundbild definiert. Nur ein Button tanzt aus der Reihe, er hat nur den On-Status, also genauso wie in o.g. Vorbild. Das brachte mich auf eine alternative Lösung: Ich habe jenem Button ebenfalls ein Off-Bild spendiert – allerdings nur ein 1-Pixel-Transparent-Gif. Dieser eine Pixel genügt, um den Effekt im IE5 auszuschalten.

Heureka.

CSS in E-Mails

Susanna — Fri, 31 Mar 2006 03:48:13 +0000

Wer HTML-Newsletter verschickt und vorhat, sie durch CSS in Form zu� bringen, sollte sich diesen Artikel im Campaign Monitor Blog zu Gemüte führen: CSS ist zwar ein guter Weg, Bandbreite zu sparen, aber Mailclients unterstützten Stylesheets nur in sehr unterschiedlichem Maße. Das geht von gut (Thunderbird, Outlook) bis unterirdisch (Lotus Notes und manche Webmail-Clients). Eine Auflistung wichtiger Mailclients (webbasiert, für PC und für Mac) und der von ihnen unterstützten CSS-Formate erleichtert die Wahl, welcher Zielgruppe ich welche Styles zumuten kann.

CSS strukturiert schreiben

Susanna — Fri, 10 Mar 2006 11:32:42 +0000

Ein lesenswerter Artikel im Webstandards-Blog legt uns ans Herz, auch CSS-Dateien strukturiert aufzubauen. Nicht nur, wenn mehrere Mitarbeiter am Stylesheet werkeln, bringt das Vorteile: Auch wer allein codiert, kommt ohne Struktur nicht weit und verheddert sich schnell in der Kaskade bedingter Formate, wenn er nicht planvoll vorgeht. Wie das aussieht, hängt vom persönlichen Geschmack ab. Was� sich gerade bei kleinen Projekten bewährt – Farben im Stylesheet notieren:

/*Farben
dunkelgrau: #3E4850
beige: #BAAE95
hellbraun: #A38F60
apricot: #FCF0E2
apricot-dunkel: #F3CE9F
gruen: #60A46E
hellblau: #8796BA
orange: #E89C40
*/

So kann man schnell mal mit copy-paste eine Farbe übertragen und riskiert keine Tippfehler.

TYPO3 Indexed Search formatieren

Susanna — Fri, 24 Feb 2006 09:59:53 +0000

Wer sich die Extension indexed_search installiert, steht vor einem Problem: Die Ausgabe der Suchergebnisse ist ein schöner, traditioneller Tabellenverhau, der sich schlecht zähmen läßt. Wer lieber auf Tabellen verzichtet und Absätze und Listen mit CSS formatiert, installiert sich zusätzlich ch_is_templates, eine Extension, die ein gut durchkommentiertes Template für Suchformular, erweiterte Suche und Suchergebnisse mitbringt. Das Template search.html aus typo3/typo3conf/ext/ch_is_templates in das gewünscht Templateverzeichnis, z.B. fileadmin/templates/, kopieren und anpassen. Im Setup des TYPO3-Templates der Suchseite wird der Pfad zu search.html so eingetragen:

plugin.tx_indexedsearch.templateFile = fileadmin/templates/search.html

Einzige Voraussetzung: TYPO3 3.8 und indexed_search mindestens ab 2.1.3

Zehn kleine CSS-Tipps

Susanna — Tue, 15 Nov 2005 14:40:12 +0000

… von Sitepoint! Neben simplen Selbstverständlichkeiten (Was ist ein inline- was ein block-Element und wann sollte man das eine in der Form des anderen – display:block bzw. display:inline – ausgeben) finden sich hier nette Tricks. Besonders brauchbar sind die Hacks zur Darstellung von min-width und min-height durch den IE. Wobei natürlich den Conditional Comments vor Hacks der Vorzug gegeben werden sollte.