CSS-Stylesheet nur einbinden, wenn ein bestimmtes Element in der Seite vorhanden ist.

20. Oktober 2009

css stylesheet bedingt

Dieses Beispiel zur bedingten Einbindung von CSS-Dateien kann auch für JS-Skripte oder sonstige Elemente genutzt werden

Wenn Sie bestimmte CSS-Dateien nur dann einbinden wollen, wenn das darin definierte Element auch in der Seite vorkommt, können Sie dies im HTML-head der Seite über eine Bedingung definieren. Dies kann gerade bei CSS notwendig sein, da diese im Gegensatz zu JS-Dateien über ein link-Tag eingebunden werden und somit nur im HTML-head stehen dürfen.

Die picture.css wird nur eingebunden, wenn das Element vom Typ core.picture in der aktuellen Seite vorkommt

<xsl:if test="/wd:document/wd:group//wd:item[@type = 'core.picture']">
  <link rel="stylesheet" type="text/css" href="/demoCore/wGlobal/layout/styles/picture.css"/>
</xsl:if>

Beachten Sie den Doppel-Slash zwischen wd:group und wd:item, da sonst verschachtelte Elemente nicht berücksichtigt werden würden.