CSS杂记

Share

渐进增强和优雅降级

  • 渐进增强

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

  • 优雅降级

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

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

  • 互联网发展很快，连微软公司都抛弃了ie李兰器，转而支持edge这样的高版本浏览器，很多情况下没有必要再时刻想着低版本浏览器，而是一开始构建完整的表过，根据实际情况，修补低版本浏览器问题

浏览器前缀

前缀是-webkit-background-size:auto中的-webkit是浏览器前缀。

浏览器前缀 浏览器
-webkit- Google Chrome, Safari, Android Browser
-moz- Firefox
-o- Opera
-ms- Internet Explore, Edge
-khtml- Konqueror

后面会有常用的解决h5和c3的兼容性解决文件，这里暂时不涉及

背景渐变

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

兼容性问题很严重，我们这里只讲解线性渐变。

语法格式：

background:-webkit-linear-gradient(渐变的起始位置,起始颜色,结束颜色);

background:-webkit-linear-gradient(渐变的起始位置,颜色 位置,颜色 位置...)

背景渐变必须加前缀，因为兼容性很严重，必须加浏览器的 私有前缀。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
	<title>document</title>
	<style type="text/css">
		div {
			width: 300px;
			height: 50px;
            background: linear-gradient(top,red,green);
            /*先写普通的，再写私有浏览器的*/
			background: -webkit-linear-gradient(top,red,green);
			margin: 200px auto;
		}
        section {
			width: 400px;
			height: 100px;
			margin: 0 auto;
			background: -webkit-linear-gradient(top,red 0%,green 20%, blue 80%);
		}
	</style>
</head>
<body>
    <div></div>
    <section></section>
</body>
</html>

CSS W3C 统一验证工具

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

网址是http://www.cssstats.com/

可以检测CSS是否支持等等，不过是国外的，不咋好使。

更全面的网站是：W3C统一验证工具：http://validator.w3.org/unicorn/

这个还支持本地等文件上传。

CSS压缩工具

为了提高加载速度和节约空间，需要将css进行压缩。

w3c css压缩http://tool.chinaz.com/Tools/CssFormat.aspx，网速较慢

楼上还能格式化代码，将压缩后的css格式化成平常用的。

旋转轮播图

这个效果用到透视、过渡还有子元素preserve-3d

transform-style

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
	<title>document</title>
	<style type="text/css">
	    body {
	    	perspective: 1000;
	    }
		section {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            /*用的图片在posts/image中有*/
            background: url(bg.png) no-repeat;
            background-size: cover;
            position: relative;
            transform-style: preserve-3d;
            transition: all 5s linear;
		}
		section:hover {
			transform: rotateY(360deg);
		}
		section div {
			width: 100%;
			height: 100%;
			background: url(lg.gif) no-repeat;
			background-size: cover;
			position: absolute;
			top: 0;
			left: 0;
		}
		section div:nth-child(1) {
			transform: rotateY(0deg) translateZ(400px);
		}
		section div:nth-child(2) {
			transform: rotateY(60deg) translateZ(400px);
		}
		section div:nth-child(3) {
			transform: rotateY(120deg) translateZ(400px);
		}
		section div:nth-child(4) {
			transform: rotateY(180deg) translateZ(400px);
		}
		section div:nth-child(5) {
			transform: rotateY(240deg) translateZ(400px);
		}
		section div:nth-child(6) {
			transform: rotateY(300deg) translateZ(400px);
		}
	</style>
</head>
<body>
<section>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</section>
</body>
</html>