Thymeleaf中文网

深色模式

进阶：CSS 原生模板等 ​

和 JS 原生模板的思路完全一致，CSS 内联也支持通过「注释包裹表达式 + 静态占位符」的技巧，实现 CSS 原生模板——让 <style> 代码既能被 Thymeleaf 动态处理生成正确样式，又能在静态预览时（浏览器直接打开模板）作为合法 CSS 正常生效，兼顾动态渲染和原型友好性。

参见：

html
<style th:inline="css">
    .main\ elems {
        text-align: /*[[${align}]]*/ left;
    }
</style>

核心技巧：注释包裹内联表达式 ​

将 [[${表达式}]] 包裹在 CSS 注释 /*...*/ 中，并在注释后添加静态占位符值，格式如下：

html
<style th:inline="css">
    /* 注释包裹表达式 + 静态占位符 */
    .[[${classname}]] {
      text-align: /*[[${align}]]*/ left;
      font-size: /*[[${fontSize}]]*/ 14px;
      color: /*[[${themeColor}]]*/ #333;
    }
</style>

双重效果：动态处理 + 静态预览 ​

1. Thymeleaf 动态处理时 ​

Thymeleaf 会识别 /*[[...]]*/ 这种特殊注释格式，忽略注释后的静态占位符，仅解析并替换注释内的表达式，同时保留 CSS 标识符的智能转义： 假设后端变量 classname = 'main elems'、align = 'center'、fontSize = 16、themeColor = '#007bff'，最终渲染结果：

html
<style>
    .main\ elems { /* 类名自动转义（空格→\ ），表达式生效 */
      text-align: center; /* 替换为动态值，注释+占位符被移除 */
      font-size: 16px;
      color: #007bff;
    }
</style>

和直接写 text-align: [[${align}]]; 的效果完全一致，且 CSS 语法合法。

2. 静态预览时（浏览器直接打开模板） ​

注释包裹的表达式会被当作 CSS 注释忽略，注释后的静态占位符会生效，样式正常渲染：

css
/* 静态执行时，表达式被注释忽略，使用占位符值 */
.main\ elems {
  text-align: left;   /* 静态占位符：left */
  font-size: 14px;    /* 静态占位符：14px */
  color: #333;        /* 静态占位符：#333 */
}

这就实现了 Thymeleaf 「原生模板」的核心目标：模板文件本身是可独立运行的合法 CSS 代码。

关键细节与最佳实践 ​

1. 类名的特殊处理 ​

如果类名本身是动态的（如 .[[${classname}]]），无法直接用注释包裹（因为类名不是值，而是标识符），可通过「静态类名兜底」实现原型友好：

html
<style th:inline="css">
    /* 动态类名 + 静态类名兜底（静态预览时生效） */
    .[[${classname}]], .main-elems {
      text-align: /*[[${align}]]*/ left;
    }
</style>
  • 静态预览：.main-elems 生效，样式正常；
  • 动态渲染：.main\ elems 生效，.main-elems 作为冗余类名存在（无副作用）。

2. 兼容所有 CSS 语法 ​

该技巧适用于所有 CSS 样式值（文本对齐、尺寸、颜色、边距等），且兼容 CSS 变量、媒体查询等高级语法：

html
<style th:inline="css">
    :root {
      --primary-color: /*[[${theme.primary}]]*/ #007bff;
      --gap: /*[[${layout.gap}]]*/ 16px;
    }
    @media (max-width: /*[[${breakpoint.mobile}]]*/ 768px) {
      .container {
        padding: /*[[${layout.mobilePadding}]]*/ 8px;
      }
    }
</style>

3. 核心优势 ​

写法类型动态渲染合法性静态预览合法性原型友好性
直接内联 [[${...}]]合法非法（表达式报错）差
注释包裹 /*[[...]]*/合法合法（占位符生效）极佳

总结 ​

  1. CSS 原生模板的核心是「注释包裹表达式 + 静态占位符」，格式为 样式值: /*[[${表达式}]]*/ 静态值;；
  2. 动态处理时，Thymeleaf 忽略占位符、替换表达式并智能转义 CSS 标识符；静态预览时，注释忽略表达式、占位符生效；
  3. 动态类名可通过「静态类名兜底」实现原型友好，兼容所有 CSS 语法；
  4. 这是 CSS 内联的最佳实践，兼顾了动态渲染需求和原生模板的原型友好性。