1
@document url("https://www.example.com/") {
2
  h1 {
3
    color: green;
4
  }
5
}

1
@supports (-webkit-tap-highlight-color: transparent) {
2
  a, [role="button"], button, input[type="button"] {
3
    -webkit-tap-highlight-color: transparent;
4
  }
5
}

1
@supports (display: block flow) {
2
  .block-flow-box {
3
    display: block flow;
4
  }
5
}

1
@supports (--display: true) {
2
  .display-box {
3
    display: block
4
  }
5
}

1
@import url("fineprint.css") print; // 在打印机打印的时候生效
2
@import url("bluish.css") projection, tv; // 在投影仪、或者大屏 tv 的时候生效
3
@import "common.css" screen, projection; // 在普通屏幕、投影仪设备上生效

1
<style>
2
    body {
3
      // 这条属性是必须的, 需要加在想要查询的父级元素上
4
      // 它的值允许为 normal | size | inline-size
5
      // https://www.w3.org/TR/css-contain-3/#container-type
6
      container-type: size
7

8
    }
9

10
    @container (min-width: 400px) {
10 collapsed lines
11
      div {
12
        color: #f00
13
      }
14
    }
15
  </style>
16

17
<div>
18
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque nesciunt accusantium ullam voluptate, laudantium rerum impedit tempora non
19
  temporibus minima recusandae esse nemo praesentium, debitis voluptatibus ad officia, fugiat earum.
20
</div>

1
<style>
2
  body {
3
    // 使用样式查询的时候 container-name 属性是必须的
4
    // 它的作用是给当前父容器起一个容器名称, 方便查询
5
    container-name: body;
6
    --featured: true; // 设置一个查询的值
7
    --theme: dark;
8
  }
9

10
  @container body style(--featured: true) {
17 collapsed lines
11
    div {
12
      color: #f00
13
    }
14
  }
15

16
  // 或者作为主题属性查询
17
  @container body style(--theme: dark) {
18
    div {
19
      color: #fff
20
    }
21
  }
22
</style>
23

24
<div>
25
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque nesciunt accusantium ullam voluptate, laudantium rerum impedit tempora non
26
    temporibus minima recusandae esse nemo praesentium, debitis voluptatibus ad officia, fugiat earum.
27
</div>

1
li:nth-last-child(n + 3) {
2
  color: red;
3
}

1
<style>
2
li {
3
  border-bottom: 1px solid #000
4
}
5

6
li:nth-last-child(n + 5),
7
li:nth-last-child(n + 5)~li {
8
  width: 50%;
9
  display: inline-block;
10
  border-bottom: 0;
17 collapsed lines
11
}
12
</style>
13
<ul>
14
  <li><span>name: </span><span>1</span></li>
15
  <li><span>name: </span><span>2</span></li>
16
  <li><span>name: </span><span>3</span></li>
17
  <li><span>name: </span><span>4</span></li>
18
</ul>
19

20
<ul>
21
  <li><span>name: </span><span>1</span></li>
22
  <li><span>name: </span><span>2</span></li>
23
  <li><span>name: </span><span>3</span></li>
24
  <li><span>name: </span><span>4</span></li>
25
  <li><span>name: </span><span>5</span></li>
26
  <li><span>name: </span><span>6</span></li>
27
</ul>

1
<style>
2
.site-header__wrapper {
3
  display: flex;
4
  align-items: center;
5
  gap: 1rem;
6
  background-color: #f2ebff;
7
  border-radius: 12px;
8

9
  > * {
10
    flex: 1;
77 collapsed lines
11
    padding: 0.5rem 1rem;
12
  }
13
}
14

15
.site-header__middle {
16
  text-align: center;
17

18
  a {
19
    font-weight: bold;
20
  }
21
}
22

23
.site-header__end {
24
  display: flex;
25
  justify-content: flex-end;
26
}
27

28
.c-nav {
29
  display: flex;
30
  gap: 0.5rem;
31

32
  a {
33
    display: block;
34
    padding: 1rem 0.5rem;
35
  }
36
}
37

38
.site-header__wrapper:has(li:nth-last-child(n + 4)) {
39
  --layout-2: true;
40
}
41

42
@container style(--layout-2: true) {
43
  .site-header__wrapper {
44
    > * {
45
      flex: initial;
46
    }
47
  }
48

49
  .site-header__start {
50
    order: 2;
51
  }
52

53
  .site-header__middle {
54
    order: -1;
55
    text-align: start;
56
  }
57

58
  .site-header__end {
59
    margin-left: auto;
60
  }
61
}
62

63
a {
64
  text-decoration: none;
65
  color: #222;
66
}
67
</style>
68

69
<header class="site-header">
70
  <div class="wrapper site-header__wrapper">
71
    <div class="site-header__start">
72
      <button>Search</button>
73
    </div>
74
    <div class="site-header__middle">
75
      <a href="#">Brand</a>
76
    </div>
77
    <div class="site-header__end">
78
      <ul class="c-nav">
79
        <li><a href="#">Home</a></li>
80
        <li><a href="#">About</a></li>
81
        <li><a href="#">Home</a></li>
82
        <li><a href="#">Home</a></li>
83
        <li><a href="#">Home</a></li>
84
      </ul>
85
    </div>
86
  </div>
87
</header>

1
<div class="modal">
2
  <div class="modal__header">
3
    <h2>Title to be added in here. It should be about two lines.</h2>
4
    <button class="btn btn--icon" aria-label="Close">
5
      <svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
6
        <path d="m50 43.57l-19.281-19.281c-1.7891-1.7852-4.6562-1.7773-6.4336-0.003906-1.7852 1.7891-1.7734 4.6562 0.003906 6.4336l19.281 19.281-19.281 19.281c-1.7852 1.7891-1.7773 4.6562-0.003906 6.4336 1.7891 1.7852 4.6562 1.7734 6.4336-0.003906l19.281-19.281 19.281 19.281c1.7891 1.7852 4.6562 1.7773 6.4336 0.003906 1.7852-1.7891 1.7734-4.6562-0.003906-6.4336l-19.281-19.281 19.281-19.281c1.7852-1.7891 1.7773-4.6562 0.003906-6.4336-1.7891-1.7852-4.6562-1.7734-6.4336 0.003906z" fill-rule="evenodd" />
7
      </svg>
8

9
    </button>
10
  </div>
76 collapsed lines
11
  <div class="modal__body">
12
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis harum odit repellat beatae dolore voluptate doloremque eaque in voluptatem similique tenetu.</p>
13
  </div>
14
  <div class="modal__footer">
15
    <a href="#" class="btn">Ok, I understand</a>
16
  </div>
17
</div>
18

19
<style lang="scss">
20
.modal {
21
  display: flex;
22
  flex-direction: column;
23
  gap: 1rem;
24
  max-width: 450px;
25
  margin: 3rem auto;
26
  padding: 1rem;
27
  background-color: #eee7f8;
28
  border-radius: 15px;
29
}
30

31
.modal__header {
32
  display: flex;
33
  align-items: flex-start;
34
  gap: 1rem;
35
  h2 {
36
    font-weight: bold;
37
    font-size: 1.5rem;
38
  }
39
}
40

41
.btn {
42
  display: inline-flex;
43
  color: #fff;
44
  background-color: #7f4fce;
45
  padding: 0.5rem 1rem;
46
  border-radius: 100px;
47
  appearance: none;
48
  border: 0;
49
  font-size: 15px;
50
  cursor: pointer;
51
  border: 1px solid transparent;
52
}
53

54
.btn--ghost {
55
  background-color: transparent;
56
  color: #222;
57
  border-color: rgba(#000, 0.15);
58
}
59

60
.btn--icon {
61
  --size: 32px;
62
  flex: 0 0 var(--size);
63
  width: var(--size);
64
  height: var(--size);
65
  align-items: center;
66
  justify-content: center;
67
  padding: 0;
68
  background-color: transparent;
69

70
  svg {
71
    fill: #797979;
72
    width: var(--size);
73
    height: var(--size);
74
  }
75
}
76

77
.modal__footer {
78
  display: flex;
79
  justify-content: center;
80
  gap: 0.5rem;
81
}
82

83
.modal__footer:has(a:nth-last-child(n + 2)) {
84
  justify-content: flex-end;
85
}
86
</style>

1
<div class="wrapper">
2
  <div style="text-align: center; margin-bottom: 3rem;">
3
    <button id="add">Add author</button>
4
    <button id="remove">Remove author</button>
5
  </div>
6

7
  <div class="post-author" style="margin-bottom: 2rem;">
8
    <h3>Written by:</h3>
9
    <div class="post-author__wrapper">
10
      <div class="avatars-list">
80 collapsed lines
11
        <img class="avatar" src="https://xsgames.co/randomusers/avatar.php?g=male" alt="">
12
      </div>
13
      <p class="authors"><a href="#">Ahmad Shadeed</a></p>
14
    </div>
15
  </div>
16
</div>
17

18
<style lang="scss">
19
.post-author {
20
  display: flex;
21
  flex-flow: column wrap;
22
  gap: 1rem;
23

24
  h3 {
25
    text-transform: uppercase;
26
    font-size: 13px;
27
  }
28
}
29

30
.post-author__wrapper {
31
  display: flex;
32
  flex-wrap: wrap;
33
  align-items: center;
34
  gap: 0.5rem;
35

36
  a {
37
    text-decoration: underline;
38
  }
39
}
40

41
.post-author:has(img:nth-last-child(n + 2)) {
42
  --multiple-avatars: true;
43
}
44

45
@container style(--multiple-avatars: true) {
46
  .avatars-list {
47
    display: flex;
48
    background-color: #efefef;
49
    padding: 8px 12px;
50
    border-radius: 50px;
51
  }
52

53
  img:not(:first-child) {
54
    border: solid 2px #fff;
55
    margin-left: -0.25rem;
56
  }
57
}
58

59
.avatars-list {
60
  display: flex;
61
}
62

63
.avatar {
64
  width: 40px;
65
  height: 40px;
66
  background-color: green;
67
  border-radius: 50%;
68

69
  @container style(--multiple-avatars: true) {
70
    width: 30px;
71
    height: 30px;
72
  }
73
}
74

75
.wrapper {
76
  max-width: 600px;
77
  margin: auto;
78
  padding: 1rem;
79
}
80

81
a {
82
  text-decoration: none;
83
  color: #222;
84
}
85

86
img {
87
  display: inline-block;
88
  object-fit: cover;
89
}
90
</style>