美文网首页让前端飞视觉艺术
8个有点优秀的CSS实践

8个有点优秀的CSS实践

作者: 前前前端小飞 | 来源:发表于2021-03-04 20:17 被阅读0次

    CSS计算选中标签元素

    这是一种社交平台的常见需求,比如说在掘金平台中让用户选择感兴趣的标签,通常都是用JS来处理已经选择了的标签数量。今天给出一个css版本:

    <p>请选择你感兴趣的标签:</p>
    <input type="checkbox" id="topic1"><label for="topic1" class="topic">Vue</label>
    ...
    <p>您已选择<span class="topic-counter"></span>个标签。</p>
    复制代码
    

    首先将checkbox隐藏起来:

    [type="checkbox"]{
        position: absolute;
        clip: rect(0 0 0 0);
    }
    复制代码
    

    然后自定义label样式,接着设置CSS计算器。

    // 在body中创建或者重置计算器
    body {
        counter-reset: topicCounter;
    }
    // 当checkbox在选中状态时递增变量
    :checked + .topic {
        counter-increment: topicCounter;
    }
    //使用counter()函数将计算器的值添加到元素中。
    .topic-counter::before {
        color: red;
        content: counter(topicCounter);
    }
    复制代码
    
    效果图如下:

    多行文本溢出省略

    文本溢出省略是很常见的业务需求,然而大多数都是处理单行文本:

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    复制代码
    

    这3个CSS语句的意思是:

    • 设置如果文字长度超出指定的宽度,则隐藏超出宽度的内容。
    • 设置文字在一行显示,不能换行。
    • 设置文本溢出时,用省略符号来代表被裁剪的文本。

    那么处理多行文本又是怎么样的?这里提供一个CSS版本:

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    复制代码
    

    上面CSS语句的意思是:

    • 设置元素为弹性伸缩盒子模型。
    • 设置显示文本的行数。
    • 设置伸缩盒子元素的子元素排列方式(以上三个要一起使用)
    • 设置文本溢出时,用省略符号来代表被裁剪的文本。
    效果如下:

    但这种方法缺点也很明显,只适用在WebKit内核的浏览器。

    增加CSS选择器优先级

    在平常开发中,会有不少几率遇到需要增加CSS选择器优先级的场景。如何实现才会更好,比如说需要增强下面这个CSS选择器优先级:

    .bar { background: #DDD; }
    复制代码
    

    我相信不少人会选择增加嵌套的方法:

    .foo .bar { background: #DDD; }
    复制代码
    

    或者选择增加一个标签选择器:

    div.bar{ background: #DDD; }
    复制代码
    

    这些都不是最好的方法,因为上述方法会增加了耦合导致可维护性的降低,如果后续父节点类名更改了,或者换成不同的标签,都会影响到样式效果。

    最佳方法

    • 重复选择器自身
    .bar.bar { background: #DDD; }
    复制代码
    
    • 借助存在的属性选择器
    .bar[class] { background: #DDD; }
    #bar[id] { background: #DDD; }
    复制代码
    

    这样即提高了优先级,又不会增加耦合度。

    全局调整盒模型

    box-sizing的默认值是content-box,这意味着指定的宽高都只会设置内容盒子的大小。如果设置了内边距或者边框都会使该元素宽高大于指定的宽高值。最笨的办法就是减少widthheight的值,这不是一个理想的办法,因为这是通过改值试出来的,而且往往难以解释这个值生成的原因。

    设置box-sizing值为border-box,这样heightwidth属性会设置为内容、内边距以及边框的大小总和,这就解决了上述问题。

    .main{
        box-sizing: border-box
    }
    复制代码
    

    这样main元素就更好符合预期了,但其他元素还会遇到相同的事情。所以将其设置为全局

    *, 
    ::before,
    ::after{
        box-sizing: box;
    }
    复制代码
    

    这样就能给页面上所有元素与伪元素都设置border-box了。

    但这样还是有些问题,现在很多业务都会使用带样式的第三方组件,就可能会因此破坏其中一些组件的布局,尤其是当第三方组件在开发css的过程中没有考虑到使用者会修改盒模型。

    利用继承就能解决上述问题了:

    :root{
        box-sizing: border-box;
    }
    
    *, 
    ::before,
    ::after{
        box-sizing: inherit;
    }
    复制代码
    

    盒模型通常不会被继承,但使用inherit关键字会强制继承。可以在必要时选中第三方组件的顶级容器,将其恢复为content-box。这样组件的内部元素就会继承该盒模型:

    .third-component{
        box-sizing: content-box;
    }
    复制代码
    

    hover伪类与延时实现下拉列表

    实现一个鼠标经过按钮来展示下拉菜单的交互效果:

    <button class='btn'>菜单</button>
    <ul class='panel'>
      <li class='panel-item'>苹果</li>
      <li class='panel-item'>葡萄</li>
      <li class='panel-item'>香蕉</li>
      <li class='panel-item'>橙子</li>
    </ul>
    复制代码
    

    目标是鼠标经过按钮时,下拉菜单展示。css代码很简单:

    .btn:hover + .panel, .panel:hover{
      visibility: visible
    }
    .panel{
      visibility: hidden;
      width: 100px;
      height: 200px;
      background: #DDD;
    }
    .panel-item{
      width: 100%;
      height: 50px;
      list-style: none;
      line-height: 50px;
    }
    复制代码
    

    然而上面的实现有一个小缺陷,如果按钮与菜单之间有空隙,鼠标还没移动到下拉框上时,下拉框就已经收起来了。借助transition增加延时效果就可以解决这个问题。

    只需要在.panel增加如下属性即可:

    .panel{
        transition: visibility .2s;
    }
    复制代码
    
    效果图如下:

    使用视口单位定义字号

    一般来说,构建响应式面板是使用媒体查询根据不同型号的屏幕尺寸,修改元素的字号就能渲染出不同大小的面板,当然前提是使用相对单位em或者rem。比如说:

    @media (min-width: 800px) {
        :root{
            font-size: 0.875em;
        }
    }
    @media (min-width: 1200px) {
        :root{
            font-size: 1em;
        }
    }
    复制代码
    

    根据给页面根元素设置不同字号,响应式地重新定义了整个页面的emrem。但这属于硬编码的形式,只能响应设定的屏幕尺寸。

    我们知道视口单位vmvh是相对屏幕来说的,如果将视口单位用于设置字号,那比设置宽度还要实用

    font-size: 2vw;
    复制代码
    

    设置上面属性会发生什么?当屏幕宽度为1440px时,字号就是28.8px了。在一个1920px的屏幕时,字号就变成了38.4px。这样做的好处就是元素能够在这两种大小之间平滑地过渡,不会在某个断点突然改变。

    但还是有些问题, 常见的1920px屏幕中,38.4px的字号太大了。而在手机上比如iPhone6上就缩小到了7.5px,那就太小了。

    使用CSScalc函数结合emvw两个单位就能解决问题:

    :root{
        font-size: calc(0.5em + 1vw);
    }
    复制代码
    

    0.5em保证了最小字号,1vw则确保了字体能随着视口缩放。能保证基础字号从iPhone6里的11.75px一直过渡到1200px屏幕的20px

    占位符交互

    具体效果:输入框处于聚焦状态时,输入框的占位符内容以动画形式移动到左上角作为标题。借助:placeholder-shown伪类就可以只用CSS实现这种效果。

    <div class="input-box">
       <input class="input-control input-outline" placeholder="账号">
       <label class="input-label">账号</label>
    </div>
    复制代码
    

    首先,让浏览器默认的placeholder效果不可见

    .input-control:placeholder-shown::placeholder {
        color: transparent;
    }
    复制代码
    

    第二,使用.input-label元素代替浏览器原声的占位符

    .input-box{
      position: relative;
    }
    .input-label {
      position: absolute;
      left: 16px; top: 14px;
      pointer-events: none;
    }
    复制代码
    

    最后,在输入框聚焦以及占位符不显示的时候对<label>元素进行重定位,效果是缩小并移动到上方

    .input-control:not(:placeholder-shown) ~ .input-label,
    .input-control:focus ~ .input-label {
      color: #2486ff;
      transform: scale(0.75) translate(-2px, -32px);
    }
    复制代码
    
    效果如下:

    使用mix-blend-mode混合元素

    使用mix-blend-mode属性,不仅可以混合图片,还可以把元素的文本和边框与容器的背景图片混合在一起。

    目标是在图片上添加标题:

    <div class='blend'>
      <h1>熊出没</h1>
    </div>
    复制代码
    

    为h1增加样式,最终效果为红色的纯背景通栏、亮灰色顶部和底部宽边框。然后应用融合混合模式,整个元素被视为一个图层,和下面的容器里的背景图片混合在一起。

    .blend{
      background-image: url('image');
      background-size: cover;
      background-position: center;
    }
    .blend > h1{
      mix-blend-mode: hard-light;
      background-color: #c33;
      color: #808080;
      border: 0.1em solid #ccc;
      border-width: 0.1em 0;
    }
    复制代码
    
    效果如下:

    融合后的效果很有意思,文字看上去是透明的,就像是红色横幅被剪掉。这里使用hard-light混合模式和中灰色文字颜色。对比混合模式在使用很亮或很暗的颜色时才能有更好的效果。

    结尾

    如果觉得有帮助的请点点赞,支持一下。

    ❤️前端技术交流点击我获取完整版pdf前端学习进阶路线❤️

    相关文章

      网友评论

        本文标题:8个有点优秀的CSS实践

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