css - unterscheidung für IE geht nicht durch den validator

[deike]

Hallo,

vielleicht kann mir ja einer von euch helfen.
ich html-le grade barrierefrei, habe mein layout glücklich hingebogen in ems und %te und immer für den IE (da wo es nötig war) eine gesonderte angabe gemacht, z.B.:

.keyvisualcontent {
  width:31.2em;
  //width:30em;
  height:12.48em;
  //height:12em;
  }

die browser haben sich brav das heruasgesucht, das für sie bestimmt gewesen ist.
leider gehen die " //" nicht durch den strengen validator des w3c.
sind die nicht konform?
gibt es eine andere möglichkeit, eine (elegante und übersichtliche) unterscheidung für den IE vorzunehmen?

bin sehr dankbar für eure hilfe!
deike

[Gunnar Bittersmann]

deike,

gibt es eine andere möglichkeit, eine (elegante und übersichtliche) unterscheidung für den IE vorzunehmen?

Ja, die Einbindung eines IE-speziellen Stylesheets mit conditional comments.
Gunnar

[MudGuard]

Hi,

gibt es eine andere möglichkeit, eine (elegante und übersichtliche) unterscheidung für den IE vorzunehmen?
Ja, die Einbindung eines IE-speziellen Stylesheets mit conditional comments.

Ich find den * html Selektor praktischer, weil der keinen Eingriff ins HTML-Dokument erfordert.

cu,
Andreas

[Dieter Raber]

Hallo MudGuard,

Ich find den * html Selektor praktischer, weil der keinen Eingriff ins HTML-Dokument erfordert.

Mir ist das Konzept von solchen Hacks, auch zB. body> nie so richtig klar geworden, koenntest Du bitte auf einen passenden Artikel verweisen?

Gruß,

Dieter

[MudGuard]

Hi,

Ich find den * html Selektor praktischer, weil der keinen Eingriff ins HTML-Dokument erfordert.
Mir ist das Konzept von solchen Hacks, auch zB. body> nie so richtig klar geworden, koenntest Du bitte auf einen passenden Artikel verweisen?

Nö, kann ich nicht, weil ich keine weiß.

Das Konzept ist:
Finde einen Selektor (oder eine Syntax), den nur die gewünschten Browser interpretieren.

Beispiel:

* html div { /* was auch immer */ }

Das selektiert theoretisch alle div-Elemente beliebig tief verschachtelt in einem html-Element beliebig tief verschachtelt in einem beliebigen Element.
Geckos und Operas interpretieren diesen Selektor korrekt - es gibt kein solches div, da das html-Element nicht in einem beliebigen Element verschachtelt ist. Also wird kein div damit formatiert.
Der IE hat aber den Fehler, * html falsch zu verstehen und damit auch das toplevel-html-Element auszuwählen ==> obiges Beispiel formatiert sämtliche divs.
Syntaktisch ist der Selektor absolut korrekt - aber er ist im Zusammenhang mit HTML-Dokumenten eigentlich sinnlos.
Damit erreicht man also eine Formatierung nur im IE.

html>body div { /* was auch immer */ } funktioniert in Geckos/Opera usw, weil diese den Kind-Selektor kennen. IE ist zu blöd dafür, der kennt den Kind-Selektor nicht und ignoriert die Formatierungen. Damit erreicht man also eine Formatierung in modernen Browsern.

cu,
Andreas

[Dieter Raber]

Hallo MudGuard,

Vielen Dank fuer die Auskunft. Nochmal eine Nachfrage: Das mit dem Stern habe ich bisher noch nicht gesehen, es muss also, wenn man nur IE ansprechen will "* html" (Stern html), nicht einfach "html" heissen?

Also so
/* Das gilt fuer Gecko etc. */

div {
  foo:bar;
}

/* Das ist fuer IE */

* html div {
  foo: foobar;
}

Gruß,

Dieter

[MudGuard]

Hi,

Vielen Dank fuer die Auskunft. Nochmal eine Nachfrage: Das mit dem Stern habe ich bisher noch nicht gesehen, es muss also, wenn man nur IE ansprechen will "* html" (Stern html), nicht einfach "html" heissen?

Genau.

/* Das gilt fuer Gecko etc. */
div {
  foo:bar;
}
/* Das ist fuer IE */
* html div {
  foo: foobar;
}

Im Prinzip richtig, aber:
Es gibt gar keine CSS-Eigenschaft foo ;-)

cu,
Andreas

[Dieter Raber]

Hallo MudGuard,

Im Prinzip richtig, aber:
Es gibt gar keine CSS-Eigenschaft foo ;-)

Ehrlich? - Keine metasyntaktischen Eigenschaften? Jetzt bin ich aber schwer enttaeuscht ;-)

Gruß,

Dieter

[Ingo Turski]

Hi,

es muss also, wenn man nur IE ansprechen will "* html" (Stern html), nicht einfach "html" heissen?

Korrekt. Und wenn Du das umdrehst und einen speziellen Selektor für moderne Browser verwendest, ist natürlich doe Reihenfolge auch zu ändern, also:

/* Das ist fuer alle Browser, auch den IE */

div {
  foo: foobar;
}

/* Das gilt fuer Gecko etc. */

html>body div {
  foo:bar;
}

freundliche Grüße
Ingo

[MudGuard]

Hi,

Und wenn Du das umdrehst und einen speziellen Selektor für moderne Browser verwendest, ist natürlich doe Reihenfolge auch zu ändern, also:

Nö.

Die Selektoren
div
und
* html div

bzw.

div
und
html>body div

haben unterschiedliche specificity - also ist die Reihenfolge vollkommen egal.

cu,
Andreas

[Ingo Turski]

Hi,

Nö.

Die Selektoren
[...]
haben unterschiedliche specificity - also ist die Reihenfolge vollkommen egal.

auch wieder (mal) richtig. :-)
Allerdings habe ich's mir angewöhnt, die korrekten Formatierungen unabhängig hiervon zuletzt anzugeben. Ist vielleicht auch ein wenig übersichtlicher.

freundliche Grüße
Ingo

[Joachim]

Hi,

.keyvisualcontent {
  width:31.2em;
  //width:30em;
  height:12.48em;
  //height:12em;
  }

Du kannst ie auch so austricksen:

div.mydiv {
    ... allgemeine angaben
}

div[class="mydiv"] {
    ... nur die Guten könnens;
    !important;
}

ausserdem jibbet da noch Tantek

Gruesse, Joachim

[Ingo Turski]

Hi,

div[class="mydiv"] {
    ... nur die Guten könnens;

genau. Aber was ist mit den nicht ganz so guten?

ausserdem jibbet da noch Tantek

von dem sich der IE6 aber nicht mehr beeindrucken läßt.

Nein. Sinnvoll finde ich conditional comments oder den Child-Selektor html>body für kleinere Korrekturen. Der Star-html-Hack ist zwar auch praktisch, mir widerstrebt aber, unsinnge Selektoren anzugeben.

freundliche Grüße
Ingo

[Cyx23]

Hallo,

gibt es eine andere möglichkeit, eine (elegante und übersichtliche) unterscheidung für den IE vorzunehmen?

hier findest du einige CSS Filter und Browserweichen, z.B. Internet Explorer 4-6 CSS Weiche per * html,
ein auch hinsichtlich zukünftiger unbekannter Browser eher als harmlos einzustufender "Hack".

Einige nicht validierbare CSS-Weichen können übrigens auch bei einigen Browsern Fehler bei nachfolgenden
CSS-Anweisungen verursachen, deshalb ist hier m.E. die Validität hier stärker zu beachten als
beispielsweise bei einigen nicht konformen Eigenschaften oder Attributen.

Grüsse

Cyx23