Should read 02 / 2014

Und wieder eine Liste mit interessanten Links über die ich im Monat Februar gestolpert bin.

JavaScript Puzzlers! or: do you really know JavaScript? (or: how insane do you think JavaScript actually is?)
http://javascript-puzzlers.herokuapp.com/

What Nobody Told You About Sass’s @extend
http://www.sitepoint.com/sass-extend-nobody-told-you/

CSS Regions Module updated
http://www.w3.org/blog/CSS/2014/02/18/css-regions-level-1-working-draft-updated/

A great little tool that helps you estimate how well a combination of Web technologies is supported on mobile.
http://onmobile.iwanttouse.com/

Reset CSS vs Normalized CSS

Wenn man ohne Angaben von CSS ein HTML Dokument erstellt und im Browser aufruft sieht man dennoch ein gestyltes Dokument. Nehmen wir folgendes Markup als Beispiel:

<body>
<ul>
    <li>ein li tag</li>
</ul>
<em>hier ein em-tag</em>
<h2>ein h3-tag</h2>
<strong>das ist strong</strong>
</body>

Wir sehen dann vemutlich folgendes:

user agent stylesheet
user agent stylesheet

Jeder Browser verfügt ein eigenes Stylesheet, das User Agent Stylesheet, das Formatierungen für z.B. eine Überschrift enthält damit diese auch wie eine dargestellt wird. Da man sich nicht auf das User Agent Stylesheet verlassen kann,  da zwischen den Browsern zum Teil erhebliche Abweichungen in den Defintionen des User Agent Stylesheets bestehen versucht man mit Hilfe eines Reset CSS diese Angaben zu reseten oder mit einem Normalized CSS zu normalisieren.

Bekanntestes Reset CSS ist sicher das von Eric Meyer (http://meyerweb.com/eric/tools/css/reset/). Mit einem Reset CSS sieht dann das Markup Beispiel von oben wie folgt in (jedem) Browser aus.

reset css
reset css

Wie man sieht wurden alle Default Angaben der einzelnen Elemente resetet.

Einen etwas anderen Weg geht das Normalized CSS (http://necolas.github.io/normalize.css/) das wie der Name schon andeutet die Darstellung der Elemente browserübergreifend versucht zu normalisieren. So nimmt setzt es z.B. die margin-Property des body-Elementes auf 0 und sorgt für einen einheitlichen Einzug eines li-Elementes das von Browsern gerne unterschiedlich im User Agent Stylesheet behandelt wird. U.a. setzt es noch die Standard-Schrift auf Sans-Serif.

normalisiert
normalisiert

Was man nun davon benutzt ist sicher auf dem eigenen Geschmack und den projektspezifischen Umständen geschuldet.

Beitragsbild:
www.flickr.com/photos/alex-web56/5360015934