https://modern-now.vercel.app/

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>modern-now</title>
8    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> -->
9    <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
10    <link rel="stylesheet" href="demos/demo.css">
11    <style>
12        .popover-support:after {
13            content: '❌';
14        }
15
16        @supports selector(:popover-open) {
17            .popover-support:after {
18                content: '✅'
19            }
20        }
21
22        .dialog-support:after {
23            content: '✅';
24        }
25
26        .polyfill-dialog .dialog-support:after {
27            content: '❌';
28        }
29
30        /* Backdrop is supported as such since firefox 47, but with dialog only from 98 and with popovers from 125 */
31        .backdrop-support:after {
32            content: '❌';
33        }
34
35        @supports selector(dialog::backdrop) {
36            .backdrop-support:after {
37                content: '✅'
38            }
39        }
40
41        .oklch-support:after {
42            content: '❌';
43        }
44
45        @supports (color:oklch(59.69% 0.156 49.77 / .5)) {
46            .oklch-support:after {
47                content: '✅'
48            }
49        }
50
51        .grid-support:after {
52            content: '❌';
53        }
54
55        @supports (display: grid) {
56            .grid-support:after {
57                content: '✅'
58            }
59        }
60
61        .is-support:after {
62            content: '❌';
63        }
64
65        @supports selector(:is(.test)) {
66            .is-support:after {
67                content: '✅'
68            }
69        }
70    </style>
71</head>
72
73<body>
74    <header>
75        <h1>modern-now</h1>
76    </header>
77
78    <main>
79        <h2>Introduction</h2>
80        <p>modern-now is a simple, just include, modular library that augments native html with useful behaviour. This allows you to define
81            more things in html and do less in javascript.</p>
82
83        <p>It is powered by the very powerful <a href="https://github.com/WebReflection/qsa-observer" target="_blank">qsa-observer</a>
84            and <a href="https://github.com/WebReflection/nonchalance" target="_blank">nonchalance</a> library
85            that will automatically attach behaviours to html elements, even when they are dynamically injected into the dom.</p>
86
87        <h2>Check out the demos</h2>
88        <ul>
89            <li><a href="demos/dialog.html">Dialog</a></li>
90            <li><a href="demos/forms.html">Forms</a></li>
91            <li><a href="demos/inputs.html">Inputs</a></li>
92            <li><a href="demos/toggle.html">Toggle</a></li>
93            <li><a href="demos/tooltips.html">Tooltips</a></li>
94            <li><a href="demos/dropdowns.html">Dropdowns</a></li>
95            <li><a href="demos/calendar.html">Calendar</a></li>
96            <li><a href="demos/number.html">Number</a></li>
97            <li><a href="demos/time.html">Time</a></li>
98            <li><a href="demos/mark.html">Mark</a></li>
99            <li><a href="demos/behaviour.html">Behaviour</a></li>
100            <li><a href="demos/hx.html">Hx (htmlx inspired)</a></li>
101            <li><a href="demos/cmd.html">Cmd (invokers inspired)</a></li>
102        </ul>
103
104        <p>And some <a href="demos/notes.html">side notes</a>.</p>
105        <h2>Your browser capabilities</h2>
106        <p>You can find below what is supported natively in your browser.</p>
107        <table>
108            <tr>
109                <th>dialog support</th>
110                <td class="dialog-support"></td>
111            </tr>
112            <tr>
113                <th>backdrop support</th>
114                <td class="backdrop-support"></td>
115            </tr>
116            <tr>
117                <th>popover support</th>
118                <td class="popover-support"></td>
119            </tr>
120            <tr>
121                <th>oklch support</th>
122                <td class="oklch-support"></td>
123            </tr>
124            <tr>
125                <th>grid support</th>
126                <td class="grid-support"></td>
127            </tr>
128            <tr>
129                <th>

129is support</th>
130                <td class="is-support"></td>
131            </tr>
132        </table>
133    </main>
134    <footer>
135        <a href="https://github.com/lekoala/modern-now" target="_blank">Github</a> |
136        Made with <span style="color:#F31830">♥</span> in
137        <svg viewBox="0 0 640 480" height="1.2ex" style="display:inline;">
138            <g fill-rule="evenodd" stroke-width="1pt">
139                <path fill="#000001" d="M0 0h213.3v480H0z" />
140                <path fill="#ffd90c" d="M213.3 0h213.4v480H213.3z" />
141                <path fill="#f31830" d="M426.7 0H640v480H426.7z" />
142            </g>
143        </svg>
144        by <a href="https://www.lekoala.be">LeKoala</a>
145    </footer>
146</body>
147
148</html>