Agregar mensaje que se muestra a navegadores que no soportan backdrop-filter

src/App.tsx

@@ -1,12 +1,25 @@
 import { BarraSuperior } from "./BarraSuperior";
 import { ContenedorHorarios } from "./ContenedorHorarios/";
 import { Wallpaper } from "./Wallpaper";
+import { Show } from "solid-js";
+import { css } from "aphrodite";
+import { estilosGlobales } from "./Estilos";
 
 function App() {
+    /// @ts-ignore
+    const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
+
     return (
         <div class="App">
             <Wallpaper/>
             <BarraSuperior/>
+            <Show when={!soportaBackdropFilter}>
+                <div className={css(estilosGlobales.contenedor)}>
+                    Tu navegador no soporta "backdrop-filter". Este es solo un efecto
+                    visual, no afecta la funcionalidad de la página.&nbsp;
+                    <span>No volver a mostrar.</span>
+                </div>
+            </Show>
             <br/>
             <ContenedorHorarios/>
         </div>

src/ContenedorHorarios/MiHorario.tsx

@@ -46,11 +46,14 @@ export function MiHorario() {
             */}
         </div>
 
+
         <div className={css(
             e.horario,
             estilosGlobales.contenedor
         )}>
             <Tabla data={{}} anio={"Mi horario"} version={1}/>
         </div>
+
+
     </div>;
 }

src/Wallpaper.tsx

@@ -5,6 +5,10 @@ import { createSignal, createMemo, createEffect, createState } from "solid-js";
 const duracionTransicion = 250;
 
 export function Wallpaper() {
+    /// @ts-ignore
+    const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
+    console.log("Soporta backdrop-filter?:", soportaBackdropFilter);
+
     const estilos = StyleSheet.create({
         contenedorCover: {
             position: "fixed",
@@ -12,7 +16,8 @@ export function Wallpaper() {
             height: "100vh",
             top: "0",
             left: "0",
-            backgroundColor: "#212121"
+            backgroundColor: "#212121",
+            zIndex: -1
         },
         cover: {
             width: "100vw",
@@ -20,7 +25,8 @@ export function Wallpaper() {
             backgroundPosition: "center",
             backgroundSize: "cover",
             zIndex: -1,
-            transition: `opacity ${duracionTransicion}ms`
+            transition: `opacity ${duracionTransicion}ms`,
+            filter: soportaBackdropFilter? "": "blur(40px)"
         },
         coverTransicion: {
             opacity: 0

src/index.tsx

@@ -2,5 +2,6 @@ import "solid-js";
 import { render } from 'solid-js/web';
 import App from './App';
 import "normalize.css";
+import "./styles/global.css";
 
 render(App, document.getElementById('root') as Node);

src/styles/global.css

@@ -0,0 +1,3 @@
+body {
+    font-family: Inter, sans-serif;
+}