|
21 | 21 |
|
22 | 22 | <style class="editable">
|
23 | 23 | .one {
|
24 |
| - background-color: hsla(188, 97%, 28%, 0.3); |
| 24 | + background-color: hsl(188 97% 28% / 0.3); |
25 | 25 | }
|
26 | 26 |
|
27 | 27 | .two {
|
28 |
| - background-color: hsla(321, 47%, 57%, 0.7); |
| 28 | + background-color: hsl(321 47% 57% / 0.7); |
29 | 29 | }
|
30 | 30 |
|
31 | 31 | .three {
|
32 |
| - background-color: hsla(174, 77%, 31%, 0.9); |
| 32 | + background-color: hsl(174 77% 31% / 0.9); |
33 | 33 | }
|
34 | 34 | </style>
|
35 | 35 | </head>
|
36 | 36 |
|
37 | 37 | <body>
|
38 | 38 | <section class="preview">
|
39 | 39 | <div class="wrapper">
|
40 |
| - <div class="box one">hsla(188, 97%, 28%, .3)</div> |
41 |
| - <div class="box two">hsla(321, 47%, 57%, .7)</div> |
42 |
| - <div class="box three">hsla(174, 77%, 31%, .9)</div> |
| 40 | + <div class="box one">hsl(188 97% 28% / .3)</div> |
| 41 | + <div class="box two">hsl(321 47% 57% / .7)</div> |
| 42 | + <div class="box three">hsl(174 77% 31% / .9)</div> |
43 | 43 | </div>
|
44 | 44 | </section>
|
45 | 45 |
|
46 |
| - <textarea class="playable playable-css" style="height: 240px;"> |
| 46 | + <textarea class="playable playable-css" style="height: 240px"> |
47 | 47 | .one {
|
48 |
| - background-color: hsla(188, 97%, 28%, .3); |
| 48 | + background-color: hsl(188 97% 28% / .3); |
49 | 49 | }
|
50 | 50 |
|
51 | 51 | .two {
|
52 |
| - background-color: hsla(321, 47%, 57%, .7); |
| 52 | + background-color: hsl(321 47% 57% / .7); |
53 | 53 | }
|
54 | 54 |
|
55 | 55 | .three {
|
56 |
| - background-color: hsla(174, 77%, 31%, .9); |
| 56 | + background-color: hsl(174 77% 31% / .9); |
57 | 57 | }
|
58 | 58 | </textarea>
|
59 | 59 |
|
60 |
| - <textarea class="playable playable-html" style="height: 130px;"> |
| 60 | + <textarea class="playable playable-html" style="height: 130px"> |
61 | 61 | <div class="wrapper">
|
62 |
| - <div class="box one">hsla(188, 97%, 28%, .3)</div> |
63 |
| - <div class="box two">hsla(321, 47%, 57%, .7)</div> |
64 |
| - <div class="box three">hsla(174, 77%, 31%, .9)</div> |
| 62 | + <div class="box one">hsl(188 97% 28% / .3)</div> |
| 63 | + <div class="box two">hsl(321 47% 57% / .7)</div> |
| 64 | + <div class="box three">hsl(174 77% 31% / .9)</div> |
65 | 65 | </div>
|
66 | 66 | </textarea>
|
67 | 67 |
|
|
0 commit comments