--- template: Simple title: cssnext Playground className: js-cssnext-Playground cssnext-Playground footer: false scripts: - /playground.js ---
/* 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; }