账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    critical 是怎么做到提取关键CSS的？
    72
    0
    https://github.com/addyosmani/critical 是怎么做到提取关键 CSS 资源的？个人理解首屏需要注入数据后才能提取到大部分首屏需要的css，critical 能做到吗？我还没有研究与尝试，只是简单看了一下文档，想了解工作原理。const critical = require('critical');critical.generate({ // Inline the generated critical-path CSS // - true generates HTML // - false generates CSS inline: true, // Your base directory base: 'dist/', // HTML source html: '<html>...</html>', // HTML source file src: 'index.html', // Your CSS Files (optional) css: ['dist/styles/main.css'], // Viewport width width: 1300, // Viewport height height: 900, // Output results to file target: { css: 'critical.css', html: 'index-critical.html', uncritical: 'uncritical.css', }, // Extract inlined styles from referenced stylesheets extract: true, // ignore CSS rules ignore: { atrule: ['@font-face'], rule: [/some-regexp/], decl: (node, value) => /big-image\.png/.test(value), },});
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • ︶走南闯北 普通会员 1楼

      在CSS中，"critical"通常指的是"关键"或"关键元素"。要提取关键CSS，可以使用以下步骤：

      1. 首先，了解你想要提取的关键CSS。这可能包括类名、ID、属性值、伪类等。

      2. 使用CSS选择器找到关键CSS。例如，如果你想要提取所有的div元素，你可以使用以下选择器：

      div关键CSS

      1. 在找到关键CSS后，你可以使用CSS提取器或解析器将其提取出来。例如，你可以使用CSS Selectors Notation（CSN）或CSSOM（层叠样式表对象模型）来提取关键CSS。

      2. 使用提取的CSS来替换你的原始CSS。例如，如果你想要将所有的div元素的背景颜色设置为红色，你可以使用以下CSS：

      div关键CSS { background-color: red; }

      1. 最后，记得使用!important关键字来突出显示关键CSS。这将确保只有最优先的CSS被应用。例如：

      !important div关键CSS { background-color: red; }

      以上就是提取关键CSS的一般步骤。请注意，这只是一个基本的指南，实际的提取过程可能需要根据你的具体需求进行调整。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部