为了账号安全,请及时绑定邮箱和手机立即绑定

CSS 实用的 Debug 技巧

标签:
Html/CSS

简评:这个技巧很棒,可以一目了然不同层级之间的关系,可以很快看出不同浏览器的怪异行为, PS: FireFox 的 3D View 也是很棒的功能(Tilt 3D )。

Debugger CSS

webp

比如有这么一个需求,设计一个标题,标题中的图片需要悬浮在多行所有文字上,如上图所示。

现在我们想要调试这个标题的层级关系。试着使用如下的 CSS 作用于所有的元素。

* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }

webp

这样我们所有的元素都会添加一个边框。可以方便的看到不同元素的位置关系。

我们再对这个样式进行改进,添加 color 和 background,并且使用 !important 来修饰(我们只在 debug 的时候用到该样式,!important 是个不错的选择,来大大减少样式冲突的可能)。

* {    color:                    hsla(210, 100%, 100%, 0.9) !important;    background:               hsla(210, 100%,  50%, 0.5) !important;    outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
}

webp

修改后的标题样式如上所示。给所有元素的 color 和 background 设置一个半透明的蓝色使得 debug 界面更加清晰,而且使用半透明的颜色有一个好处是多级嵌套的地方颜色会变深(更白或更蓝)这样我们可以知道更多的细节。

我们还可以更具自己的情况对这个 debug 样式做调整,比如标题中现在用了阴影,对视觉上有一定的影响我们可以强制去掉,还有不希望显示矢量图,最终我们获得如下的样式:

*:not(path):not(g) {    color:                    hsla(210, 100%, 100%, 0.9) !important;    background:               hsla(210, 100%,  50%, 0.5) !important;    outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;    box-shadow: none !important;
}

webp


原文链接:Learn This One Weird Trick To Debug CSS



作者:极小光
链接:https://www.jianshu.com/p/f4214443bd76


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消