Возможны ли изменения CSS-переменных при срабатывании переключателя с переключателем? - PullRequest
Новая
       64

Возможны ли изменения CSS-переменных при срабатывании переключателя с переключателем?

3 голосов
/ 01 мая 2019

У меня есть следующий CodePen: Тест ЖК-дисплея с переменными CSS , при котором при нажатии на метки с определенными цифрами отображаются соответствующие сегменты ЖК-дисплея, которые будут «подсвечены» на основе алгебраических уравнений, которые я определил для имитировать 7-сегментный дисплейный декодер BCD, чтобы имитировать ЖК-дисплей ...

В настоящее время у меня есть уравнение первого сегмента, упомянутое в CSS. Нажатие на цифру в CSS теоретически должно привести к заполнению соответствующих четырех --input переменных импульсом (0 или 1), а затем уравнение определяет непрозрачность на основе уравнения для этого сегмента ...

Сегмент A (верхний сегмент) должен измениться следующим образом:

  • 0: вкл
  • 1: выключено
  • 2: вкл
  • 3: вкл.
  • 4: выключено
  • 5: вкл
  • 6: вкл
  • 7: вкл
  • 8: вкл
  • 9: вкл

Где «on» - непрозрачность 1, а «off» - непрозрачность 0,05.

Однако, хотя у нас есть начальное значение по умолчанию 0 (которое включено), нажатие, скажем, 1 или 4, не меняет непрозрачность сегмента ...

Код ниже, кто-нибудь может указать, что я могу делать неправильно? Большое спасибо заранее ...

HTML: 

<div id="led-screen">
    <div class="digit">
        <div class="segment segment-a"></div>
        <div class="segment segment-b"></div>
        <div class="segment segment-c"></div>
        <div class="segment segment-d"></div>
        <div class="segment segment-e"></div>
        <div class="segment segment-f"></div>
        <div class="segment segment-g"></div>
    </div>
</div>
<div id="buttons">
    <label class="digit-button" for="digit-7">7</label>
    <label class="digit-button" for="digit-8">8</label>
    <label class="digit-button" for="digit-9">9</label>
    <label class="digit-button" for="digit-4">4</label>
    <label class="digit-button" for="digit-5">5</label>
    <label class="digit-button" for="digit-6">6</label>
    <label class="digit-button" for="digit-1">1</label>
    <label class="digit-button" for="digit-2">2</label>
    <label class="digit-button" for="digit-3">3</label>
    <label class="digit-button" for="digit-0">0</label>
    <input type="radio" name="digit-radio" id="digit-0" checked="checked"/>
    <input type="radio" name="digit-radio" id="digit-1" />
    <input type="radio" name="digit-radio" id="digit-2" />
    <input type="radio" name="digit-radio" id="digit-3" />
    <input type="radio" name="digit-radio" id="digit-4" />
    <input type="radio" name="digit-radio" id="digit-5" />
    <input type="radio" name="digit-radio" id="digit-6" />
    <input type="radio" name="digit-radio" id="digit-7" />
    <input type="radio" name="digit-radio" id="digit-8" />
    <input type="radio" name="digit-radio" id="digit-9" />
</div>

CSS: 

:root {
    --input_0: 0; /* z */
    --input_1: 0; /* y */
    --input_2: 0; /* x */
    --input_3: 0; /* w */
    --led_r: 42;
    --led_g: 45;
    --led_b: 34;
    --led_o: 0;
    --led_o_base: 0.95;
    --led_o_offset: 0.05;
}

#led-screen {
    background-color: #b7ac90;
    width: 800px;
    height: 200px;
    display: block;
}

#digit-0:checked {
    --input_0: 0;
    --input_1: 0;
    --input_2: 0;
    --input_3: 0;   
}
#digit-1:checked {
    --input_0: 1;
    --input_1: 0;
    --input_2: 0;
    --input_3: 0;   
}
#digit-2:checked {
    --input_0: 0;
    --input_1: 1;
    --input_2: 0;
    --input_3: 0;   
}
#digit-3:checked {
    --input_0: 1;
    --input_1: 1;
    --input_2: 0;
    --input_3: 0;   
}
#digit-4:checked {
    --input_0: 0;
    --input_1: 0;
    --input_2: 1;
    --input_3: 0;   
}
#digit-5:checked {
    --input_0: 1;
    --input_1: 0;
    --input_2: 1;
    --input_3: 0;   
}
#digit-6:checked {
    --input_0: 0;
    --input_1: 1;
    --input_2: 1;
    --input_3: 0;   
}
#digit-7:checked {
    --input_0: 1;
    --input_1: 1;
    --input_2: 1;
    --input_3: 0;   
}
#digit-8:checked {
    --input_0: 0;
    --input_1: 0;
    --input_2: 0;
    --input_3: 1;   
}
#digit-9:checked {
    --input_0: 1;
    --input_1: 0;
    --input_2: 0;
    --input_3: 1;   
}

.digit {
    width: 75px;
    height: 150px;
    float: right;
    margin-right: 50px;
    margin-top: 10px;
    transform: skew(-5deg);
}

.segment-a {
    position: relative;
    left: 0;
    top: 0;
    --led_o: calc(((2 * var(--input_3) * var(--input_2) * var(--input_1) * var(--input_0)) - (2 * var(--input_3) * var(--input_2) * var(--input_0)) - (var(--input_3) * var(--input_1) * var(--input_0)) - (var(--input_3) * var(--input_1)) + (var(--input_3) * var(--input_0)) - (2 * var(--input_2) * var(--input_1) * var(--input_0)) + (var(--input_2) * var(--input_1)) + (2 * var(--input_2) * var(--input_0)) - var(--input_2) + (var(--input_1) * var(--input_0)) - var(--input_0) + 1) * var(--led_o_base) + var(--led_o_offset));
    background-color: rgba(var(--led_r), var(--led_g), var(--led_b), var(--led_o));
    /* 2wxyz-2wxz-wyz-wy+wz-2xyz+xy+2xz-x+yz-z+1 */
}
.segment-b {
    position: relative;
    transform: rotate(90deg);
    left: 41px;
    top: 21px;
}
.segment-c {
    position: relative;
    transform: rotate(90deg);
    left: 41px;
    top: 83px;
}
.segment-d {
    position: relative;
    left: 0;
    top: 104px;
}
.segment-e {
    position: relative;
    transform: rotate(90deg);
    left: -41px;
    top: 43px;
}
.segment-f {
    position: relative;
    transform: rotate(90deg);
    left: -41px;
    top: -59px;
}
.segment-g {
    position: relative;
    left: 0;
    top: -38px;
}

.segment {
    width: 60px;
    height: 20px;
}

1 Ответ

1 голос
/ 01 мая 2019

С вашим действительным кодом это невозможно. Из спецификации :

Пользовательские свойства: обычные свойства , поэтому они могут быть объявлены для любого элемента , разрешены с помощью , нормальные правила наследования и каскад , могут быть сделаны условными с @media и другими условными правилами, может использоваться в атрибуте стиля HTML, может читаться или устанавливаться с помощью CSSOM и т. д.

Как вы можете прочитать, пользовательские свойства (то есть переменные CSS) являются обычными свойствами, поэтому, если у вас нет отношения родитель / потомок для использования наследования, вы не можете разделить значение между различными элементами.

Вот базовый пример, чтобы лучше понять проблему: 

:root {
  --c:red;
}

.box {
  /* --c:blue (uncomment this to change the color)*/
}

.element {
  background:var(--c);
  height:50px;
}

.extra {
  --c:green; /* this will do nothing */
}
<div class="box">
  <div class="element"></div>
</div>
<div class="extra"></div>

В приведенном выше примере изменение пользовательского свойства внутри extra ничего не изменит для element (это эквивалент вашего элемента ввода). Если вы измените значение внутри box, вы можете повлиять на element, потому что это родительский элемент, и у нас будет наследование.

Единственный способ получить то, что вы хотите, это убедиться, что у вас есть отношение родителя / ребенка, чтобы иметь возможность изменить свойство.

Вот упрощенный пример, который вы можете настроить по своему усмотрению: 

:root {
  --a:0;
  --b:0;
  --c:0;
}

.wrapper > div{
  height:50px;
  width:50px;
  display:inline-block;
  margin:10px;
}

.a {
  background:rgb(calc(var(--a)*255),0,0);
}
.b {
  background:rgb(calc(var(--b)*255),calc(var(--b)*255),0);
}
.c {
  background:rgb(calc(var(--c)*255),0,calc(var(--c)*255));
}


#n1:checked ~ .wrapper {
  --a:0;
  --b:0;
  --c:1;
}
#n2:checked ~ .wrapper {
  --a:0;
  --b:1;
  --c:0;
}

#n3:checked ~ .wrapper {
  --a:0;
  --b:1;
  --c:1;
}

#n4:checked ~ .wrapper {
  --a:1;
  --b:0;
  --c:0;
}
#n5:checked ~ .wrapper {
  --a:1;
  --b:0;
  --c:1;
}
<input type="radio" name="change" id="n1" >
<input type="radio" name="change" id="n2" >
<input type="radio" name="change" id="n3" >
<input type="radio" name="change" id="n4" >
<input type="radio" name="change" id="n5" >
<div class="wrapper">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

UPDATE

Вот полный пример с окраской сегмента: 

:root {
  --s1:1;
  --s2:1;
  --s3:0;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:1;
}

.wrapper{
  height:150px;
  width:100px;
  display:block;
  margin:10px;
  background:
    linear-gradient(red,red) top         /100% calc(var(--s1)*20px),
    linear-gradient(red,red) bottom      /100% calc(var(--s2)*20px),
    linear-gradient(red,red) center      /100% calc(var(--s3)*20px),
    linear-gradient(red,red) top right   /calc(var(--s4)*20px) 50%,
    linear-gradient(red,red) top left    /calc(var(--s5)*20px) 50%,
    linear-gradient(red,red) bottom right/calc(var(--s6)*20px) 50%,
    linear-gradient(red,red) bottom left /calc(var(--s7)*20px) 50%;
  background-color:#000;
  background-origin:content-box;
  background-repeat:no-repeat;
  padding:20px;
}

#n1:checked ~ .wrapper {
  --s1:0;
  --s2:0;
  --s3:0;
  --s4:1;
  --s5:0;
  --s6:1;
  --s7:0;
}
#n2:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:0;
  --s6:0;
  --s7:1;
}

#n3:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:0;
  --s6:1;
  --s7:0;
}

#n4:checked ~ .wrapper {
  --s1:0;
  --s2:0;
  --s3:1;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:0;
}
#n5:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:0;
  --s5:1;
  --s6:1;
  --s7:0;
}

#n6:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:0;
  --s5:1;
  --s6:1;
  --s7:1;
}

#n7:checked ~ .wrapper {
  --s1:1;
  --s2:0;
  --s3:0;
  --s4:1;
  --s5:0;
  --s6:1;
  --s7:0;
}
#n8:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:1;
}

#n9:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:0;
}
<input type="radio" name="change" id="n1" >1
<input type="radio" name="change" id="n2" >2
<input type="radio" name="change" id="n3" >3
<input type="radio" name="change" id="n4" >4
<input type="radio" name="change" id="n5" >5
<input type="radio" name="change" id="n6" >6
<input type="radio" name="change" id="n7" >7
<input type="radio" name="change" id="n8" >8
<input type="radio" name="change" id="n9" >9
<div class="wrapper">
  
</div>

Смежный вопрос для получения более подробной информации о области видимости переменных CSS: Пользовательское свойство в области CSS игнорируется при использовании для вычисления var во внешней области видимости

...