Как поменять (вычислить) базовый background-color данной строки/ячейки в гриде в зависимости от параметров?

Question

У меня есть грид и там заданы базовые расцветки фона ячеек для четных и нечетных строк (бледно-желтый и почти белый). Мне нужно изменять цвет в зависимости от разных параметров. Например заблокирован (цвет выставить в светло-серый, немного отличающийся для четной и нечетной строк), или выставлено значение одного из полей равное некоему значению и т.п.

Самый простой способ - завести список переменных с цветами для всех возможных случаев. Но если я хочу создать разные темы, то это выглядит неэффективно.

Есть ли возможность накладывать некие фильтры или по каким-то формулам вычислять цвет - например, если есть признак заблокированности, то сдвинуть цвет на %%. Или еще как-то...

Я пробовал смотреть css фильтры (backdrop-filter), потратил почти день, но толку мало.

Возможно кто-то такое уже делал. Или возможно это вообще нужно по-другому делать. Подскажите, пожалуйста. Спасибо!

Answer 1

Непонятно, что вы вкладываете в значение слова "заблокирован". как это отмечаеться в html ? Самым простым способом будет присваивание заблокированому элементу класса, который визуально будет переопределять его цвет. Вам в зависимости от параметров которые будут записанны в таблицу/грид необходимо добавлять необходимые классы.

table{
    width: 100%;
    border-collapse:collapse;
    border-spacing:0;
    height: auto;
}
table td, table th {
    border: 1px solid #595959;
    padding: 3px;
    width: 30px;
    height: 35px;
}
table th {
    background: #347c99; 
    color: #fff; 
}

table td:nth-of-type(even){
  background-color: #ff0;
}

table td.close{
  background-color: #777;
}

<table class="iksweb">
    <tbody>
        <tr>
            <td>one</td>
            <td>two</td>
            <td>tree</td>
            <td>four</td>
        </tr>
        <tr>
            <td>six</td>
            <td class="close">seven</td>
            <td>eight</td>
            <td>nine</td>
        </tr>
    </tbody>
</table>

Answer 2

как раз у себя нечто подобное изобретаю, самое путное из того что вышло - animation: both -*s paused

для удобства в добавлении\убавлении: яркости, цветности и выбора оттенка удобнее всего использовать hsl палитру.

#a{display: grid; grid-template-columns: repeat(4, 1fr)}
:root{--s: 50%; --l: 50%;}
/* исходные цветность(~насыщенность) и светлота(~яркость) */

#a li:nth-child(even){--l: 30%;} /*четные затемняем*/
#a li.lock{--s: 0%;} /*локи обесцвечиваем*/

@keyframes list{ /*а это считай скины*/
0%{background: hsl(100, var(--s), var(--l))}
1%{background: hsl(200, var(--s), var(--l))}
2%{background: hsl(300, var(--s), var(--l))}
100%{background: hsl(360, var(--s), var(--l))}
}

#a li{animation: list 100s linear both paused;}
/*при 'both paused', 'animation-delay' выбирает и фиксирует кадр = выбор скина*/
#w>li{animation-delay: -0s;}
#x>li{animation-delay: -1s;}
#y>li{animation-delay: -2s;}
#z>li{animation-delay: -50s;}
#a li:after{content: attr(class)}

<div id='a'>
<ol id='w'>
  <li></li>
  <li></li>
  <li></li>
  <li class='lock'></li>
  <li class='lock'></li>
  <li></li>
</ol>
<ol id='x'>
  <li></li>
  <li></li>
  <li></li>
  <li class='lock'></li>
  <li class='lock'></li>
  <li></li>
</ol><ol id='y'>
  <li></li>
  <li></li>
  <li></li>
  <li class='lock'></li>
  <li class='lock'></li>
  <li></li>
</ol>
<ol id='z'>
  <li></li>
  <li></li>
  <li></li>
  <li class='lock'></li>
  <li class='lock'></li>
  <li></li>
</ol></div>

и да, вместо тонны переменных с цветами, получим треть тонны delay'ев или даже целых анимаций...

#w>li{animation-delay: -0s;}
#x>li{animation-delay: -1s;}
#y>li{animation-delay: -2s;}
#z>li{animation-delay: -50s;}

наиболее приятное отличие от возни с перечислением всех переменных - теперь нет сотни этих гхм... "переменных" в вообще каждом теге(при просмотре через инспектор), только одна анимация и та пара переменных на основе которых она "собрана".

почти как функция в полноценном ЯП, или даже конструктор :3

БЛОГ НА HUSL

Как поменять (вычислить) базовый background-color данной строки/ячейки в гриде в зависимости от параметров?

Ответы (2 шт):