1. 每个单词的首字母大写
2.使用input:checked单选高亮
- 要点：通过
input:checked 单选高亮
- 场景：单选高亮（之前做 pc 端的客户画像需求时，遇到需要左右两边等到的需求（左边块的高度会随着内容变化）），摆脱一味
JS 的控制
- 兼容：text-transform
- 代码：在线演示
3.使用vw定制rem自适应布局
- 要点：移动端使用
rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
- 场景：rem页面布局(不兼容低版本移动端系统)
- 兼容：vw、calc()
4.使用writing-mode排版竖文
5.使用text-align-last对齐两端文本
6.使用object-fit规定图像尺寸
- 要点：通过
object-fit使图像脱离background-size的约束，使用<img>来标记图像背景尺寸
- 场景：图片尺寸自适应
- 兼容：object-fit
- 代码：在线演示
7.使用text-overflow控制文本溢出
8.使用letter-spacing排版倒序文本
9.使用margin-left排版左重右轻列表
- 要点：使用
flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐
- 场景：右侧带图标的导航栏
- 兼容：margin
- 代码：在线演示
10.使用overflow-scrolling支持弹性滚动
- 要点：iOS页面非
body 元素的滚动操作会非常卡( Android 不会出现此情况)，通过 overflow-scrolling:touch 调用 Safari 原生滚动来支持弹性滚动，增加页面滚动的流畅度
- 场景：iOS页面滚动
- 兼容：iOS自带
-webkit-overflow-scrolling
body {
-webkit-overflow-scrolling: touch;
}
.elem {
overflow: auto;
}
11.使用transform启动GPU硬件加速
- 要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题
- 场景：动画元素(绝对定位、同级中超过6个以上使用动画)
- 兼容：transform
.element {
transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}
12.使用pointer-events禁用事件触发
- 要点：通过
pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于<button>的disabled
- 场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)
- 兼容：pointer-events
- 代码：在线演示
13.使用:valid和:invalid校验表单
14.使用:focus-within分发冒泡响应
15.使用color改变边框颜色
- 要点：
border没有定义border-color时，设置color后，border-color会被定义成color
- 场景：边框颜色与文字颜色相同
- 兼容：color
.elem {
border: 1px solid;
color: #f66;
}
16.使用filter开启悼念模式
- 要点：通过
filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们
- 场景：网站悼念
- 兼容：filter
html {
filter: grayscale(100%);
}
17.使用::selection改变文本选择颜色
18.使用linear-gradient控制文本渐变
19.使用transform模拟视差滚动
20.使用linear-gradient控制背景渐变
21.使用animation-delay保留动画起始帧
22.使用caret-color改变光标颜色
23.使用box-shadow裁剪图像
- 要点：通过
box-shadow模拟蒙层实现中间镂空
- 场景：图片裁剪、新手引导、背景镂空、投射定位
- 兼容：box-shadow
- 代码：在线演示
24.滚动指示器
25.换色器
26.倒影加载条
27.动态边框
28.立体按钮
29.自适应相册
原文
