Managing different stylesheets depending on the context

For various reasons, you may need to reference some stylesheets only if certain conditions are met. In particular, the rendering mode may be a reason to load optional stylesheets, whether it is a reduced (lighter) version of your main stylesheet, or a different one for ergonomic reasons. Be careful though to not forget that one of the main advantages of using Jahia is to allow editors to do in-context editing. If you load stylesheets in edit mode that very different from the ones in live mode, the editors won’t be able anymore to work with pages that looks like the visitors will see them.

Example: load a different CSS if you are in live or contribute mode

<c:if test="${renderContext.liveMode}">
<template:addResources type="css" resources="webLive.css" />
</c:if>
<c:if test="${renderContext.contributeMode}">
<template:addResources type="css" resources="webContrib.css" />
</c:if>

Example: load a complementary CSS in edit mode

<template:addResources type="css" resources="web.css" />
<c:if test="${renderContext.editMode}">
<template:addResources type="css" resources="edit.css" />
</c:if>