87 lines
2.1 KiB
HTML
87 lines
2.1 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Edit CSS inline</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Edit CSS inline</h1>
|
||
|
|
<p>This page demonstrates a nifty HTML trick. If you make a style tag contenteditable and <code>display: block;</code> it, you can change the styles for a page live.</p>
|
||
|
|
|
||
|
|
<p>For example, try editing the styles for the paragraphs and h1 below:</p>
|
||
|
|
|
||
|
|
<style contenteditable>
|
||
|
|
h1 {
|
||
|
|
/* Try changing the css by typing here */
|
||
|
|
transform: skew(-20deg);
|
||
|
|
border-bottom: 0.5rem solid grey;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
color: rgba(30, 30, 30);
|
||
|
|
margin: 0;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<p>Since this is CSS that is interpreted by the browser, you can write any valid css, like media queries or pseudo-element selectors.</p>
|
||
|
|
<style contenteditable>
|
||
|
|
/* Try changing the css here */
|
||
|
|
body {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
font-family: sans-serif;
|
||
|
|
padding: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
body > * {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 40rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: 1200px) {
|
||
|
|
body {
|
||
|
|
padding: 4rem 8rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<p>The CSS Below sets up the style tags. If you find a light theme easier, try changing the background color and font color. Be careful though, if you change the display value here, you loose the ability to view and edit the styles</p>
|
||
|
|
<style contenteditable>
|
||
|
|
style {
|
||
|
|
display: block;
|
||
|
|
font-family: monospace;
|
||
|
|
white-space: pre;
|
||
|
|
margin-top: 1rem;
|
||
|
|
background-color: rgba(30, 30, 30);
|
||
|
|
color: white;
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
style::before,
|
||
|
|
style::after {
|
||
|
|
display: block;
|
||
|
|
color: grey;
|
||
|
|
}
|
||
|
|
|
||
|
|
style[contenteditable]::before,
|
||
|
|
style[contenteditable]::after {
|
||
|
|
color: brown;
|
||
|
|
}
|
||
|
|
|
||
|
|
style[contenteditable]::before {
|
||
|
|
content: '<style contenteditable>';
|
||
|
|
}
|
||
|
|
|
||
|
|
style::before {
|
||
|
|
content: '<style>';
|
||
|
|
}
|
||
|
|
|
||
|
|
style::after {
|
||
|
|
content: '<\/style>';
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<p>This is an idea that came up after viewing <a href="https://secretgeek.github.io/html_wysiwyg/html.html" rel="noreferrer noopener">this brilliant HTML quine</a>. Code is <a href="https://git.b12f.io/b12f/bbcom/src/branch/master/css-edit/index.html" rel="noreferrer noopener">here</a>.</p>
|
||
|
|
<body>
|
||
|
|
</html>
|