LANtastic’s Blog

Archive for category CSS

Kontrast- und Helligkeitsberechnung für WCAG konforme Seite

May 31

Posted by LANtastic in CSS, WWW | 1 Comment

Gerade in einer Mailingliste gesehen

Da es bei der Erstellung WCAG tauglicher Seiten auch wichtig ist für ausreichend Kontraste und Helligkeit zu sorgen und das berechnen dieser Werte eher mühsam ist, können diese Links sicherlich hilfreich sein.

Am Besten ist aber die Colour Contrast Analyser Firefox Extension auf der Seite. Diese Plugin analysiert die aktuell angezeigte Seite und stellt anschliessend in einer Tabelle sämtliche verwendeten Farben und ihre Kombinationen dar, aufgeschlüsselt nach Klassen und IDs. Darin zeigt es dann auch, welche Farbwerte nicht korrekt sind, bzw. nochmal überarbeitet werden sollten.

CCS-SSC – CSS ServerSide Constants

Sep 2

Posted by LANtastic in CSS, WWW | No Comments

Auf der Seite von Shaun Inman bin ich eher zufällig auf diese Reihe von Einträgen gestossen

Darin beschreibt er, wie man in der Lage ist, relativ einfach mit CSS Konstanten zu arbeiten.
Beispielsweise: Statt eine bestimmte Farbe immer wieder direkt zu nennen, kann diese nun 1x als Konstante deklariert werden und anstelle des Wertes der Konstantenname verwendet werden.
In der Praxis z.B. sieht das nun so aus, dass man mit einer besonderen Anweisung eine Farbe einer bestimmten Konstante zuweist
@server variables {
hauptfarbe: #CC0000;
}

Statt nun immer wieder die Farbe an der gewünschten Stelle festzulegen

h1 {
color: #CC0000;
}
div.irgendwas {
color:black;
background-color:#CC0000;

kann nun an dieser Stelle die oben deklarierte Konstante verwendet werden.

h1 {
color: hauptfarbe;
}
div.irgendwas {
color:black;
background-color:hauptfarbe;

Im Prinzip erreicht man das selbe auch ebensogut mit einem einfachen Suchen und Ersetzen, jedoch geht da auch mal schnell der Überblick verloren. Genau das ist wiederum der Vorteil der Konstanten. Dort können wiederkehrende Deklarationen zentral und übersichtlich verwaltet werden. Richtig hilfreich werden diese Konstanten, wenn man mit mehreren oder sehr umfangreichen Stylesheets arbeitet. Vorher lohnt sich der Einsatz meiner Meinung nach nicht unbedingt.

Um mit den CSS Konstanten arbeiten zu können werden PHP und .htaccess benötigt. Via .htaccess wird der Server angewiesen CSS Dateien ähnlich wie PHP zu verarbeiten, bevor sie anschliessend an den Browser gesendet werden.

Eine ähnliche Methode wurde schon häufiger verwendet um alternative Stylesheets zu laden. In diesem Fall wurde jedoch statt der CSS Datei eine PHP via <Link …. /> eingebunden, welche das gewünschte Stylesheet generierte oder inkludierte, um es anschliessend an als CSS Datei den Browser zu senden. Einige Styleswitcher arbeiteten auf diese Art und Weise.

Da das Ganze aber noch eine recht neue Sache ist (zumindest in dieser Form), ist das sicherlich noch keine perfekte Sache, aber etwas was sich durchaus etablieren könnte.

[Nachtrag]Bei Eric Meyer gibt es ebenfalls noch einen Eintrag zu diesem Thema (The Constants Gardener)[/Nachtrag]

Rollover buttons und Icons mit CSS

Oct 16

Posted by LANtastic in CSS | No Comments

Auch wenn der kleine Artikel auf der Seite von Sophie Gousset schon ein paar Tage älter ist, aber via CSS-D bin ich gerade auf ihre Seite gestossen, auf der erklärt wird, wie man reine CSS/(X)HTML Buttons erzeugen kann. Im Prinzip ganz einfach, und gut nachvollziehbar und gut sehen die auch noch aus.

Fehlende Hintergründe im IE/win II (zum Ablschluss)

Sep 18

Posted by LANtastic in CSS | No Comments

Da isser der Tip der mir fehlte

Kleine Ergänzung.
… hat bei mir was geklingelt. Das klingt doch sehr nach einem alten Bekannten – der Microsoftschen Erfindung HasLayout ,
die uns schon so viele schöne float-Bugs beschert hat.
Und tatsächlich hilft auch hier der Holly-Hack.

/* */
* html #inhalt * {height: 1px;}
/* */

oder die proprietäre Zoom-Eigenschaft:

#inhalt * {zoom: 1;}

Ist die eigentlich Mac-sicher oder muss sie auch versteckt werden?

Danke Susanne!

Fehlende Hintergründe im IE/win II

Sep 18

Posted by LANtastic in CSS | No Comments

Ich hab mich jetzt nochmal an den dämlichen Bug von heute morgen gesetzt und das Problem noch weiter eingeschränkt.

Die Konstruktion sieht nun so aus:



Dieser <h3> Tag hat zwar einen Hintergrund, aber er wird nicht dargestellt

Bei dem hier isses genau so

Dieser Text steht in einem P-Tag, aber hat das selbe Problem

Hier wird der Hintergrund jedoch angezeigt

Das ganze Problem lässt sich komplett auf den Inhalt des Div Tags mit der ID “inhalt” zurückführen.
Befindet sich darin ein weiteres Blocklevel Element (hier class=”buggy”), sind im IE6/win alle darin liegenden Elemente von dem Bug betroffen.

Lösungen gibt es mittlerweile 3 :

  1. Dem “verbuggten” Inhalt eine Breite zuweisen. Es reicht auch in diesem Fall dem div mit der Klasse “buggy” eine Breite zu geben.
  2. Wie bereits gesagt, den umgebenden Tag einfach weglassen
  3. In der Definition der ID “inhalt” das position:relative weglassen.

Das weglassen der relativen Positionierung erscheint mir noch am sinnvollsten, wobei ich dann leider keine Ahnung habe, wie sich das in anderen Browsern auf das Float Verhalten auswirkt. Mit den Windows Browsern klappt das zwar komplett, aber wie sich das auf andere Browser (Safari & Co) auswirkt, weiß ich leider nicht.

Fehlende Hintergründe im IE/win

Sep 18

Posted by LANtastic in CSS | No Comments

Ich bin auf einen seltsamen Fehler im IE6/win gestossen, der mir absolut unerklärlich ist. Zu sehen ist das Phänomen hier.

Aus mir noch nicht erkennbaren Gründen werden bei den ersten beiden H-Tags keine Hintergründe dargestellt. Man kann die Inhalte zwar einwandfrei formatieren (also Textfarbe, Ausrichtung, usw), jedoch kann man weder Rahmen drum legen, noch Hintergründe zuweisen.

Was ich auch nicht ganz verstehen kann ist der Auslöser. Einziger Unterschied zwischen den 3 Tags : die oberen beiden Tags befinden sich in einem weiteren DIV Tag, der jedoch weder formatiert wird, noch sonst irgendwie Einfluß auf die Darstellung haben sollte. Zumindest in der Theorie .. in der Praxis hat er sehr wohl Einfluß drauf, aber warum … das weiss wohl nur MS.

Bisher hab ich nur 2 Lösungen gefunden :

  1. Man entfernt den umgebenden Div Tag (da ich den brauche, eine schlechte Idee)
  2. Man weisst den H-Tags eine Breite zu (schon besser, aber irgendwie nicht die Endlösung)

Hat irgendjemand eine Idee, was der Auslöser ist, bzw. wie man das Ganze umgeht, oder hat einen hilfreichen Link zur Hand ?

Min-width für alle Browser

Sep 18

Posted by LANtastic in CSS | No Comments

“min-width” ist schon eine feine Sache … zumindest wenn es der Browser unterstützt. Leider klappt das im IE nicht, bzw. in anderen Browsern nur fehlerhaft. Ebenfalls wohl mit dem Problem konfrontiert, hat Dave Shea auf seiner Seite (min-height: fixed;) nun einen Weg beschrieben, wie man die CSS Eigenschaft “min-width” in allen Browsern umsetzten kann, ohne das er die Eigenschaft “min-width” selber verwendet.