关于javascript:中秋佳节之际-一起来欣赏-9-个冷门的css属性

36次阅读

共计 8498 个字符，预计需要花费 22 分钟才能阅读完成。

背景、

    可能咱们有时候潜意识里认为, 以后理论开发中 css 属性曾经足够用了, 然而前段时间忽然想到:” 会不会咱们只是思维被限度在了罕用的 css 属性中, 从而丢失了创造力 ”, 就像创造 车 之前大多数人会认为 骑马 曾经足够快能够满足本人的需要了, 所以我专门整顿了一下本人的学习笔记并且专门去学习了一些冷门的css 属性, 果然播种满满, 所以明天也要在这里把这些脑洞大开的属性较少给你, 筹备好一起来感触 css 的魅力吧。

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

    咱们开发中应用的背景图大部分是 (png, webp 等) 图片 、svg 矢量图、canvas 画图, 然而其实咱们也能够抉择css 间接画图, 那 css 这种甚至都 ” 称不上 ” 编程语言的家伙怎么绘制简单的图片那?

1: 为元素赋予 css 属性
div class="box"></div>
<style>
  .box {
    width: 180px;
    height: 180px;
    border: 1px solid; 
    background: paint(xxxx); // 配角在此
  }

    paint(xxxx); 这里填入的是绘图的 ” 办法名 ”, 往下看就晓得啥是 ” 办法名 ” 了, 之所以我这里写 ”xxxx” 十分随便, 是因为我想表白这个名字轻易起。

2: 引入 js 文件
    <script>
      if (window.CSS) {
        // 因为加载文件 须要启动 server
        CSS.paintWorklet.addModule("./paint-grid.js");
      }
    </script>

    用法有点诡异, 但外围其实是引入了一个js 文件。

3: js 文件内定义导出的办法

    paint-grid.js文件:

registerPaint(
  "xxxx", // 这就是: 办法名
  class {paint(context, size) {
      context.fillStyle = 'red';
      context.fillRect(10, 10, 39, 39);
    }
  }
);

    paint办法外面就相似 canvas 了, 能够失常应用局部 js 代码。

    以后的成果展现:

4: 可多导出

    当看到须要指定绘制的 ” 办法名 ” 而不是 ” 文件名 ”, 我就晓得他肯定能够导出多个喽:

registerPaint(
  "xxxx1",
  class {paint(context, size) {
      context.fillStyle = 'red';
      context.fillRect(10, 10, 39, 39);
    }
  }
);

registerPaint(
  "xxxx2",
  class {paint(context, size) {
      context.fillStyle = 'green';
      context.fillRect(10, 10, 39, 39);
    }
  }
);

两个元素的款式设置

    <style>
      .box {background: paint(xxxx1);
      }
      .box2 {
        margin-top: 20px;
        background: paint(xxxx2);
      }

5: 变量赋予背景灵动

    咱们时长遇到须要绘制 ” 非固定大小背影 ”, 此时在 paint-grid.js 中window是获取不到的, 然而咱们能够应用css 变量:

// 在全局定义不便 js 批改
  :root {--bg-size: 60;}

    paint-grid.js文件

registerPaint(
  "xxxx1",
  class {static get inputProperties() {return ["--bg-size"];
    }
    paint(context, size, properties) {var bgSize = properties.get('--bg-size');
      context.fillStyle = "red";
      context.fillRect(10, 10, bgSize, bgSize);
    }
  }
);

    inputProperties定义了须要获取哪些属性, paint的第三个参数能够接管这些属性, 这样霎时就感觉这个属性还有点用啦。

6: 注意事项
  1. 不能在 js 文件的绘制办法外面写alert, 会导致报错阻断绘制:
  2. 要留神保护 paint-grid.js文件与 css 文件的相关性, 因为大家写代码会下意识的不会认为 js 办法被 css 文件里的属性所应用, 这就导致可能后续无删除或者是不敢删除等问题。
  3. 适宜解决简略的图形, 如果复杂度高了或者还需借助其余 ” 库 ” 的状况, 则不倡议应用。

二、字体三连 (镂空、突变、背景)

1: 镂空字不算常见
  p {
    font-size: 150px;
    color: white;
    -webkit-text-stroke: 6px red;
  }

2: 渐变色文字
      p {
        font-size: 150px;
        color: white;
        -webkit-text-stroke: 6px red;
        background-color: rosybrown;
        background-image: -webkit-linear-gradient(top, red, #fd8403, yellow);
        -webkit-background-clip: text;
        color: transparent;
      }
 <p>
  高
  <br>
  低
 </p>

3: 文字背景

   咱们把 ” 白金之星 ”(jojo 的微妙冒险中的 ’ 人物 ’)的图片作为文字的背景:

      div {
        font-size: 150px;
        background: url(../imgs/jojo.webp) no-repeat;
        background-size: 100%;
        background-origin: border-box;
        -webkit-background-clip: text;
        color: transparent;
      }

    这里的关键点是 -webkit-background-clip: text, 意思是将dom 内文字以外的区域裁剪掉, 所以就剩文字区域了, 而后文字再设置成通明的。

三、他来了他来了, 他带着炫酷的过场动画走来了

    先看一下咱们用 css 字体属性做的动动画成果:

    倒计时骨王退场:

    这里的思路就是利用 文字的背景图 属性, 然而难点是如何让文字变大。

1: 难点与坑点

    文字变大有什么难的? 你可能会说这些 so 简略, 咱们设置文字所在的 span 标签 position: absolute; 定位在父级两头不就 OK 了? 然而如果这样设置就会导致 -webkit-background-clip: text; 生效, 也就是文本脱离了文档流。

    有同学有会想到 transform:scale(1.5); 来动态控制文字的变大, 然而 transform 仍然会使 -webkit-background-clip: text; 生效。

    所以我想到的是在 div 中设置 flex 让文字上下左右居中, 而后调大 font-size 属性。

    还有一个问题就是背景色问题, 因为设置了背景图的同时没法设置文字外层的背景色。

2: 实现思路

    首先总共须要三层构造, 第一层 wrap 负责彩色背景色以及 overflow: hidden; 来截断咱们的文字变大, 第二层 box 负责文字的居中, 并且设置 font-size 属性让外部元素继承, 第三层 span 标签负责文字①②③的寄存, 因为要管制这些文字的显隐所以须要 dom 标签包裹。

3: 实现代码

    代码有些粗俗没有润色😊

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #wrap {
        background-color: black;
        width: 500px;
        height: 500px;
        margin: 0 auto;
        overflow: hidden;
      }
      .box0 {background: url(../imgs/jojo.webp) no-repeat;
      }
      .box1 {background: url(../imgs/ 一起干饭.jpeg) no-repeat;
      }
      .box2 {background: url(../imgs/gat.webp) no-repeat;
      }
      #box {
        width: 500px;
        height: 500px;
        font-size: 150px;
        margin: 0 auto;
        background-size: 500px 500px;
        background-position: center;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .text {display: none;}
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="box">
        <span class="text">①</span>
        <span class="text">②</span>
        <span class="text">③</span>
      </div>
    </div>
    <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>
  </body>
</html>

    把文案改成 “◤ ◢ ✿” 就会呈现第一个动图的成果啦!

四、引号: quotes

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

1: 根本应用
 <div class="box">jojo 的微妙冒险 </div>
    <style>
      .box {quotes: "《" "》";}
      .box::before {content: open-quote;}
      .box:after {content: close-quote;}
    </style>

效果图:

    这里要留神的是如果没写 content: open-quote; 会导致前后 ’ 书名号 ’ 都隐没, 然而唯独没写 content: close-quote; 则会保留展现 ”《”。

2: 看似鸡肋?

    以后这个根底写法也太鸡肋了, 不就是给 ”《” 起了个别名叫 open-quote 吗? 并且要害是占用了我的 before 与after, 感觉画龙点睛, 比方我能够用如下的办法进行替换:

  :root {
    --open: "《";
    --close: "》";
  }
  div::before {content: var(--open);
  }
  div::after {content: var(--close);
  }
<div class="box">jojo 的微妙冒险 </div>
3: 套娃高手 quotes 雄起

   其实 quotes 的看家本领是它能够承受 n 个参数!

  .box {quotes: "--- start" "---- end" "《" "》";}
  .box::before {content: open-quote;}
  .box:after {content: close-quote;}
    <div class="box">
        <div class="box">jojo 的微妙冒险 </div>
        <div class="box">Overlord</div>
        <div class="box"> 艾尔登法环 </div>
    </div>

   神奇的事件呈现了, 当呈现嵌套构造的时候, 外部的元素会应用第三个与第四个参数作为 ” 引号 ”, 套娃事件 呈现啦:

  .box {quotes: "--- start" "---- end" "(" ")" "《" "》";
  }
  .box::before {content: open-quote;}
  .box:after {content: close-quote;}
<div class="box">
  <div class="box">
    <span class="box">jojo 的微妙冒险 </span>
  </div>
  <div class="box">
    <span class="box">Overlord</span>
  </div>
  <div class="box">
    <span class="box"> 艾尔登法环 </span>
  </div>
</div>

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

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

   要留神不写 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;}
  <body>
    <div class="wrap">
      <div class="box"> 你好 </div>
      <div class="box box1"> 你好: initial</div>
      <div class="box box2"> 你好: inherit</div>
      <div class="box box3"> 你好: revert</div>
    </div>
  </body>

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;
  }
<div id="target_id">
    你好
</div>

2: 跳转后动画

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

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

    能够设置当 input 组件中展现 placeholder 时的款式:

      input:placeholder-shown {background-color: lightblue;}

      input {
        width: 300px;
        height: 60px;
      }
 <input placeholder="展现我时为蓝色" />

输出内容则还原

八、换行展现的艺术: hyphens

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

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

    配角暴风退场

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

    比拟惋惜的是无奈自在定义 ’ 连字符 ’ 的款式, 否则肯定有点乏味。

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

    定义一个滚动时的 ” 长期进展点 ”, 这个问题间接看 gif 动画比拟间接:

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 200px;
        height: 150px;
        border: 1px solid;
        border-left: 5px solid black;
        border-right: 5px solid black;
        margin: 40px;
        overflow: auto;
        scroll-snap-type: y mandatory;
      }
      .item {
        border-top: 1px solid red;
        height: 150px;
        /* scroll-margin-top:20px; */
        scroll-snap-align: start none;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">11111</div>
      <div class="item">22222</div>
      <div class="item">33333</div>
      <div class="item">44444</div>
      <div class="item">55555</div>
      <div class="item">66666</div>
    </div>
  </body>
</html>

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

     在子元素身上设置scroll-margin-top: 20px 能够设置肯定的检测间隔, 并附加回弹成果:

end

     这次神奇的 css 之旅就是这样, 心愿与你一起提高。

正文完
javascript
发表至： javascript
2022-09-11
 0
es6迭代器iterator和生成器generator2-可迭代对象
2019，猪事顺利？
关于javascript:JS的基本语法
关于javascript:JavaScript-数据处理-操作数组