♻️ Update for Edge/IE related to CSS [ms-high-contrast]

fastsitephp · Sep 11, 2024 · 2ce4f8e · 2ce4f8e
1 parent 204b12e
commit 2ce4f8e
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 33 deletions.
diff --git a/app_data/template/en/app/header.php b/app_data/template/en/app/header.php
@@ -3,9 +3,15 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link rel="stylesheet" href="site.css">
-        <link rel="shortcut icon" href="../../favicon.ico" />
         <title><?= $app->escape($page_title) ?></title>
+        <link rel="shortcut icon" href="../../favicon.ico" />
+        <link rel="stylesheet" href="site.css">
+        <script nomodule>
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = 'site-ie.css';
+            document.head.appendChild(link);
+        </script>
     </head>
     <body>
         <header>

diff --git a/app_data/template/en/site-ie.css b/app_data/template/en/site-ie.css
@@ -0,0 +1,8 @@
+/* Main element fallback colors IE because IE does not support CSS variables */
+@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+    nav { background-color:#2A293E; }
+    nav a, h1, footer { background-color:hsla(243, 20%, 40%, 1); }
+    .calc-result ul { border-bottom:1px solid #2A293E; }
+    .calc-result ul li { border:1px solid #2A293E; }
+    .calc-result ul li:nth-child(odd) { background-color: hsla(243, 20%, 80%, 1); }
+}
diff --git a/app_data/template/en/site.css b/app_data/template/en/site.css
@@ -7,15 +7,6 @@ html, body { height:100%; margin:0; }
     --lightest-color: hsla(243, 20%, 80%, 1);
 }
 
-/* Main element fallback colors IE because IE does not support CSS variables */
-@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
-    nav { background-color:#2A293E; }
-    nav a, h1, footer { background-color:hsla(243, 20%, 40%, 1); }
-    .calc-result ul { border-bottom:1px solid #2A293E; }
-    .calc-result ul li { border:1px solid #2A293E; }
-    .calc-result ul li:nth-child(odd) { background-color: hsla(243, 20%, 80%, 1); }
-}
-
 body {
     display: flex;
     flex-direction: column;

diff --git a/app_data/template/es/app/header.php b/app_data/template/es/app/header.php
@@ -3,9 +3,15 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link rel="stylesheet" href="site.css">
-        <link rel="shortcut icon" href="../../favicon.ico" />
         <title><?= $app->escape($page_title) ?></title>
+        <link rel="shortcut icon" href="../../favicon.ico" />
+        <link rel="stylesheet" href="site.css">
+        <script nomodule>
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = 'site-ie.css';
+            document.head.appendChild(link);
+        </script>
     </head>
     <body>
         <header>

diff --git a/app_data/template/es/site-ie.css b/app_data/template/es/site-ie.css
@@ -0,0 +1,8 @@
+/* El elemento principal tiene colores alternativos IE porque IE no admite variables CSS */
+@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+    nav { background-color:#2A293E; }
+    nav a, h1, footer { background-color:hsla(243, 20%, 40%, 1); }
+    .calc-result ul { border-bottom:1px solid #2A293E; }
+    .calc-result ul li { border:1px solid #2A293E; }
+    .calc-result ul li:nth-child(odd) { background-color: hsla(243, 20%, 80%, 1); }
+}
diff --git a/app_data/template/es/site.css b/app_data/template/es/site.css
@@ -7,15 +7,6 @@ html, body { height:100%; margin:0; }
     --lightest-color: hsla(243, 20%, 80%, 1);
 }
 
-/* El elemento principal tiene colores alternativos IE porque IE no admite variables CSS */
-@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
-    nav { background-color:#2A293E; }
-    nav a, h1, footer { background-color:hsla(243, 20%, 40%, 1); }
-    .calc-result ul { border-bottom:1px solid #2A293E; }
-    .calc-result ul li { border:1px solid #2A293E; }
-    .calc-result ul li:nth-child(odd) { background-color: hsla(243, 20%, 80%, 1); }
-}
-
 body {
     display: flex;
     flex-direction: column;

diff --git a/app_data/template/pt-BR/app/header.php b/app_data/template/pt-BR/app/header.php
@@ -3,9 +3,15 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link rel="stylesheet" href="site.css">
-        <link rel="shortcut icon" href="../../favicon.ico" />
         <title><?= $app->escape($page_title) ?></title>
+        <link rel="shortcut icon" href="../../favicon.ico" />
+        <link rel="stylesheet" href="site.css">
+        <script nomodule>
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = 'site-ie.css';
+            document.head.appendChild(link);
+        </script>
     </head>
     <body>
         <header>

diff --git a/app_data/template/pt-BR/site-ie.css b/app_data/template/pt-BR/site-ie.css
@@ -0,0 +1,8 @@
+/* Cores de fallback do elemento principal IE porque o IE não suporta variáveis CSS */
+@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+    nav { background-color:#2A293E; }
+    nav a, h1, footer { background-color:hsla(243, 20%, 40%, 1); }
+    .calc-result ul { border-bottom:1px solid #2A293E; }
+    .calc-result ul li { border:1px solid #2A293E; }
+    .calc-result ul li:nth-child(odd) { background-color: hsla(243, 20%, 80%, 1); }
+}
diff --git a/app_data/template/pt-BR/site.css b/app_data/template/pt-BR/site.css
@@ -7,15 +7,6 @@ html, body { height:100%; margin:0; }
     --lightest-color: hsla(243, 20%, 80%, 1);
 }
 
-/* Cores de fallback do elemento principal IE porque o IE não suporta variáveis CSS */
-@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
-    nav { background-color:#2A293E; }
-    nav a, h1, footer { background-color:hsla(243, 20%, 40%, 1); }
-    .calc-result ul { border-bottom:1px solid #2A293E; }
-    .calc-result ul li { border:1px solid #2A293E; }
-    .calc-result ul li:nth-child(odd) { background-color: hsla(243, 20%, 80%, 1); }
-}
-
 body {
     display: flex;
     flex-direction: column;