與CSS腳本

Question

CQ5.5部件我是新來CQ5.5

我想知道是否有可能一個CQ5.5內組元添加CSS腳本。

腳本如下一樣

< 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> 

，當我試圖做到這一點，並通過WC3驗證運行我的HTML網站，我有以下錯誤

文件類型不允許元素「風格「<風格 type =」text/css「>上面指定的元素在 不允許的上下文中找到。這可能意味着您錯誤地嵌套了 元素 - 例如「body」部分中的「style」元素，而不是「頭部」內的 - 或者兩個重疊的元素（這是不允許的）。 此錯誤的一個常見原因是在HTML 文檔中使用XHTML語法。由於HTML隱式元素的規則，這個 錯誤可能會產生級聯效應。例如，使用XHTML的 「自關閉」標籤用於HTML文檔的「頭部」部分中的「元」和「鏈接」可能會導致解析器推斷「頭」部分的結束以及開始「body」部分

這是否意味着它需要將它包含在某個組件的代碼中，或者不建議在組件的代碼中編寫css？

還有其他方法可以做到嗎？

Answer 1

的風格標籤，根據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,雖然它沒有明確說明，你不應該在文檔中的其他地方添加。

按照標準來看，驗證器會失敗這個測試用例，因爲HTML DTD預計它在HEAD部分。這正是你在你的問題中提到的錯誤的原因。但是，你仍然可以得到預期的結果，因爲幾乎所有的現代瀏覽器都支持它。

如果你遵循最佳實踐，最好是避免組件的JSP中指定的樣式，因爲

1. 如果一個組件添加到頁面多次，相同的CSS將在加頁面中的多個位置。
2. 根據DTD它是無效的標記。
3. 這將變得很難維護和管理，並且任何更改 都要求開發人員查看多個位置。
4. 這是醜陋的。

解決此問題的一種方法是使用CQ5（AEM）提供的Client-side HTML library（clientlibs）功能。這使您可以在相應的客戶端庫文件夾中組織特定於組件的特定樣式和腳本，並使用cq:includeClientLib標籤將它們包含在JSP中。

但是，這將包括<link>或<script>在使用cq：includeClientLib的相應位置，根據w3c驗證程序，這又是一個無效的標記。另外，在同一頁面中多次添加組件會導致在文檔中包含多個鏈接標籤。

要解決這個問題，您可以使用clientlibs中提供的embed功能將項目中所有組件特定的客戶端庫嵌入到/ etc/designs目錄中設計文件夾中的另一個客戶端庫中。然後，您可以將嵌入式clientlib與您的項目全局客戶端庫一起包含在頁面的頭部分中。這樣可以確保所有組件特定的樣式只添加一次，並且只有當應用程序特定的文件夾被訪問時纔會被限制到最終用戶，因爲您的文件是從/ etc而不是/ apps傳送的。

有關創建和使用客戶端HTML庫的更多信息，請參閱this doc。

Answer 2

組織最好的方法是你的組件上使用特定的命名空間，如：

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

，然後創建一個特殊設計的自定義皮膚，然後使用該命名空間：

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

或較少：

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

希望它可以幫助。