CSS 实用的 Debug 技巧

作者: 极小光 | 来源:发表于2018-06-08 10:29 被阅读150次

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

Debugger CSS

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

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

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

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

我们再对这个样式进行改进,添加 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;
}

修改后的标题样式如上所示。给所有元素的 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;
}

原文链接:Learn This One Weird 🙊 Trick To Debug CSS
推荐阅读:Android | 自动调整文本大小的 TextViews

相关文章

  • CSS 实用的 Debug 技巧

    简评:这个技巧很棒,可以一目了然不同层级之间的关系,可以很快看出不同浏览器的怪异行为, PS: FireFox 的...

  • CSS教程汇总

    CSS揭秘实用技巧总结 不止于 CSS 灵活运用CSS开发技巧 前端基础篇之CSS世界 你未必知道的49个CSS知...

  • 10个非常实用的CSS技巧

    CSS 有很多令人欣喜的小技巧,可以让我们的页面效果更加美丽,现在,就让我们来看看工作中非常实用的 CSS 技巧吧...

  • 10个非常实用的CSS技巧

    CSS 有很多令人欣喜的小技巧,可以让我们的页面效果更加美丽,现在,就让我们来看看工作中非常实用的 CSS 技巧吧...

  • 11~13k(初/中级)前端面试看这篇就够了

    一、HTML + CSS 1、常用实用技巧 01、定位: position:absolute/relative/f...

  • web前端 css使用技巧

    css实用技巧http://mp.weixin.qq.com/s?__biz=MzI1NTQyNzkwMA==&m...

  • css实用小技巧

    1.绘制三角形 2.使用 caret-color 来修改光标的颜色 3.修改 input placeholder...

  • 【前端词典】提高幸福感的 9 个 CSS 技巧

    前言 在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用,觉得挺高效实用,所以...

  • 19 个实用的 CSS 技巧!

    修改 placeholder 样式,多行文本溢出,隐藏滚动条,修改光标颜色,水平和垂直居中。这些熟悉的场景啊! 前...

  • 【前端】css实用简单技巧

    text-overflow 当属性规定当文本溢出包含元素时发生的事情 clip: 修剪文本ellipsis : 用...

网友评论

    本文标题:CSS 实用的 Debug 技巧

    本文链接:https://www.haomeiwen.com/subject/hkposftx.html