Display None mit anderem CSS-Stylesheet aufheben

Indium1 · 04.08.2012

Hallo an alle Leser,

ich nutze mehrere CSS-Stylesheets (u. a. auch Conditional Comments) um die Darstellung der Webseite in möglichst vielen Browsern (auch die älteren wegen Barrierefreiheit) zu erreichen.

Vorweg brauche ich keine Aufklärung das dies auch mit CSS Hacks geht, und mir ist die Serverlastigkeit sowie die etwas umständliche Wartung bekannt. Dennoch habe ich mich für diesen Weg entschieden um Validen CSS Code zu schreiben.

Mein Problem:

In einem div Element soll eine Grafik angezeigt werden die einen Design-Charakter hat. Diese Grafik hat eine Breite von 1280px (bzw. 80em). Damit naher nicht ein Horizontaler Scrollbalken erscheint, soll auf die Grafik overflow:hidden angewandt werden. Dies funktioniert bei älteren Browsern aber leider nicht. Meine Idee wäre die Grafik als Hintergrundbild und per basis.css in das div Element einzufügen. Weiter wird im gleichen div Element ein p Element mit derselben Grafik eingefügt, aber diese mit der basis.css auf display:none gestellt. Hiermit wird der Scrollbalken bei älteren Browsern unterbunden. Erst mit dem CSS-Stylesheet für moderne Browser soll das Hintergrundbild auf none umgestellt und das p Element aktiviert werden.

Die Frage ist nur wie mache ich das jetzt richtig? Könnte man dafür das display: inline bzw. block nutzen um das p Element wieder zu aktivieren?

Vielen Dank für eure Antworten!

Grüße,

Indium1

randacek_pro · 04.08.2012

AW: Display None mit anderem CSS-Stylesheet aufheben

Hallo,

sorry, dass ich erst mal nachfragen muss, aber noch kann ich mir kein ganz genaues Bild des Problems machen

Könntest du evtl deinen Code (HTML + CSS) posten?
Wie soll sich die Seite überhaupt verhalten, wenn das Fenster eine Breite von unter 1280px hat?
Das wäre ja nicht nur für mobile Endgeräte interessant, sonder gerade, weil du ältere Browser ansprichst, musst du auch Nutzer ohne hochauflösende Widescreen-Displays bedenken...

Viele Grüße

Indium1 · 05.08.2012

AW: Display None mit anderem CSS-Stylesheet aufheben

Hallo randacek_pro,

erst einmal vielen Dank für Deine Antwort!

Wie soll sich die Seite überhaupt verhalten, wenn das Fenster eine Breite von unter 1280px hat?
Das wäre ja nicht nur für mobile Endgeräte interessant, sonder gerade, weil du ältere Browser ansprichst, musst du auch Nutzer ohne hochauflösende Widescreen-Displays bedenken...

Das ist ja das was ich meine!

Das Layout hat sich der Browsergröße anzupassen (auch flüssiges Layout genannt) und da liegt der Hase bei der breiten Grafik ja im Pfeffer begraben. Internet Explorer 5 bis 6 und Netscape 4 würden einen horizontalen Scrollbalken anzeigen, welcher Selbstverständlich aus Barrierefreier Sicht nicht erwünscht ist. Daher auch die Idee als erstes eine CSS Datei laden zu lassen die für alle Browser gilt, sozusagen als Basis.

Beispiel XHTML (hier absolut gekürzt ohne Doctype und Metatags):

HTML:

  …
  <link rel="stylesheet" media="screen,projection" type="text/css" href="styles_start/style_basis.css" />
  <style media="screen,projection" type="text/css">@import url(styles_start/style_modern_ohne_ie.css) all;</style>
  <!--[if IE 6]>
  <style media="screen,projection" type="text/css">@import url(styles_start/style_ie6.css);</style>
  <![endif]-->
  …
  …
  </head>
  <body>
  <div id="kopfzeile"><p id="bild"><img src="images/gr.gif" alt="" /></p></div>
  …

In der Basis CSS sind nur Befehle vorhanden womit eigentlich alle Browser was mit anfangen können. Eine max-width oder min-width etc. pp. sowie overflow Deklaration würde ja hier nichts bringen. Von daher sehe Dir mal die div id Kopfzeile an. Hier ist ein P-Tag mit der id Bild eingefügt. Darin enthalten ist ein Image-Tag. Das P-Tag wird in der Basis CSS ausgeschaltet. Ersatzweise wird aber der div id Kopfzeile das gleiche Bild als Hintergrundgrafik mitgegeben.

Beispiel Basis CSS (gekürzte Fassung):

Code:

  [FONT=Arial][SIZE=3]#kopfzeile {[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]margin: 0;[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]padding: 0;[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]border: 0;[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]background-image: url(../images/gr.gif);[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]background-color: #666699;[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]background-repeat: no-repeat;[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]color: #ffffff;[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]}[/SIZE][/FONT]
  
  [FONT=Arial][SIZE=3]#bild {[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]display: none;[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]}[/SIZE][/FONT]

Der Internet Explorer sowie auch Mobilfunk Simulatoren würden jetzt das Bild wie gewünscht ohne horizontalen Scrollbalken anzeigen. Netscape 4 habe ich jetzt nicht verfügbar, dürfte aber laut den eingehaltenen CSS Richtlinien kein Problem darstellen.

Da aber Hintergrundbilder bei Veränderung von Schriftgrößen nicht Skaliert (verkleinert oder vergrößert) werden, kommt die zweite CSS-Datei nur für die modernen Browser ins Spiel. Hier wird das Hintergrundbild deaktiviert aber dass P-Tag Bild soll bzw. muss natürlich aktiviert werden. Vorgestellt habe ich mir das folgendermaßen:

Beispiel Modern CSS (gekürzte Fassung):

Code:

  [FONT=Arial][SIZE=3]#kopfzeile {[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]background-image: none; [/SIZE][/FONT]
  [FONT=Arial][SIZE=3]}[/SIZE][/FONT]
  
  [FONT=Arial][SIZE=3]#bild {[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]display: inline; oder display: block;[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]> Hier weiterer Code für Größenangaben des Bildes mit overflow, max-width et. pp. <[/SIZE][/FONT]
  [FONT=Arial][SIZE=3]}[/SIZE][/FONT]

Es kommt also demnach nur auf die richtige Aktivierung des P-Tags Bild an, wo ich nicht weiß welche besser wäre oder welche Alternativen es noch ohne Java-Script geben könnte.

Viele Grüße,

Indium1

randacek_pro · 05.08.2012

AW: Display None mit anderem CSS-Stylesheet aufheben

Hallo Indium1,

ich verstehe dein Problem.
Das was du suchst könnten also die Media Queries sein.
Wenn du mit dem Umschalten des <p>-Tag eh nur auf die modernen Browser abzielst, kannst du es dir viel einfacher machen: komplett in CSS(3) und ohne Javascript:

HTML:

<link rel="stylesheet" type="text/css" href="styles_start/style_modern_ohne_ie.css" 
media="only screen and (min-width: 1280px)" />

Diesen CSS-Aufruf verstehen nur moderne Browser, alte können damit nichts anfangen und zusätzlich gibst du eine weitere Bedingung an, wann das Stylesheet greifen soll, nämlich, wenn der Viewport mindestens 1280px breit ist - also die Breite deines Bildes.
Willst du aber das Bild mitskalieren und ist somit die Breite des Bildes nicht so wichtig, verzichte einfach auf die Breitenangabe und mache zB:

HTML:

<link rel="stylesheet" type="text/css" href="styles_start/style_modern_ohne_ie.css" 
media="only screen and (color)" />

womit du dieses CSS nur aufrufst, wenn es ein moderner Browser ist, der CSS3 versteht. Ältere Browser verstehen nämlich das

Code:

media="[B]only[/B] screen and (color)"

"only" nicht und geben daher dieses CSS nicht aus.
Diese "Browserweichen" musst du aber auch nicht unbedingt im <head> deines HTML angeben, du kannst das ja auch alles in einem CSS definieren.
Übrigens kann dann bei den genannten Varianten dein "styles_start/style_modern_ohne_ie.css" so bleiben, wie gehabt; da es nur bei modernen Browsern aufgerufen wird, sollte damit dein Wunsch, <p> anzuzeigen/einzuschalten funktionieren.

Viele Grüße

Indium1 · 05.08.2012

AW: Display None mit anderem CSS-Stylesheet aufheben

Hallo randacek_pro,

Danke für Deine Tipps und Erklärungen!

Viele Grüße,

Indium1