Sprung zum Inhalt [/] Tastaturkürzel / Accesskeys [0]
webdesign weisshart Startseite

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zur Liste der Kategorien | zum Archiv

Eine CSS3 Spielerei

Dienstag, 14. September 2010

Ich hab’ mal mit dem Schriftstil der Überschriften experimentiert. Wer einen Browser benutzt, sieht das Ergebnis.
Für Benutzer des IE: So sollte es aussehen

So sah es aus:
Screenshot

Das CSS dazu:

h1, h2 {
-webkit-text-stroke: 1px #242;
letter-spacing: 4px;
color: #c7c7a8 !important;
text-shadow:
3px 3px 0 #242,
-1px -1px 0 #242,
1px -1px 0 #242,
-1px 1px 0 #242,
1px 1px 0 #242;
}

h1, h2 {
color: #454\9 !important;
letter-spacing: 1px\9;
}

Danke an css-tricks.com dafür.
Ach ja: Was bedeutet eigentlich die letzte CSS-Deklaration? Insbesondere das \9?
Da der IE das CSS3 nicht versteht, würde er die Überschriften in der Farbe #c7c7a8 darstellen; also viel zu blass, um lesbar zu sein. Mit color: #454\9 wird die Farbe für den IE auf #454 eingestellt.
Das “\9″ ist ein CSS-Hack für alle IE einschließlich IE 8. Danke an David Bloom dafür.


Blog / Artikel empfehlen: auf Twitter empfehlen auf Facebook teilen Google+

Ein eigenes CSS für das iPad?

Seit langem bediene ich mobile Geräte (Handys usw.) mit einem eigenen CSS, um der Bildschirmgröße Rechnung zu tragen. Siehe z. B. diesen Beitrag. Auch das iPhone fällt nach meinem Dafürhalten darunter, obwohl das auch mit Standard-CSS und einigem Gepfriemel seitens des Benutzers noch einigermaßen klar kommt.

Für die Unterscheidung setze ich folgende PHP-Funktion ein:

function check_mobile() {
$agents = array(
‘Windows CE’, ‘Pocket’, ‘Mobile’,
‘Portable’, ‘Smartphone’, ‘SDA’,
‘PDA’, ‘Handheld’, ‘Symbian’,
‘WAP’, ‘Palm’, ‘AvantGo’, ‘iPhone’, ‘BlackBerry’, ‘MOT-’,
‘cHTML’, ‘BlackBerry’, ‘Opera Mini’,
‘Nokia’, ‘Palm’, ‘Blazer’, ‘SonyEricsson’, ‘Minimo’
);

for ($i=0; $i<count($agents); $i++) {
if(isset($_SERVER["HTTP_USER_AGENT"])
&& strpos($_SERVER["HTTP_USER_AGENT"], $agents[$i]) !== false
)
return true;
}
return false;
}

Ja, ich weiß: Der String ‘iPhone’ im array ist redundant. Weil das iPhone ohnehin schon ‘Mobile’ im User Agent String mitschickt:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Jetzt zum iPad:
Auch das iPad trägt das ‘Mobile’ im User Agent String:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Aber dem iPad ein ‘mobiles CSS’ liefern? Nein! Und den String ‘Mobile’ will ich aus meinem array nicht herausnehmen. Daher wird die Abfrage jetzt erweitert zu:

for ($i=0; $i<count($agents); $i++) {
if(isset($_SERVER["HTTP_USER_AGENT"])
&& strpos($_SERVER["HTTP_USER_AGENT"], $agents[$i]) !== false
&& strpos($_SERVER["HTTP_USER_AGENT"], ‘iPad’) === false)
return true;
}

und das iPad erhält das, was ihm zu Gesicht steht: nämlich mein ‘normales’ CSS.


Blog / Artikel empfehlen: auf Twitter empfehlen auf Facebook teilen Google+

(M)ein barrierefreier Webchat - eine spezielle Konfiguration für hörsehbehinderte Menschen

Donnerstag, 9. September 2010

Mein Chat ist speziell auf Barrierefreiheit optimiert (obwohl 95% der Benutzer davon wohl nichts bemerken).
Die Konfigurationsmöglichkeiten sind fast unendlich. Und für manch einen wohl fast zu viel. Ich habe daher mal eine beispielhafte Konfiguration für hörsehbehinderte Menschen online gestellt.
Viele hörsehbehinderte Menschen nutzen ihre Hör- und Sehreste so weit es irgendwie geht. Einmal durch maximale Vergrößerung der Bildschirmanzeige (z. B. mittels Strg und Plus-Taste), zum anderen durch parallel laufende Sprachausgabe mittels eines Screen Readers. Für diesen “multimedialen” Ansatz ist die Konfiguration optimiert. Dennoch können auch nichtbehinderte Menschen den Chat “normal” nutzen, etwa durch Umschalten auf einen der vielen mitgelieferten Skins.
Die Konfigurationsdatei ist im Download-Paket enthalten. Einfach die Datei tbl_config_inc.php umbenennen in personal_config_inc.php.


Blog / Artikel empfehlen: auf Twitter empfehlen auf Facebook teilen Google+

Ältere Beitäge:

Kategorien:

Tastaturkürzel

zum Seitenanfang