Last active
March 17, 2021 13:49
-
-
Save hamsterbacke23/9e4ad6e171a2d36caebbcefdb5146125 to your computer and use it in GitHub Desktop.
HTML/CSS only legacy browser warning banner, will only show in old browsers.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <!-- Legacy browser banner start --> | |
| <!-- The <template> tag will only be visible in older browsers --> | |
| <style> | |
| .legacy-browser-wrapper { | |
| font-family: Roboto, Helvetica, Arial, sans-serif; | |
| position: fixed; | |
| bottom: 0; | |
| width: 100%; | |
| font-size: 16px; | |
| } | |
| .legacy-browser-banner { | |
| height: 100%; | |
| min-height: 60px; | |
| padding: 20px; | |
| color: #fff; | |
| background-color: #3e3a39; | |
| } | |
| .legacy-browser-wrapper label { | |
| cursor: pointer; | |
| position: absolute; | |
| top: 50%; | |
| right: 20px; | |
| transform: translateY(-50%); | |
| font-weight: 500; | |
| padding: 15px; | |
| color: #fff; | |
| } | |
| .legacy-browser-wrapper input[type="checkbox"]:checked ~ .legacy-browser-banner, | |
| .legacy-browser-wrapper input[type="checkbox"]:checked { | |
| display: none; | |
| } | |
| .legacy-browser-wrapper a { | |
| font-weight: 500; | |
| color: #fff; | |
| } | |
| template { | |
| /* Make sure the template tag is not hidden by normalize.css etc. */ | |
| display: block; | |
| } | |
| .visually-hidden { | |
| clip: rect(0 0 0 0); | |
| clip-path: inset(50%); | |
| height: 1px; | |
| overflow: hidden; | |
| position: absolute; | |
| white-space: nowrap; | |
| width: 1px; | |
| } | |
| </style> | |
| <div> | |
| <div class="legacy-browser-wrapper"> | |
| <label for="close-legacy-browser-warning"> | |
| Close | |
| </label> | |
| <input id="close-legacy-browser-warning" class="visually-hidden" type="checkbox"> | |
| <div class="legacy-browser-banner"> | |
| You are using an outdated browser. | |
| <a href="https://browser-update.org/update-browser.html">Please update your browser</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Legacy browser banner end --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment