Proxy Pattern in JavaScript
@property --colorPrimary {
syntax: "<color>";
initial-value: magenta;
inherits: false;
}
body {
/* Fallback for browsers without @property support. */
--colorPrimary: magenta;
}
.text {
color: var(--colorPrimary);
}
@property --status {
inherits: false;
initial-value: 0%;
syntax: '<percentage>';
}
.progress-bar {
width: var(--status);
height: 5px;
background: gold;
animation: progress 2s forwards;
}
@keyframes progress {
to {
--status: 100%;
}
}

content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;
globalThis.fetch("https://...");

Have you heard about Build Time CSS-in-JS libraries?

;(function thisIsANamedIIFE() { 
let name = "Beto Muniz";
})();
.square { aspect-ratio: 1 / 1; }.rectangle { aspect-ratio: 3 / 1; }.video { aspect-ratio: 16 / 9; }.ultrawide { aspect-ratio: 21 / 9; }.intrinsicsize { 
aspect-ratio: attr(width) / attr(height);
}

Beto Muniz

Front-End Engineer @ X-Team • Writing about Web Development • OSS Crafter • Indie Creator @ listtta.com, seujob.tech, protocoloalterado.com.br

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store