CSS für Opera per JS einbinden

Navigation

14. Jul 2011

Falls Sie für für Opera Browser spezielle CSS-Eigenschaften definieren müssen, können Sie das auch über JavaScript machen.

Zu den Besonderheiten des Operas gehört der Umgang mit display: inline-block. Diese Eigenschaft wird z.B. beim Einsatz der Tagcloud genutzt. Falls Sie die Darstellung im Opera optimieren wollen, können Sie dies entweder über eine serverseitige Browserweiche machen oder einen clientseitigen Workaround anbieten, indem Sie die benötigten CSS-Definitionen per JavaScript ergänzen.

Wie das geht, zeigt das folgende einfache Beispiel, welches in der design.js nach dem Laden der Seite ausgeführt wird. Das Skript erstellt ein neues style-Tag und füllt dieses mit den gewünschten CSS-Definitionen. Auf die gleiche Weise können Sie auch externe CSS-Dateien einbinden, falls die Anpassungen umfangreicher sind.

Erweiterung in der design.js, um inline-block Interpretation Opera zu beheben

if(/opera/.test(navigator.userAgent.toLowerCase())){
  var elementStyle  = document.createElement("style");
  elementStyle.type = "text/css";
  elementStyle.appendChild(document.createTextNode(".tagCloud a {display:inline}"));
  document.getElementsByTagName("head")[0].appendChild(elementStyle);
}