近日問題總結

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)) {
}