Frontend Weekly 2024-11-15

1
<style>
2
  p {
3
    color: deeppink;
4
  }
5

6
  .blue::selection {
7
    color: blue;
8
  }
9
</style>
10
<p class="blue">
11
  This is
12
  <em>emphasized</em>
13
  text.
14
</p>

1
<style>
2
  details {
3
    display: flex;
4
    overflow: hidden;
5
    width: min-content;
6
    /* ... */
7
    summary {
8
      &::marker {
9
        content: "";
10
      }
11
      /* ... */
12
    }
13
    ::details-content {
14
      transition: 0.5s ease;
15
      width: 0;
16
      height: 0;
17
    }
18
    [open]::details-content {
19
      width: 320px;
20
      height: 28em;
21
    }
22
    /* ... */
23
  }
24
</style>
25
<details name="accordion" open>
26
  <summary>🐈</summary>
27
  <div>
28
    <p>
29
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam.
30
      Veritatis consequatur, soluta molestiae voluptates accusamus qui odio,
31
      error, repellat rem harum id similique omnis quod dignissimos saepe quas
32
      mollitia.
33
    </p>
34
    <p>
35
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam.
36
      Veritatis consequatur, soluta molestiae voluptates accusamus qui odio,
37
      error, repellat rem harum id similique omnis quod dignissimos saepe quas
38
      mollitia.
39
    </p>
40
  </div>
41
</details>

1
@page :right {
2
  @bottom-left {
3
    content: "My book";
4
    font-size: 9pt;
5
    color: #333;
6
  }
7
}