toscho.design

Safari in CSS und Javascript ansprechen

Der Webbrowser Safari unterstützt CSS und Javascript schon sehr gut. Dennoch brauchen wir manchmal kleine Hacks, um ihn allein anzusprechen.

CSS

Safari skaliert Monospace-Schriften zu klein: Bei der Angabe font-size:.9em nimmt er als Ausgangsgröße (1em) nicht die des Elternelementes, sondern die Voreinstellung seines internen Stylesheets, die meistens bei 13px liegt. Das führt schnell zu unlesbar kleiner Schrift – also braucht er eine Sonderbehandlung.
Nachtrag: Das geht auch einfacher.

Um nur Safari in CSS anzusprechen, benutzen wir ein Media-Query, das kein anderer Browser liest:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit macht den Code sonst dramatisch kleiner. */
  pre, code, kbd, var, .codelist, 
  samp, input[type="text"],
  input[type="email"], input[type="url"],
  {
    font-size:  1.1em !important;
  }
  pre code, pre samp, pre kbd, pre var,
  input[type="submit"], #s {
    font-size:  1em !important;
  }
}

So können wir auch ganze Stylesheets nur an Safari ausliefern:

<link 
    rel="stylesheet" 
    type="text/css"
    media="screen and min-device-pixel-ratio:0" 
    href="/safari.css">

Davon rate ich ab! Das kostet eine zusätzliche Anfrage an den Server, und fast alle anderen Browser holen sich das Stylesheet dennoch; sie verarbeiten es nur nicht.

Javascript

Hier erwischen wir Safari noch einfacher als in CSS:

isSafari3 = (window.devicePixelRatio && !window.Opera) ? true : false;

Mit dieser Information können wir beispielsweise unsere Suchmaske auf Safaris Erweiterungen umschreiben:

if (isSafari3) {
function SafariSearch()
  {
    /* ID der Texteingabe des Suchfeldes ist hier s. */
    var searchField = document.getElementById('s');

    /* type auf search umschreiben. */
    searchField.setAttribute('type', 'search');

    /* Eingaben für diese Domain merken. */
    searchField.setAttribute('autosave', 'toscho.de');

    /* Menge der gemerkten Eingaben. */
    searchField.setAttribute('results', '15');
  }
  window.addEventListener('load', SafariSearch);
}

Jetzt merkt sich Safari nicht nur die Sucheingaben auf unserer Website; er paßt das Aussehen auch so an, daß der Besucher das Feld sofort als Suchmaske erkennt:

Safari-Suche

Links

Ein Kommentar

  1. micha am 29.01.2009 · 17:12

    jaja CSS-Hacks, ich versuch da ja eigentlich drauf zu verzichten aber manchmal geht es eben nicht ohne... Danke für den Tipp!