欢迎光临
我的个人博客网站

一次 outline 去除经验(非继承属性,看着像继承)


情况描述:

目前维护的老项目是通过 easyui 生成的 html,嵌套结构非常多,当点击元素后,会有个边框???非常影响页面美观,这是啥迷惑点击交互???

一次 outline 去除经验(非继承属性,看着像继承)

经验告诉我,这是 css 的 outline 属性带来的边框,而在 chrome 控制面板里该元素的 styles 列表中并没有设置 outline

我的开发经验告诉我,这个列表中会把所有设置过的、影响到此元素的 css 样式列出来,即使是设置到父级上的,然而我搜索 outline 他并没有出现,感觉像是默认继承似的?但定制过的继承样式也会出现在这个列表里呀…

并且我在给元素加上 outline: none 之后,“时而有效,时而无效”(比较内部的元素有效,外层一点的好像无效),看到页面效果的我一脸懵逼…这该咋去调?

一次 outline 去除经验(非继承属性,看着像继承)

分析探索之路:

经过一顿搜索,得知 outline 是非继承属性,故给元素加 outline: none 只对当前(css 选择器匹配到的)元素生效,即我在 chrome 控制台调试样式的时候顺手添加outline: none 只加在了当前元素上,内部(特别是与其大小位置一样的)元素的 outline 并没有重置到(并没有像“预期”的那样继承)

然而平时我写 span 标签进行交互的时候并没有发现其有 outline 边框,那这家伙哪来的?咋还这一片 dom 结构里都有这个 outline 边框呢?

点击触发?莫非这玩意儿和我平时处理调试 :hover 一样?要打个断点?这是哪个状态?:active、:hover、:visited 都不太像… :focus ???

最后通过 chrome 控制台,我给元素设置了 :focus 监听,然后样式栏里搜索,才看到有个范围这么大的样式设置在这儿…

一次 outline 去除经验(非继承属性,看着像继承)

:focus {     outline: -webkit-focus-ring-color auto 1px; } 

难怪非继承属性 outline 会这么像继承?好家伙…,不加范围的 css 选择器,直接改写全局样式…神操作…

ps:看来还是对于 css 选择器掌握的不够啊…没有第一时间反应过来

解决问题:

既然问题找到了,那肯定要解决的啊!

重置回来吧!前辈或者框架写这个样式肯定也是有原因的,为了不影响全局,我们只改变确定不要 outline 边框这块的样式,给 css 选择器加个前提,框定下样式的影响范围,那么受这个范围控制的这一片就不会再出现多余的 outline 边框了…

/* 给自身及子元素的 focus 去掉 outline 外边框 */ #showLayerResult:focus, #showLayerResult :focus {     outline: none;     /* outline: unset; */ } 

一次 outline 去除经验(非继承属性,看着像继承)

补充:

1.当然,非必要情况不推荐处理这个 outline,详情可以看下这篇文章:页面可用性之outline轮廓外框的一些研究

2.我前面写在 element.style{...} 里的样式属于行内样式,计算下来的选择器权重比 :foucs 的权重高,所以顶掉了 :focus 选择器设置的 outline: -webkit-focus-ring-color auto 1px;,生效的是 outline: none

3.希望大家写 css 样式的时候,加个选择器前缀,将样式的影响范围限制下,不要造成全局样式污染,这对后续项目维护会有很大的好处,减少不必要的麻烦

赞(0) 打赏
未经允许不得转载:张拓的天空 » 一次 outline 去除经验(非继承属性,看着像继承)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏