Hier finden Sie alle Beiträge welche dem Begriff "CSS" zugeordnet sind.
Und da ist er, der Grund unseres wochenlangen Ressourcen- Engpasses, der dunklen Augenränder und des bereits bedenklich hohen Anteiles von Coffein im Blutkreislauf: der Relaunch von Talenthouse
Talenthouse versteht sich als Plattform, auf der sich Künstler verschiedener Genres vorstellen können – weltweit, unabhängig, unverbindlich und kostenlos – in Form von Bildern, Audio, Video und nat. Text.
Hier das offizielle Promotion- Video:
Auch an verschiedene “Share & Post”- Angebote wurde gedacht. So läßt sich ein Profil- Player schnell und einfach in Facebook oder MySpace integrieren, mittels GMail oder GMX verbreiten oder einfach per “Embed Code” in jede Seite einbinden.
Jedes Mitglied bekommt eine eigene Web- Adresse, die direkt auf sein Portal verlinkt, z.B. www.talenthouse.com/reynhard
“Conditional Comments” – was ist das?
“Conditional Comments” (CC) sind eine proprietäre HTML- Syntax, die nur der Microsoft Internet Explorer (IE) interpretiert, alle anderen Browser lesen diese als normalen HTML- Kommentar und reagieren nicht.
Eingesetzt wird diese um z.B. spezielle CSS- Dateien im Head oder Elemente im Body nur vom IE laden oder anzeigen zu lassen.
Artikel hierzu bei wikipedia: de.wikipedia.org/wiki/Conditional_Comments
Beispiel:
<!--[if IE]>Ich bin ein IE<![endif]-->
In dieser Form läßt sich aber kein umgekehrter Fall ermöglichen, also eine Textzeile (oder CSS- Datei), welche alle Browser – außer IEs - anzeigen (diverse Browserweichen mal nicht angedacht).
Deshalb die Frage: wie kann man CC dazu nutzen, auch “Nicht- Internet Explorer” zu erkennen, obwohl diese die CC ignorieren?
Eine diesbezügliche Diskussion im selfhtml- Forum brachte eine ebenso geniale wie einfache (und auch valide) Lösung zu Tage:
<!--[if IE]>Ich bin ein IE<![endif]-->
<!--[if !IE]>-->Ich bin kein IE<!--<![endif]-->
Zur Erklärung:
Easy as easy can be – oder auf deutsch gesagt: das Einfache kann so einfach sein ;-)
Für Interessierte hat Microsoft eine Dokumentation mit erweiterten Informationen online gestellt. Dort sind noch andere (meist nicht valide) Möglichkeiten zu finden.
Das ist ja mal ein interessanter Browser- Bug – mindestens “Prädikat: sehenswert” ;-)
Welcher Browser ihn verursacht ist schnell erraten: der Microsoft Internet Explorer, diesmal sogar inkl. Version 7!
Es geht hauptsächlich um die eher harmlose Eigenschaft “letter-spacing”. In Verbindung mit “floatetenden Elementen” entwickelt es sich aber zu einem explosiven Gemisch…
Fallbeispiel (sinnfrei, aber übersichtlich):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
body {letter-spacing:0.5em;}
p {float:left; margin-right:15px;}
</style>
</head>
<body>
<p>links 1</p><p>rechts 1</p><br />
<p>links 2</p><p>rechts 2</p><br />
<p>links 3</p><p>rechts 3</p><br />
<p>links 4</p><p>rechts 4</p><br />
<p>links 5</p><p>rechts 5</p><br />
</body>
</html>
Es sind dies also jeweils zwei nebeneinander liegende Element, darunter wieder zwei….
Mittels “letter-spacing” aus dem Mutter- Element soll der Text etwas “aufgelockert” werden.
So weit, so gut, so einfach! Interessant wird es aber wenn man dieses simple Beispiel in einem Microsoft Internet Explorer betrachtet: da sind nur mehr die “ungeraden Zeilen” – also “links 1/3/5″ und “rechts 1/3/5″ – zu sehen, der Rest ist verschwunden!
“Letter-spacing” nur im “p”- Element verursacht keine Probleme – bleibt nur mehr der “br” (break) über. Und siehe da: aufgehobenes “letter-spacing” für den Break (”br {letter-spacing:0;} “) biegt alles wieder gerade.
Danke liebe Jungs von Microsoft, danke für die verschwendete, aber doch vergnügliche Zeit bei der Fehlersuche…
Nun bin ich schon mehrere Jahre in diversen HTML- und CSS- Foren unterwegs – lesend, aber auch schreibend.
Der traurige “Ist”- Zustand dort ist…:
Die wohl am meisten benutzen Einleitungssätze verschiedenster einschlägiger Postings ist: “Ich habe ein Div- Layout gemacht …”, “Ich habe ein CSS- Layout …” oder “Ich steige gerade von einem Tabellen- Layout auf ein Div- Layout um …”.
Und immer wieder tauchen Beispiel- Codes in dieser Form auf:
<div id="wrapper">
<div id="header"
<div>Die Überschrift</div>
</div>
<div id="navi">
<div><a href="">Home</a></div>
...
</div>
<div id="content">
<p>Text</p>
</div>
</div>
Das Element “div” scheint hierbei ein Allzweckmittel zur Strukturierung zu sein, quasi als ein Ersatz der bisher gewohnten Tabellen.
Nun, was ist ein “div” überhaupt?
Div ist die Abkürzung von “Division” und bedeutet soviel wie “Teilung, Abtrennung, Aufgliederung, Kategorie,…”. Dies ist auch schon die einzige Bedeutung: eine Vielzahl von Elemente aufteilen bzw. gruppieren. Im Gegensatz zu “Listen” oder “Überschriften” also ein Element ohne spezielle Funktion.
HTML ist aber – wie der Name “HyperText Markup Language” schon sagt eine “Auszeichnungssprache”, d. h. Inhalt wird mit dem zur Bedeutung passenden Element “ausgezeichnet”.
Beispiel: <h1>Die Überschrift</h1>: “h1″ bedeutet “Headline 1″ – also die Überschrift erster Ordnung.
Legt man dies nun auf obiges Beispiel um haben alle angeführten Inhalt die gleiche Bedeutung: die Überschrift ist gleich definiert wie die Navigation oder der Inhalt.
“Das ist doch egal, oder?”
Der erste optische Eindruck würde dies eventuell bestätigen, aber die so oft sträflich vernachlässigte “Barrierefreiheit” und “Maschinenlesbarkeit” fordert das Gegenteil! Korrekte semantische Auszeichnung ist da ein MUSS!
So betonen Vorlesebrowser die Inhalte je nach Auszeichnung, oder Sites wären auch mit deaktiviertem oder defektem CSS gut bedienbar – siehe “Naked Day”. Und auch in Entwickler- Teams ist Semantik ein ausgezeichneter Motor zur gemeinsamen Arbeit.
Am meisten aber leidet der wohl bekannteste, blinde Besucher unter fehlender Semantik: die Suchmaschine!
Für Google & Co. ist der Inhalt einer “Div- Soup” eine elends lange Kette von Wörtern, ohne Unterscheidung und Wertigkeit! Die Suchmaschinen haben keine Möglichkeit z.B. kurze und wichtige Zusammenfassungen, wie es Überschriften (h1 bis h6) eigentlich sein sollten, aus dem Wulst an Information herauszufiltern und dadurch Ihre Suche zu beschleunigen. Dies wirkt sich oft auf die Platzierung in der Treffer- Liste der Suchmaschinen aus – diese “weiß ja nicht was wichtig ist”.
Dabei wäre es so einfach! Tim Berners-Lee (”Wer hats erfunden? ;-)) hat es Ende der Achtziger ja so vorgesehen, als unter seiner Leitung der http- Standard veröffentlicht wurde: Inhalte nach deren Bedeutung auszeichnen!
Wieder umgelegt auf obiges Beispiel wäre dies:
<h1>Die Überschrift</h1>
<ul>
<li><a href="">Home</a></li>
...
</ul>
<div id="content">
<p>Text</p>
</div>
Die Überschrift ist als solche ausgezeichnet, eine Link- Liste (was eine Navigation ja auch ist) ist als Liste definiert, maximal der Content wird/kann (je nach Beschaffenheit) mit einem Div zusammen gefasst werden.
In diesem Kurzbeispiel mag das nicht so deutlich hervortreten, aber semantisch korrekter HTML- Code benötigt wesentlich weniger Markup – ein zusätzlicher Vorteil, u.a. auch bei Suchmaschinen.
Zur optischen Verschönerung kann jedes Element per CSS angesprochen werden, und der “Wrapper” kann in vielen Fällen durch passender Formatierung des body- Tags wegfallen.
Es ist also einfacher als man denkt, semantisch korrektes HTML zu schreiben. Diverse Online- Tutorials – allen voran “SELFHTML” sind ausgezeichnete Info- Quellen, aber auch “CSS 4 YOU” und viele mehr…
Also bitte in Zukunft: NICHT “Div- Layouts” erstellen, sondern einfach “HTML- Dokumente” ;-)
Barrierefreies Webdesign nach WAI
Barrierefreiheit wird heutzutage vielfach mit “Behindertengerecht” gleichgesetzt. Dahinter steckt jedoch viel mehr!
Der Name der Organisation, welche die Richtlinien für Barrierefreiheit herausgibt sagt schon mehr aus: WAI steht für “Web Accessibility Initiative” – das Schlüsselwort ist hierbei “Accessibility”, also “Zugänglichkeit”.
Barrierefreie Web-Sites sind für alle Menschen und Endgeräte ohne Einschränkungen “zugänglich”!
Die meisten Barrieren sind Einschränkungen für:
Barrierefreies Webdesign nimmt sich dieser Einschränkungen an und ermöglicht es, die Seitendarstellung an die eigenen Bedürfnisse anzupassen.
Dies geschieht unter anderem durch:
Welche Vorteile bringt eine barrierefrei Website?
Ist barrierefreies Webdesign teurer?
Werden bei der Erstellung einer Website alle unter “standardkonformes HTML” angeführten Regeln eingehalten ist der größte Teil schon erledigt. Einige zusätzliche Aspekte müssen noch beachtet werden, diese sollten sich aber im Endpreis einer Website nicht groß auswirken.
Gibt es bei Barrierefreiheit Layouteinschränkungen?
Wenn man von übertriebenen Animationen – welche sowieso meist sinnfrei sind – absieht und nicht unbedingt dunklegraue, kleine Schrift auf hellgrauem Hintergrund bevorzugt steht einem modernen Layout kaum etwas im Wege. Der beste Beweis ist die Site auf der Sie sich gerade befinden.
Das das Thema Barrierefreies Internet ernst genommen wird beweisen die gesetzlichen Verordnungen zur Umsetzung von Web-Sites öffentlicher Hand:
Einige Links zum Thema:
neuere Einträgeältere Einträge
Nach Begriffe sortiert ("Tag Cloud"):
CMS CSS facebook Fun Google+ Gratis Internet jQuery kick-image.at Musik Printdesign Sicherheit Test TinyMCE Twitter Webdesign Webtool WordPress2011
2010
2009
2008
2007
2006
