V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
einsdisp
V2EX  ›  程序员

为了换肤,浏览器端编译 LESS,用户体验如何?编译时间如何?

  •  
  •   einsdisp · 2021-03-27 21:23:23 +08:00 · 2111 次点击
    这是一个创建于 1332 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

    这种方式是否影响 SEO (相对于传统 CSS 样式)?

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

    8 条回复    2021-03-29 10:02:26 +08:00
    Jirajine
        1
    Jirajine  
       2021-03-27 21:32:05 +08:00 via Android
    css variable 最合适,上古浏览器的用户不需要支持换肤功能。
    Track13
        2
    Track13  
       2021-03-27 21:45:55 +08:00 via Android
    。。。 加个 class 增加优先级覆盖样式不就可以。
    还是 css variable 省事
    Track13
        3
    Track13  
       2021-03-27 21:47:59 +08:00 via Android
    要任意颜色啊,前面那条当我没说。
    no1xsyzy
        4
    no1xsyzy  
       2021-03-27 23:20:53 +08:00
    把动态换肤做成付费功能,然后放心用 CSS 变量
    uptonking
        5
    uptonking  
       2021-03-28 01:02:14 +08:00 via iPhone
    程序猿联合起来,抛弃 IE 吧,用 css variables 直接写 css 就实现换肤了,,,最好在 css 变量名前加一个小前缀防冲突
    uptonking
        6
    uptonking  
       2021-03-28 01:07:52 +08:00 via iPhone
    让用户任意选颜色的需求不实际,文字色、hover 色、背景色处处都要考虑对比度和审美设计,动态计算很难满足,,,你可以针对各套颜色预定义多套主题。。。。还可以用 css 变量修改 font-size 大小,来触发改变元素宽高间距
    njitzyc
        7
    njitzyc  
       2021-03-28 01:07:56 +08:00
    IE 能搞浏览器编译吗?
    SmiteChow
        8
    SmiteChow  
       2021-03-29 10:02:26 +08:00
    css variable
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2986 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:51 · PVG 22:51 · LAX 06:51 · JFK 09:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.