Skip to main content

CSS Tips

多级选择器要从右往左读​

.a .b {}

不要以为跟人类常规理解那样，是先找到 .a 然后再找 .b。 浏览器的机制是反过来的：先找到所有 .b 然后看它的上级元素有没有 .a 有的话匹配成功。 这思想很重要，一定要注意。

隐藏滚动条​

为了让 PC 端和移动端的 UI 一致，同一隐藏滚动条是较好的选择。

/* 全局隐藏滚动条 */
::-webkit-scrollbar {
  width: 0; 
}
/* 只对 mian 隐藏滚动条 */
main::-webkit-scrollbar {
  width: 0; 
}

更高效的 CSS 动画​

要保持高效的 CSS 动画（过渡效果），注意以下列表中的 CSS 属性要斟酌使用： https://csstriggers.com/

FLIP 动画技巧： https://aerotwist.com/blog/flip-your-animations/

只有当 box-sizing 是 content-box 才能用负 margin 的 Hack​

这个 box-sizing 默认是 content-box 所以一般不会有问题。

但当你需要撑满宽度 width: 100%; 并且自带 1px 边框，则需要浏览器帮我们把边框也算进总宽度，否则总宽度就变 100% + 1px 了。 此时我们改成 box-sizing: border-box; 的同时，谨记负 margin 的 Hack 会失效。

让边框不影响任何布局的最好方式是用 box-shadow 模拟​

box-shadow: 0 0 0 2px #0f0;

如果有模拟边框的同时，还要有阴影效果，可多次绘制阴影，用逗号分隔。

box-shadow: 0 0 0 2px #0f0, 1px 1px 10px rgba(0,0,0,.5);

比 margin-top 更只能的边距定义方式 margin-block-start​

margin-block-start 与方向无关。 若元素垂直从上往下排列，则相当于 margin-top 的效果。 若元素垂直从下往上排列，则相当于 margin-bottom 的效果。 以此类推，配合 flex-direction 使用非常方便。

@media 媒体查询不支持使用 CSS 自定义变量​

CSS 的自定义变量，官方叫自定义属性。

无效：@media (min-width: var(--my-custom-var)) 有效：@media (min-width: 100px)

如果需要用变量，则必须配合 CSS 预处理器 LESS/SASS 使用。以下是 LESS 示例：

源代码：@media (min-width: @my-custom-var) 经过 LESS 处理后，输出可用的 CSS 语句：@media (min-width: 100px)

现阶段如果要在运行时动态修改 @media 的条件，则需要用 JS 去处理了，有相关的接口：https://developer.mozilla.org/zh-CN/docs/Web/API/CSSMediaRule

要在根级定义 @media 使其作用域更清晰​

要在根级定义 @media 使其作用域更清晰。以 LESS 为例：

Bad​

.parent {
  @media (min-width: 100px) {
    // ...
  }
  .children {
    @media (min-width: 100px) {
      // ...
    }
  }
}

注意，在 Bad 示例里面，任何缩进对 @media 都是没有用的，最终经过 LESS 处理后，都会单独放在在根域，最终变成一个个松散独立的 @media，难易维护：

@media (min-width: 100px) {
  .parent {
    // ...
  }
}
@media (min-width: 100px) {
  .parent .children {
    // ...
  }
}

Good​

养成良好习惯，如果有多个关联样式，都使用相同条件的媒体查询，则把它们都放同一个 @media 里面：

@media (min-width: 100px) {
  .parent {
    // ...
    .children {
      // ...
    }
  }
}

使元素可拖动改变大小​

resize: both;
overflow: auto;

必须配合 overflow 使用才会生效。

将媒体查询的代码放最后​

与 CSS 的机制有关，若多次定义相同条件的样式，最后定义的优先级最高。

Bad: 完全无效。

@media (min-width: 400px) {
  .demo {
    margin: 0; /* 无效 */
  }
}

.demo {
  margin: 0 auto; /* 生效 */
}

Bad: 要加额外的 !important。

@media (min-width: 400px) {
  .demo {
    margin: 0 !important; /* 生效 */
  }
}

.demo {
  margin: 0 auto; /* 无效 */
}

Good: 媒体查询放最后，方便相同条件的样式覆盖。

.demo {
  margin: 0 auto; /* 无效 */
}
/* 媒体查询放最后，方便相同条件的样式覆盖 */
@media (min-width: 400px) {
  .demo {
    margin: 0; /* 生效 */
  }
}

inline 不能缩放​

transform 的 scale 是有优化 GPU 加速的，动画效率很高。 但有个限制，只能用在有默认宽高的元素上，不能用在行内元素。行内元素没有预定义的宽高。

修改手机浏览器默认的点击效果​

该效果对 button/a 等原生可交互元素都有效。

注意：该点击高亮的效果，最终呈现的是个直角矩形的色块。若有元素有圆角，即使该元素设了 overflow 也没有用，依然看到的效果是直角矩形，会造成 UI 的不统一。此时最好的方法是设成 transparent 屏蔽该属性，点击效果改用伪类 :active 去手动实现。

:root {
  /* 修改浏览器默认的点击高亮效果 */
  -webkit-tap-highlight-color: rgb(117 215 231 / .25);
  /* 屏蔽浏览器默认的点击高亮效果，统一改用 :active 去实现 */
  -webkit-tap-highlight-color: transparent;
}

详见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-tap-highlight-color

position: sticky 注意点：当父元素设了 overflow: hidden 时，其子元素不能 sticky 在父元素身上​

另外，若父元素设了 overflow-x 也会导致我们纵向粘附的效果 postion: sticky; top: 0; 不能如期工作。非常遗憾。

注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见 Github issue on W3C CSSWG）。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

利用负 margin 扩大元素宽度而不改变文档流​

注意，当 width: auto 才可用此 Hack。