4. IE6 und Klassenselektor in CSS?

IE6 und Klassenselektor in CSS?

  • M

    Normalerweise verwendet man Klassen auch intelligenter um Elemente anzusprechen.
    Du machst:

    <a class="x">
    <b class="x y">
    <b class="x y">
</a>

    und verwendest im CSS dann "b.x.y".

    Normalerweise würde man das so schreiben:

    <a class="x">
    <b>
    <b>
</a>

    und b dann im CSS mit "a.x b" adressieren. Diese normale und übliche Variante ist nicht nur kürzer, eleganter und schöner, der IE kapiert sie sogar auch 😉

    0
  • D

    Was machst du aber wenn du mehere Seiten hast? Oder etwa das gleiche in der selben Seite:

    <div class="a">
    <a>Text</a>
    <a>Wichtiger Text, wie unterscheidest du nun?</a>
</div>

<div class="a">
    <a>Zwar gleich wie das obere, aber leicht anders</a>
    <a>Text</a>
</div>

    Ich mache z.B. sehr gerne sowas:

    <div class="links">

<a class="link normal" href="blaa">blaa</a>
<a class="link selektiert" href="blaa">blaa</a>

</div>

    Nichtmal sowas kann der beschissene IE6.

    0
  • R

    DEvent schrieb:

    Ich mache z.B. sehr gerne sowas:

    <div class="links">

<a class="link normal" href="blaa">blaa</a>
<a class="link selektiert" href="blaa">blaa</a>

</div>

    Nichtmal sowas kann der beschissene IE6.

    Ich kenne ehrlich keine Webseite, die CSS-Klassen derart handhabt ...

    Was spricht einfach hiergegen?

    <a class="linkDefault" href="blaa">blaa</a>
<a class="LinkSelected" href="blaa">blaa</a>
    0
  • S

    Anti-1337ness natürlich.

    MfG SideWinder

    0
  • M

    DEvent schrieb:

    Ich mache z.B. sehr gerne sowas:

    <div class="links">

<a class="link normal" href="blaa">blaa</a>
<a class="link selektiert" href="blaa">blaa</a>

</div>

    Nichtmal sowas kann der beschissene IE6.

    Bei deinem ersten Beispiel vergibst du eben eine Klasse für jede Textklasse - so ist das ja auch gedacht.
    Bei deinem zweiten Beispiel, das ich hier zitiert habe, ist die Klasse "link" schlichtweg absolut überflüssig. "div.links a.normal" wählt bereits nur Links der Klasse "normal" innerhalb des DIVs aus. Analog "div.links a.selektiert".
    Wenn du von den eleganten weil redundanzfreieren Möglichkeiten von CSS Gebrauch machst, kannst du eine Menge deiner Klassen einsparen und der dämliche IE macht sogar dabei mit.

    0
  • D

    SideWinder schrieb:

    Anti-1337ness natürlich.

    MfG SideWinder

    Naja weniger Tipparbeit?
    So definiere ich bei der gemeinsamen Klasse das grobe Aussehen. Dann brauche ich bei .selected blos ein font-weight: bold; oder color: rgb();

    0
  • M

    Schön zu wissen, dass man (zumindest in Browsern ohne IE) auch so adressieren kann, man lernt halt nie aus. ^^

    Aber in den hier genannten Beispielen macht das tatsächlich keinen Sinn. Bei Links kannst Du einfach

    <style type="text/css">
a.normal { ... }
a.wichtig { ... }
</style>
<a href="#" class="normal">...</a>
<a href="#" class="wichtig">...</a>

    machen.

    Bei Überschriften entsprechend mit den hx-Tags

    <style type="text/css">
h1.normal { ... }
h1.wichtig { ... }
h2.normal { ... }
h2.wichtig { ... }
</style>
<h1 class="normal">...</h1>
<h1 class="wichtig">...</h1>
<h2 class="normal">...</h2>
<h2 class="wichtig">...</h2>

    Und fertig. 😃

    Allerdings hatte ich auch schonmal Fälle, wo ich mir diese Adressierung gewünscht hätte, wenn ich mich nur erinnern könnte. 😞

    Fact ist aber, wenn man sematisch korrekt und minimal arbeitet, dann braucht man das "fast" nicht.

    0
  • D

    Naja ich mach halt öffter sowas:

    <style type="text/css"> 
a.meinlink { font-size: 12px; display: list-item; } 
a.normal { color: rgb(100, 100, 255) } 
a.wichtig { color: rgb(255, 100, 100) } 
</style> 
<a href="#" class="meinlink normal">...</a> 
<a href="#" class="meinlink wichtig">...</a>

    Funktioniert auch wunderbar und wenn man für die Basisklasse viele Attribute hat, dann erspart das eine menge Tipparbeit. Leider funktioniert es nicht bei IE6, oder nur teilweise.

    0
  • M

    hm, das nun von Dir eingestellte Beispiel funktioniert bei mir im IE6 wunderbar.
    Jedoch macht es keinen Sinn einem Link eine Klasse zu geben, um ihn als Link zu klassifizieren. Dafür sind die Tag-Selektoren da.

    Dein Beispiel wäre also so viel schöner:

    <style type="text/css">
a         { font-size: 12px; display: list-item; }
a.normal  { color: rgb(100, 100, 255) }
a.wichtig { color: rgb(255, 100, 100) }
</style>
<a href="#" class="normal">...</a>
<a href="#" class="wichtig">...</a>

    Und auch, wenn man Links in verschiedenen Bereichen selektieren will, kann man das so machen:

    <style type="text/css">
	#header  a         { ... }
	#header  a.wichtig { ... }
	#left    a         { ... }
	#left    a.wichtig { ... }
	#content a         { ... }
	#content a.wichtig { ... }
</style>
<div id="header">
	<a href="#">...</a>
	<a href="#" class="wichtig">...</a>
</div>
<div id="left">
	<a href="#">...</a>
	<a href="#" class="wichtig">...</a>
</div>
<div id="content">
	<a href="#">...</a>
	<a href="#" class="wichtig">...</a>
</div>
...

    Ich seh' da jetzt kein Problem drin. So können sich auch gleiche Klassen in verschiedenen Bereichen der Seite unterschiedlich verhalten. Mehrere Klassen z.B. "extern" und "wichtig" kann man zusätzlich noch kombinieren, um z.B. externe Links mit einer Grafik zu versehen, etc.
    So ist es sauber und wenig Tipparbeit.

    Sicher, man könnte jetzt je eine Klasse für Links im header-, left- und content-Bereich definieren, aber ob ich jetzt als Selektor ".HeaderLink" oder "#header a" schreibe, da ist letztere doch ein wenig kürzer und (vor allem) schöner. 🙂
    Desweiteren kann ich noch Links in Absätzen bspw. anders kennzeichnen, als in Listen, z.B.

    <style type="text/css">
#content p a {
    color:           #000;
    text-decoration: underline;
}
#content li a {
    color:           #F00;
    text-decoration: none;
}
...
</style>

    Ich sehe nicht, wo Deine Methode hier sauberer, effektiver, flexibler oder auch nur kürzer wäre.
    Natürlich wird bei (meiner) Art der Selektor mit zunehmender Verschachtelung länger, aber zu viel sollte man sowieso nicht verschachteln und zudem ist es wesentlich flexibler, da ich auf diese Weise nicht ständig neue Klassen definieren muss, nur weil ich plötzlich nicht nur im Content-Bereich eine Link-Klasse wichtig habe, sondern auch im Navi-Bereich. Die Klasse "wichtig" für Links gibt es ja bereits und steht sofort per "#navi a.wichtig" zur Formatierung bereit. 😃

    0
  • R

    Wo ist das Problem!?

    <style type="text/css">
a.normal, a.wichtig {
   font-size: 12px;
   display: list-item;
}
a.normal { color: rgb(100, 100, 255) } 
a.wichtig { color: rgb(255, 100, 100) } 
</style> 
<a href="#" class="normal">...</a> 
<a href="#" class="wichtig">...</a>
    0
  • M

    "a.normal, a.wichtig" ist mehr Tipparbeit, als z.B. ".meinlink" bzw. "a". 😃

    0
  • ?

    SideWinder schrieb:

    Anti-1337ness natürlich.

    MfG SideWinder

    😃 👍

    0
  • R

    mantiz schrieb:

    "a.normal, a.wichtig" ist mehr Tipparbeit, als z.B. ".meinlink" bzw. "a". 😃

    Stimmt, aber immer noch besser als <div class="link wichtig"></div><div class="link unwichtig"></div> 😉
    Ich wollte nur ausdrücken, dass es tausend Möglichkeiten gibt, das Ausgangsproblem zu umgehen. Obwohl es für mich kein Problem ist, dass ich das "link wichtig" in dem Fall für schlichtweg unpassend halte ... 😃

    0
  • M

    Ich habe schon ein paar Beiträge von Dir hier gelesen und ich glaube zu wissen, dass Du weisst, wie man es richtig bzw. schöner machen kann, also fühl Dich von meiner Kritik nicht angesprochen. 🙂

    Wie es jeder macht, ist ja jedem selbst überlassen, man sollte sich nur nicht beschweren, wenn man es in der (aus meiner Sicht) ungünstigsten Variante macht, die anderen Möglichkeiten nicht verwendet bzw. nicht verwenden will und es damit Probleme gibt.
    Im Webdesign-Bereich gibt es zahlreiche Ungereimtheiten, was die Browser angeht, da muss man flexibel sein und verschiedene Möglichkeiten probieren, A unterstützt das, B das und C wieder was anderes. Der kleinste gemeinsame Nenner ist meist zu wenig, um wirklich schöne Seiten zu schreiben, aber wenn man einigermaßen minimalistisch bleibt, dann hat man nur sehr wenige Probleme.
    AFAIK ist es meist Unwissenheit, weshalb man sich über fehlerhaftes Verhalten beschwert. Natürlich ist das Verhalten des Browsers dadurch immernoch fehlerhaft, aber häufig gibt es Alternativen, die dann doch überall funktionieren. Mehr wollte ich gar nicht sagen. 🙂

    Ich bin zwar auch noch ziemlich im Lernprozess, was das angeht, aber mittlerweile überprüfe ich meine Seiten im IE5.0, IE5.5, IE6.0, IE7.0, Opera 8.5, Netscape 7.1 und Firefox 2.0 und bis auf ein paar Kleinigkeiten hab' ich es bisher geschafft die Darstellung in allen Browsern vernünftig hinzubekommen.
    Zugegeben, bisher waren es nur 3 Layouts, aber es werden bestimmt noch mehr. 🙂
    Hoffentlich. 😃

    0
  • D

    thx mantiz, die Methode von dir funktioniert wunderbar und ist wirklich übersichtlicher als meine 🙂

    0
  • M

    Kein Problem, freut mich, wenn ich helfen konnte. Eine Seite mehr, die schönen Code verwendet, bleiben nur noch .... wieviel Milliarden Seiten gab' es doch gleich nochmal? 😃

    Naja, ein Schritt nach dem anderen. :p

    0
  • D

    mantiz schrieb:

    Kein Problem, freut mich, wenn ich helfen konnte. Eine Seite mehr, die schönen Code verwendet, bleiben nur noch .... wieviel Milliarden Seiten gab' es doch gleich nochmal? 😃

    Naja, ein Schritt nach dem anderen. :p

    Alleine das man das coole W3C-Logo auf die Seite draufmachen kann lohnt es sich dem Standard gerecht zu werden 🕶

    0
Anmelden zum Antworten