doc_media_queries.html (877B)
1 <html> 2 <head> 3 <title>test</title> 4 <script type="application/javascript"> 5 6 </script> 7 <style> 8 div { 9 width: 1000px; 10 height: 100px; 11 background-color: #f00; 12 } 13 14 @media screen and (min-width: 1px) { 15 div { 16 width: 200px; 17 background-color: yellow; 18 } 19 } 20 21 @media (prefers-color-scheme: dark) { 22 div { 23 background-color: darkblue; 24 } 25 } 26 </style> 27 <script> 28 "use strict"; 29 if (window.location.search == "?constructed") { 30 const sheet = new CSSStyleSheet(); 31 sheet.replaceSync(`div { z-index: 0 }`); 32 document.adoptedStyleSheets.push(sheet); 33 } 34 </script> 35 </head> 36 <body> 37 <div></div> 38 <iframe 39 src='https://example.org/document-builder.sjs?html=<style>html { background: cyan;} @media (prefers-color-scheme: dark) {html {background: darkred;}}'> 40 </iframe> 41 </body> 42 </html>