postcss-cssnext/docs/content/playground.html

Use tomorrow’s CSS syntax, today

---
template: Simple
title: cssnext Playground
className: js-cssnext-Playground cssnext-Playground
footer: false
scripts:
  - /playground.js
---
<div class="cssnext-Playground-container">
  <div class="cssnext-Playground-section cssnext-Playground-section--from">
    <textarea class="js-cssnext-Playground-from cssnext-Playground-code cssnext-Playground-code--from" spellcheck="false">
/* custom properties */
:root {
--fontSize: 1rem;
--mainColor: #12345678;
--highlightColor: hwb(190, 35%, 20%);
}

/* custom properties set & @apply rule */
:root {
  --centered: {
    display: flex;
    align-items: center;
    justify-content: center;
  };
}

.centered {
  @apply --centered;
}

/* custom media queries */
@custom-media --viewport-medium (width <= 50rem);

/* some var() & calc() */
body {
color: var(--mainColor);

font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px);
}

/* custom media query usage */
@media (--viewport-medium) {
body { font-size: calc(var(--fontSize) * 1.2); }
}

/* custom selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading { margin-top: 0 }

/* image-set function */
.foo {
    background-image:
      image-set(
        url(img/test.png) 1x,
        url(img/test-2x.png) 2x
      );
}

/* colors stuff */
a {
color: var(--highlightColor);
transition: color 1s; /* autoprefixed ! */
}
a:hover { color: gray(255, 50%) }
a:active { color: rebeccapurple }
a:focus { background-color: rgb(255 153 0 / 33%); outline: 3px solid hsl(1turn 60% 50%); }
a:any-link { color: color(var(--highlightColor) blackness(+20%)) }

/* font stuff */
h2 {
font-variant-caps: small-caps;
}

table {
font-variant-numeric: lining-nums;
}

/* filters */
.blur {
filter: blur(4px);
}
.sepia {
filter: sepia(.8);
}

/* overflow-wrap fallback */
body {
overflow-wrap: break-word;
}

/* attribute case insensitive */
[frame=hsides i] {
border-style: solid none;
}

/* system-ui font-family */
body {
font-family: system-ui;
}

    </textarea>
  </div>
  <div class="cssnext-Playground-section cssnext-Playground-section--to">
    <textarea class="js-cssnext-Playground-to cssnext-Playground-code cssnext-Playground-code--to" spellcheck="false"></textarea>
  </div>
</div>
<div class="js-cssnext-Playground-messages cssnext-Playground-messages"></div>
<div class="js-cssnext-Playground-console cssnext-Playground-console"></div>