Bei 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 
).
Wenn man diese Formatierung allerdings in einem “HTML5/JavaScript Windows a Store App” (was für ein Begriff
) 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.
Hört sich stark danach an, als ob ein anderer Style greift und damit deinen überschreibt. Hast du es mal mit Inline-Css probiert?
Hallo Max,
ich habe das Problem umgehen können, gepostet habe ich den Beitrag aus dem Grund, dass man sich bewusst ist, dass es hier ein Problem gibt.
Für alle die es selbst ausprobieren wollen habe ich ein kleines Demoprojekt (für das man allerdings VS2012 und Windows 8 benötigt) auf Bitbucket hochgeladen.
http://bitbucket.org/SchelianHP/html5cssdemo
Lg
HP
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