技术解析

为了换肤,浏览器端编译 LESS,用户体验如何?编译时间如何?
0
2021-06-08 10:51:52
idczone

前端页面为了实现动态换肤效果,大致有几个方案:

  • CSS 变量(缺点:浏览器兼容性)

  • 样式预处理( LESS,SASS 等),通过修改主题变量,编译出不同的 css 文件,缺点:不同的皮肤样式都是提前编译好的,用户没法运行时自主选择例如颜色、大小等

  • 浏览器端编译 LESS,优点:运行时可选择任意颜色值,样式文件大小也足够小(但需要引入 less.js )

目前基本打算使用浏览器端编译 LESS,有没有小伙伴也在用这种方案?

如果编译 ant design 这种级别的样式,是否有用可户感知的延迟?特别是在手机浏览器上呢?

这种方式是美国服务器否影响 SEO (相对于传统 CSS 样式)?

或者,有没有其他的换肤方案,可以用户运行时任意选择颜色的?


css variable 最合适,上古浏览器的用户不需要支持换肤功能。

。。。 加个 class 增加优先级覆盖样式不就可以。
还是 css variable 省事

要任意颜色啊,前面那条当我没说。

把动态换肤做成付费功能,然后放心用 CSS 变量

程序猿联合起来,抛弃 IE 吧,用 css variables 直接写 css 就实现换肤了,,,最好在 css 变量名前加一个小前缀防冲突

让用户任意选颜色的需求不实际,文字色、hover 色、背景色处处都要考虑对比度和审美设计,动态计算很难满足,,,你可以针对各套颜色预定义多套主题。。。。还可以用 css 变量修改 font-size 大小,来触发改变元素宽高间距

IE 能搞浏览器编译吗?

css variable

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服