css新世界笔记

发表于 | 分类于
| 字数统计: 2.4k 字

CSS新世界是知名博主张鑫旭CSS世界三部曲的最后一部，主要讲述CSS3及其之后很多实用的新特性，介绍了很多潜藏的特性和有用的细节。CSS世界介绍的是CSS2.1规范及其之前内容，CSS选择器世界介绍的是CSS LV1-LV4的选择器知识，CSS新世界介绍的是CSS3及其之后的知识。

CSS基础知识

  • CSS全局关键字属性值
    • inherit 继承关键字 实现属性继承，如input { font-family: inherit;height:inherit }
    • initial 初始关键字 适合用在需要重置某些CSS样式，但又不记得初始值的场景，如ul { font-size: 14px } ul li:last-child { font-size: initial }
    • unset 不固定值关键字 只有配合all属性使用才有意义，批量重置内置样式，如dialog { all: unset }
    • revert 恢复关键字 让当前元素的样式还原成浏览器内置的样式，如ol { list-style-type: repeat }
  • @supports规则用来检测当前浏览器是否支持某个CSS新特性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <style>
    /* 支持网格布局 */
    @supports (display:grid) { .item { background:red } }
    /* 不支持网格布局 */
    @supports not (display:grid) { .item { background:red } }
    /* 同时支持弹性布局和网格布局 */
    @supports (display:flex) and (display:grid) { .item { background:red } }
    /* 支持弹性布局或网格布局 */
    @supports (display:flex) or (display:grid) { .item { background:red } }
    /* 支持弹性布局 但不支持网格布局 */
    @supports (display:flex) and (not (display:grid)) { .item { background:red } }
    /* @supports规则的大括号里 可以包含其他@规则*/
    @supports (display:flex) {
      @media screen and (max-width: 750px) {}
      @supports (animation: none) { .box { animation: skip }}
      @keyframes skip {}
    }
    </style>
    <!-- 浏览器还提供了CSS.supports()方法，用来在javascript代码中检测
    当前浏览器是否支持某个CSS特性-->
    <script>
    // CSS.supports(propertyName, value)
    if (window.CSS || CSS.supports || CSS.supports('position', 'sticky')){
      document.getElementById('box').style.position = 'sticky'
    }
    </script>

增强的CSS属性

  • fit-content关键字 实现元素尺寸的自适应

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 设置元素的width或height为fit-content关键字后，元素的尺寸就是里面内容的尺寸  -->
    <!-- 使用width:fit-content加margin:0 auto实现单行文字居中，多行文字居左对齐 -->
    <div class="box">单行文字居中，多行文字居左对齐</div>
    <style>
    .box { width:fit-content; margin:0 auto; }
    /* fit-content关键字的兼容性处理 IE浏览器、Edge79之前不支持 但可以用在移动端 */
    .ex { width:-webkit-fit-content; width:-moz-fit-content;width:fit-content; }
    </style>

  • position:sticky 黏性定位

    1
    2
    3
    黏性定位：当元素在屏幕内时，随屏幕滚动;当元素滚出屏幕时，元素变成固定定位
    黏性定位过去都是使用javascript实现，在现代浏览器可以使用position: sticky实现
    在使用position: sticky时，务必保证黏性定位元素的祖先元素没有可滚动元素

  • currentColor 关键字

    1
    2
    3
    4
    5
    <!-- currentColor 表示当前元素所使用的color属性的计算值  -->
    <div class="box">currentColor 使用当前color相同的颜色</div>
    <style>
    .box { color: red; border: 1px solid currentColor; /* 边框的颜色和文字颜色一致*/ }
    </style>

  • zoom 缩放 除Firefox外其他浏览器都支持

    1
    2
    3
    4
    5
    语法 zoom: normal | reset | <number> | <percentage>
    zoom 和 scale 的区别
    1. zoom属性缩放的中心坐标是元素的左上角，且不能修改。transform中的scale缩放默认的中心坐标是元素的中心点
    2. zoom属性缩放会改变元素占据的尺寸空间，transform中的scale缩放不会改变元素占据的尺寸
    3. zoom属性不会改变元素的层级，不会影响元素的fixed定位

  • backface-visiblility 元素背面是否可见

    1
    2
    3
    backface-visiblility: visible 默认值  元素背面是可见的
    backface-visiblility: hidden  元素背面是不可见的
    常用于transform变换中，是否要隐藏元素的背面，使变换效果更好

  • justify-content: space-evenly 每个flex子项空白间距相等

    1
    2
    3
    4
    ul{
      display: flex;
      justify-content: space-evenly;
    }

  • prefers-color-scheme 用来检测当前网页是否处于深色(黑暗)模式的媒体属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <style>
    /* 支持三个属性：
    dark 系统倾向于使用深色模式
    light 系统倾向于使用浅色模式
    no-perference 系统未告知用户使用的颜色方案 */
    /* 深色模式 */
    @media (prefers-color-scheme: light) {
      body{ color:#333; background-color: #fff; }
    }
    /* 浅色模式 */
    @media (prefers-color-scheme: dark) {
      body{ color:#fff; background-color: #000; }
    }
    /* 快速对现有网页进行深色模式改造的技巧 */
    body {
      /* 使用filter:invert(1)滤镜对文字颜色和背景色等进行反相 */
      filter: invert(1) hue-rotate(180deg);
      background-color: #000;
    }
    /* 对图片进行再次反相将图片还原成真实颜色 避免应body反相后 图片颜色出现异常*/
    img{ filter: invert(1) hue-rotate(180deg); }
    </style>
    <script>
    // 判断当前手机浏览器是否支持深色或浅色模式
    // 是否支持 prefers-color-scheme 属性
    console.log(window.matchMedia('(prefers-color-scheme)').matches) // true
    // 是否是浅色模式 prefers-color-scheme: light
    console.log(window.matchMedia('(prefers-color-scheme: light)').matches) // true
    // 是否是深色模式 prefers-color-scheme: dark
    console.log(window.matchMedia('(prefers-color-scheme: dark)').matches) // false
    </script>

  • touch-action: manipulation 取消移动端点击事件300ms延迟和双击行为

    1
    2
    /* touch-action: manipulation 只允许浏览器进行滚动和持续缩放操作 */
    html { touch-action: manipulation; }

  • scroll-behavior: smooth 平滑滚动 safari不支持

    1
    .box{ scroll-behavior: smooth; } /* 平滑滚动 */

  • overscroll-behavior: contain 滚动嵌套时，终止外层滚动 safari不支持

    1
    2
    /* 局部滚动的滚动条滚动到底部边缘时，再继续滚动时，外部容器不会再跟滚动 */
    .box{ overscroll-behavior: contain;-ms-overscroll-behavior: contain; }

  • pointer-events: none 元素无法点击

  • caret-color: red 更改输入光标的颜色
    1
    2
    /* 设置输入光标的颜色  也可以用于设置了 contenteditable的html标签 */
    input{ caret-color: red; }

简单实用的css函数

  • calc()函数的使用

    1
    2
    3
    4
    5
    支持“+”、“-”、“*” 和 “/”四则运算；
    可以使用百分比、px、em、rem等单位，不能使用当前CSS属性不支持的单位，可以混合使用各种单位进行计算；
    表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
    表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
    .elm { width: calc(100% - 20px + 5px*2)) }

  • min()函数的使用

    1
    2
    3
    4
    min(expression [, expression]) 支持一个或多个表达式，使用逗号分隔，将最小表达式的值作为返回结果
    实现网页在大于等于1024px的PC浏览器显示宽度为1024px，在小于1024px时显示宽度为100%
    el { width: 1024px; max-width:100% } 使用min()函数 el { min(1024px, 100%) }
    min()用来限制最大值（即最大宽度值为1024px），IE和其他低版本浏览器不支持

  • max()函数的使用

    1
    2
    3
    4
    max(expression [, expression]) 支持一个或多个表达式，使用逗号分隔，将最大表达式的值作为返回结果
    实现网页在小于等于1024px的PC浏览器显示宽度为1024px，在大于1024px时显示宽度为100%
    使用max()函数 el { max(1024px, 100%) }
    max()用来限制最小值（即最小宽度值为1024px），IE和其他低版本浏览器不支持

  • clamp()函数的使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    clamp()函数的作用是返回一个区间范围的值，语法：clamp(MIN, VAL, MAX),MIN表示最小值，MAX表示最大值，
    VAL表示首选值，如果VAL在MIN~MAX范围内，则将VAL作为返回值，如果VAL大于MAX则将MAX作为返回值，如果VAL
    小于MIN，则将MIN作为返回值。clamp(MIN, VAL, MAX)等同于max(MIN, min(VAL, MAX))
    IE和其他低版本浏览器不支持
    <button>宽度自适应变化</button>
    button{
      width: clamp(100px, 50%, 600px)
    }
    不断改变浏览器视口的宽度，按钮宽度在100px~600px范围内变化，当屏幕宽度的一半大于600px时，宽度为600px
    当屏幕宽度的一半小于600px时，宽度在200px~600px之间，当屏幕宽度的一半小于200px时，宽度为200px。

  • env() 环境变量函数

    1
    2
    3
    4
    5
    6
    7
    环境变量env()规范的制定是源于解决‘刘海屏’和‘底部触摸黑条’的移动设备的出现
    在使用safe-area-inset-*等env的属性时，一定要设置meta信息<meta name="viewport" content="viewport-fit="cover"">
    使用4个安全内边距值， 同时设置兜底尺寸，无法使用safe-area-inset-*时，会使用兜底的值
    env(safe-area-inset-top, 20px) 距离顶部 设置顶部刘海区域安全距离
    env(safe-area-inset-right, 1em) 距离右边
    env(safe-area-inset-bottom, 20px) 距离底部
    env(safe-area-inset-left, 20px) 距离左边 设置底部小黑条安全距离

Css变量和自定义属性

  • --变量名:值 声明css变量
  • 属性：var(--变量名) 使用css变量
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="box">深浅色模式</div>
    <style>
    :root{ --primary-color: pink; } /* 声明css变量 */
    .box{ color: var(--primary-color)} /* 使用css变量 */
    .box{ color: var(--primary-color, red)} /* 使用 var(css变量, 备用值) 当css变量无效时 使用备用值 */
    </style>
    <script>
    // 在js中设置和获取 css自定义属性
    // 只能借助 xx.style.setProperty 在js中设置 css变量
    document.documentElement.style.setProperty('--myColor', '#0000ff')
    // 使用 getComputedStyle(document.querySelector('.box')).getPropertyValue('--myColor') 获取css变量
    console.log(getComputedStyle(document.querySelector('.box')).getPropertyValue('--myColor')) // #0000ff
    </script>
-------------本文结束感谢您的阅读-------------
0%