故不登高山,不知天之高也;不临深溪,不知地之厚也。--摘自《劝学》
::before & ::after
相当于多了两个空白标签,可以放置一些修饰的点缀或内容等
- css3 生成内容
- A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
字体
字体方面主要包括:字体渲染方式,浏览器默认字体及重置,@font-face自定义字体,字体性能等
- 字体渲染背后不得不说的故事
- 字体渲染
- 自定义字体 @font-face 详解
- 移动端字体
- 图标自定浅谈
- google fonts
- icomoon
图片
总得来说,图片的使用分为background和img,而从优化方向来说分为减少请求和减少大小。
图片优化原则:
- 能不使用就不使用(使用css3绘制简单的图形等)
- 矢量图与位图选择
- 挑选合适的图片格式(gif, png, jpg, webp等)及准备不同的规格大小(不同大小或retina屏)
- 合并(sprites)与压缩(有损压缩和无损压缩)
资源链接:
- 图片延迟加载的实现
- CSS Gradients
- css sprites
- 图片优化 - 谷歌图片优化手册
- baseline vs progressive
- 图片原理与优化
- WebP 探寻之路
- Web性能优化:图片优化
svg
目前svg最大的用途在图标及动画,最大的优点在于矢量图,可以任意缩放不失真,而且大小还比较小。
- svg 兼容性
- Pocket guide to writing svg
- MDN svg tutorial
- 理解SVG的viewport,viewBox,preserveAspectRatio
- SVG Sprite技术介绍
- SVG symbol a Good Choice for Icons
- svg sprites 兼容js
- svg line animation
- 超级强大的SVG SMIL animation动画详解
- awesome svg
css3 动画
分transition动画和animation动画,前者为两帧动画(只能控制开始和结束),而后者可以对任意帧进行更多处理。
- Intro to CSS 3D transforms
- CSS3 Transitions 101
- CSS3 Animations 101
- CSS3: Animations vs. Transitions
- css3 动画疑难杂症
- High Performance Animations
- css triggers
动画库
- animate.css
- effeckt
- hover.css
- animatable
- css3 magic animation
响应式
响应式主要包括断点的设置,及各种断点情况下样式的改变
- MDN CSS媒体查询
- 下手响应式及断点设置分析
- 响应式图片处理
- Media Queries: Width vs. Device Width
- media queries resource
- 案例参考
如果需要ie8-也支持相应式,得引入js库兼容,如 respond.js (不建议ie8去做响应式)
重排与重绘
- 网页性能管理详解
- 10 Ways to Minimize Reflows and Improve Performance
class命名
- 如何命名class
- BEM
- CCSS
- ACSS
- SMACSS
- An Introduction To Object Oriented CSS (OOCSS)
注:该系列将会汇总在github上的 重构优秀教程合集
Kenyataan:Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn