CQ5.5 Components with CSS script

问题:

as i am new to CQ5.5

I was wondering if it is possible to add a css script within a CQ5.5 componenet.

Script as follow alike

< style type="text/css">
.testScript
{
    margin: 0;
    padding: 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
< /style>

As when i tried to do this and run my html site through the wc3 validator, i have to following error

document type does not allow element "style" here < style type="text/css" > The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed). One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section

Does it means it requires it to enclosed within the tag of an or it is not advisable to write css within the codes of an component?

Any other ways to do it?

回答1:

The STYLE tag, according to the w3c recommendation, allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document, though it is not explicitly stated that you shouldn't be adding it elsewhere in the document.

Going by the standards, validators would fail this test case as HTML DTD expects it to be within the HEAD section. And that is exactly the reason why you get the error mentioned in your question. But then, you would still get the expected result because almost all the modern browsers support it anyway.

If you are to follow the best practices, it is advisable to avoid specifying the styles within the component's JSP because

1. If a component is added to the page multiple times, the same css would be added in multiple locations in the page.
2. It is invalid markup as per the DTD.
3. It would become difficult to maintain and manage, and any change requires the developer to look at multiple locations.
4. It is ugly.

One way to work around this is using the Client-side HTML library(clientlibs) feature provided by CQ5(AEM). This allows you to organize your component specific styles and scripts within the corresponding clientlibrary folders and using the cq:includeClientLib tag you can include them in your JSP.

But this would include a <link> or <script> at the corresponding location where the cq:includeClientLib is used, which again is an invalid markup according to the w3c validator. Also, adding the component multiple times in the same page, leads to inclusion of multiple link tags in the document.

To overcome this, you could use the embed feature available in clientlibs to embed all the component specific client libraries of your project into another clientlibrary within your design folder present in /etc/designs. Then you can include the embedded clientlib in your page's head section along with your projects global clientlibs. This makes sure that all your component specific styles are added only once, as well as access is restricted to application specific folders to the end users as your files are delivered from /etc and not /apps.

For more on creating and using Client-Side HTML Libraries, refer this doc.

回答2:

The best way to organize this is using an specific namespace on your component such as:

<!-- jsp component -->
<div class="namespace">
    <!-- your stuff here -->
    <h1> <%= title%> </h1>
</div>

and then create an specific design as a custom-skin and then using that namespace:

/* newDesign - css file */
.namespace h1{ color:red }

or with less:

/* newDesign - less file */
.namespace{
    h1{ color:red; }
}

hope it can help.