#Safari

Adressleiste im iOS-Safari einfärben

Eine nette Sache, die im mobilen Chrome (und in einer Reihe von anderen Browsern) funktioniert, ist das Einfärben der Adressleiste. Man setzt einfach dazu einfach ein Meta-Tag:

<meta name="theme-color" content="lime">

Im iOS-Safari ist das nicht möglich, auch nicht mit dem Web App Manifest.

Beim längst überfälligen Redesign der Vereinsseite bin ich aber zufällig auf einen netten Effekt gestoßen: Mittels einer background-color auf dem body färbt diese Farbe die Adressleiste ein. Die „normale“ Hintergrundfarbe legt man dann auf dem direkten Kind-Element des Bodys. Zum Beispiel so:

body {
  /* this will color the address bar in iOS/iPadOS Safari */
  background-color: lime;
  /* reset body margin for full background-color of wrapper */
  margin: 0;
}

body > *:first-child {
  /* apply default background-color and “body” padding here */
  padding: 1em;
  background-color: white;
}

Das Ergebnis wäre dieses:

Ups, der Content ist zu kurz, die Hintergrundfarbe soll so aber nicht aussehen. Der Trick ist, jetzt noch eine Hintergrundfarbe auf html zu setzen:

html {
  background-color: white;
}

Idealerweise ist es die gleiche Farbe wie die des ersten Kind-Elements. Aber man kann natürlich auch etwas kreativer sein und eine ganz andere Farbe nehmen:

Hinweis am Rande: Im macOS-Safari sorgt die Farbe übrigens für das Einfärben der Scrollleiste.

Neues vom Apfel (Updates)

Gerade ist die WWDC Keynote von Steve Jobs zuende. Neuigkeiten u.a.:

  1. Safari 3.0 kommt auch für Windows XP und Vista. 2× so schnell wie der IE! Beta-Versionen gibt es seit heute. Sehr, sehr geil.
  2. OS X 10.5 bekommt eine hübsche, aufgefrischte UI mit transluzenter Menüleiste (find ich persönlich nicht so prickelnd) und einem schimmernden Dock. Die neuen Anwendungen kennt man ja schon, aber der neue Finder, ein Mischmasch aus iTunes und dem alten Finder, überrascht. Vor allem durch das integrierte CoverFlow.
  3. Das iPhone gibt’s ab Monatsende in den USA, wie erwartet. Und statt mithilfe eines umständlichen SDK für Softwareentwickler schreibt man iPhone-Anwendungen einfach als Web-Applikation in HTML mit AJAX etc. – ich sehe mich schon als iPhone-Softwareentwickler. 😉

Soweit zu drei der vielen Neuigkeiten von der WWDC. Mehr erfahrt Ihr sicher gleich von der Techniknews-Seite Eures Vertrauens. Aber soviel sei gesagt: Wer sich einen Mac kaufen will, sollte wenigstens bis Oktober warten (René? Ina? Ich?) – Tiger ist Schnee von gestern…

Nachtrag: Apple.com hat zudem gerade redesignt und sich von dem 2001er Design mit den bunten Tabs verabschiedet…

Nachtrag 2: Da hat wohl jemand kein PHPIDS verwendet. Via Lars.