写在前面

• 整理一下平时所学+所用到的 CSS 基本语法

CSS 基本语法

CSS2.1 语法

• Appendix G. Grammar of CSS 2.1
• CSS Syntax Module Level 3

CSS2.1 总体结构

• 简化为：
  • @charset
  • @import
  • rules
    • @media
    • @page
    • rule

CSS @ Rules

• @charset
• @import
• @media
• @page
• @counter-style
• @keyframes
• @fontface
• @supports
• @namespace

CSS Qualified Rule 的结构

• Selector
  • selectors-3
  • selectors-4
• Key
  • Properties
  • Variables
    • css-variables
• Value
  • css-values-4
  • CSS 属性值可能是以下类型。
    • CSS 范围的关键字：initial，unset，inherit，任何属性都可以的关键字。
    • 字符串：比如 content 属性。
    • URL：使用 url() 函数的 URL 值。
    • 整数 / 实数：比如 flex 属性。
    • 维度：单位的整数 / 实数，比如 width 属性。
    • 百分比：大部分维度都支持。
    • 颜色：比如 background-color 属性。
    • 图片：比如 background-image 属性。
    • 2D 位置：比如 background-position 属性。
    • 函数：来自函数的值，比如 transform 属性。
      • calc()
      • max()
      • min()
      • clamp()
      • toggle()
      • attr()

初建 CSS 知识体系

收集标准

• all standards and drafts are in the id named container of the html document.
• so we can write a script to collect the standards.

第一步：获取所有 li dom 节点

1
2
3

const list = document.getElementById("container").children
  
console.log('list', list)

第二步：匹配出 data-tag 中为 css 的 standard

• 

• 观察得到，我们只需要将 data-tag nodeValue 中有 “css” 抓出来即可

  1 2 3 4 5 6 7 8 9 10 11

  const list = document.getElementById("container").children const result = [] for (let i of list) { if (i.getAttribute('data-tag').match(/css/)) { result.push({ name: i.children[1].innerText, url: i.children[1].children[0].href }) } } console.log(JSON.stringify(result, null, ' '))

收集 CSS 属性相关标准

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

let iframe = document.createElement("iframe");
document.body.innerHTML = "";
document.body.appendChild(iframe);




function happen(element, event){
    return new Promise(function(resolve){
        let handler = () => {
            resolve();
            element.removeEventListener(event, handler);
        }
        element.addEventListener(event, handler);
    })
}




void async function(){
    for(let standard of standards) {
        iframe.src = standard.url;
        console.log(standard.name);
        await happen(iframe, "load");
    }
}();

写在后面

• 祝大家多多发财