From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/css/escape/index.html | 125 ++++++++++++++++++++ .../zh-cn/web/api/css/factory_functions/index.html | 100 ++++++++++++++++ files/zh-cn/web/api/css/index.html | 85 ++++++++++++++ files/zh-cn/web/api/css/supports/index.html | 130 +++++++++++++++++++++ 4 files changed, 440 insertions(+) create mode 100644 files/zh-cn/web/api/css/escape/index.html create mode 100644 files/zh-cn/web/api/css/factory_functions/index.html create mode 100644 files/zh-cn/web/api/css/index.html create mode 100644 files/zh-cn/web/api/css/supports/index.html (limited to 'files/zh-cn/web/api/css') diff --git a/files/zh-cn/web/api/css/escape/index.html b/files/zh-cn/web/api/css/escape/index.html new file mode 100644 index 0000000000..3271798047 --- /dev/null +++ b/files/zh-cn/web/api/css/escape/index.html @@ -0,0 +1,125 @@ +--- +title: CSS.escape() +slug: Web/API/CSS/escape +tags: + - CSS + - escape() + - 参考 + - 方法 +translation_of: Web/API/CSS/escape +--- +

{{APIRef("CSSOM")}}{{SeeCompatTable}}

+ +

 CSS.escape() 静态方法返回 {{domxref("DOMString")}} 包含作为参数传递的转义字符串，主要用作CSS选择器的一部分。

+ +

语法

+ +
escapedStr = CSS.escape(str);
+
+ +

参数

+ +
+
str
+
The {{domxref("DOMString")}} to be escaped.
+
+ +

实例

+ +

基本结果

+ +
CSS.escape(".foo#bar")        // "\.foo\#bar"
+CSS.escape("()[]{}")          // "\(\)\[\]\\{\\}"
+CSS.escape('--a')             // "--a"
+CSS.escape(0)                 // "\30 ",  Unicode代码点“0”是30
+CSS.escape('\0')              // "\ufffd",  Unicode替换字符
+ +

在上下文使用

+ +

要转义一个字符串作为选择器使用， escape()方法可以用于:

+ +
var element = document.querySelector('#' + CSS.escape(id) + ' > img');
+ +

escape()方法也可以用于转义字符串，它也转义了不严格需要转义的字符：

+ +
var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');
+ +

规范

+ + + + + + + + + + + + + + +
格式状态备注
{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS.escape()')}}{{Spec2('CSSOM')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(46.0)}}{{CompatGeckoDesktop("31")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(46.0)}}{{CompatGeckoMobile("31")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(46.0)}}
+
+ +

[1] Firefox 32做了一些小的修改，以符合规范和CSS语法的发展。标识符现在可以以' -- '开始，第二个破折号不能被转义。另外供应商标识符也不会被更改。

+ +

参见

+ + diff --git a/files/zh-cn/web/api/css/factory_functions/index.html b/files/zh-cn/web/api/css/factory_functions/index.html new file mode 100644 index 0000000000..8f4eea206a --- /dev/null +++ b/files/zh-cn/web/api/css/factory_functions/index.html @@ -0,0 +1,100 @@ +--- +title: CSS数字工厂函数 +slug: Web/API/CSS/factory_functions +translation_of: Web/API/CSS/factory_functions +--- +

{{SeeCompatTable}}CSS numeric factory functions，例如 CSS.em() 和 CSS.turn()，是一组使用传入的数字参数以及所指定的单位（单位名称即所用方法名称）来返回 CSSUnitValues 的方法。这些函数创建新的数字值，与使用 {{domxref('CSSUnitValue.CSSUnitValue()')}} 构造函数相比，没有后者那么冗长。

+ +

语法

+ +
CSS.number(number);
+CSS.percent(number);
+
+// <length>
+CSS.em(number);
+CSS.ex(number);
+CSS.ch(number);
+CSS.ic(number);
+CSS.rem(number);
+CSS.lh(number);
+CSS.rlh(number);
+CSS.vw(number);
+CSS.vh(number);
+CSS.vi(number);
+CSS.vb(number);
+CSS.vmin(number);
+CSS.vmax(number);
+CSS.cm(number);
+CSS.mm(number);
+CSS.Q(number);
+CSS.in(number);
+CSS.pt(number);
+CSS.pc(number);
+CSS.px(number);
+
+// <angle>
+CSS.deg(number);
+CSS.grad(number);
+CSS.rad(number);
+CSS.turn(number);
+
+// <time>
+CSS.s(number);
+CSS.ms(number);
+
+// <frequency>
+CSS.Hz(number);
+CSS.kHz(number);
+
+// <resolution>
+CSS.dpi(number);
+CSS.dpcm(number);
+CSS.dppx(number);
+
+// <flex>
+CSS.fr(number);
+ +

示例

+ +

我们使用 CSS.vmax() 数字工厂函数来创建一个 {{domxref('CSSUnitValue')}}：

+ +
let height = CSS.vmax(50);
+
+console.log( height );       // CSSUnitValue {value: 50, unit: "vmax"}
+console.log( height.value )  // 50
+console.log( height.unit )   // vmax
+ +

在这个例子中，我们给元素设定 margin 属性值，使用 CSS.px() 函数:

+ +
myElement.attributeStyleMap.set('margin', CSS.px(40));
+let currentMargin = myElement.attributeStyleMap.get('margin');
+console.log(currentMargin.value, currentMargin.unit); // 40, 'px'
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM', '#numeric-factory', 'Numeric Factory Functions')}}{{Spec2('CSSOM')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.CSS")}}

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/api/css/index.html b/files/zh-cn/web/api/css/index.html new file mode 100644 index 0000000000..4a835d0bc8 --- /dev/null +++ b/files/zh-cn/web/api/css/index.html @@ -0,0 +1,85 @@ +--- +title: CSS +slug: Web/API/CSS +translation_of: Web/API/CSS +--- +

{{APIRef("CSSOM")}}

+ +

CSS 接口涵盖CSS相关的实用方法。尚且不存在实现这个接口的对象：它仅仅包含静态的方法，因此也是一个实用性的接口。

+ +

属性

+ +

CSS接口是一个工具接口，无法创建该类型的对象：其内部只定义了静态属性。

+ +

静态属性

+ +
+
{{DOMxRef("CSS.paintWorklet")}} {{Experimental_Inline}}{{SecureContext_Inline}}
+
针对所有与绘制相关的类，提供对负责它们的工作集的访问。
+
+ +

方法

+ +

CSS接口是一个工具接口，无法创建该类型的对象：其内部只定义了静态方法。

+ +

静态方法

+ +

没有继承的静态方法。

+ +
+
{{DOMxRef("CSS.registerProperty()")}}
+
注册 {{cssxref('--*', 'custom properties')}}，启用属性类型检查、默认值，以及继承了或者没有继承它们值的属性。
+
{{DOMxRef("CSS.supports()")}}
+
返回一个 {{JSxRef("Boolean")}} 来表明键值对、条件，或者传入参数是否受支持。
+
{{DOMxRef("CSS.escape()")}}
+
可以用来转义一个大多用来当作CSS选择器一部分的字符串。
+
{{DOMxRef("CSS.factory_functions", 'CSS factory functions')}}
+
可以用来返回一个 CSSUnitValue。它的值由传入的数值以及调用的factory方法名称组成。
+
+ 
CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}
+
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Painting API','#dom-css-paintworklet','paintWorklet')}}{{Spec2('CSS Painting API')}}Adds the paintWorklet static property.
{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS')}}{{Spec2('CSSOM')}}Adds the escape() static method.
{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}{{Spec2('CSS3 Conditional')}}Initial definition
+ +

 

+ +
+
+ +

浏览器兼容性

+ +

{{Compat("api.CSS", 1)}}

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/api/css/supports/index.html b/files/zh-cn/web/api/css/supports/index.html new file mode 100644 index 0000000000..86c8f5dd91 --- /dev/null +++ b/files/zh-cn/web/api/css/supports/index.html @@ -0,0 +1,130 @@ +--- +title: CSS.supports() +slug: Web/API/CSS/supports +tags: + - API + - CSSOM + - Method +translation_of: Web/API/CSS/supports +--- +

{{APIRef("CSSOM")}}

+ +

CSS.supports() 静态方法返回一个{{domxref("Boolean")}}值，用来校验浏览器是否支持一个给定的CSS特性。

+ +

语法

+ +
boolValue = CSS.supports(propertyName, value);
+boolValue = CSS.supports(supportCondition);
+
+ +

参数

+ +

有两种不同的传值形式。第一种用来检验浏览器对于一对“属性-属性值”的支持：

+ +
+
propertyName
+
一个包含要检查的CSS属性名称的{{domxref("DOMString")}}。
+
value
+
一个包含要检查的CSS属性值的{{domxref("DOMString")}}。
+
+ +

第二种语法需要一个匹配{{cssxref("@supports")}}条件的参数：

+ +
+
supportCondition
+
一个包含了检查条件的{{domxref("DOMString")}}。
+
+ +

实例

+ +
result = CSS.supports("text-decoration-style", "blink");
+result = CSS.supports("display", "flex");
+result = CSS.supports('--foo', 'red');
+result = CSS.supports('(--foo: red)');
+result = CSS.supports("( transform-origin: 5% 5% )");
+result = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +
+                      "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );
+//result is true or false
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Conditional', '#the-css-interface', 'CSS.supports()') }}{{ Spec2('CSS3 Conditional') }}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support28.0 [2]{{CompatVersionUnknown}}{{ CompatGeckoDesktop("22") }} [1]{{CompatNo}}12.19 [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4{{CompatVersionUnknown}}{{ CompatGeckoMobile("22") }} [1]{{CompatNo}}12.19
+
+ +

[1]只有在用户设置layout.css.supports-rule.enabled=true时，Gecko 20和21才会支持这一特性。

+ +

[2] 在Chrome ≤ 51 (bug 584683) 和 Safari (bug 154669)中, 即使支持自定义属性，CSS.supports('--foo', 'red') 也会返回false。 您可以使用CSS.supports('(--foo: red)')，作为一种解决方案。

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf