Auge: Irritationen beim Test von Mediaqueries im Firefox 25 (Bug?)

Hallo

Ich überarbeite gerade eine Website und setze dort Mediaqueries ein. Die Seite wird, wenn sie über eine bestimmte Subdomain aufgerufen wird, mir dem Test-CSS ausgeliefert, sonst wird das Produktiv-CSS eingebunden. Getestet wird primär mit dem Firefox (25.0.1).

Das Produktiv-CSS enthält auch Mediaqueries, die tun, was sie sollen.

@media screen and (min-width: 481px) and (max-width: 960px) {  
  a {  
  color: #fe5;  
  }  
}

Die Regel wird bei Aufruf mit dem Produktiv-CSS mit all seinen weiteren Regeln bei Änderung der Anzeigebreite im Firefox pixelgenau befolgt. Rufe ich die Seite jedoch mit dem Test-CSS auf, in dem _ausschließlich_ die obige Regel notiert ist, greift die Regel – von einem schmaleren Viewport kommend – erst bei 525 Pixeln Anzeigebreite. Zudem greift sie bis zu einer Breite von 1048 Pixeln statt der angegebenen 960. Der HTML-Quelltext ist bis auf die Angabe des Pfades zur CSS-Datei identisch.

Nun wird's ganz komisch: Ich habe zwei Testseiten gespeichert. In einer wird das Produktiv- in der anderen das Test-CSS eingebunden. Beide Seiten zeigen das Fehlverhalten, obwohl die Live-Seite mit dem selben Produktiv-CSS bei den korrekten Breiten fehlerfrei umschaltet.

Das Verhalten teste ich im Firefox (evtl. „noch“) mit der browsereigenen Funktion zum testen von Viewportgrößen. Nutze ich die – an dieser Stelle etwas umständlicher zu bedienende – Firefoxerweiterung Developer Toolbar oder die Developer Tools des Iron schaltet der Mediaquery korrekt um.

Ist das Problem mit dem Firefox schon mal bei irgendwem anders aufgetreten oder bin ich einfach nur zu doof das Ding zu bedienen?

Tschö, Auge

--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3
  1. @@Auge:

    nuqneH

    Die Regel wird bei Aufruf mit dem Produktiv-CSS mit all seinen weiteren Regeln bei Änderung der Anzeigebreite im Firefox pixelgenau befolgt.

    Pixelgenau?

    Rufe ich die Seite jedoch mit dem Test-CSS auf, in dem _ausschließlich_ die obige Regel notiert ist, greift die Regel – von einem schmaleren Viewport kommend – erst bei 525 Pixeln Anzeigebreite.

    device pixel ≠ CSS pixel

    Rufst du die Seiten evtl. mit verschiedenen Zoomeinstellungen auf (die sich der Fx für jede Domain merkt)? cmd-0 bzw. ctrl-0?

    Breakpoints in Media-Queries sollten nicht in px angegeben werden, sondern in em.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hallo

      Die Regel wird bei Aufruf mit dem Produktiv-CSS mit all seinen weiteren Regeln bei Änderung der Anzeigebreite im Firefox pixelgenau befolgt.

      Pixelgenau?

      Ja, pixelgenau. Mit Punkt; Punkt.

      *btw* Kannst du zur Unterstützung in Zukunft bitte Beispiele bringen, die keine Augenkrebs verursachen? DIESE Seite landet bei mir definitiv in der Kategorie Körperverletzung. boah eyh!

      Rufst du die Seiten evtl. mit verschiedenen Zoomeinstellungen auf (die sich der Fx für jede Domain merkt)? cmd-0 bzw. ctrl-0?

      Danke, das war's. Nachdem ich die Ansicht mit [Strg]+[0] auf 100% gebracht habe, tut er wieder, wie er soll. Da wäre ich im Leben nicht drauf gekommen, wie man so schön sagt.

      Breakpoints in Media-Queries sollten nicht in px angegeben werden, sondern in em.

      Ja, das Thema hatten wir erst kürzlich. Zur Konzeption benutze ich dennoch die Angabe in Pixeln, um mir einen Überblick zu schaffen. Da kannst du predigen, wie und soviel du willst.

      Tschö, Auge

      --
      Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
      Terry Pratchett, "Wachen! Wachen!"
      ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
      Veranstaltungsdatenbank Vdb 0.3
    2. Hallo,

      Breakpoints in Media-Queries sollten nicht in px angegeben werden, sondern in em.

      Ich unterstütze die Empfehlung, aber die Argumentation kann ich nicht nachvollziehen.

      »Firstly, we’re already ditching pixels in favor of ems, rems and percentages in every other aspect of our styles, so why not carry that through to our media query values?«

      Wenn ich Schrift in (r)em notiere, sollte ich auch Spaltenbreiten in (r)em notieren – klar.
      Wenn ich aber Schrift in px notiere, kann ich auch Spaltenbreiten in px notieren.

      »authoring media queries in relative units allows browsers to adjust the design based on the user zoom level, resulting in a more pleasant, more accessible reading experience.«

      Das kann ich nicht nachvollziehen. Oder ich verstehe nicht, was der Text meint.

      Beim Skalieren ändert sich die Device-Pixel-Ratio – in Chrome entspricht tatsächlich die »min-resolution« dem aktuellen Zoomfaktor. Bei 200% Zoom ist die resolution gleich 2dppx.

      http://dabblet.com/gist/7790672

      Wenn ich hier die Seite auf 200% skaliere, dann matcht die Media-Query min-width: 300px logischerweise erst bei 600 Device-Pixeln – weil ein CSS-Pixel nicht mehr einem Device-Pixel entspricht, sondern zwei.

      Firefox, Chrome, Safari und IE 10 sind sich hier einig.

      Wenn ich hier mit em-Werten arbeiten würde, hätte ich exakt dasselbe Browserverhalten.

      Oder was verstehe ich hier falsch?

      Mathias

      1. Beim Skalieren ändert sich die Device-Pixel-Ratio

        Untersuchung und kritische Diskussion dazu:
        http://www.quirksmode.org/blog/archives/2013/12/desktop_media_q_1.html

        Mathias