Gunnar Bittersmann: Stilkritik

Beitrag lesen

@@Gunnar Bittersmann:

nuqneH

Aber nichts von alledem sollte man wirklich tun. Wo blieb denn deine Predigt für die Trennung von Verhaltens- und Präsentationsschicht?

Im Script sollte lediglich stehen:

if (diff<1) spans[q].className = 'diffrange_0_1';

else if (diff<4) spans[q].className = 'diffrange_1_4';
else if (diff<10) spans[q].className = 'diffrange_4_10';
else if (diff<15) spans[q].className = 'diffrange_10_15';

  
Ach, was red ich da?  
  
Die Grenzen der Intervalle, die verschieden dargestellt werden, gehören vielleicht auch eher ins Stylesheet. Wenn sich diese später ändern sollen (bspw. nicht mehr [0, 1[, [1, 4[, [4, 10[, [10, 15[ und [15, ∞[, sondern [0, 5[,[5, 10[, [10, ∞[), möchte man ja nicht Script UND Stylesheet anpassen müssen.  
  
Das Script sollte vielleicht gar nicht wissen, dass es solche Intervalle gibt: Einfach nur  
`spans[q].className = 'diff' + Math.floor(diff);`{:.language-javascript}  
  
Aber auch das nicht, denn eventuell bestehende Klassenzugehörigkeiten der betreffenden 'span'-Elemente sollten nicht überschrieben, sondern ergänzt werden:  
`spans[q].className += ' diff' + Math.floor(diff);`{:.language-javascript}  
  
Im Stylesheet:  
~~~css
.diff0   { color: #f1630c; font-size: 150% }  
  
.diff1,  
.diff2,  
.diff3   { color: #d96117; font-size: 130% }  
  
.diff4,  
.diff5,  
.diff6,  
.diff7,  
.diff8,  
.diff9   { color: #fa670c; font-size: 120% }  
  
.diff10,  
.diff11,  
.diff12,  
.diff13,  
.diff14  { color: #eb6513; font-size: 110% }

In HTML5 ist nicht @class das Attribut der Wahl, sondern @data-*:

if (spans[q].dataset) spans[q].dataset.diff = Math.floor(diff);  
else spans[q].setAttribute('data-diff', Math.floor(diff));

Zur Abfrage der Browserunterstützung von @data-* muss man freilich nicht in jedem Schleifendurchlauf spans[q].dataset abfragen. Vor der Schleife:
var datasetSupported = !!document.documentElement.dataset;

In der Schleife:

if (datasetSupported) spans[q].dataset.diff = Math.floor(diff);  
else spans[q].setAttribute('data-diff', Math.floor(diff));

Im Stylesheet dann mit Attributselektoren
[data-diff='0'] { color: #f1630c; font-size: 150% }
usw.

Qapla'

--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)