Fixed #542, providing error message for < Safari 16.4.

CHANGELOG.md

@@ -11,6 +11,7 @@ Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http:
 -   Preserve concept on guide page refresh.
 -   Show multiple names when present in guide.
 -   [#533](https://github.com/wordplaydev/wordplay/issues/533) Fixed URLs to tutorial.
+-   [#542](https://github.com/wordplaydev/wordplay/issues/542) Provide error message for < Safari 16.4.
 
 ## 0.10.6 2024-07-20
 

src/app.html

@@ -368,6 +368,19 @@
                 color: var(--wordplay-error) !important;
                 background: var(--wordplay-error) !important;
             }
+
+            noscript {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            noscript p {
+                margin-block-start: 20%;
+                margin-block-end: auto;
+                width: 50%;
+                text-align: center;
+            }
         </style>
 
         %sveltekit.head%
@@ -380,20 +393,30 @@
             >
         </noscript>
         <div>%sveltekit.body%</div>
+        <div id="unsupported" style="display: none; margin: 1em">
+            <h1>Unsupported Browser</h1>
+            <p>
+                Your browser doesn't support critical functionality. To use
+                Wordplay, you'll need to upgrade to a more recent version.</p
+            >
+        </div>
+        <script nonce="%sveltekit.nonce%">
+            function supportsRegexNegativeLookBehind() {
+                try {
+                    return 'hi'.replace(new RegExp('(?<!hi)hi', 'g'), 'ho');
+                } catch (error) {
+                    return false;
+                }
+            }
+
+            function supportsAt() {
+                return [].at !== undefined;
+            }
+
+            const unsupported = document.getElementById('unsupported');
+            if (!supportsRegexNegativeLookBehind() || !supportsAt())
+                unsupported.style.display = 'block';
+            else unsupported.remove();
+        </script>
     </body>
 </html>
-
-<style>
-    noscript {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    noscript p {
-        margin-block-start: 20%;
-        margin-block-end: auto;
-        width: 50%;
-        text-align: center;
-    }
-</style>