• 请不要在回答技术问题时复制粘贴 AI 生成的内容
einsdisp
V2EX  ›  程序员

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

  •  
  •   einsdisp · Mar 27, 2021 · 3297 views
    This topic created in 2050 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

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

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

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

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