拒绝JavaScript,这三个CSS技巧你一定用的上​

本文介绍三个非常棒棒的CSS技巧,完全可以在你的项目中代替JavaScript,一起来看看这些技巧吧。

  • :active伪类与CSS数据上报
  • 超实用超高频使用的:empty伪类
  • 用好:only-child伪类

1. :active伪类与CSS数据上报

如果想要知道两个按钮的点击率,CSS开发者可以自己动手,无需劳烦JavaScript开发者去埋点:

.button-1:active::after {
    content: url(./pixel.gif?action=click&id=button1);
    display: none;
}

.button-2:active::after {
    content: url(./pixel.gif?action=click&id=button2);
    display: none;
}

此时,当点击按钮的时候,相关行为数据就会上报给服务器,这种上报就算把JavaScript禁用掉也无法阻止,方便快捷,特别适合A/B测试。

2. 超实用超高频使用的:empty 伪类

:empty 伪类用来匹配空标签元素,例如:

<div class="cs-empty"></div>
.cs-empty:empty{
    width: 120px;
    padding: 20px;
    border: 10px dashed;
}

此时,div 元素就会匹配 :empty 伪类,呈现出虚线框,如下图

2.1 隐藏空元素

例如,某个模块里的内容是动态的,可能是列表,也可能是按钮,这些模块容器常包含影响布局的CSS属性,如margin、padding属性等。当然,这些模块里面有内容的时候,布局显示效果是非常好的,然儿一旦这些模块里面的内容为空,页面上就会有一块很大的明显的空白,效果就不好,这种情况下使用 :empty 伪类控制一下就再好不过了:

.cs-module:empty {
    display: none;
}

无需额外的JavaScript逻辑判断,直接使用CSS就可以实现动态样式效果,唯一需要注意的,当列表内容缺失的时候,一定要把空格也去掉,否则:empty 伪类不会匹配。

2.2 字段缺失智能提示

例如,下面的HTML

<dl>
    <dt>姓名:</dt>
    <dd>张三</dd>
    <dt>性别:</dt>
    <dd></dd>
    <dt>手机:</dt>
    <dd></dd>
    <dt>邮箱:</dt>
    <dd></dd>
</dl>

用户某些信息字段是缺失的,此时由于开发人员应该使用其他占位字符示意这里没有内容,如短横线(-)或者直接使用文字提示。但是多年的开发经验告诉我,开发人员非常容易忘记这里的特殊处理,最终导致布局混乱,信息难懂。

dt {
    float: left;
}

但如今,我们就不用担心这样的合作问题了,直接使用CSS就可以处理这种情况,代码很简单:

dd:empty::before {
    content: '暂无';
    color: gray;
}

此时字段缺失后的布局效果如下:

2.3 数据为空提示

实际开发中类似的场景还有很多。例如,表格中的备注信息经常都是空的,此时可以这样处理:

td:empty::before{
    content: '-';
    color: gray;
}

除此之外,还有一类典型场景需要用到 :empty 伪类,那就是动态Ajax加载数据为空的情况。当一个新用户进入一个产品的时候,很多模块内容是没有的。要是在过去,我们需要在Javascript代码中做 if 判断,如果没有值,我们要吐出”没有结果“或者”没有数据“的信息。但是现在,有了 :empty 伪类,直接把这个工作交给CSS就可以了。例如:

.cs-search-module:empty::before{
    content: '没有搜索结果';
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}

又如:

.cs-article-module:empty::before{
    content: '您还没有发布任何文章';
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}

总之,这种方法非常好用,可以节约大量的开发时间,同时体验更好,维护更方便,因为可以使用同一个类名使整站提示信息保持一致:

.cs-article-module:empty::before{
    content: '暂无数据;
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}

3. 用好:only-child伪类

:only-child 是一个很给力的伪类,尤其在处理动态数据的时候,可以省去很多写JavaScript逻辑的成本。

:only-child 意思是匹配没有任何兄弟元素的元素。例如,下面的 p 元素可以匹配 :only-child 伪类,因为其前后没有其他兄弟元素:

<div class="cs-confirm">
    <!-- 可以匹配:only-child伪类 -->
    <p class="cs-confirm-p">确定删除该内容?</p>
</div>

虽然 .icon 元素后面有删除文字,但由于没有标签嵌套,是匿名文本,因此不影响 .icon 元素匹配 :only-child 伪类。

尤其需要使用 :only-child 伪类的场景是动态场景,也就是某个固定小模块,根据场景的不用,里面可能是一个子元素,也可能是多个子元素,元素个数不同,布局方式也不同,此时就是 :only-child 伪类大放异彩的时候。例如,某个加载元素(loading)模块里面可能就只有一张加载图片,也可能仅仅就是一段加载描述文字,也可能是加载图片和加载文字同时出现,此时 :only-child 伪类就非常好用。

HTML示意如下:

<!-- 1. 只有加载图片 -->
<div class="cs-loading">
    <img src="./loading.png"  class="cs-loading-img"\>
</div>
<!-- 2. 只有加载文字 -->
<div class="cs-loading">
    <p  class="cs-loading-p">正在加载中...</p>
</div>
<!-- 3. 加载图片和加载文字同时存在 -->
<div class="cs-loading">
    <img src="./loading.png"  class="cs-loading-img"\>
    <p class="cs-loading-p">正在加载中...</p>
</div>

我们无需在父元素上专门指定额外的类名来控制不同状态的样式,直接活用 :only-child 伪类就可以让各种状态下布局都良好。

.cs-loading {
    height: 150px;
    position: relative;
    text-align: center;
    /* 与截图无关,截图示意用 */
    border: 1px dotted;
}

/* 图片和文字同时存在时在中间留点间距 */
.cs-loading-img {
    width: 32px; height: 32px;
    margin-top: 45px;
    vertical-align: bottom;
}

.cs-loading-p {
    margin: .5em  0  0;
    color: gray;
}

/* 只有图片的时候居中绝对定位 */
.cs-loading-img:only-child {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
}

/* 只有文字的时候行号近似垂直居中 */
.cs-loading-p:only-child {
    margin: 0;
    line-height: 150px;
}

效果如下


CSS进阶技巧另一篇文章:【小技巧】巧用CSS属性值正则匹配选择器
稿定设计导出-20200310-130859.png


关注公众号,第一时间接收最新文章。如果对你有一点点帮助,可以点喜欢点赞点收藏,还可以小额打赏作者,以鼓励作者写出更多更好的文章。


前端全栈开发者
专栏首发于公众号《前端全栈开发者》,订阅关注第一时间阅读好文

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
0 条评论
推荐阅读
在Flutter中动态地改变应用启动器图标
在本文中,我们将讨论如何在 Flutter 应用程序的运行时动态更改多个应用程序启动器图标。在 pubspec.yaml 文件中添加以下依赖项。flutter_dynamic_icon:[链接]考虑我们已经准备好基本的 UI(包含图像和按钮小部...

杭州程序员张张阅读 721

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木65阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木42阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.9k评论 14

封面图

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
宣传栏