Редактор CSS на CSS

CodePen

Утехзадание

• Есть превью результата
• Можно редактировать CSS
• CSS применяется мгновенно
• Можно двигать панельки
• Встраиваемое в слайды
• Не ломает вёрстку вокруг

Только HTML и CSS!

<css-demo>
    <div class="panels">
        <style>
            /* TODO */
        </style>

        <div class="demo">
            TODO
        </div>
    </div>
</css-demo>

css-demo {
    --height: 100vh;
    height: var(--height);
    display: block;
}

some-new-element {
    display: inline;
}

.panels {
    display: grid;
    height: var(--height);
    grid-template-columns: 1fr 1fr;
    border: 3px solid #777;
}

.demo {
    display: grid;
    place-items: center;
    border-left: 3px solid #777;
}

style {
    display: block;
    font-family: monospace;
    white-space: pre;
    overflow: scroll;
    height: 100%;
}

style {
    display: block; /* 😱 */
}

script {
    display: block; /* 🫣 */
}

style {
    display: block;
    font-family: monospace;
    white-space: pre;
    overflow: scroll;
    height: 100%;
}

style {
    display: block;
    font-family: 'Nimbus Mono PS', 'Courier New', monospace;
    white-space: pre;
    overflow: scroll;
    height: 100%;
}

css-demo {
    .panels {
        > style { }
        > .demo { }
    }
}

Some CSS later...

contenteditable

contenteditable

• true
• false
• plaintext-only

spellcheck

spellcheck=false

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}

Утехзадание

• ✅ Есть превью результата
• ✅ Можно редактировать CSS
• ✅ CSS применяется мгновенно
• Можно двигать панельки
• Встраиваемое в слайды
• Не ломает вёрстку вокруг

Адаптив 🪗

css-demo {
    container: css-demo-container / size;

    @container css-demo-container (width < 800px) {
        & {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr;
        }
    }
}

@scope

Утехзадание

• ✅ Есть превью результата
• ✅ Можно редактировать CSS
• ✅ CSS применяется мгновенно
• Можно двигать панельки
• ✅ Встраиваемое в слайды
• ✅ Не ломает вёрстку вокруг

resize

.panels {
    grid-template-columns: auto 1fr;

    >style {
        resize: horizontal;
        width: 50cqi;
    }
}

codepen.io/jh3y

Утехзадание

• ✅ Есть превью результата
• ✅ Можно редактировать CSS
• ✅ CSS применяется мгновенно
• ✅ Можно двигать панельки
• ✅ Встраиваемое в слайды
• ✅ Не ломает вёрстку вокруг

А если JavaScript?

Custom Highlight API

CSS.highlights.set(
    'important',
    new Highlight()
)

::highlight(important) {
    color: #e90;
}