近日问题总结

ios系统下无法正常渲染元素

原因：iOS下的safari中有默认的按钮样式
解决代码

-webkit-appearance: none;

$~~~~$

css变量，var() 与 :root

:root

:root选择器 表示文档根元素 里边的属性为全局属性

css变量

声明变量要给变量名前加两根连词线 （–）

:root {
	--foo: #fff;
	--header-color: #fff;
	--Header-Color: #fff;
}

变量名大小写敏感 --header-color与 --Header-Color是两个不同的变量

var()函数

a {
	color: var(--foo, #fff);
}

var()函数有两个参数，第二个参数表示变量的默认值。如果变量不存在，使用默认值。

变量值的类型

字符串

可以直接连用

--bar: 'hello';
-foo: var(--bar)'world';

数值

数值与单位直接写在一起是无效的，必须使用 calc() 函数。

/*无效的使用*/
a {
	--gap: 20;
	margin-top: var(--gap)px;
}

/*正确使用*/
a {
	--gap: 20;
	margin-top: calc(var(--gap) * 1px);
}

如果变量值带有单位，就不能写成字符串

/*无效*/
a {
	-foo: '20px';
	font-size: var(--foo);
}
/*有效*/
a {
	-foo: 20px;
	font-size: var(--foo);
}

兼容性处理

对于不支持css变量的浏览器，采用下面的写法

a {
	color: #fff;
	color: var(--primary);
}

使用 @support 进行检测

@support ((--primary: #fff)) {
}
@support ( not (--primary: #fff)) {
}