1. Here CSS files are rendering from WCM, Can't take the advantage of browser caching
2. Response size and time may increase as Styles are coming from the JCR.

Approach 3: Storing CSS and Javascript as Content Item under some SiteArea

Steps to implementing CSS as a content item -
a). Create a authoring template with a single Body HTML element,
b). Create a presentation template that just refer Body element (you may not use Ephox RTE element because it includes <P> tags , causing CSS Styles failed )
c). Name ContentItem as *.css ("test.css").
d). You can add the above contentItem from other presentation templates as CSS or Javascript . Make sure to append "?subtype=css" to path of content item while referring in other Presentation templates to force WCM content to be rendered with text/css as MIME type instead of text/html (default MIME type for WCM content is text/html or text/plain).
Ex:
<link rel="StyleSheet" href="/wps/wcm/myconnect/library/Site/SiteArea/test.css?subtype=css" type="text/css"/>

Following are the advantages if you naming the ContentItem as *.css
a) When site is pre rendered for delivering content, content items stored as *.css will generate files valid CSS file to pre render
b) Even when content served through the WCM servlet , this allows the browser to cache the CSS file

Cons
1. Make sure this content item (css) doesn't pick up by some navigators or menu components as it is content item

Note:
a). In Second and Third approach approach , your CSS styles or javascript can refer File Resource Components(like for background images) that stored in WCM repository as components by simply using the Component Tag as below

b). "subtype" query string parameter only applies to the default content renderer and will not work on URLs which is used to invoke the component renderer (i.e. which contain srv=cmpnt in the query string parameter).

c). You may need to add an extension mapping for CSS to WcmConfigService.properties in older versions. Following are steps to do this.

Search for the line "#mapping of mimetypes to extensions" in wcmconfigservices.properties file located under <Portal_root>\wcm\shared\app\config\wcmservices\ directory.

There is an attribute named "mimetype.list=extensiontype.gif". Add ",extensiontype.css" (no spaces, include the dot ( . ) character at the front of the string) at the end of the line.

Add a new line "extensiontype.css=text/css" (no spaces) after the "extensiontype.lzh=application/octet-stream"

2 comments:

Hi Siva,Could you plz suggest if we can create our own element type in element manager in Authoring Templates. I need to create my own element type same as what comes in the dropdown of element type like HTML/RichText etc..