Alle Kategorien
Suche

Browserweiche für Firefox nutzen - so klappt's mit CSS

Eine Browserweiche ist immer dann nötig, wenn man unterschiedliche Darstellungsmöglichkeiten in den einzelnen Webbrowservarianten abfangen möchte. So können Sie diese für Firefox nutzen.

So implementieren Sie eine Browserweiche.
So implementieren Sie eine Browserweiche.

Der Sinn von Browserweichen

Mittlerweile gibt es viele verschiedene Webbrowser auf dem Markt. Zu dem Webbrowser werden parallel Standards entwickelt, welche aufzeigen, wie Inhalte im Internet programmiertechnisch entwickelt werden sollen. Leider unterstützen einige Browser dies nicht konsequent.

  • Wenn Sie Entwickler sind, werden Sie das Problem kennen: Internetseiten sehen in verschiedenen Webbrowser-Versionen anders aus. Ganz besonders dramatisch war dies eine Zeit lang mit verschiedenen Versionen vom Internet Explorer (im Gegensatz zu Firefox, der oft sehr vorbildlich ist).
  • Eine Browserweiche sorgt dafür, dass beim Aufruf der Seite zunächst erkannt wird, welcher Webbrowser verwendet wird. Dann wird ein dafür zugeschnittener Teil geladen, und die nicht kompatiblen Elemente werden sozusagen ausgeblendet.
  • Eine Browserweiche kann man auf mehreren technischen Ebenen realisieren, unter anderem auch mit CSS, wobei sich Scriptsprachen wie PHP hier deutlich besser anbieten. Für Firefox wird dies in folgendem Abschnitt beschrieben.

Eine Weiche für Firefox

Firefox unterstützt viele Standard meist sehr akkurat. Eine Browserweiche, die dafür sorgt, dass Inhalte in Firefox anders aussehen, kann man über bestimmte CSS-Elemente realisieren.

  • Es gibt in CSS3 eine Pseudoklasse, die sich "root" nennt. Verschiedene Browser nutzen diese konsequent, so auch Firefox. Wenn Nutzer nun mit dem Internet Explorer eine solche Seite aufrufen, werden "root-Elemente" nicht genutzt - also "weicht" man je nach Webbrowser-Version - eine Browserweiche also.
  • Definieren Sie daher z.B. ein DIV, indem Sie es mit { color : blue; } beschreiben. Nun fügen Sie hinzu ":root div { color : green; }", und div-Elemente in Firefox werden grün angezeigt.
  • Sie können in diesem Sinne noch weitere Elemente verwenden. Eine sehr gute Liste unterstützter CSS-Elemente finden Sie auf lipfert-maliks-Seite.
Teilen: