showcase for putup
浏览器支持和退回
- 某些特性需要加浏览器前缀
- 标准语句写在最后
- 退回语句写在最前面,适应低版本浏览器
- 使用 modernizr 给根元素html 添加辅助类
- 针对支持或不支持的浏览器分别写样式 , textshadow 或者 no-textshadow
- @supports,可以看做『原生』的 modernizr
- JS 检测,在 element.style 对象上检查属性是否存在
检查属性值是否被支持,创建一个不可见的元素
浏览器可以解析某个css特性,并不代表他已经实现了该特性
css2升级到3版本号的特性
- syntax
- cascade
- color
- selectors
- background
- values
- text
- decorators
- fonts
- ui
css3版本后新特性
- transform
- compositing
- effects
- masking
- flexbox
- grid
- variables
- calc(), color()
w3c,制定标准,浏览器前缀是历史包袱。新实验特性需要通过在浏览器中配置开关开启,防止开发者在生产环境中使用。
技巧
减少代码重复
可变的字号可以相对父级,行高用比例,其他尺寸用 em
渐变主题配色,渐变遮罩,主题颜色直接改变background-color
currentColor 如果不指定颜色,自动从文本颜色中取得颜色
继承,让超链接颜色与页面文本一致,伪元素自动继承背景边框样式
视觉差异 文本,减少顶部和底部的padding会看起来比较整齐
media query 应该面向设计而不是设备
- 用百分比取代固定长度,或者 vw vh vmin vmax
- 需要在较大分辨率下的到固定宽度,用max-width,可以适应小分辨率
- 为替换元素(img object video iframe)设置max-width,100%
- 多列文本时,指定column-width 而不是 column-count,可以自适应小屏幕
- 合理使用简写:
css自定义属性
边框和背景
通常背景会侵入boder
可以用background-clip 裁剪,默认值是border-box
多重边框 box-shadow, insert
outline 模拟虚线边框或者描边
背景位置
Background-position 拓展语法接受 具体像素
calc() 动态计算
边框内圆角 outline不带圆角,shadow带圆角
条纹背景
斜条纹:
复杂的背景图案
网格:
波点:
用mixin处理:
棋盘:
Svg实现最好,svg可能会增加http请求。但是可以把svg以dataurl的形式内嵌到样式表中,甚至不需要base64。
角向渐变:
创建色轮:
混合模式:
background-blend-mode,类似ps混合模式
伪随机背景
把条纹从一个平面拆散为多个图层,一个颜色作为底色,另外三个颜色做条纹,不同间隔进行重复。
背景间隔用质数,最大限度避免重复
background: hsl(20, 40%, 90%);
background-image:
linear0gradient(90deg, #fb3 11px, transparent),
linear0gradient(90deg, #ab4 23px, transparent),
linear0gradient(90deg, #666 41px, transparent);
background-size: 41px 100%, 61px 100%, 83px 100%;
连续的图像边框
border-image 是九宫格伸缩
用border-image适合做做脚注线段
background-clip 多重背景最底层设置背景
信封边框:
蚂蚁行军动画: