Browserweiche mit PHP (mit WordPress-Beispiel)

Warum sollte ich eine Browserweiche ein­set­zen? Bei fast jedem Webdesign-Projekt kann man sich nicht nur auf aktu­elle Browser und deren Features ver­las­sen. Bereits in den ers­ten Kundengesprächen sollte man sich bewusst machen, wel­che Zielgruppe(n) es so gibt. Soll die neue Website für Skateboard Equipment erstellt wer­den, kann davon aus­ge­gan­gen wer­den, dass die mög­li­chen User wohl zum Großteil “Multimedia Junkies” sein wer­den

Hat man es jedoch bei­spiels­weise mit land­wirt­schaft­li­chen Unternehmen auf länd­li­chen Gegenden zu tun, muss man durch­aus mal damit rech­nen, dass immer noch 10% — 15% der Besucher mit den Internet (H)Explorer 6 durch das WWW stolpern.

In die­sem Fall sollte man sich mal mit der Browserweiche aus­ein­an­der­set­zen. Den Löwenanteil kann man über typi­sche CSS Conditional Comments abfan­gen. Was aber, wenn das nicht mehr damit zu rea­li­sie­ren ist? Wie kann man noch ansetzen?

Problemstellung

In einem aktu­el­len Projekt erstelle ich einen News Blog. In dem Header sind (trans­pa­rente) Social Icons im PNG-Format hin­ter­legt. Nun wis­sen wir ja, dass der IE 6 da echt zicken kann, weil der Alpha-Kanal fehlt. In der header.php sieht der Bereich fol­gen­der­ma­ßen aus:

<div id="header_social">
   <p id="social_icons">
      <a href="<?php bloginfo( 'rss2_url' ); ?>" title="RSS Feed"><img src="<?php bloginfo( 'template_url' ); ?>/images/social_rss.png" alt="RSS Feed" /></a>
      <a href="http://www.twitter.com/benno_m_" title="... on Twitter"><img src="<?php bloginfo( 'template_url' ); ?>/images/social_twitter.png" alt="... on Twitter" /></a>
      <!-- ein paar Icons mehr //-->
   </p>
</div>

Die Grafiken haben wie gesagt einen trans­pa­rent Hintergrund — der IE 6 stinkt hier etwas ab und stellt der Hintergrund ein­fach weiß dar.

Lösungsansatz

Da ich hier nur schwer mit CSS anet­zen konnte, bin ich auf PHP umge­schwun­gen. Es wird der ver­wen­dete Browser vom User abge­fragt und auf die Version getes­tet. Weiterhin habe ich im Bilderordner des Templates einen Unterordner ange­legt, der die Grafiken ent­hält, wel­che statt trans­pa­ren­tem Hintergrund eine farb­lich ange­passte Hintergrundfarbe ent­hal­ten. Wir also der IE 6 ver­wen­det, soll die Bilder aus die­sem Ordner ver­wen­det wer­den, sonst nicht.

Folgender Ansatz zur Implementierung einer Browserweiche:

<div id="header_social">
   <p id="social_icons">
<?php
      $browser = $_SERVER['HTTP_USER_AGENT'];

      if( preg_match( '=MSIE 6.0=i', $browser ) ) { /* Binde IE 6 Grafiken ein */
?>
         <a href="<?php bloginfo( 'rss2_url' ); ?>" title="RSS Feed"><img src="<?php bloginfo( 'template_url' ); ?>/images/ie6/social_rss.gif" alt="RSS Feed" /></a>
         <a href="http://www.twitter.com/benno_m_" title="... on Twitter"><img src="<?php bloginfo( 'template_url' ); ?>/images/ie6/social_twitter.gif" alt="... on Twitter" /></a>
<?php
      }

      else { /* Binde normale transparent Grafiken ein */
?>
         <a href="<?php bloginfo( 'rss2_url' ); ?>" title="RSS Feed"><img src="<?php bloginfo( 'template_url' ); ?>/images/social_rss.png" alt="RSS Feed" /></a>
         <a href="http://www.twitter.com/benno_m" title="... on Twitter"><img src="<?php bloginfo( 'template_url' ); ?>/images/social_twitter.png" alt="... on Twitter" /></a>
<?php
      }
?>

Die if–Abfrage prüft hier die Rückgabe der Browserinformationen und schaut ob irgendwo der Teilstring MSIE 6.0 vor­han­den ist. Somit lässt sich rela­tiv ein­fach eine Browserweiche über PHP basteln.

Alternativen / Probleme bei die­ser Art von Browserweiche

Sicherlich ist die hier vor­ge­stellte Lösung nicht die ele­gan­teste. Das sollte sie auch nicht, sie sollte funk­tio­nie­ren Es gibt sicher­lich 3.982, 53 andere Möglichkeiten das Problem zu lösen. Jedoch kam mir diese zuerst in den Sinn.

Weniger Schreibarbeit hätte man auch, wenn man die Abfrage jeweils in die a-Tags mit ein­baut — z.B. über den ter­nä­ren Operator von PHP. Ich habe dar­auf aller­dings zum Verständnis hier dar­auf ver­zich­tet. Meine ent­gül­tige Implementierung sieht dann noch etwas anders aus

*** Update ***

Mir ist durch­aus klar, dass es diverse Hacks gibt, die dem IE Transparenzen bei­brin­gen kön­nen. Davon möchte ich hier aller­dings Abstand neh­men, da mir die Einbindung einer wei­te­ren JS Library für ein paar kleine Icons nicht sinn­voll erscheint. Darüber hin­aus soll die­ser Beitrag zum Nachdenken anre­gen — dazu, dass nicht bei jedem klei­nen Problem eine extra JavaScript Bibo zum Einsatz kommt. Diese Bibos haben oft­mals Nachteile, die den Designer ein­schrän­ken — und Einschränkungen haben wir ja schon genug