前端页面为了实现动态换肤效果,大致有几个方案:
CSS 变量(缺点:浏览器兼容性)
样式预处理( LESS,SASS 等),通过修改主题变量,编译出不同的 css 文件,缺点:不同的皮肤样式都是提前编译好的,用户没法运行时自主选择例如颜色、大小等
浏览器端编译 LESS,优点:运行时可选择任意颜色值,样式文件大小也足够小(但需要引入 less.js )
目前基本打算使用浏览器端编译 LESS,有没有小伙伴也在用这种方案?
如果编译 ant design 这种级别的样式,是否有用可户感知的延迟?特别是在手机浏览器上呢?
这种方式是否影响 SEO (相对于传统 CSS 样式)?
或者,有没有其他的换肤方案,可以用户运行时任意选择颜色的?
1
Jirajine 2021-03-27 21:32:05 +08:00 via Android
css variable 最合适,上古浏览器的用户不需要支持换肤功能。
|
2
Track13 2021-03-27 21:45:55 +08:00 via Android
。。。 加个 class 增加优先级覆盖样式不就可以。
还是 css variable 省事 |
3
Track13 2021-03-27 21:47:59 +08:00 via Android
要任意颜色啊,前面那条当我没说。
|
4
no1xsyzy 2021-03-27 23:20:53 +08:00
把动态换肤做成付费功能,然后放心用 CSS 变量
|
5
uptonking 2021-03-28 01:02:14 +08:00 via iPhone
程序猿联合起来,抛弃 IE 吧,用 css variables 直接写 css 就实现换肤了,,,最好在 css 变量名前加一个小前缀防冲突
|
6
uptonking 2021-03-28 01:07:52 +08:00 via iPhone
让用户任意选颜色的需求不实际,文字色、hover 色、背景色处处都要考虑对比度和审美设计,动态计算很难满足,,,你可以针对各套颜色预定义多套主题。。。。还可以用 css 变量修改 font-size 大小,来触发改变元素宽高间距
|
7
njitzyc 2021-03-28 01:07:56 +08:00
IE 能搞浏览器编译吗?
|
8
SmiteChow 2021-03-29 10:02:26 +08:00
css variable
|