Typer une couleur avec @property
HTML
index.html <section>
<div class="box box-one"></div>
<div class="box box-two"></div>
</section>
CSS
style.css @layer demo {
@property --brand-two {
syntax: "<color>";
inherits: true;
initial-value: blue;
}
:root {
--brand-one: red;
--brand-one-light: color-mix(in oklch, var(--brand-one), white);
--brand-one-dark: color-mix(in oklch, var(--brand-one), black);
--brand-one-gradient: linear-gradient(45deg, black, var(--brand-one-dark));
--brand-two-light: color-mix(in oklch, var(--brand-two), white);
--brand-two-dark: color-mix(in oklch, var(--brand-two), black);
--brand-two-gradient: linear-gradient(45deg, black, var(--brand-two-dark));
}
.box-one {
border-color: var(--brand-one, yellow);
background-image: var(--brand-one-gradient);
&::after {
content: "without @property";
}
}
.box-two {
border-color: var(--brand-two);
background-image: var(--brand-two-gradient);
&::after {
content: "with @property";
}
}
@media (width <= 1024px) {
:root {
--brand-one: orange;
--brand-two: orange;
}
}
@media (width <= 768px) {
:root {
--brand-one: green;
--brand-two: green;
}
}
@media (width <= 640px) {
:root {
--brand-one: 14px; /* typo 😱 */
--brand-two: 14px; /* typo 😱 */
}
}
@media (width <= 480px) {
:root {
--brand-one: purple;
--brand-two: purple;
}
}
}
@layer demoStyles {
body {
height: 100svh;
}
section {
width: 90%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
background-image: linear-gradient(
45deg,
hsl(0deg 0% 0% / 90%),
hsl(0deg 0% 10% / 90%)
);
padding: 2rem;
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
border-radius: 10px;
border: 1px dashed #777;
* {
align-self: center;
justify-self: center;
}
@media (width <= 640px) {
grid-template-columns: 1fr;
}
}
.box {
--size-content: "> 1024px";
transition: 1s;
border: 1px solid;
padding: 1rem;
background-image: linear-gradient(45deg, black, #222);
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
color: white;
position: relative;
width: 200px;
aspect-ratio: 2 / 1;
border-radius: 10px;
&::before,
&::after {
content: var(--size-content);
inset: 0;
display: flex;
place-content: center;
align-items: center;
position: relative;
font-size: 2rem;
}
&::after {
font-size: 1rem;
}
@media (width <= 1024px) {
&::before {
--size-content: "<= 1024px";
}
}
@media (width <= 768px) {
&::before {
--size-content: "<= 768px";
}
}
@media (width <= 640px) {
&::before {
--size-content: "<= 640px";
}
}
@media (width <= 480px) {
&::before {
--size-content: "<= 480px";
}
}
}
}