[{"data":1,"prerenderedAt":162},["ShallowReactive",2],{"content-/blog/css-modern-features":3,"related-blog":137},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":131,"_id":132,"_source":133,"_file":134,"_stem":135,"_extension":136},"/blog/css-modern-features","blog",false,"","现代 CSS 特性","CSS Grid、Flexbox、CSS 变量、动画等现代 CSS 特性应用","现代 CSS 特性, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":124},"root",[18,26,32,67,72,80,85,93,97,102],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","现代 CSS 特性（Container Queries、Subgrid、CSS Variables）为模板生成与主题系统提供了更强的表达能力。本文概述若干易用且能提升生成质量的 CSS 新特性及其工程实践。",{"type":19,"tag":27,"props":28,"children":30},"h2",{"id":29},"推荐特性",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36,48],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40,46],{"type":19,"tag":41,"props":42,"children":43},"strong",{},[44],{"type":24,"value":45},"Container Queries",{"type":24,"value":47},"：允许组件根据容器大小自适应布局，适合组件化模板与嵌套布局场景。",{"type":19,"tag":37,"props":49,"children":50},{},[51,56,58,65],{"type":19,"tag":41,"props":52,"children":53},{},[54],{"type":24,"value":55},"CSS Variables",{"type":24,"value":57},"：为主题系统与动态样式注入提供低成本方案，配合 ",{"type":19,"tag":59,"props":60,"children":62},"code",{"className":61},[],[63],{"type":24,"value":64},":root",{"type":24,"value":66}," 或命名空间实现主题切换。",{"type":19,"tag":27,"props":68,"children":70},{"id":69},"兼容性与回退",[71],{"type":24,"value":69},{"type":19,"tag":33,"props":73,"children":74},{},[75],{"type":19,"tag":37,"props":76,"children":77},{},[78],{"type":24,"value":79},"在生成器中检测目标浏览器支持度，必要时为不支持环境生成替代样式或 polyfill。",{"type":19,"tag":27,"props":81,"children":83},{"id":82},"工程实践",[84],{"type":24,"value":82},{"type":19,"tag":33,"props":86,"children":87},{},[88],{"type":19,"tag":37,"props":89,"children":90},{},[91],{"type":24,"value":92},"在模板引擎中允许受控使用动态 class 与 style 注入，但对输入做严格白名单以防 XSS。",{"type":19,"tag":94,"props":95,"children":96},"hr",{},[],{"type":19,"tag":20,"props":98,"children":99},{},[100],{"type":24,"value":101},"相关链接：",{"type":19,"tag":33,"props":103,"children":104},{},[105,115],{"type":19,"tag":37,"props":106,"children":107},{},[108],{"type":19,"tag":109,"props":110,"children":112},"a",{"href":111},"/blog",[113],{"type":24,"value":114},"返回博客分类",{"type":19,"tag":37,"props":116,"children":117},{},[118],{"type":19,"tag":109,"props":119,"children":121},{"href":120},"/blog/topic/multi-agent-system",[122],{"type":24,"value":123},"查看热门话题",{"title":7,"searchDepth":125,"depth":125,"links":126},3,[127,129,130],{"id":29,"depth":128,"text":29},2,{"id":69,"depth":128,"text":69},{"id":82,"depth":128,"text":82},"markdown","content:blog:css-modern-features.md","content","blog/css-modern-features.md","blog/css-modern-features","md",[138,146,154],{"_path":139,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":140,"description":141,"keywords":142,"author":11,"date":12,"category":13,"image":14,"_type":131,"_id":143,"_source":133,"_file":144,"_stem":145,"_extension":136},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":147,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":148,"description":149,"keywords":150,"author":11,"date":12,"category":13,"image":14,"_type":131,"_id":151,"_source":133,"_file":152,"_stem":153,"_extension":136},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":155,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":156,"description":157,"keywords":158,"author":11,"date":12,"category":13,"image":14,"_type":131,"_id":159,"_source":133,"_file":160,"_stem":161,"_extension":136},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945285417]