css使用-has函数

发表于 更新于 阅读次数： 本文字数： 612 阅读时长 ≈ 1 分钟

最近WebShell开发时，遇到一个动态调整样式的需求即当终端开启上下分屏，上侧出现编辑器的时候，下侧的终端需要调整样式，具体来说是调整最小高。这里考虑走css实现。

分析

has函数可以使用css选择器来判断后面或者子后代是否存在某个元素，因此这样利用has可以捕获到上下分屏的情况下的编辑器元素，之后就可以正常使用+获取兄弟元素，再实际调整样式了。当然JS也可以实现，但CSS实现更加简单

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .terminal {
    width: 100%;
    min-height: 200px;
    background-color: #4bd58d;
  }
  .editor{
    width: 100%;
    height: 100px;
    background-color: #003dfd;
  }

  .editor:has(+.terminal) +.terminal{
    background-color: #ff0000;
  }
</style>

兼容性

css函数使用中都要考虑下兼容性， has函数目前Firefox是不支持的，当然我这里因为功能属于锦上添花，因此兼容性就不用考虑了，如果需要兼容，可以考虑使用JS实现

写在最后

css函数还是可以一定程度避免通过js实现，因此在开发中可以多多利用，当然兼容性也是需要考虑的，毕竟兼容性是前端开发中的一大难题。