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> <title> Skip link test </title> | |
<style> body { margin: 1rem auto; max-width: 32rem; } </style> | |
<div id="skip-link"><a href="#skip-link">Skip to content</a></div> | |
<header> | |
<p><a href="#my-header">My header</a>.</p> | |
</header> |
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><title> Sharing widget </title> | |
<!--<template>--> | |
<style> | |
ul { | |
list-style: none; | |
line-height: 1; | |
margin: 0; | |
padding: 0; | |
} |
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"> <title> Google Translate </title> | |
<style> | |
[id] .goog-te-gadget, | |
[id] .goog-te-gadget .goog-logo-link { | |
color: #444; | |
font-size: .85rem; | |
} | |
.goog-te-gadget select.goog-te-combo { | |
font-size: 1rem; |
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"> <title> SVG switch test </title> | |
<style> | |
:root { | |
--my-size: 2rem; | |
} | |
body { | |
font: 1rem/1.5 sans-serif; | |
} |
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"> <title> Spinner animation </title> | |
<script> console.time('my-timer') </script> | |
<style> | |
body { font: 1rem sans-serif; margin: auto; max-width: 32rem; } | |
button { font: inherit; padding: .3rem 1rem; } | |
:root { | |
--my-spinner-size: 5rem; |
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"> | |
<title> E-Book Search </title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | |
* { | |
border-radius: .2rem; | |
outline-offset: .15rem; |
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> <title> Dark mode </title> | |
<meta name="color-scheme" content="dark light"> | |
<style> | |
:root { | |
color-scheme: light dark; /* both supported */ | |
} | |
* { |
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> <title> Date picker calendar </title> | |
<style> | |
body { font: 1rem/1.7 sans-serif; margin: 1rem auto; max-width: 36rem; } | |
table { border: 1px solid #ddd; line-height: 2; X-width: 99%; } | |
th, td { border: 1px solid #ddd; min-width: 3.5rem; text-align: center; } | |
th { background: #eee; color: #444; } | |
button, summary { cursor: pointer; font: inherit; padding: .2rem .5rem; } | |
summary { border: 1px solid #ccc; display: inline-block; } |
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> <title> Text captcha test </title> | |
<style> | |
body { font: 1rem sans-serif; margin: 1rem auto; max-width: 33rem; } | |
form, input, output, button { | |
border: 1px solid #bbb; | |
border-radius: .2rem; | |
font: inherit; | |
padding: .4rem 1rem; |