Windows 8 Store Apps (HTML5/JavaScript) – CSS ist nicht gleich CSS

imageBei der Arbeit an einer Windows 8 Store App die ich mit HTML5 und JavaScript realisiere, bin ich auf folgendes Problem gestoßen (welches ich hier bereits auf Facebook gepostet habe):

Doch zuerst einmal ein kurzer Ausschnitt des Markup bei welchem das Problem auftritt:

<body>
	<div id="itemTemplate">
		<figure>
			<img id="profile-image" src="images/smalllogo.png" />
		</figure>
		<div>
			<span data-win-bind="innerText: text">Testen</span>
		</div>
	</div>
</body>

Im zugehörigen Stylesheet sind unter anderem folgende Styles definiert:

figure {
    margin: 0px;   
}

#itemTemplate figure img {
    margin: 30px;
}

So wie die Styles definiert sind, sollte das Image Element mit der ID “profile-image” eine Margin von 30px auf allen Seiten vorweisen.

Das funktioniert auch wenn man es in einem Browser aufruft (Sogar der IE funktioniert hierbei korrekt Smiley ).

imageWenn man diese Formatierung allerdings in einem “HTML5/JavaScript Windows a Store App” (was für ein BegriffTrauriges Smiley ) verwendet, greift der Style “#itemplate figure img” nicht in dem Image Element, welches in dem Figure Element eingebettet ist, sondern die Margin Einstellung des übergeordneten Elementes Figur hebt die Formatierung des darin eingebetteten Image Elementes auf.

Ein erstes kleines Fazit dabei ist, dass man sich nicht darauf verlassen kann, dass der zuletzt definierte Style tatsächlich Verwendung findet.
Wenigstens dann nicht wenn man übergeordnete globale Element Formatierungen verwendet.

3 Gedanken zu „Windows 8 Store Apps (HTML5/JavaScript) – CSS ist nicht gleich CSS“

  1. Hi Hans Peter,

    zuerst einmal funktioniert dein obiges CSS 1:1 in jedem Browser wie auch in einer Windows Store App. Letztlich ist es die gleiche Rendering Engine. In diesem Blog Post hast Du schlicht eine wichtige Sache komplett weggelassen. Du verwendest das obige HTML nicht als reines HTML sondern es ist Bestandteil des WinJS.Binding.Templates das in deinem BitBucket Projekt instanziert wird. Jedes instanzierte WinJS Control erzeugt HTML und hat eigene CSS Klassen die es hinzufügt, diese sind in der Dokumentation hinterlegt und lassen sich auch stylen. Das eigentliche Problem ist, das es nicht offensichtlich genug ist das WinJS Controls HTML erzeugen die eigene CSS Regeln mit sich bringen. Das ist die größte Stolperfalle für viele Webdesigner und -entwickler wenn diese das erste mal mit der WinJS arbeiten.Du kannst mich gerne anmailen wenn Du Fragen hast, freue mich immer helfen zu können.

    Gruß,

    Dariusz

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.