that's all
<head>
. . . . . .
<script src="/instant-css.js"></script>
<!-- Automatically generated styles at runtime using MutationObserver by InstantCSS -->
<style instant-css="v0.6.9">
. . . . . .
.fs\=1\.5{font-size:1.5em}
.ts\=0_0_1_red{text-shadow:0 0 1em red}
.\:after\/ct\=\'\!\'\;inline-block\;ml\=\.1\;fs\=2\;tfo\=center_\.5:after{content:'!';display:inline-block;margin-left:.1em;font-size:2em;transform-origin:.5em}
.\:after\/a\=hello_1s_infinite_linear:after{animation:hello 1s infinite linear}
</style >
</head>
<body>
. . . . . .
<span class="fs=1.5ts=0_0_1_red:after/ct='!';inline-block;ml=.1;fs=2;tfo=center_.5:after/a=hello_1s_infinite_linear">that's all</span>
</body>
<!-- By default, class names behave like inline styles -->
<span class="background-color:red color:blue">I'm white letters on a red background</span>
<!-- Because class names use spaces( ) as delimiters, values that contain spaces should use underscores(_) instead of spaces.
A colon(:) can be included in the class name, but can be replaced by an equal sign(=) depending on your preference -->
<span class="border=1px_solid_black">I'm black line border</span>
<!-- Multiple styles or other attributes are also freely applicable in basic grammar -->
<span class="color=red;font-size=calc(8px*2)!important">I'm red letters and 8 * 2px is important</span>
<!-- For convenience, you can enter (=) instead of (:) -->
<div class="background=red">background:red</div>
<!-- You can abbreviate and use properties with abbreviations -->
<span class="bgc=blue">background-color:blue</span>
<!-- You can abbreviate and use value too with abbreviations -->
<span class="pointer">cursor:pointer</span>
<!-- The default unit is applied to styles such as width and height -->
<div class="bg=blue w=10">background:blue width:10em</div>
<!-- When you use minus(-) or plus(+) in the calc function, spaces are automatically added -->
<span class="fs=calc(30px-5px)">font-size:calc(30px - 5px)</span>
<!-- Values starting with two hyphens automatically wrap the var function -->
<div class="bg=--chambray">background:var(--chambray)</div>
<!-- Classes that start with special characters applied selectors and use slash (/) to distinguish between selectors and styles -->
<div class=">span.target/bgc=red _:nth-child(2n+1)/bgc=blue">
<span>I'm a blue background</span>
<span class="target">target</span>
<span>I'm a blue background</span>
<span>I'm no style applied</span>
</div>
<!-- The pseudo class is also applied in the same way as the selector -->
<span class=":active/bgc=blue;c=red">When I activate, I become a red letters on a blue background</span>
<style instant-css="v0.6.9">
[class][class][class].c\=yellow\!\!\!{color:yellow}
[class][class].c\=orange\!\!{color:orange}
[class].c\=red\!{color:red}
.\>span\/c\=red>span{color:red}
.c\=blue{color:blue}
[class].c\=blue\!{color:blue}
</style>
<!-- If you add an exclamation point (!) after the class name, you can change the style's priority using the selector priority instead of important -->
<span class="c=yellow!!! c=orange!! c=red!">i'm a yellow</span>
<div class=">span/c=red">
<span>i'm a red</span>
<span class="c=blue">i'm a red</span>
<span class="c=blue!">i'm a blue</span>
</div>
<style instant-css="v0.6.9">
.c\=red{color:red}
.fs\=16px{font-size:16px}
[class].fs\=16px\!{font-size:16px}
/* Styles with the same prefix are grouped in the same group */
@media (min-width:768px){
.\@min-width\=768px\@fs\=12px{font-size:12px}
.\@min-width\=768px\@c\=blue{color:blue}
.\@min-width\=768px\@\:active\/fs\=12px:active{font-size:1.25em}
}
</style>
<!-- Classes that begin with an at (@) apply media queries and use the second at to separate styles from media queries -->
<span class="c=red fs=16px @min-width=768px@fs=12px">if width >= 768: im 12px</span>
<span class="c=red @min-width=768px@c=blue fs=16px! @min-width=768px@fs=12px">i'm blue & 16px</span>
<span class="@min-width=768px@:active/fs=1.25">with selector</span>
<style instant-css="v0.6.9">
@media not (min-width:768px){
.\@\!min-width\=768px\@fs\=12px{font-size:12px}
}
</style>
<!-- Queries with a single feature can use an exclamation point (!) to apply the not logic -->
<span class="@!min-width=768px@fs=12px">if width >= 768: im 12px</span>
<style instant-css="v0.6.9">
@container (min-width:768px){
.\@container_min-width\=768px\@fs\=10px{font-size:10px}
}
@media screen and (min-width:768px){
.\@\@screen_and_min-width\=768px\@fs\=10px{font-size:10px}
}
</style>
<!-- The grammar that uses more complex media queries is as follows -->
<span class="@container_min-width=768px@fs=10px">container()</span>
<span class="@@screen_and_min-width=768px@fs=10px">multi with @</span>
<!-- Media queries also provide some abbreviations -->
<style instant-css="v0.6.9">
@media (min-width:640px) and (max-width:767px){
.\@\!width\=640\~767px\@fs\=10px{font-size:10px}
}
@media (min-width:768px){
.\@md\@fs\=12px{font-size:12px}
}
@media not (min-width:768px){
.\@\!md\@fs\=12px{font-size:12px}
}
@media (prefers-color-scheme:dark) and (min-width:768px){
.\@\@dark_and_md\@fs\=12px{font-size:12px}
}
</style>
<span class="@width=640~767px@c=red">640px ~ 767px</span>
<span class="@md@c=red">768px ~</span>
<span class="@!md@c=red">~ 767px</span>
<span class="@@all_and_md@c=red">all 768px ~</span>
<!-- In light theme, dark mode styles are disabled -->
<style instant-css="v0.6.9">
.c\=red{color:red}
</style>
<!-- In dark theme, dark mode styles are applied without media queries -->
<style instant-css="v0.6.9">
.c\=red{color:red}
.\@dark\@c\=blue{color:blue}
</style>
<!-- In system theme, the dark mode style is applied as a media query -->
<style instant-css="v0.6.9">
.c\=red{color:red}
@media (prefers-color-scheme:dark){
.\@dark\@c\=blue{color:blue}
}
</style>
<span class="c=red @dark@c=blue">I'm red letters, but in dark mode, I'm blue letters</span>
<script>
localStorage.setItem("THEME", "LIGHT") // if THEME is not DARK and true, light theme is applied
localStorage.setItem("THEME", "DARK") // if THEME is DARK, dark theme is applied
localStorage.removeItem("THEME") // if THEME is false, theme is follow system settings
window["instantCss"]() // update style sheet
</script>