michaa: Zu großer Text und fehlende Bilder im Chromium Browser

Chromium ist der Chrome-Browser ohne Google-spyware unter Debian/Linux.

Bei folgender Seite (ohne *#?&)
p*t#a?c&.ch

fehlen links unten drei Bilder. Zudem werden die Schriften wohl insgesamt zu groß gerendert (gegenüber Opera, FF, IE 6,7,8) was zu Zeilenumbrüchen an unerwünschter Stelle führt.

Zudem tritt der Fehler auch bei Goggles neuen Feature "Instant View" auf, wohl weil dort die gleiche engine verwendet wird. Dadurch werden diese Fehler zumindest indirekt, über die Vorschau auch in anderen Browsern sichtbar weshalb ich mich noch mehr veranlasst sehe, dem Fehler auf den Grund zu gehen.
Nur wie bekämfe ich dies an der Ursache, ich will ja nicht in allen anderen Browsern noch kleinere Schriften, nur damit es auch in Chromium passt ... oder gibt es Conditional Comments für Chromium?

  1. Hi, michaa!

    Zunächst einmal: Chromium ist lediglich die Testversion von Google Chrome, nicht die offizielle Spywarefreie Version (inzwischen fragt Chrome auch bei der Installation nach, ob Daten erhoben werden dürfen und Google die Standardsuchmaschine sein soll).

    Abgesehen davon gibt es keine Möglichkeit, innerhalb von HTML nach Chromium zu filtern, allerdings kann man mit JavaScript den UserAgent prüfen, etwa so:

    ...  
    <body>  
    <script>document.body.className += /chromium/i.test(navigator.userAgent) ? ' chromium' : '';</script>  
    ...
    

    Nun kann man die Body-Klasse "chromium" dazu benutzen, das CSS entsprechend anzupassen. Normalerweise ist von einem solchen Vorgehen eher abzuraten. Wenn aber nichts anderes hilft, sehe ich lieber eine funktionierende Lösung als Ratschläge, diese nicht umzusetzen.

    Gruß, LX

    --
    RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
    1. Hi, michaa!

      Zunächst einmal: Chromium ist lediglich die Testversion von Google Chrome, nicht die offizielle Spywarefreie Version (inzwischen fragt Chrome auch bei der Installation nach, ob Daten erhoben werden dürfen und Google die Standardsuchmaschine sein soll).

      Nunja, in der Debian Paketbeschreibung liest sich das so:
      ...
       Chromium ist die Basis von Google Chrome, der ein umbenanntes Chromium mit
       anderem Logo und mit einigen wenigen Ergänzungen wie
       Benutzungsverfolgung und ein System für automatische Aktualisierungen ist.
      ...

      Abgesehen davon gibt es keine Möglichkeit, innerhalb von HTML nach Chromium zu filtern, allerdings kann man mit JavaScript den UserAgent prüfen, etwa so:

      ...

      <body>
      <script>document.body.className += /chromium/i.test(navigator.userAgent) ? ' chromium' : '';</script>
      ...

      
      >   
      > Nun kann man die Body-Klasse "chromium" dazu benutzen, das CSS entsprechend anzupassen. Normalerweise ist von einem solchen Vorgehen eher abzuraten. Wenn aber nichts anderes hilft, sehe ich lieber eine funktionierende Lösung als Ratschläge, diese nicht umzusetzen.  
        
      In jedem Fall danke für diesen Tipp. Da ich jedoch grundsätzlich kein JS benutze muss ich wohl schauen ob ich nicht doch am Layout noch etwas schrauben kann.  
        
      bye  
        
      MH
      
      -- 
      war unregistriert "michaa"
      
      1. Dann könntest Du versuchen, auf Basis der zumindest nicht ganz unwahrscheinlichen Annahme, dass möglicherweise Chromium die Bildschirmauflösung anders bewertet als seine Kollegen, mit
        @media all and (-webkit-min-device-pixel-ratio: [float]) { [zusätzliches CSS] } zu targeten; float ist dabei eine Fließkommazahl über 1, [zusätzliches CSS] der Code, der dazu führt, dass die Zeichen korrekt dargestellt werden.

        Gruß, LX

        --
        RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
        1. @media all and (-webkit-min-device-pixel-ratio: [float]) { [zusätzliches CSS] } zu targeten; float ist dabei eine Fließkommazahl über 1, [zusätzliches CSS] der Code, der dazu führt, dass die Zeichen korrekt dargestellt werden.

          ... das hört sich jetzt nicht nach CSS2 an. Wo kann ich mehr darüber lesen?

          Danke jedenfalls.

          bye

          MH

          --
          war unregistriert "michaa"
          1. Om nah hoo pez nyeetz, michat!

            ich würde in der Webkit-Referenz beginnen.

            Matthias

            --
            http://www.billiger-im-urlaub.de/kreis_sw.gif
            1. Om nah hoo pez nyeetz, michat!

              ich würde in der Webkit-Referenz beginnen.

              Matthias

              Du meinst vermutlich dies hier. Die Referenz kann ich dort nicht finden. Kennst du _dort_ eine entsprechende Anlaufstelle, die sich mit der Browserkompatibilität beschäftigt?

              1. Om nah hoo pez nyeetz, michaa!

                http://trac.webkit.org/changeset/15054

                Matthias

                --
                http://www.billiger-im-urlaub.de/kreis_sw.gif
                1. http://trac.webkit.org/changeset/15054

                  Ok, das Problem besteht also schon seit 4 Jahren, scheint also lang bekannt. Die Lösung für mich scheint mir noch in weiter ferne.

                  bye

                  MH

                  --
                  war unregistriert "michaa"
        2. @media all and (-webkit-min-device-pixel-ratio: [float]) { [zusätzliches CSS] } zu targeten; float ist dabei eine Fließkommazahl über 1, [zusätzliches CSS] der Code, der dazu führt, dass die Zeichen korrekt dargestellt werden.

          Danke, aber ich verstehe das überhaupt nicht und weiß nun auch nicht wo ich dazu weitere Info und vor allem Anwendungsbeispiele bekomme.
          Ist "zusätzliches CSS" so zu verstehen, dass ich eine _angepasste_ Kopie des vorhandenen erstelle und dieses spezial CSS im head der *.xhtml definiere und für webkit basierte Browser darauf verzweigen muss?

          1. Om nah hoo pez nyeetz, michaa!

            Ist "zusätzliches CSS" so zu verstehen, dass ich eine angepasste Kopie des vorhandenen erstelle und dieses spezial CSS im head der *.xhtml definiere und für webkit basierte Browser darauf verzweigen muss?

            Nein, einfach (eine) zusätzliche Regel(n) festlegen.

            Matthias

            --
            http://www.billiger-im-urlaub.de/kreis_sw.gif
            1. Nein, einfach (eine) zusätzliche Regel(n) festlegen.

              Hast du vielleicht ein Beispiel wie soetwas im normalen CSS Fluss aussieht?

              Ich definiere

              h1 {font-size: 1.3 em;}

              und sehe im Ergebnis dass Webkitbrowser h1 Elemente größer rendern als dies bei sonst üblichen Browser der Fall ist.

              Daher ergänze ich im CSS die Definition für h1 wie?

              1. Om nah hoo pez nyeetz, michaa!

                Daher ergänze ich im CSS die Definition für h1 wie?

                Ich denke, es ist weder nötig und sinnvoll für einzelne Elemente, solche Angaben zu machen, denn es handelt sich ... [lies ] und dazu dieses Beispiel, beachte und verabschiede dich von dem Gedanken, dass eine Internetseite in allen Browsern exakt aussehen muss.

                Matthias

                --
                http://www.billiger-im-urlaub.de/kreis_sw.gif
              2. Hallo!

                Das ganze sieht dann etwa so aus:

                h1 { font-size: 1.3em; }  
                @media all and (-webkit-min-device-pixel-ratio: 1.8) {  
                   h1 { font-size: 1.2em; }  
                }
                

                Allerdings wirst Du an den Werten vermutlich noch drehen müssen.

                Gruß, LX

                --
                RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
                1. h1 { font-size: 1.3em; }

                  @media all and (-webkit-min-device-pixel-ratio: 1.8) {
                     h1 { font-size: 1.2em; }
                  }

                  
                  >   
                  > Allerdings wirst Du an den Werten vermutlich noch drehen müssen.  
                    
                    
                  Ok, die Anwendung an sich wird klarer. Nur wie kommst du zu diesem Faktor für die Ratio? Diese 1.8? Was beschreibt dieser Faktor? Ist der für andere Browser gleich?  
                  Das Problem besteht ja darin, dass Chromium im Vergleich zu allen getesteten Browsern bestimmte Überschriften zu groß rendert und dadurch die nachfolgenden Boxen aus dem Layout drängt.  
                  Ich befürchte dass ich mich dazu mit CSS3 eingehender befassen muss, was ich nur sehr ungern tue, aber zur Lösung bleibt mir wohl nicht anderes übrig.  
                    
                  @ Mathias  
                  Es geht nicht um ein gleiches Layout, sondern um ein nicht gesprengtes.
                  
  2. ... Zudem werden die Schriften wohl insgesamt zu groß gerendert (gegenüber Opera, FF, IE 6,7,8) was zu Zeilenumbrüchen an unerwünschter Stelle führt.

    Das kann bei unkonfigurierten Orchideen-Browsern passieren. Konfigurierte Orchideen aber machen es richtig, ohne dass du im CSS etwas anpassen musst.

    Du solltest allerdings einen Auirbag einkalkulieren. Es soll schliesslich Anwender geben, die ihre Schrift grösser, aber noch lange nicht zu gross einstellen. Don't fuck with them.

    Zudem tritt der Fehler auch bei Goggles neuen Feature "Instant View" auf, wohl weil dort die gleiche engine verwendet wird.

    Ja, und da ist das eh sekundär.

    Nur wie bekämfe ich dies an der Ursache, ich will ja nicht in allen anderen Browsern noch kleinere Schriften, nur damit es auch in Chromium passt ... oder gibt es Conditional Comments für Chromium?

    Verursache vor allem nicht ein Problem, das nicht existiert.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische