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.

XAML oder HMTL5

Zum Jahresende stellt sich für mich noch die „Frage aller Fragen“
(Also die aktuelle „Frage aller Fragen“ werde sicherlich bald wieder eine neue haben :

image

Bisher konnte ich mich um dieses XAML Gedöns ganz gut herumdrücken.

  • Viel Backend Entwicklung (kein XAML notwendig)
  • WPF habe ich ausgesessen.
  • Silverlight ignoriert
  • Für die Dicken “Fat Clients” habe ich (immer noch) Winforms eingesetzt und für Webseiten neben C#, HMTL nur ein wenig JavaScript benötigt.

Und nun, stehen Windows 8 Apps (also die Kachel Programme Smiley) auf der Liste.

imageimageimage

Darius quatscht mit Christian über WebMatrix Razor und Co!

Die Überschrift hätte auch lauten können.

Bericht zum WebMatrix Web Camp in Bad Homburg am 22.03.2010.

Doch eine solch trockene Überschrift wäre dem Event nicht gerecht geworden.

Darius Parys, Microsoft Technical Evangelist (Sorry Darius ich konnte mir deine dir selbst gegebene Job Beschreibung nicht merken. 🙂 )hat mit Christian Wenz (Der Christian Wenz, der auch Bücher schreibt und nicht der Zahnarzt aus Rosenheim) in einem lockeren Gespräch WebMatrix präsentiert.

Mit Hilfe von WebMatrix (eigentlich mit Hilfe des Web PI) wurde demonstriert wie einfach es sein kann vorbereitete Open Source Web Anwendungen, das sind übrigens nicht nur ASP.NET Anwendungen, wie man auch in der Demo sehen konnte, auf einem Computer zu installieren, diese gegebenenfalls anzupassen und dann zu veröffentlichen (Publish zum Hoster).

Im Zuge dieser Demonstration wurde WordPress (Ja WordPress eine PHP/mySQL Anwendung) mit Hilfe des Web PI auf dem Notebook von Darius installiert. Nach erfolgreicher Installation wurde dann auch noch gezeigt hat, wie man mit WebMatrix ein WP Plugin schreiben kann. Auch das geht mit WebMatrix – Microsoft goes PHP :-).

Gezeigt wurde natürlich aber auch die Verwendung von Microsofts neuer Rasiermesser scharfen Template Sprach(engine) Razor. Diese neue Scriptsprache (darf ich das so nennen ?) von Microsoft soll es unter anderem Einsteigern erleichtern in die Programmierung von Web Anwendungen einzusteigen.

Über die genauen Feature, Möglichkeiten und Zielgruppen von WebMatrix hatte ich bereits in meinem Artikel WebMatrix ist Heute Web Matrix war Gestern geschrieben und deshalb kann ich hier auf eine Wiederholung verzichten.

Um noch einmal auf die Zielgruppe und Razor zurückzukommen.

Ich wage zu bezweifeln dass in Ermangelung der fehlenden Intellisense ein solches Tool gerade bei Anfängern gut ankommen wird. Hier wird Microsoft nachbessern müssen.

Neben WebMatrix haben Darius und Christian aber auch noch über Themen wie HTML 5 und jQuery gesprochen. Beides Themen die jeden Web Entwickler sicherlich und wenn nicht schon Heute, dann vor allem in der Zukunft sicherlich lange und ausführlich beschäftigen werden.

Die Diskussion um HTML 5 hat mich, in Bezug auf meine Meinung zum IE 9,  etwas nachdenklich werden lassen. Eventuell werde ich meine Meinung bezüglich des IE 9 noch einmal überdenken müssen und den IE nicht nur als reinen Browser, zum betrachten von Internetseiten, anzusehen.

Aber nun noch mal zurück zum Thema WebMatrix.

Ich persönlich sehe WebMatrix nicht nur als Werkzeug für Neulinge an, sondern auch als recht hilfreiches Tool zur Installation und Einrichtung von Produkten die über den Web PI installiert werden können.

Es war wirklich noch nie einfacher Web Anwendungen wie:

DotNetNukeBlogEngine.NETJoomlaDrupalWordPress

Auf einem lokalen Rechner zu installieren, anzupassen und dann mit einem Knopfdruck zu veröffentlichen.

An dieser Stelle möchte ich nicht verpassen mich bei den beiden Referenten für Ihren gut gelaunten und wie immer kompetenten Vortrag zu bedanken.

Ich kann für mich sagen, das war ein guter Tag, Danke!