css使用-has函数
最近WebShell开发时,遇到一个动态调整样式的需求即当终端开启上下分屏,上侧出现编辑器的时候,下侧的终端需要调整样式,具体来说是调整最小高。这里考虑走css实现。
分析
has函数可以使用css选择器来判断后面或者子后代是否存在某个元素,因此这样利用has可以捕获到上下分屏的情况下的编辑器元素,之后就可以正常使用+获取兄弟元素,再实际调整样式了。当然JS也可以实现,但CSS实现更加简单
例子
1 | <style> |
兼容性
css函数使用中都要考虑下兼容性, has函数目前Firefox是不支持的,当然我这里因为功能属于锦上添花,因此兼容性就不用考虑了,如果需要兼容,可以考虑使用JS实现
写在最后
css函数还是可以一定程度避免通过js实现,因此在开发中可以多多利用,当然兼容性也是需要考虑的,毕竟兼容性是前端开发中的一大难题。