CSS: rem vs. reference pixel
ottogal
CSS: rem vs. reference pixel
ottogal
Gunnar Bittersmann
JürgenB
Orlok
Matthias Apsel
marctrixHallo in die Runde,
mich würde eure Meinung zu diesem Artikel interessieren: R.I.P. REM, Viva CSS Reference Pixel!
Seit längerem bin ich dazu übergegangen, vorwiegend die die Einheit rem zu verwenden. Soll ich davon wieder ablassen?
Vielen Dank
-
Hallo
Seit längerem bin ich dazu übergegangen, vorwiegend die die Einheit rem zu verwenden. Soll ich davon wieder ablassen?
Das wirst du selbst entscheiden müssen. Die unterschiedlichen Einheiten haben alle für bestimmte Konstellationen Vor- und Nachteile.
Um die Vorteile ausnutzen zu können sollte die jeweils günstigste Einheit verwendet werden.
Dazu muss man natürlich die Eigenheiten und Funktionsweise jeder Einheit kennen.
Personen, die einfach mal bestimmte Einheiten runtermachen und andere Einheiten glorifizieren haben (mal deutlich geschrieben) keine Ahnung. Die verweisen nur auf einige wenige Aspekte und wollen damit Vor- und Nachteile von Einheiten bestimmen. Das ist im Endeffekt nur hohle Propaganda.
Der verlinkte Artikel ist so ein Propagandabeitrag, in dem ein ehemals Verblendeter die Wahrheit erkannt hat und als neuer Messias allen Anderen seine Wahrheit aufzwingen will.
Gruss
MrMurphy
-
@@MrMurphy1
Personen, die einfach mal bestimmte Einheiten runtermachen und andere Einheiten glorifizieren haben (mal deutlich geschrieben) keine Ahnung.
Du meinst Personen, die einfach mal
emruntermachen undremglorifizieren?SCNR.
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
@@ottogal
mich würde eure Meinung zu diesem Artikel interessieren: R.I.P. REM, Viva CSS Reference Pixel!
Was MrMurphy1 sagte.
Seit längerem bin ich dazu übergegangen, vorwiegend die die Einheit rem zu verwenden. Soll ich davon wieder ablassen?
An Stellen, wo andere eine andere Einheit sinnvoller ist. Das kann
emsein oder%,vw,vh,vmin,vmax.Jede Einheit (incl.
rem) hat ihre Berechtigung – naja, bis aufpx(außer für dünne Linien).LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hallo Gunnar,
Jede Einheit (incl.
rem) hat ihre Berechtigung – naha, bis aufpx(außer für dünne Linien).soll man nicht beim
canvas-Element auch die Größe inpxangeben?Gruß
Jürgen-
Hallo Jürgen
Jede Einheit (incl.
rem) hat ihre Berechtigung – naha, bis aufpx(außer für dünne Linien).Soll man nicht beim
canvas-Element auch die Größe inpxangeben?Welche Größe? ;-)
Beim
canvas-Element haben wir es ja grundsätzlich mit mindestens zwei verschiedenen Größen zu tun, nämlich der Höhe und Breite des Elementes selbst und der Höhe und Breite des Inhalts, also der Bitmap, wobei die Größe der Bitmap über die HTML-Attributeheightundwidthbestimmt wird, deren Werte tatsächlich in Pixeln anzugeben sind, allerdings ohne ausdrückliche Angabe der Einheit.<body> <canvas height="150" width="300"></canvas> </body>Nehmen wir nun mal an, wir hätten ein
canvasmit Attributwerten wie in dem Beispiel oben erstellt, bei denen es sich nebenbei bemerkt um die Standardwerte handelt, aber wir hätten keinerlei Angaben zur Größe descanvasin unserem Stylesheet gemacht, dann würden in Ermangelung anderer Angaben die Werte der HTML-Attribute bei der Berechnung der Höhe und Breite des Elementes verwendet. Das bedeutet, in diesem Fall wäre die Größe des Elements identisch mit der Größe der Bitmap.canvas { height: 480px; width: 640px; }Hätten wir jedoch für dasselbe Element zusätlich eine solche Regel im Stylesheet definiert, dann würde die Größe des
canvas-Elementes auf Grundlage der dort angegebenen Werte berechnet und die im Markup angegebenen Attributwerte hätten auf die tatsächliche Größe des Elementes keinerlei Einfluss. Was insofern nachvollziehbar ist, als dass es sich hierbei um explizite Angaben für das Element selbst handelt, die natürlich eine höhere Priorität genießen als die implizite Berechnung der Werte auf Grundlage der Höhe und Breite der Bitmap.console.log(canvas.height); // 150 console.log(canvas.clientHeight); // 480Hierbei ist nun allerdings zu berücksichtigen, dass zwar beim Fehlen einer expliziten Angabe für die Größe des Elementes die Werte für die Größe des Inhalts als Berechnungsgrundlage verwendet werden, umgekehrt jedoch die Werte für die Bitmap nicht automatisch an die berechnete Größe des
canvasangepasst werden, sollte es wie hier eine Differenz zwischen den beiden Größen geben.Was in einem solchen Fall also passiert ist, dass die Grafik zwar auf Grundlage der spezifizierten Abmessungen für die Bitmap berechnet wird, diese dann beim Rendern jedoch auf die tatsächliche Größe des Elementes skaliert wird, was üblicherweise mit deutlichen Einbußen bei der Qualität der Darstellung einhergeht und was man darum nach Möglichkeit vermeiden möchte.
Angaben im Stylesheet zur Größe des Elementes in der Einheit
pxsind also nicht sinnvoll, wenn sie von den Werten der HTML-Attributeheightundwidthabweichen, und wenn sie das nicht tun, kann man sie aus obengenannten Gründen auch gleich weglassen.Daraus ist aber natürlich nicht zu folgern, dass man die Größe des
canvasüber die Attributwerte festbetonieren sollte, sondern es ist vielmehr zu empfehlen, vor dem Zeichnen die tatsächliche Größe des Elementes abzufragen und die Werte für die Bitmap bei einer Abweichung entsprechend anzupassen, also etwa den Wert voncanvas.heightauf den Wert voncanvas.clientHeightzu setzen.Wenn man dies tut, ist es in dieser Hinsicht auch egal, auf welche Weise die Größe des Elementes berechnet wird, also welche Einheit man für die jeweilige CSS-Eigenschaft verwendet. Das
canvas-Element unterscheidet sich diesbezüglich also nicht von anderen Elementen und demnach gibt es auch hier eigentlich keinen Grund,pxfür die Angaben zur Höhe und Breite des Elementes zu verwenden, ebenso wie es regelmäßig nicht sinnvoll ist, explizite Angaben für die HTML-Attribute zu machen, da diese wie gesehen ohnehin vor dem Zeichnen an die tatsächliche Größe des Elementes anzupassen sind.Gruß,
Orlok
-
Hallo,
und um den geschilderten Problemen aus dem Weg zu gehen, „reserviere“ im HTML mit einem div Platz für die Grafik, das canvas-Element erzeuge ich dann passgenau per Javascript. So kann ich die Grafikgröße sogar dynamisch an die umgebenden Elemente anpassen. Dazu muss ich natürlich auf Größenänderungen reagieren und die Grafik dann neu erstellen.
Gruß
Jürgen-
Hallo JürgenB,
und um den geschilderten Problemen aus dem Weg zu gehen, „reserviere“ im HTML mit einem div Platz für die Grafik, das canvas-Element erzeuge ich dann passgenau per Javascript.
Das
figure-Element scheint mir eigens für diesen Fall erdacht worden zu sein. ;-)Bis demnächst
Matthias-
Hallo Matthias,
Das
figure-Element scheint mir eigens für diesen Fall erdacht worden zu sein. ;-)eigentlich erwartet mein Script nur ein Blockelement. Allerdings ist mein Script älter als html5 und viele, die es einsetzen, verwenden noch html4. Daher habe ich meine Beispiele und die Anleitung noch nicht angepasst. Auch müsste ich dem (noch) unterstützten IE 8 eine Sonderbehandlung spendieren. Das ist mir die Semantik in diesem Fall noch nicht Wert.
Gruß
Jürgen
-
-
-
-
-
-
Hej ottogal,
mich würde eure Meinung zu diesem Artikel interessieren: R.I.P. REM, Viva CSS Reference Pixel!
Seit längerem bin ich dazu übergegangen, vorwiegend die die Einheit rem zu verwenden. Soll ich davon wieder ablassen?
Nein, nicht unbedingt. es spricht auch nichts dagegen weiter em zu nutzen. Wenn man es geschickt macht, muss man nicht einmal besonders viel rechnen.
Der Autor des verlinkten Artikels jedenfalls hat weder die Möglichkeiten von em begriffen, noch hat er verstanden, die Nachteile zu beherrschen. Vergiss den Artikel!
Lies andere!
Marc
-
Habt Dank für eure Einschätzungen!