Quicktipp: Anpassungen für Windows Phone 8

Vor Kurzem haben wir für einen unserer Kunden einige Anpassungen für Windows Phone 8 an seinem Onlineshop vorgenommen. Dies wurde notwendig, da der Shop bis zu diesem Zeitpunkt auf iOS- und Android-Geräte optimiert war. In den folgenden Zeilen wollen wir einen kurzen Einblick anhand von zwei Beispielen geben, um anderen Entwicklern einen einfacheren Start bei der Migration zu Windows Phone 8 zur Seite zu geben.

Für unsere Tests hatten wir ein Windows Phone 8x von HTC zur Hand. Der Standardbrowser hier ist ein modifizierter Internet Explorer 10. Es stehen Entwicklern also viele, aber nicht alle Möglichkeiten von CSS 3 zur Verfügung, aber komischerweise geht der Browser dennoch an der einen oder anderen Stelle ein wenig ungewohnte Wege. *

Styling von Dropdowns

In den letzten Jahren ist es, nicht zuletzt dank des Erfolges von Web-Frameworks wie Foundation und Bootstrap, in die Mode gekommen, Formelemente nicht in ihrer vom Betriebssystem bestimmten nativen Form darzustellen, sondern eine möglichst einheitliche Variante über alle Betriebssysteme und Plattformen anzuzeigen.

Um zum Beispiel Select-Felder neu zu stylen, verwendet man hier den CSS-Ausdruck appearance: none; der dann ggf. auf die jeweilige Browser Engine über ein entsprechendes Prefix angepasst wird (z.B. -webkit-appearance: none; für MacOS- / iOS-Geräte und den Chrome-Browser). Dieser liegt für Windows Phone allerdings nicht vor. Die einzige Möglichkeit, die sich einem Entwickler bietet ist es, den Pfeil des Selector-Objekts auszublenden. Das pseudo-Attribut -ms-expand übernimmt dies.

Wie bereits erwähnt wird hierdurch lediglich der Pfeil des Selectors ausgeblendet und man kann ihn, z.B. durch eine CSS Variante, ersetzen, die man dann einen ein- bzw. ausgeklappten Zustand besitzt.

Lineare Farbverläufe

Als die Buttons im Mobileshop seinerzeit mit einem vertikalen Farbverlauf gefüllt wurden, entschied man sich, eine etwas ältere Form der CSS Definition zu wählen. Dies hatte zur Folge, dass mit Windows Phone 8 Geräten auf einmal keine Farbverläufe mehr angezeigt wurden bzw. man eine Hintergrundfarbe zu sehen bekam, mit der nicht gerechnet wurde. Statt der alten Variante -webkit-gradient(linear, …) wurde nun die aktuelle Definition -webkit-linear-gradient(…) eingesetzt, die jetzt wieder die gewünschten Effekte beschert.

Abschließend sei vielleicht noch gesagt, dass es mit Sicherheit eine Vielzahl an weiteren Themen/Problemen gibt, auf die man bei einer Migration auf Windows Phone 8 stoßen kann. In unserem Fall hatten die beiden oben genannten Beispiele glücklicherweise schon die meisten unserer Probleme mit der Website des Kunden behoben.


* = Die im Folgenden gezeigten CSS-Beispiele verwenden zur Vereinfachung meist das -webkit- Prefix, für die jeweiligen anderen Browser müssen diese dann natürlich zusätzlich noch definiert werden.

About André Cedik

Seit mehr als 15 Jahren ist André im eCommerce-Umfeld tätig. Nach dem Studium an der FH in Kiel schloss er sich zunächst der Intershop Communications AG aus Jena an. Heute ist er als eCommerce-Consultant und Ruby Entwickler für die webionate GmbH in Hamburg tätig, mit der er derzeit das StartUp shipcloud.io aufbaut.

Comments are closed.