Compass: Präzision verbessern

Wenn Breitenangaben in Prozentwerten, wie es für Bootstraps Spaltendefinition üblich ist, zu unerwartetem Verhalten führen, ist womöglich einfach die Präzision der Berechnungen zu niedrig eingestellt. Dann in der config.rb-Datei eintragen:

 

# Bootstrap 3 requires a precision of 8 digits after the point
Sass::Script::Number.precision = 8

Elementhöhen synchron halten

Wie sorgt man dafür, dass mehrere Elemente die gleiche Höhe haben, obwohl man ihren Inhalt kaum unter Kontrolle hat (weil man den nicht selber pflegt)? Und das dann auch noch über mehrere Layoutstufen hinweg?

Die einfachste Antwort ist, einfach allen Elementen in jeder Layoutstufe eine feste Höhe zuzuweisen, aber das sieht nicht gut aus, wenn sich die Inhalte der Kästen allzu sehr unterscheiden. Eine flexiblere Lösung ist die Überwachung der Elementhöhen per JavaScript, die wir anwenden, um einer definierten Anzahl nebeneinander befindlicher Kästen jeweils die Höhe des höchsten Elements dieser Gruppe zuzuweisen – natürlich nur in Layouts, in denen es auch mehrere Kästen nebeneinander gibt.

Und so geht’s:

 

/**
 * Monitor min-height of several DOM objects and equalize them
 * 
 * @param elemSet jQuery object with elements to test
 * @param sideBySideCount int That many DOM objects should be tested side by side
 * @returns boolean false if elemSet is empty, true on success
 */
function minHeightMonitor(elemSet, sideBySideCount) {
	if (!elemSet ​ !elemSet.length)
		return false;
	
	if (!sideBySideCount)
		sideBySideCount = 10000;
	var i = 1;
	var subset = [];
	
	elemSet.each(function() {
		subset.push($(this));
		if (i % sideBySideCount === 0 ​ i === elemSet.length) {
			var minH = 0;
			$(subset).each(function() {
				$(this).css({'minHeight': minH});
			});
			$(subset).each(function() {
				minH = Math.max(minH, $(this).outerHeight());
			});
			$(subset).each(function() {
				$(this).css({'minHeight': minH});
			});
			subset = [];
		}
		++i;
	});
	return true;
}

Layoutstufe überwachen

Mitunter möchte man in JavaScript herausfinden, welche Layoutstufe gerade aktiv ist, aber $(window).width() oder ähnliche Funktionen liefern Ergebnisse, mit denen man nichts anfangen kann. Um mit Sicherheit genau dann in JavaScript zu reagieren, wenn auch eine bestimmte MediaQuery greift, bedient man sich am besten eines HTML-Elements, das per CSS auf die MediaQuery reagiert; diese Reaktion kann dann per JS detektiert werden. Beispiel in SCSS:

 

#layout-detector {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 30px;
    z-index: 1;
    
    @media screen and (min-width: 560px) {
        width: 45px;
    }
    @media screen and (min-width: $screen-sm-min) {
        width: 50px;
    }
    @media screen and (min-width: $screen-md-min) {
        width: 70px;
    }
    @media screen and (min-width: $screen-lg-min) {
        width: 90px;
    }
}

 

Die Breite dieses Elements wird dann in JavaScript ausgelesen:

 

function detectLayout() {
	// Thar be your code
}
$(window).resize(function() {
	window.requestAnimationFrame(detectLayout);
});

SCSS

Basierend auf der älteren Entwicklung Sass (Syntactically Awesome Stylesheets) ist SCSS eine programmierbare Stylesheet-Sprache, die Variablen, Schleifen, Mixins und vieles mehr zur Verfügung stellt, da die Styling-Informationen vor Einbindung in die Website zu vom Browser lesbarem CSS kompiliert werden.

In der Entwicklung kann das Styling auf überschaubare Komponenten aufgeteilt werden: So können z.B. Farben und Schriftgrößen zentral in Variablen notiert werden, wiederkehrende ähnliche Formatierungen können in Funktionen mit Parametern zusammengefasst werden. Zur weiteren Vereinfachung des eigentlichen Codes wird geschachtelt, Teilformatierungen können als Mixins (auch mit Parametern) inkludiert werden. Auch klassisches CSS ist valides SCSS und kann eins-zu-eins einkopiert werden – z.B. bei Übernahme alter Styles bei der partiellen Neugestaltung eines bestehenden Projekts.

Das Kompilieren erfolgt meist automatisiert durch Überwachung der SCSS-Verzeichnisse aus Kompilierungs-Software wie Gulp oder Compass – üblicherweise gleich in eine komprimierte Datei (minified). Auf Wunsch können dabei auch Source-Maps erstellt werden, die von den Entwicklungs-Tools moderner Browser verstanden werden und eine direkte Zuordnung kompilierten CSS-Codes zur exakten Stelle im ursprünglichen SCSS-Code erlauben.

Beispiel für SCSS:

 

.breadcrumb {
    padding-top: 30px;
    
    // Comment that will be removed because it is incompatible with CSS
    /* Comment that will be kept unless otherwise configured */
    & > li {
        & + li {
            &:before {
                padding: 0 5px 0 2px;
            }
        }
    }
    a {
        color: $cGray;
    }
    .current {
        cursor: default;
        pointer-events: none;
        
        a {
            color: $cBlack;
        }
    }
    a,
    span {
        padding: 10px 0;
    }
}

 

Das daraus produzierte CSS:

 

.breadcrumb {
  padding-top: 30px;
}

/* Comment that will be kept unless otherwise configured */
.breadcrumb > li + li:before {
  padding: 0 5px 0 2px;
}
.breadcrumb a {
  color: #a0a0a0;
}
.breadcrumb .current {
  cursor: default;
  pointer-events: none;
}
.breadcrumb .current a {
  color: #000000;
}
.breadcrumb a,
.breadcrumb span {
  padding: 10px 0;
}

Validierung von Formularen – bitte keine Übertreibungen!

Immer wieder erlebe ich Formulare, bei denen es die Entwickler mit der Validierung zu gut gemeint haben; man glaubte zu wissen, wie ein korrekter Wert auszusehen hat, wusste es aber tatsächlich nicht.

Klar definiert ist das Format von E-Mail-Adressen, sodass sie strengt validiert werden können. Da es sich dabei in der Regel um den wichtigsten Kontaktweg handelt, sollte das auch so gehandhabt werden. Aber was ist mit Straßen? Dürfen Straßennamen Zahlen enthalten, wenn man ein separates Hausnummernfeld hat?

Antwort: Ja, müssen sie sogar! Das Adressschema in der Innenstadt Mannheims erzwingt dies, denn als Straßenname wird ein Quadratname verwendet, bspw. „F5“, die Hausnummern folgen dem üblichen Schema, wobei man auch hier an Werte wie „12a“ denken muss. Das kombinierte Feld „Straße/Nr.“ enthielte dann „F5 12a“. Die kürzestmögliche Variante wäre etwa „N2 1“, das sind vier Zeichen; ich habe es auch schon erlebt, dass eine Straße partout fünf Zeichen haben musste, warum auch immer.

Kurze Namen gefällig? Wie wäre es mit „Ng Lì“? Das erste ist der Nachname, das zweite der Vorname.

Ein weiteres Beispiel: Was ist eine gültige Angabe zur Telefonnummer? Das Muster „Vormittags 12345, nachmittags 67890“ kann eine völlig legitime Eingabe sein! Diese Angabe sollte dann eben nicht anderswo als einzeiliger Eintrag auf 100px Breite erwartet werden.

Kurz: Validierung ist wichtig, aber weniger ist manchmal mehr.