Dezimal-Pixel in CSS?

[Der Astronaut]

Tach zusammen,

nutzt jemand Dezimal-Angaben bei Pixel-Werten in CSS? Was ist eure Erfahrung hinsichtlich Browser-Unterstützung bzw. Verhalten der Browser (Desktop & Mobil)?

Der CSS-Validator vom W3C beanstandet zwar nichts, allerdings bin ich während meiner Google-Recherche auf (ältere) Artikel gestoßen, in denen geschrieben steht, dass Browser XY ab/aufrunden.

Meine Tests im Firefox und dessen mobilen Bruder sowie im mobilen Chrome waren erfolgreich.

Danke für euren Input

[Stefko]

Moin,

darf ich mal ganz ketzerisch fragen, was der Sinn davon sein soll?
Auf Anhieb klingt das für mich, wie eine Personenwaage, die fünf Stellen hinter dem Komma anzeigt

Aber um Deine ursprüngliche Frage noch zu beantworten, Nein.
Nur gerade px, ansonsten em, rem oder %

Grüße,
Stefko

[Der Astronaut]

Berechtigte Frage, aber bitte nicht gleich köpfen

Mein Fall und damit auch die Frage kam wie folgt zustande:

Eine mobile Internetseite hat einen Content-Bereich von 90 % und betrifft die Thumbnails einer Bildergalerie, die drei Bilder mit je 1em (15px) Abstand von einander eine Zeile bilden. Die Thumbnails sollen immer so groß sein, dass die 90 % Content-Breite voll ausgeschöpft wird. Je nach mobiler Auflösung bestimme ich nun die Breite der Thumbnails via Media-Query. Mein Handy zum Beispiel hat eine CSS-Auflösung von 384px in der Breite. Rechne ich nun 384 x 0,9 habe ich die 90 % Content-Breite. Das minus der insgesamt 2 em Abstand zwischen den Bildern und das wiederum durch 3 (Bilder) komme ich auf exakt 105.2px.

Zugegeben, die 0,2px sind jetzt nicht die Welt, bei anderen Auflösungen sind es aber auch mal 0,8px pro Bild und dann kann man mit dem Auge auch wahrnehmen, dass die volle Breite nicht voll ausgeschöpft wird.

Wahrscheinlich wäre es sinnvoller die 105.2px in 7.01em auszugeben, oder? Oder wie würdest du das lösen?

[Spooky]

Ja aber du gibst das doch eh in % an. Warum willst du das in Pixel angeben? Bzw. wofür genau willst du eigentlich diese Angabe machen?

[mlweb]

Für solche Anwendungsfälle sind m.E. Flexboxes das Mittel der Wahl.

[Der Astronaut]

Ja, ich hätte mir den ganzen Quark mit den Media-Queries schenken können. Spooky hat mich mit den Prozent auf die richtige Fährte gebracht und ich habe mein Problem mit calc() lösen können. Jetzt werden die Bilder in der 3-spaltigen Galerie über die gesamte Content-Breite aufgezogen und die Bilder werden prozentual angepasst.

Da meine Erklärung meines Vorhabens oben wohl etwas missverständlich war, hier ein Screenshot, wie es auf den verschiedenen mobilen Endgeräten und Tablets aussehen soll und es meinen Tests nach jetzt auch tut (auf drei Handys und einem Tablet getestet):

Screenshot_20170303-151527.png

[PaddySD]

Nur so als Hinweis: wenn Du solche Sachen öfter hast, bietet sich bootstrap an. Da kannst Du solche Sachen einfach mit Klassenzuweisungen machen (z.B. .img-responsive .col-sm-3 . col-xl-2)

[Andreas]

Je nach mobiler Auflösung bestimme ich nun die Breite der Thumbnails via Media-Query.

Du brauchst die Breite der Thumbs per CSS überhaupt nicht zu bestimmen. Sorge dafür, dass der umschließende Container eine Breite von 33.3333% hat. Das kann z.B. das Figure oder das LI sein, oder eine Spalte von deinem Grid-System. Dem Bild darin brauchst du dann nur noch zu sagen max-width:100%; (width:100%; wenn du auch noch kleinere Bilder aufziehen möchtest). height:auto; ist selbstredend. Wenn du pixelgenau arbeiten möchtest, dann setze auch das hier in dein CSS:

.image_container a,
.image_container img {
  display: block; /* IMGs und As sind Inline-Elemente */
} 

Kommt es zu der Frage, wie groß lasse ich Contao die Bilder erzeugen, dann kannst du dich an dem größten von dir unterstützten Viewport orientieren. Ich hatte letztens mal einen Fall, da waren die Bilder ca 1 Pixel größer als sie mit max 100% durften und das kleiner Drücken hat das Bild unscharf gemacht. Wenn dein errechneter Wert also eine Kommastelle hat, dann runde den Wert besser ab.

Nur so am Rande: Je weniger feste Breitenangaben du machst, desto besser (flexibler) ist dein CSS.