qompile
Version:
Compile HTML plus dynamic styles and convert to HTML and CSS
60 lines (57 loc) • 16.3 kB
HTML
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nested Elements</title>
<style>
/* Nested Elements */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10pt;
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
}
body {
margin: 1em;
}
article {
padding: 2em;
background: #eee;
border-radius: .3em;
margin: 0 0 1em 0;
}
article:before {
content: '< 200px wide';
}
/* Layout */
@media (min-width: 600px) {
main,
aside {
float: left;
width: calc(60% - .5em);
margin-right: 1em;
}
aside {
width: calc(40% - .5em);
margin-right: 0;
}
}
</style>
<link href="nested-external.css" rel="stylesheet"></head><body><h1>Nesting Container-Query Enabled Elements</h1>
<header>
<h2>Header</h2>
<article data-articleel200eloffsetwidtheloffsetwidth300at241="0" data-articleel200eloffsetwidtheloffsetwidth300at271="0" data-articleel200eloffsetwidtheloffsetwidth300at301="0" data-articleel300eloffsetwidtheloffsetwidth400at331="0" data-articleel300eloffsetwidtheloffsetwidth400at361="0" data-articleel300eloffsetwidtheloffsetwidth400at391="0" data-articleel300eloffsetwidtheloffsetwidth400at421="0" data-articleel400eloffsetwidtheloffsetwidth500at451="0" data-articleel400eloffsetwidtheloffsetwidth500at481="0" data-articleel400eloffsetwidtheloffsetwidth500at511="0" data-articleel500eloffsetwidtheloffsetwidth600at541="0" data-articleel500eloffsetwidtheloffsetwidth600at571="0" data-articleel500eloffsetwidtheloffsetwidth600at601="0" data-articleel600eloffsetwidtheloffsetwidth700at631="0" data-articleel600eloffsetwidtheloffsetwidth700at661="0" data-articleel600eloffsetwidtheloffsetwidth700at691="0" data-articleel600eloffsetwidtheloffsetwidth700at721="0" data-articleel700eloffsetwidthat751="0" data-articleel700eloffsetwidthat781="0" data-articleel700eloffsetwidthat811="0" data-articleel700eloffsetwidthat841="0" data-articleel700eloffsetwidthat871="0" data-articleel700eloffsetwidthat901="0" data-articleel700eloffsetwidthat931="0" data-articleel700eloffsetwidthat961="0" data-articleel700eloffsetwidthat991="0" data-articleel700eloffsetwidthat1021="0" data-articleel700eloffsetwidthat1051="0" data-articleel700eloffsetwidthat1081="0" data-articleel700eloffsetwidthat1111="0" data-articleel700eloffsetwidthat1141="0" data-articleel700eloffsetwidthat1171="0" data-articleel700eloffsetwidthat1201="0" data-articleel700eloffsetwidthat1231="0" data-articleel700eloffsetwidthat1261="0" data-articleel700eloffsetwidthat1291="0" data-articleel700eloffsetwidthat1321="0" data-articleel700eloffsetwidthat1351="0" data-articleel700eloffsetwidthat1381="0" data-articleel700eloffsetwidthat1411="0" data-articleel700eloffsetwidthat1441="0" data-articleel700eloffsetwidthat1471="0" data-articleel700eloffsetwidthat1501="0" data-articleel700eloffsetwidthat1531="0" data-articleel700eloffsetwidthat1561="0" data-articleel700eloffsetwidthat1591="0" data-articleel700eloffsetwidthat1621="0" data-articleel700eloffsetwidthat1651="0" data-articleel700eloffsetwidthat1681="0" data-articleel700eloffsetwidthat1711="0" data-articleel700eloffsetwidthat1741="0" data-articleel700eloffsetwidthat1771="0" data-articleel700eloffsetwidthat1801="0" data-articleel700eloffsetwidthat1831="0" data-articleel700eloffsetwidthat1861="0" data-articleel700eloffsetwidthat1891="0" data-articleel700eloffsetwidthat1921="0" data-articleel700eloffsetwidthat1951="0" data-articleel700eloffsetwidthat1981="0" data-articleel700eloffsetwidthat2000="0"></article>
</header>
<section>
<main>
<h2>Main</h2>
<article data-articleel200eloffsetwidtheloffsetwidth300at241="1" data-articleel200eloffsetwidtheloffsetwidth300at271="1" data-articleel200eloffsetwidtheloffsetwidth300at301="1" data-articleel300eloffsetwidtheloffsetwidth400at331="1" data-articleel300eloffsetwidtheloffsetwidth400at361="1" data-articleel300eloffsetwidtheloffsetwidth400at391="1" data-articleel300eloffsetwidtheloffsetwidth400at421="1" data-articleel400eloffsetwidtheloffsetwidth500at451="1" data-articleel400eloffsetwidtheloffsetwidth500at481="1" data-articleel400eloffsetwidtheloffsetwidth500at511="1" data-articleel500eloffsetwidtheloffsetwidth600at541="1" data-articleel500eloffsetwidtheloffsetwidth600at571="1" data-articleel300eloffsetwidtheloffsetwidth400at601="0" data-articleel300eloffsetwidtheloffsetwidth400at631="0" data-articleel300eloffsetwidtheloffsetwidth400at661="0" data-articleel300eloffsetwidtheloffsetwidth400at691="0" data-articleel400eloffsetwidtheloffsetwidth500at721="0" data-articleel400eloffsetwidtheloffsetwidth500at751="0" data-articleel400eloffsetwidtheloffsetwidth500at781="0" data-articleel400eloffsetwidtheloffsetwidth500at811="0" data-articleel400eloffsetwidtheloffsetwidth500at841="0" data-articleel500eloffsetwidtheloffsetwidth600at871="0" data-articleel500eloffsetwidtheloffsetwidth600at901="0" data-articleel500eloffsetwidtheloffsetwidth600at931="0" data-articleel500eloffsetwidtheloffsetwidth600at961="0" data-articleel500eloffsetwidtheloffsetwidth600at991="0" data-articleel500eloffsetwidtheloffsetwidth600at1021="0" data-articleel600eloffsetwidtheloffsetwidth700at1051="0" data-articleel600eloffsetwidtheloffsetwidth700at1081="0" data-articleel600eloffsetwidtheloffsetwidth700at1111="0" data-articleel600eloffsetwidtheloffsetwidth700at1141="0" data-articleel600eloffsetwidtheloffsetwidth700at1171="0" data-articleel600eloffsetwidtheloffsetwidth700at1201="0" data-articleel700eloffsetwidthat1231="1" data-articleel700eloffsetwidthat1261="1" data-articleel700eloffsetwidthat1291="1" data-articleel700eloffsetwidthat1321="1" data-articleel700eloffsetwidthat1351="1" data-articleel700eloffsetwidthat1381="1" data-articleel700eloffsetwidthat1411="1" data-articleel700eloffsetwidthat1441="1" data-articleel700eloffsetwidthat1471="1" data-articleel700eloffsetwidthat1501="1" data-articleel700eloffsetwidthat1531="1" data-articleel700eloffsetwidthat1561="1" data-articleel700eloffsetwidthat1591="1" data-articleel700eloffsetwidthat1621="1" data-articleel700eloffsetwidthat1651="1" data-articleel700eloffsetwidthat1681="1" data-articleel700eloffsetwidthat1711="1" data-articleel700eloffsetwidthat1741="1" data-articleel700eloffsetwidthat1771="1" data-articleel700eloffsetwidthat1801="1" data-articleel700eloffsetwidthat1831="1" data-articleel700eloffsetwidthat1861="1" data-articleel700eloffsetwidthat1891="1" data-articleel700eloffsetwidthat1921="1" data-articleel700eloffsetwidthat1951="1" data-articleel700eloffsetwidthat1981="1" data-articleel700eloffsetwidthat2000="1"></article>
<article data-articleel200eloffsetwidtheloffsetwidth300at241="2" data-articleel200eloffsetwidtheloffsetwidth300at271="2" data-articleel200eloffsetwidtheloffsetwidth300at301="2" data-articleel300eloffsetwidtheloffsetwidth400at331="2" data-articleel300eloffsetwidtheloffsetwidth400at361="2" data-articleel300eloffsetwidtheloffsetwidth400at391="2" data-articleel300eloffsetwidtheloffsetwidth400at421="2" data-articleel400eloffsetwidtheloffsetwidth500at451="2" data-articleel400eloffsetwidtheloffsetwidth500at481="2" data-articleel400eloffsetwidtheloffsetwidth500at511="2" data-articleel500eloffsetwidtheloffsetwidth600at541="2" data-articleel500eloffsetwidtheloffsetwidth600at571="2" data-articleel300eloffsetwidtheloffsetwidth400at601="1" data-articleel300eloffsetwidtheloffsetwidth400at631="1" data-articleel300eloffsetwidtheloffsetwidth400at661="1" data-articleel300eloffsetwidtheloffsetwidth400at691="1" data-articleel400eloffsetwidtheloffsetwidth500at721="1" data-articleel400eloffsetwidtheloffsetwidth500at751="1" data-articleel400eloffsetwidtheloffsetwidth500at781="1" data-articleel400eloffsetwidtheloffsetwidth500at811="1" data-articleel400eloffsetwidtheloffsetwidth500at841="1" data-articleel500eloffsetwidtheloffsetwidth600at871="1" data-articleel500eloffsetwidtheloffsetwidth600at901="1" data-articleel500eloffsetwidtheloffsetwidth600at931="1" data-articleel500eloffsetwidtheloffsetwidth600at961="1" data-articleel500eloffsetwidtheloffsetwidth600at991="1" data-articleel500eloffsetwidtheloffsetwidth600at1021="1" data-articleel600eloffsetwidtheloffsetwidth700at1051="1" data-articleel600eloffsetwidtheloffsetwidth700at1081="1" data-articleel600eloffsetwidtheloffsetwidth700at1111="1" data-articleel600eloffsetwidtheloffsetwidth700at1141="1" data-articleel600eloffsetwidtheloffsetwidth700at1171="1" data-articleel600eloffsetwidtheloffsetwidth700at1201="1" data-articleel700eloffsetwidthat1231="2" data-articleel700eloffsetwidthat1261="2" data-articleel700eloffsetwidthat1291="2" data-articleel700eloffsetwidthat1321="2" data-articleel700eloffsetwidthat1351="2" data-articleel700eloffsetwidthat1381="2" data-articleel700eloffsetwidthat1411="2" data-articleel700eloffsetwidthat1441="2" data-articleel700eloffsetwidthat1471="2" data-articleel700eloffsetwidthat1501="2" data-articleel700eloffsetwidthat1531="2" data-articleel700eloffsetwidthat1561="2" data-articleel700eloffsetwidthat1591="2" data-articleel700eloffsetwidthat1621="2" data-articleel700eloffsetwidthat1651="2" data-articleel700eloffsetwidthat1681="2" data-articleel700eloffsetwidthat1711="2" data-articleel700eloffsetwidthat1741="2" data-articleel700eloffsetwidthat1771="2" data-articleel700eloffsetwidthat1801="2" data-articleel700eloffsetwidthat1831="2" data-articleel700eloffsetwidthat1861="2" data-articleel700eloffsetwidthat1891="2" data-articleel700eloffsetwidthat1921="2" data-articleel700eloffsetwidthat1951="2" data-articleel700eloffsetwidthat1981="2" data-articleel700eloffsetwidthat2000="2"></article>
</main>
<aside>
<h2>Sidebar</h2>
<article data-articleel200eloffsetwidtheloffsetwidth300at241="3" data-articleel200eloffsetwidtheloffsetwidth300at271="3" data-articleel200eloffsetwidtheloffsetwidth300at301="3" data-articleel300eloffsetwidtheloffsetwidth400at331="3" data-articleel300eloffsetwidtheloffsetwidth400at361="3" data-articleel300eloffsetwidtheloffsetwidth400at391="3" data-articleel300eloffsetwidtheloffsetwidth400at421="3" data-articleel400eloffsetwidtheloffsetwidth500at451="3" data-articleel400eloffsetwidtheloffsetwidth500at481="3" data-articleel400eloffsetwidtheloffsetwidth500at511="3" data-articleel500eloffsetwidtheloffsetwidth600at541="3" data-articleel500eloffsetwidtheloffsetwidth600at571="3" data-articleel200eloffsetwidtheloffsetwidth300at601="0" data-articleel200eloffsetwidtheloffsetwidth300at631="0" data-articleel200eloffsetwidtheloffsetwidth300at661="0" data-articleel200eloffsetwidtheloffsetwidth300at691="0" data-articleel200eloffsetwidtheloffsetwidth300at721="0" data-articleel200eloffsetwidtheloffsetwidth300at751="0" data-articleel200eloffsetwidtheloffsetwidth300at781="0" data-articleel300eloffsetwidtheloffsetwidth400at811="0" data-articleel300eloffsetwidtheloffsetwidth400at841="0" data-articleel300eloffsetwidtheloffsetwidth400at871="0" data-articleel300eloffsetwidtheloffsetwidth400at901="0" data-articleel300eloffsetwidtheloffsetwidth400at931="0" data-articleel300eloffsetwidtheloffsetwidth400at961="0" data-articleel300eloffsetwidtheloffsetwidth400at991="0" data-articleel300eloffsetwidtheloffsetwidth400at1021="0" data-articleel400eloffsetwidtheloffsetwidth500at1051="0" data-articleel400eloffsetwidtheloffsetwidth500at1081="0" data-articleel400eloffsetwidtheloffsetwidth500at1111="0" data-articleel400eloffsetwidtheloffsetwidth500at1141="0" data-articleel400eloffsetwidtheloffsetwidth500at1171="0" data-articleel400eloffsetwidtheloffsetwidth500at1201="0" data-articleel400eloffsetwidtheloffsetwidth500at1231="0" data-articleel400eloffsetwidtheloffsetwidth500at1261="0" data-articleel400eloffsetwidtheloffsetwidth500at1291="0" data-articleel500eloffsetwidtheloffsetwidth600at1321="0" data-articleel500eloffsetwidtheloffsetwidth600at1351="0" data-articleel500eloffsetwidtheloffsetwidth600at1381="0" data-articleel500eloffsetwidtheloffsetwidth600at1411="0" data-articleel500eloffsetwidtheloffsetwidth600at1441="0" data-articleel500eloffsetwidtheloffsetwidth600at1471="0" data-articleel500eloffsetwidtheloffsetwidth600at1501="0" data-articleel500eloffsetwidtheloffsetwidth600at1531="0" data-articleel600eloffsetwidtheloffsetwidth700at1561="0" data-articleel600eloffsetwidtheloffsetwidth700at1591="0" data-articleel600eloffsetwidtheloffsetwidth700at1621="0" data-articleel600eloffsetwidtheloffsetwidth700at1651="0" data-articleel600eloffsetwidtheloffsetwidth700at1681="0" data-articleel600eloffsetwidtheloffsetwidth700at1711="0" data-articleel600eloffsetwidtheloffsetwidth700at1741="0" data-articleel600eloffsetwidtheloffsetwidth700at1771="0" data-articleel700eloffsetwidthat1801="3" data-articleel700eloffsetwidthat1831="3" data-articleel700eloffsetwidthat1861="3" data-articleel700eloffsetwidthat1891="3" data-articleel700eloffsetwidthat1921="3" data-articleel700eloffsetwidthat1951="3" data-articleel700eloffsetwidthat1981="3" data-articleel700eloffsetwidthat2000="3"></article>
<article data-articleel200eloffsetwidtheloffsetwidth300at241="4" data-articleel200eloffsetwidtheloffsetwidth300at271="4" data-articleel200eloffsetwidtheloffsetwidth300at301="4" data-articleel300eloffsetwidtheloffsetwidth400at331="4" data-articleel300eloffsetwidtheloffsetwidth400at361="4" data-articleel300eloffsetwidtheloffsetwidth400at391="4" data-articleel300eloffsetwidtheloffsetwidth400at421="4" data-articleel400eloffsetwidtheloffsetwidth500at451="4" data-articleel400eloffsetwidtheloffsetwidth500at481="4" data-articleel400eloffsetwidtheloffsetwidth500at511="4" data-articleel500eloffsetwidtheloffsetwidth600at541="4" data-articleel500eloffsetwidtheloffsetwidth600at571="4" data-articleel200eloffsetwidtheloffsetwidth300at601="1" data-articleel200eloffsetwidtheloffsetwidth300at631="1" data-articleel200eloffsetwidtheloffsetwidth300at661="1" data-articleel200eloffsetwidtheloffsetwidth300at691="1" data-articleel200eloffsetwidtheloffsetwidth300at721="1" data-articleel200eloffsetwidtheloffsetwidth300at751="1" data-articleel200eloffsetwidtheloffsetwidth300at781="1" data-articleel300eloffsetwidtheloffsetwidth400at811="1" data-articleel300eloffsetwidtheloffsetwidth400at841="1" data-articleel300eloffsetwidtheloffsetwidth400at871="1" data-articleel300eloffsetwidtheloffsetwidth400at901="1" data-articleel300eloffsetwidtheloffsetwidth400at931="1" data-articleel300eloffsetwidtheloffsetwidth400at961="1" data-articleel300eloffsetwidtheloffsetwidth400at991="1" data-articleel300eloffsetwidtheloffsetwidth400at1021="1" data-articleel400eloffsetwidtheloffsetwidth500at1051="1" data-articleel400eloffsetwidtheloffsetwidth500at1081="1" data-articleel400eloffsetwidtheloffsetwidth500at1111="1" data-articleel400eloffsetwidtheloffsetwidth500at1141="1" data-articleel400eloffsetwidtheloffsetwidth500at1171="1" data-articleel400eloffsetwidtheloffsetwidth500at1201="1" data-articleel400eloffsetwidtheloffsetwidth500at1231="1" data-articleel400eloffsetwidtheloffsetwidth500at1261="1" data-articleel400eloffsetwidtheloffsetwidth500at1291="1" data-articleel500eloffsetwidtheloffsetwidth600at1321="1" data-articleel500eloffsetwidtheloffsetwidth600at1351="1" data-articleel500eloffsetwidtheloffsetwidth600at1381="1" data-articleel500eloffsetwidtheloffsetwidth600at1411="1" data-articleel500eloffsetwidtheloffsetwidth600at1441="1" data-articleel500eloffsetwidtheloffsetwidth600at1471="1" data-articleel500eloffsetwidtheloffsetwidth600at1501="1" data-articleel500eloffsetwidtheloffsetwidth600at1531="1" data-articleel600eloffsetwidtheloffsetwidth700at1561="1" data-articleel600eloffsetwidtheloffsetwidth700at1591="1" data-articleel600eloffsetwidtheloffsetwidth700at1621="1" data-articleel600eloffsetwidtheloffsetwidth700at1651="1" data-articleel600eloffsetwidtheloffsetwidth700at1681="1" data-articleel600eloffsetwidtheloffsetwidth700at1711="1" data-articleel600eloffsetwidtheloffsetwidth700at1741="1" data-articleel600eloffsetwidtheloffsetwidth700at1771="1" data-articleel700eloffsetwidthat1801="4" data-articleel700eloffsetwidthat1831="4" data-articleel700eloffsetwidthat1861="4" data-articleel700eloffsetwidthat1891="4" data-articleel700eloffsetwidthat1921="4" data-articleel700eloffsetwidthat1951="4" data-articleel700eloffsetwidthat1981="4" data-articleel700eloffsetwidthat2000="4"></article>
</aside>
</section></body></html>