背景

可能我们有时候潜意识里认为, 当前实际开发中css属性已经足够用了, 但是前段时间突然想到:"会不会我们只是思维被限制在了常用的css属性中, 从而丧失了创造力", 就像发明车之前大多数人会认为骑马已经足够快可以满足自己的需求了, 所以我专门整理了一下自己的学习笔记并且专门去学习了一些冷门的css属性, 果然收获满满, 所以今天也要在这里把这些脑洞大开的属性较少给你, 准备好一起来感受css的魅力吧。


(相关资料图)

一、开胃菜 css画背景图: paint

我们开发中使用的背景图大部分是(png, webp等)图片、svg矢量图、canvas画图, 但是其实我们也可以选择css直接画图, 那css这种甚至都"称不上"编程语言的家伙怎么绘制复杂的图片那?

1. 为元素赋予css属性
div class="box">
        
      
        ①        ②        ③      
    
    <script>      const oBox = document.getElementById("box");      const textArr = document.getElementsByClassName("text")      let i = 0;      let n = 800;      setInterval(()=>{        oBox.style.fontSize = n + "px";         n+=3         if(n > 800){            n = 10;            textArr[1].style.display = "none"            textArr[2].style.display = "none"            textArr[0].style.display = "none"            textArr[i].style.display = "block"            oBox.classList.remove("box1")            oBox.classList.remove("box2")            oBox.classList.remove("box3")            oBox.classList.add(`box${i}`)            i++            if(i > 2){              i = 0            }         }      },5)    </script>

把文案改成 "◤ ◢ ✿" 就会出现第一个动图的效果啦!

四、引号: quotes

所谓引号就相当于给书名加上"书名号", 给语言加上"冒号双引号", 当然他还有一些神奇玩法。

1.基本使用
jojo的奇妙冒险

效果图:

这里要注意的是如果没写content: open-quote;会导致前后"书名号"都消失, 但是唯独没写content: close-quote;则会保留展示"《"。

2.看似鸡肋?

当前这个基础写法也太鸡肋了, 不就是给"《"起了个别名叫open-quote吗? 并且关键是占用了我的before与after, 感觉画蛇添足, 比如我可以用如下的方法进行替换:

:root {    --open: "《";    --close: "》";  }  div::before {    content: var(--open);  }  div::after {    content: var(--close);  }
jojo的奇妙冒险
3.套娃高手 quotes 雄起

其实quotes的看家本领是它可以接受n个参数!

.box {    quotes: "--- start" "---- end" "《" "》";  }  .box::before {    content: open-quote;  }  .box:after {    content: close-quote;  }
        
jojo的奇妙冒险
        
Overlord
        
艾尔登法环

神奇的事情出现了, 当出现嵌套结构的时候, 内部的元素会使用第三个与第四个参数作为"引号",套娃事件出现啦:

.box {    quotes: "--- start" "---- end" "(" ")" "《" "》";  }  .box::before {    content: open-quote;  }  .box:after {    content: close-quote;  }
  
    jojo的奇妙冒险  
  
    Overlord  
  
    艾尔登法环

说实话这个套娃能力还挺厉害的, 并且我们可以讲close-quote属性置空, 我想到的就是列表:

.box {    quotes: "--- start" "---- end" "1: " "" "-- 2:" "" "---- 3: " "" "------ 4: " "";  }  .box::before {    content: open-quote;  }  .box:after {    content: close-quote;  }
      
        第一:        
          第二:          
第三:
        
        
          第二:          
            第三:            
第四:
          
        
      
      
        第一:        
第二:

要注意不写close-quote会让css找不到在哪里结束, 所以最好写上并给空值。

五、还原大师: all

CSS all 简写属性 将除了 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。

这是一个比较强硬的属性, 可以把几乎所有css属性进行重置:

我们先设置一下基础的环境：

.wrap {    font-size: 30px;    font-weight: 900;  }  .box {    width: 100px;    height: 100px;    border: 1px solid;    background-color: red;    color: white;  }  .box1 {    all: initial;  }  .box2 {    all: inherit;  }  .box3 {    all: revert;  }
    
      
你好
      
你好: initial
      
你好: inherit
      
你好: revert
1.initial : 还原为初始值

顾名思义这里是将 div身上的所有属性都重置了, 不管是"背景颜色"还是"字体颜色", 甚至宽高, 所以这里属于是完全初始化了。

但是有个大坑, 他会把div原本的display: block改变成display: inline, 也就是说all: initial;将所有属性置为空了, 而不会根据标签属性进行筛选, 所以这个属性有点太绝对了要小心使用。

2.inherit: 集成值保

依然是顾名思义, 将所有属性设置为 "继承父级", 并且还原自身的属性, 比如宽高都没有了但是继承了字体大小与字体粗细

不是所有css属性的默认值都是"继承", 比如说position的默认值就不是集成, 但是position可以设置为position: inherit;, 这就埋下了隐患请看下一条属性。

3.revert: 还原

虽然看起来效果与inherit几乎一样, 但是实质上有大区别, 比如如果此时wrap父元素设置position: absolute;, 那么设置了all: inherit的元素为position: absolute;, 设置了all:revert的元素是position: static, 也就是说目标元素单纯的还原成最开始的样式, 剔除掉了后期设置的属性, 但保留一些默认的继承属性, 这个属性虽然兼容性超差但最牛!

4.all的优先级
.box{    all: revert;    background-color: red;}

这里的背景色是可以设置成功的, 所以all应该算一锤子买卖, 只把设置all属性之前的样式重置。

// 父级  .box {    background-color: red !important;  } .box1 {   all: revert; }

上面是不生效的, 因为all只能重置优先级不如自己选择器的属性, 所以需要all: revert!important;。

六、目标元素样式:target

这个属性让页面的url参数与dom元素互动起来

1: 跳转选中

比如当前url是https://www.xxxxxxxxxxx.com/#target_id则:

:target {    background-color: red;    font-size: 200px;  }
    你好
2. 跳转后动画

我想到的是每次选中元素后让元素有个动画效果, 实在太简单了就不演示了, 说一下这个属性的鸡肋点吧, 比如无法同时传递多个id, 或者传递class, 并且他让css属性与dom结构之间绑定关系变弱了代码不方便维护与阅读。

七、输入框的placeholder样式设置: placeholder-shown

可以设置当input组件中展示placeholder时的样式:

input:placeholder-shown {        background-color: lightblue;      }      input {        width: 300px;        height: 60px;      }

输入内容则还原

八、换行展示的艺术: hyphens

当英文单词必须折行时我们是否需要一个"连字符":

      The auto setting"s behavior depends on the language being properly tagged      so that the appropriate hyphenation rules can be selected.    
  .box {    border: 1px solid black;    width: 200px;    height: 100px;  }

主角暴风登场

.box {        border: 1px solid black;        width: 200px;        height: 100px;        hyphens: auto;      }

比较可惜的是无法自由定义"连字符"的样式, 否则一定有点有趣。

九、滚动的优质体验: scroll-snap-type

定义一个滚动时的"临时停顿点", 这个问题直接看gif动画比较直接:

简单来看就是每次惯性滑动都会停留在特定元素所在位置, 有点像滚动的"锚点":

              
      
11111
      
22222
      
33333
      
44444
      
55555
      
66666

scroll-snap-type: y mandatory;设置了y轴滚动时尽量停留在"元素点位"上, scroll-snap-align: start none;目标元素自身的滚动起始方向用来对齐, 也就是告诉浏览器滚动后要停留在子元素的哪里。

在子元素身上设置scroll-margin-top: 20px可以设置一定的检测距离, 并附加回弹效果:

这次神奇的css之旅就是这样, 希望与你一起进步。

推荐内容