„ARIA in HTML“ ist jetzt eine Proposed Recommendation.

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.

Das hier ist eigentlich nur eine Erinnerung für mich, aber vielleicht kann’s ja jemand brauchen:

Für ein kleines Projekt, das wir gerade in der Firma basteln, haben wir ja schon vor einer ganzen Weile Microformats eingeführt. So nutzen wir also hCalendar, geo-Tags und – seit heute – hCard für unseren Event-Kalender.

Ein zunächst unverständliches, bei genauerem Lesen der hCard-Spezifikation aber dann nachvollziehbares Problem trat auf, als ich kein fn (Full Name) verwendete (schließlich ging es ja um Firmen, also verwendete ich nur org). Das mag aber Operator, mein neues Lieblingsspielzeug für Microformats, nicht. Und bei genauerem Lesen sah ich dann auch, wieso:

If the „FN“ and „ORG“ properties have the exact same value (typically because they are set on the same element, e.g. class=“fn org“), then the hCard represents contact information for a company or organization and should be treated as such.

Aha. Gemerkt/gebloggt für’s nächste Mal. Umgesetzt. Eingecheckt. Lob von Lars kassiert. Weitergearbeitet.

Es gibt jetzt nur noch zwei Erweiterungen, die man als Webentwickler unbedingt für seinen Firefox haben sollte:

• Firebug ist jetzt endlich in der Version 1.0 erhältlich, wenn auch erstmal nur als Beta. Die Erweiterung bietet Werkzeuge zur HTML-Analyse, CSS-Fehlersuche und -Layout, lässt das DOM erkunden, die Kommunikation mit dem Server analysieren und JavaScript debuggen oder testen.
• Die Web Developer Toolbar ist wie eh und je auch ein Muss für Webentwickler. Sagt ja allein schon der Name. 🙂

Download- und Installationsbefehl!

Wieder einmal hat sich das normalerweise ganz nette Webdesigner-Magazin A List Apart einen Schnellschuss geleistet, ohne über die Konsequenzen nachzudenken…

Weiterlesen …