|
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