Gunther: Regel nur dann anwenden, wenn andere Fähigkeit auch vorhanden

SELF-Forum

Regel nur dann anwenden, wenn andere Fähigkeit auch vorhanden

Gunther
– Informationen zu den Bewertungsregeln

Hallo CSS'ler!

Sorry für den etwas nichtssagenden Titel, aber mir viel wirklich kein besserer ein.
Nun zu meinem Anliegen:
Ich bastel gerade an einem Layout, welches u.a. auch einige der CSS3-Features verwendet. Grundsätzlich ist es ja u.a. bei CSS so geregelt, dass ein Browser Dinge, die er nicht "versteht" einfach ignoriert (was ja prinzipiell auch gut so ist).

Leider gibt es aber AFAIK keine Möglichkeit, die Anwendung einer Regel von dem "Verständnis" einer anderen Eigenschaft abhängig zu machen. Von daher meine
Frage 1: Richtig, oder ist mir etwas durchgegangen?

Zum (besseren) Verständnis hier eine kurze Schilderung meiner Absichten:
Ich möchte gerne (u.a.) das Modul multi-column verwenden. Dieses wird aktuell nur vom FF und Safari interpretiert. Mein Grundlayout hat eine Breite von 60em. Sollte der Viewport des Users aber breiter sein, also z.B. eine Breite von 80em (oder mehr) haben, dann würde ich eben gerne mein Layout breiter machen und die Multi-Columns verwenden. Für die Steuerung in Abhängigkeit von der Breite, würde ich Media Queries verwenden. Diese "versteht" aber jetzt bspw. auch Opera, nicht jedoch die Multi-Column Eigenschaften, wodurch mein dann nachwievor einspaltiger Text aber zu breit wird.

Das führt mich dann zu meiner
Frage 2: Sehe ich das richtig, dass ich dieses Problem (sinnvoll/ am besten) nur per Javascript lösen kann?

Und da ich JS mäßig nicht besonders up-to-date bin, gleich noch
Frage 3: Kann man per JS eigentlich ermitteln, ob ein Browser eine bestimmte CSS-Eigenschaft "versteht", also interpretieren kann, und wenn ja, wie?

Für eure Hilfe und alternative Vorschläge meinen besten Dank im Voraus!

Gruß Gunther

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Regel nur dann anwenden, wenn andere Fähigkeit auch vorhanden

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Gunther:

    nuqneH

    Leider gibt es aber AFAIK keine Möglichkeit, die Anwendung einer Regel von dem "Verständnis" einer anderen Eigenschaft abhängig zu machen. Von daher meine
    Frage 1: Richtig, oder ist mir etwas durchgegangen?

    Ja. Nein.

    Frage 2: Sehe ich das richtig, dass ich dieses Problem (sinnvoll/ am besten) nur per Javascript lösen kann?

    Nein. Du kannst die Breite browserspezifisch angeben:

    foo { max-width: 60em }                               /* du verwendest doch max-width, oder? */  
  
* html { width: 60em }                                /* IE < 7 verstehen kein max-width */  
  
foo, x:-moz-any-link, x:not(:default) { width: 80em } /* für Firefox ≥ 3 */

    Für Safari (was ist mit anderen Webkits wie Chrome?) sollte sich auch was finden lassen.

    Frage 3: Kann man per JS eigentlich ermitteln, ob ein Browser eine bestimmte CSS-Eigenschaft "versteht", also interpretieren kann, und wenn ja, wie?

    Abfrage einer gesetzten Eigenschaft foo { bar: baz }

    if (window.getComputedStyle)  
  var quz = window.getComputedStyle(foo, "").getPropertyValue("bar");  
else if (foo.currentStyle)  
  var quz = foo.currentStyle.bar;

    Wenn der Browser die Eigenschaft bar kennt, steht in quz ein entsprechender Wert (muss nicht baz sein!), ansonsten null oder "".

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Regel nur dann anwenden, wenn andere Fähigkeit auch vorhanden

      Gunther
      – Informationen zu den Bewertungsregeln

      @@Gunnar:

      nuqneH

      Ich hatte ja insgeheim gehofft, dass_du_auf den Thread antwortest, bist du doch für mich einer der CSS-Kenner hier im Forum!

      Leider gibt es aber AFAIK keine Möglichkeit, die Anwendung einer Regel von dem "Verständnis" einer anderen Eigenschaft abhängig zu machen. Von daher meine
      Frage 1: Richtig, oder ist mir etwas durchgegangen?

      Ja. Nein.

      Frage 2: Sehe ich das richtig, dass ich dieses Problem (sinnvoll/ am besten) nur per Javascript lösen kann?

      Nein. Du kannst die Breite browserspezifisch angeben:

      foo { max-width: 60em } /* du verwendest doch max-width, oder? */

      Ja, min- und max-width.

      * html { width: 60em } /* IE < 7 verstehen kein max-width */

      Die IEs < 8 machen mir auch keine Sorgen, da deren Stylesheet eh separat ist und über CCs eingebunden wird (liegt daran, dass ich display:table(-...) verwende).

      Bleiben aber u.a. der IE 8 und die Operas, die das alles verstehen, aber multi-column nicht beherrschen.

      foo, x:-moz-any-link, x:not(:default) { width: 80em } /* für Firefox ≥ 3 */

      AFAIR kann der FF multi-column schon ab der Version 2.

      Für Safari (was ist mit anderen Webkits wie Chrome?) sollte sich auch was finden lassen.

      Ja, Chrome & Co. zählen für mich als Safari, da sie ja dessen Rendering-Engine verwenden.

      Frage 3: Kann man per JS eigentlich ermitteln, ob ein Browser eine bestimmte CSS-Eigenschaft "versteht", also interpretieren kann, und wenn ja, wie?

      Abfrage einer gesetzten Eigenschaft foo { bar: baz }

      if (window.getComputedStyle)

      var quz = window.getComputedStyle(foo, "").getPropertyValue("bar");
      else if (foo.currentStyle)
        var quz = foo.currentStyle.bar;

      
>   
> Wenn der Browser die Eigenschaft bar kennt, steht in quz ein entsprechender Wert (muss nicht baz sein!), ansonsten null oder "".  

Ja, vielen Dank. Ich habe dazu auch etwas im Web gefunden. Wenn du evt. kurz einen Blick darauf werfen könntest und mir deine Meinung dazu sagen würdest (brauchbar oder nicht im Sinne von 'funktioniert zuverlässig', 'ist ordentlicher Stil', etc.): <http://thinkweb2.com/projects/prototype/feature-testing-css-properties/> (letzten beiden Absätze ab "getStyleProperty")  
  
Ich meine, eine auf JS basierende Lösung würde mir reichen, da es nicht zwingend notwendig ist. Allerdings wäre eben eine rein CSS basierte Möglichkeit "schöner". Nur sind Lösungen, die auf CSS-Hacks basieren natürlich auch nicht der Weisheit letzter Schluss. ;-)  
  
Besten Dank & Gruß  
Gunther
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Regel nur dann anwenden, wenn andere Fähigkeit auch vorhanden

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Gunther:

        nuqneH

        Ich hatte ja insgeheim gehofft, dass_du_auf den Thread antwortest, bist du doch für mich einer der CSS-Kenner hier im Forum!

        Danke für die Blumen.

        Bleiben aber u.a. der IE 8 und die Operas, die das alles verstehen, aber multi-column nicht beherrschen. […]
        Ich meine, eine auf JS basierende Lösung würde mir reichen, da es nicht zwingend notwendig ist.

        if (document.documentMode || window.opera) foo.style.maxWidth = "60em";

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Regel nur dann anwenden, wenn andere Fähigkeit auch vorhanden

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Gunther:

    nuqneH

    Ich möchte gerne (u.a.) das Modul multi-column verwenden.

    Du meinst CSS3 module: Multi-column layout?

    Dieses wird aktuell nur vom FF und Safari interpretiert.

    ?? Ist mir nicht gelungen, FF oder Safari zu Multi-column layout zu bewegen.

    Haste ’ne Testseite online?

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Regel nur dann anwenden, wenn andere Fähigkeit auch vorhanden

      Gunther
      – Informationen zu den Bewertungsregeln

      @@Gunnar:

      nuqneH

      Ich möchte gerne (u.a.) das Modul multi-column verwenden.

      Du meinst CSS3 module: Multi-column layout?

      Genau das! ;-)

      Dieses wird aktuell nur vom FF und Safari interpretiert.

      ?? Ist mir nicht gelungen, FF oder Safari zu Multi-column layout zu bewegen.

      Hmmm ..., warum nicht?
      Siehe u.a.: http://www.css3.info/preview/multi-column-layout/

      Haste ’ne Testseite online?

      Nein, aktuell leider nicht (aber siehe Link oben). Ich habe aber bereits vor über einem (oder sind es mittlerweile schon 2) Jahr mal ein Test-Scenario zusammengebastelt und wir hatten dazu auch schon einige Diskussionen auf der CSS-Design Mailingliste (u.a. damals auch mit Roland Skop, von dem man hier ja leider nichts mehr hört.).

      Gruß Gunther

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Regel nur dann anwenden, wenn andere Fähigkeit auch vorhanden

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Gunther:

        nuqneH

        ?? Ist mir nicht gelungen, FF oder Safari zu Multi-column layout zu bewegen.
        Hmmm ..., warum nicht?
        Siehe u.a.: http://www.css3.info/preview/multi-column-layout/

        Ah, die Präfixe!

        (u.a. damals auch mit Roland Skop, von dem man hier ja leider nichts mehr hört.).

        Er ist „stets im Hier, nur nicht immer im Jetzt.“

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Regel nur dann anwenden, wenn andere Fähigkeit auch vorhanden

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Gunther:

        nuqneH

        Siehe u.a.: http://www.css3.info/preview/multi-column-layout/

        Den Link auf dieser Seite zu A List Apart: Introducing the CSS3 Multi-Column Module hast du gesehen? Ich hab die dortigen JavaScript-Lösungen aber nicht ausprobiert.

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Regel nur dann anwenden, wenn andere Fähigkeit auch vorhanden

          Gunther
          – Informationen zu den Bewertungsregeln

          @@Gunnar:

          nuqneH

          Siehe u.a.: http://www.css3.info/preview/multi-column-layout/

          Den Link auf dieser Seite zu A List Apart: Introducing the CSS3 Multi-Column Module hast du gesehen? Ich hab die dortigen JavaScript-Lösungen aber nicht ausprobiert.

          Ja, danke! Den Artikel kenne ich. Dort geht es ja um die "Simulierung" des Multi-Column Layouts per JS. Wobei, wenn ich so darüber nachdenke, wäre das zumindest für die Browser, die es nativ nicht können auch eine Möglichkeit ...!

          Für die, die es können, muss ich dann halt nur noch gucken, wie ich es ihnen per 'CSS only' beigebracht kriege. Wobei dabei ja u.a. auch wieder das Problem mit den Media Queries "reinfunkt", was ich in diesem Thread beschrieben hatte.

          Ich "frickel" mal weiter, und gucke, was ich so zustande bringe.
          BTW: Kennst du eine (halbwegs) aktuelle Seite mit CSS-Hacks für die gängigsten Browser?

          Gruß Gunther

          PS: Ich bin erst heute Abend wieder online, also bitte nicht wundern, falls ich vorher nicht auf evt. neue Beiträge antworte.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln