Mit dem neuen Betriebssystem für Mac, OS X 10.10 Yosemite, hat Apple mal wieder einige optische Veränderungen am UI vorgenommen. Auffallend sind hier besonders Elemente wie Auswahlfelder, Radio-Buttons, Checkboxes und Buttons. Leider beschränken sich diese Designänderungen bei Apple nicht nur auf die Elemente des Betriebssystems, sondern auch auf Formular-Elemente innerhalb einer Website. Apple greift also mit dem neuesten Update mal wieder in das Design von Websites ein. Das Deaktivieren dieser neuen Styles ist aber nicht immer so einfach möglich. Außerdem werden diese Styles nicht nur für den Safari Browser angewendet, sondern wirken sich auch auf Mozilla Firefox und Google Chrome aus.
Schriftart von Buttons zurücksetzen
Eine Auswirkung des neue Yosemite Designs ist die Schriftart, die für die Formularbuttons auf einer Website verwendet werden. Viele Websites definieren eine globale Schriftart über den HTML-Body. Dies wird somit auch normalerweise für sämtliche Buttons angewendet. Aber unter OS X Yosemite wird diese Schriftart überschreiben. Es wird dann stattdessen die Schriftart „Helvetica Neue Desk Interface“ verwendet.
Möchte man dies nun wieder rückgängig machen, könnt man einfach gezielt die Schriftart des jeweiligen Buttons setzen. Bei einem Wechsel der globalen Schriftart müsste dann aber diese Schriftart auch für den Button aktualisiert werden. Sehr viel effektiver kann man das Problem lösen, indem man den Browser dazu zwingt, wieder die globale Schriftart zu verwenden.
Die einfache Lösung
Mit folgender einfacher CSS-Anweisung kann man für alle Formular-Buttons die Schriftart wieder zurücksetzen:
input[type="submit"], input[type="reset"], input[type="button"], button {
font-family: inherit;
}
Mit der Wertzuweisung inherit (Englisch für „erben“), wird die Schriftart „Helvetica Neue Desk Interface“ nicht mehr für die diversen Formular-Buttons verwendet. Eine weitere Änderungen, die OS X bezüglich der Schriftart von Buttons vornimmt, ist ein „Glätten“ der Schrift. Das hat den Effekt, dass der Text oftmals sehr viel fetter wird, als ursprünglich definiert. Erschwerend kommt hinzu, dass dieses Glättern erst nach dem Laden der Seite angewendet wird, wodurch sich der Button-Text für den Nutzer nachdem Laden plötzlich verändert. Hierzu gibt es aber erfreulicherweise eine recht einfache Möglichkeit, dies zu verhindern. Den vorherigen CSS-Code erweitern wir dazu um eine weitere Eigenschaft:
input[type="submit"], input[type="reset"], input[type="button"], button {
font-family: inherit;
-webkit-font-smoothing: inherit;
}
Mit diesen beiden Eigenschaften können wir nun also auch unter OS X Yosemite die Formularbuttons wieder mit der Schriftart verwenden, die ursprünglich definiert wurde. Dennoch können wir sehr leicht über die Änderung der globalen Schriftart auch die Schrift der Buttons beeinflussen.
Fazit
Als Webentwickler empfiehlt es sich immer, eine Website nicht nur mit verschiedenen Browsern zu testen, sondern zusätzlich auch mit verschiedenen Betriebssystemen. Gerade die Betriebssysteme von Apple führen hier oft zu einem erheblichen Mehraufwand, wenn man Formularfelder individuell gestalten möchte. Bisher konnte man dazu die speziellen CSS-Eigenschaften verwenden, aber mit dem Update auf Yosemite hat sich gezeigt, dass Apple auch tiefgreifendere Anpassung vornimmt, ohne dabei die Vererbungsregeln von CSS zu respektieren. Es bleibt also spannend, was wir wohl mit dem nächsten Update von OS X wieder zu reparieren haben.
Das kann man doch nach wie vor? Apple deaktiviert ja nicht die Eigenschaft
font-family, sondern setzt bloß einen default-Wert für die Eigenschaft dort, wo kein eigener Wert definiert ist. Letzteres sollte aber für Formularelemente sowieso der Fall sein, sofern man sie nicht den Browsern überlassen möchte. Normalize.css macht das z.B. von Hause aus, der klassische CSS-Reset von Eric Meyer allerdings wiederum nicht.Der Unterschied, dass Apple auf OS-Ebene eingreift, im Gegensatz zu Browsern, die es eben (wenn überhaupt) auf Browser-Ebene tun, kann ein Problem beim Testen darstellen, da stimme ich dir zu.
Was ich mit der von dir zitierten Aussage ausdrücken wollte Caspar: Für die meisten „Optimierungen“ gibt es ja CSS-Eigenschaften mit
-webkitVendor-Präfix. Neben dem schon beschriebenen-webkit-font-smootingwerden wohl viele auch schon-webkit-appearanceverwendet haben, um z.B. Auswahlfelder oder Buttons unter OS X stylen zu können. Denn auch diese werden sonst stark verändert.Selbstverständlich hast du recht, dass man den default-Wert überschreiben kann. Das habe ich ja auch im Artikel so angegeben. Was eben mit Yosemite neu ist: Apple legt explizit eine
font-familyfür Buttons fest. Hat man also global eine Schriftart festgelegt, z.B.body { font-family: 'Open Sans', sans-serif; }, dann wurde diese Schriftart bisher auf einem Mac auch für Fomular-Buttons verwendet und mit dem Update auf Yosemite eben nicht mehr.Meine Code zur Lösung tut ja im Grunde das gleiche, wie das von dir erwähnte Normalize.css und setzt den Wert auf
inherit. Was mir eben nicht gefällt ist die Tatsache, dass Apple immer mehr CSS-Eigenschaften bestimmter Elemente verändert. Eine neuer default-Wert für den Body (anstelle von Times oder ähnlichem) wäre ja noch OK gewesen. In diesem Artikel gar nicht erwähnt ist das neue Design der Checkboxes. Diese sehen jetzt (ohne entsprechenden Reset bzw. Normalisierung) auch so aus, wie im UI von Yosemite. Und es kann ja auch nicht sein, dass mit jedem Update von OS X das Reset-CSS um viele zusätzliche Anweisungen erweitert werden muss. Zumindest ein vorgefertigtes CSS könnte man ja dann von Apple erwarten.