那些可以不依靠js 让前端变得更加专业的奇技淫巧

响应式文字大小

/* Fixed minimum value below the minimum breakpoint */
  fluid {
    font-size: 32px;
  }
/* Fluid value from 568px to 768px viewport width */
  @media screen and (min-width: 568px) {
    .fluid {
      font-size: calc(32px + 16 * ((100vw - 568px) / (768 - 568));
    }
  }
  /* Fixed maximum value above the maximum breakpoint */
  @media screen and (min-width: 768px) {
    .fluid {
      font-size: 48px;
    }
  }

很少有人用clamp做响应式的文字大小设置，此css可以根据视口动态调整字体大小，语法：

    clamp(minimum size, preferred size, maximum size)

1. minimum size：小屏是最小字体大小
2. preferred size：首选大小，其中vw代表视口宽度，2.5vw表示字体大小将是视口宽度的2.5%
3. maximum size： 最大字体大小

阻止鼠标选择文本

    .no-select { user-select: none }

宽高比

    .aspect-ratio { aspect-ratio: 16 / 9 }

讲宽度和高度保持在指定的比例，非常适合使用在视频和图像元素，常用的比如4:3,1:1等等

div块级元素按比例显示

    <div class='box'> 
      <div class='content'>
       content
      </div> 
    </div>

css部分：

  .box{
      position: relative;
      width: 50%;     /* desired width */
  }
  .box:before{
    content: "";
    display: block;
    padding-top: 100%;  /* 1:1* /
  }
  .content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
/* Other ratios */
  .ratio2_1:before{
    padding-top: 50%; /* 2:1 */
  }
  .ratio1_2:before{
    padding-top: 200%; /* 1:2 */
  }
  .ratio4_3:before{
    padding-top: 75%; /* 4:3 */
  }
  .ratio16_9:before{
    padding-top: 56.25%; /* 16:9 */
  }

自动平滑滚动

    html { scroll-behavior: smooth }

锚点或者导航会轻柔的滑动，而不是默认的突然调转，小小的改变带来很大的用户体验。

响应式系统深色模式

  @media (prefers-color-scheme: dark) {
    body {
      background-color: #333;
      color: #fff;
    }
  }

该css媒体查询可以设置用户系统偏好自动将您网站的主题设置为自定义样式。

图片填充方式

    .cover-img { object-fit: cover }

禁止鼠标事件触发

    .no-pointer { pointer-events: none }

该css可以使元素忽略鼠标事件，比如点击，hover等等

模糊背景或者元素

    .blur { filter: blur(20px) }

显示html属性的内容

    .dynamic-content::before { content: attr(class) }

无需更改html就可以提取属性中的值

路径剪辑

    .circle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

这个在线工具可以生成各种形状的剪辑 Clippy - CSS clip-path maker

渐变文本

  .gradient-text {
     background: linear-gradient(to top, red 0%, blue 100%);
     color: transparent;
     -webkit-background-clip: text;
    }

首字母

    p::first-letter {
      font-weight: bold;
      color: #333;
    }

选择空内容元素

    .element:empty { display: none }

响应式屏幕方向

  @media (orientation: landscape) {
    body {
      background-color: #333
    }
  }

多层渐变背景色

    background: radial-gradient(circle at 50% 50%, rgba(243, 196.3, 96.5, 1) 0%,rgba(238.8, 34.6, 122.1, 0.2) 80%) 50% 50%, linear-gradient(0deg, rgba(170.2, 106.8, 238.7, 1) 0%,rgba(162.6, 112.6, 178.8, 1) 100%) 50% 50%;

浏览器缩放

    body { font-size: calc(100% * env(browser-zoom-level)); }