css 自动修复Tailwind中的不良对比度

b5buobof  于 2023-07-01  发布在  其他
关注(0)|答案(3)|浏览(115)

我有一个问题,我需要解决的CSS选择器。我试图使自动颜色覆盖顺风有我们的网站始终符合WCAG准则。
我有一个我写的顺风插件,它可以自动修复这个问题--但是我意识到我针对CSS选择器的方式是关闭的。
假设有一种颜色,白色。另一种颜色-浅灰色。当在白色上施加浅灰色时,我想自动将颜色校正为黑色。
我目前正在使用以下选择器执行此操作

.bg-white .text-light-grey {
  color: black;
}

然而,这引入了问题!它在这个HTML结构上工作得很好:

<div class="bg-white">
    <span class="text-light-grey">This is now black.</span>
</div>

但会破坏这个结构

<div class="bg-white">
    <span class="text-light-grey">This is now black.</span>

    <div class="bg-black">
        <span class="text-light-grey">This is also now black, but it shouldn't be - It's inside a black container!.</span>
    </div>
</div>

如何修改CSS选择器,以便当它们之间指定了另一个背景时,颜色不会损坏。
就像这样

.bg-white :not(some fancy way to make sure there are no other bgs inbetween bg white and the text color) .text-light-grey {
  color: black;
}

这是可能的,对吧?比如class~=之类的
编辑:有没有人知道:has()选择器是否可以使用它来解决这个问题?

quhf5bfb

quhf5bfb1#

考虑利用级联。使用CSS变量自动级联到bg-*类上。这样做的好处是,它可以用于无限数量的嵌套:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'light-gray': 'rgb(var(--light-gray) / <alpha-value>)',
      }
    },
  },
};
.bg-white {
  --light-gray: 0 0 0;
}

.bg-black {
  --light-gray: 255 255 255;
}
<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-white">
  <span class="text-light-gray">This is now black.</span>

  <div class="bg-black">
    <span class="text-light-gray">This is also now black, but it shouldn't be - It's inside a black container!.</span>

    <div class="bg-white">
      <span class="text-light-gray">This is now black.</span>

      <div class="bg-black">
        <span class="text-light-gray">This is also now black, but it shouldn't be - It's inside a black container!.</span>
      </div>

      <div class="bg-white">
        <span class="text-light-gray">This is now black.</span>

        <div class="bg-black">
          <span class="text-light-gray">This is also now black, but it shouldn't be - It's inside a black container!.</span>
        </div>
      </div>
    </div>
  </div>
</div>
b09cbbtk

b09cbbtk2#

我的想法是使用两个选择器。一个以直接子元素为目标,另一个检查所有具有类的中间元素的背景颜色。在你的情况下,这就足够了吗?

.bg-white {
  background: white;
}

.bg-black {
  background: black;
}

.text-light-grey {
  color: lightgrey;
}

.bg-white>.text-light-grey,
.bg-white :not([class^="bg-"]) .text-light-grey {
  color: black;
}
<div class="bg-white">
  <span class="text-light-grey">This is now black.</span>

  <div class="bg-black">
    <span class="text-light-grey">This is not black!</span>
  </div>

  <div>
    <span class="text-light-grey">This is now black!</span>
  </div>
</div>

编辑:如果你没有很多需要调整颜色的类,你可以考虑这样做:

.bg-white {
  background: white;
}

.bg-black {
  background: black;
}

.text-light-grey {
  color: lightgrey;
}

.bg-blue {
  background: blue;
}

/* Similar to what you wrote in the comment */

.bg-white .text-light-grey {
  color: black;
}

[class*="bg-"]:not(.bg-white) .text-light-grey {
  color: lightgrey;
}
<div class="bg-white">
  <span class="text-light-grey">This is now black.</span>

  <div class="bg-black">
    <span class="text-light-grey">This is not black!</span>
  </div>

  <div>
    <span class="text-light-grey">This is now black!</span>
  </div>

  <div>
    <div class="bg-blue">
      <div>
        <span class="text-light-grey">This is nested and not black!.</span>
      </div>
    </div>
  </div>
</div>
zu0ti5jz

zu0ti5jz3#

我用了currentcolor。不知道这会如何影响你的项目的其余部分,但分享它的情况下,它有助于在所有。这与@Wongjn的解决方案类似。

.bg-white {
  color: black;
}

.bg-black {
  color: white;
}

.text-light-gray {
  color: currentcolor;
}

https://play.tailwindcss.com/hQ4VW1RysN?file=css
还有一个,更类似于@Wongjn的解决方案,但如果有帮助,请分享。

.bg-white {
  --text: black;
}

.bg-black {
  --text: white;
}

.text-light-gray {
  color: var(--text);
}

https://play.tailwindcss.com/CdT0KVvQga?file=css

相关问题