Update:
Tôi đã viết một bài viết liên quan đến phương pháp độc đáo dưới đây trong CSS-Tricks đi vào chi tiết xa hoa hơn
Tôi đã nghĩ ra bản demo dưới đây bằng cách sử dụng hỗn hợp các thủ thuật cho phép mô phỏng các kịch bản if/else
cho một số thuộc tính. Bất kỳ thuộc tính nào có số trong bản chất của nó là mục tiêu dễ dàng cho phương thức này, nhưng các thuộc tính có giá trị văn bản là.simulating if/else
scenarios for some properties. Any property which is numerical in its essence is easy target for this method, but properties
with text values are.
Mã này có 3 kịch bản if/else
, cho
:root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
0, :root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
1 & :root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
2. Cả 3 đều bị chi phối bởi hai biến Boolean :root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
3 và đối diện :root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
4 của nó.Hai booleans đó là chìa khóa cho phương pháp này và để đạt được giá trị động không phải là boolean, đòi hỏi một số toán học may mắn cho phép sử dụng các hàm
:root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
5 & :root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
6.key to this method, and to achieve a Boolean out of a none-boolean dynamic value, requires some math which luckily CSS allows using
:root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
5 & :root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
6 functions.Rõ ràng các chức năng này [MIN/MAX] được hỗ trợ trong các phiên bản của trình duyệt gần đây, cũng hỗ trợ các thuộc tính tùy chỉnh CSS [biến].
var elm = document.querySelector['div']
setInterval[[]=>{
elm.style.setProperty['--width', Math.round[Math.random[]*80 + 20]]
}, 1000]
:root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
Một cách đơn giản khác bằng cách sử dụng :root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
7:
:root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
label{ --width: 150 }
input:checked + div{ --width: 400 }
div{
--isWide: Clamp[0, [var[--width] - 150] * 99999, 1];
width: calc[var[--width] * 1px];
height: 150px;
border-radius: calc[var[--isWide] * 20px]; /* if wide - add radius */
background: lightgreen;
}
Click to toggle width
Tốt nhất cho đến nay:
Tôi đã đưa ra một phương pháp hoàn toàn độc đáo, thậm chí còn đơn giản hơn!
Phương pháp này rất tuyệt vì nó rất dễ thực hiện và cũng để hiểu. Nó dựa trên hàm
:root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
8 :root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
9.Vì
:root{
--color1: lightgreen;
--color2: salmon;
--width: 70; /* starting value, randomly changed by javascript every 1 second */
}
div{
--widthThreshold: 50;
--is-width-above-limit: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
--is-width-below-limit: calc[1 - var[--is-width-above-limit]];
--opacity-wide: .4; /* if width is ABOVE 50 */
--radius-narrow: 10px; /* if width is BELOW 50 */
--radius-wide: 60px; /* if width is ABOVE 50 */
--height-narrow: 80px; /* if width is ABOVE 50 */
--height-wide: 160px; /* if width is ABOVE 50 */
--radiusToggle: Max[var[--radius-narrow], var[--radius-wide] * var[--is-width-above-limit]];
--opacityToggle: calc[calc[1 + var[--opacity-wide]] - var[--is-width-above-limit]];
--colorsToggle: var[--color1] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * var[--is-width-above-limit]],
var[--color2] calc[100% * [1 - var[--is-width-above-limit]]];
--height: Max[var[--height-wide] * var[--is-width-above-limit], var[--height-narrow]];
height: var[--height];
text-align: center;
line-height: var[--height];
width: calc[var[--width] * 1%];
opacity: var[--opacityToggle];
border-radius: var[--radiusToggle];
background: linear-gradient[var[--colorsToggle]];
transition: .3s;
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"%";
}
div::after{
counter-reset: bb var[--is-width-above-limit];
content: " is over 50% ? "counter[bb];
}
3 có thể dễ dàng tính toán là
1 hoặc
2, giá trị này có thể được sử dụng trong
3! Nếu chỉ có một bước duy nhất được xác định, thì vấn đề if/else
được giải quyết.Sử dụng từ khóa
5 vẫn tồn tại các thay đổi.var elm = document.querySelector['div']
setInterval[[]=>{
elm.style.setProperty['--width', Math.round[Math.random[]*80 + 20]]
}, 1000]
:root{
--color1: salmon;
--color2: lightgreen;
}
@keyframes if-over-threshold--container{
to{
--height: 160px;
--radius: 30px;
--color: var[--color2];
opacity: .4; /* consider this as additional, never-before, style */
}
}
@keyframes if-over-threshold--after{
to{
content: "true";
color: green;
}
}
div{
--width: 70; /* must be unitless */
--height: 80px;
--radius: 10px;
--color: var[--color1];
--widthThreshold: 50;
--is-width-over-threshold: Min[1, Max[var[--width] - var[--widthThreshold], 0]];
text-align: center;
white-space: nowrap;
transition: .3s;
/* if element is narrower than --widthThreshold */
width: calc[var[--width] * 1%];
height: var[--height];
line-height: var[--height];
border-radius: var[--radius];
background: var[--color];
/* else */
animation: if-over-threshold--container forwards steps[var[--is-width-over-threshold]];
}
/* prints some variables */
div::before{
counter-reset: aa var[--width];
content: counter[aa]"% is over 50% width ? ";
}
div::after{
content: 'false';
font-weight: bold;
color: darkred;
/* if element is wider than --widthThreshold */
animation: if-over-threshold--after forwards steps[var[--is-width-over-threshold]] ;
}
Tôi đã tìm thấy một lỗi Chrome mà tôi đã báo cáo có thể ảnh hưởng đến phương pháp này trong một số tình huống mà loại tính toán cụ thể là cần thiết, nhưng có một cách xung quanh nó.