CSS补充知识浏览器前缀、CSSw3C统一的验证工具、CSS压缩工具

703人浏览 2023-11-10 17:20:11

第二阶段 CSS3

1 渐进增强和优雅降级

什么是渐进增强（ progressive enhancement）、优雅降级（ graceful degradation）呢？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级 graceful degradation：

开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

类似蹦极，由高处往低处下落

区别：渐进增强是向上兼容，优雅降级是向下兼容。

个人建议：现在互联网发展很快，连微软公司都抛弃了e浏览器，转而支持edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

2 浏览器前缀

后面我们会有常用的解决H5和C3的兼容解决文件，我们这里暂且不涉及。

3 背影渐变上

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或者沿任何任意轴。如果你曾使用过制作图件，比如说 Photoshop，你对线性渐变并不会陌生。

兼容性问题很严重，我们这里只讲解线性渐变语法格式：

4 背景渐变下

5 CSSw3C统一的验证工具

CssStats是一个在线的css代码分析工具

如果你想要更全面的，这个神奇，你值得拥有

W3C统一验证工具

因为它可以检测本地文件哦！！

6 CSS压缩工具

通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。

w3ccss压缩网速比较慢还可以去站长之家进行快速压缩。

7 认识 preserve-3d

这个效果我们需要用到透视过渡还有子元素 preserve-3d

transform-style

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：f1at和 preserve-3d。

其中f1at值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现

8 旋转轮播图结构制作

9 旋转轮播图