pycharm支持css_CSS @支持-CSDN博客

pycharm支持css

Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we do check for CSS property support with JavaScript which leads to brief flashes of content, hopeful code and support, and other problems. Firefox, Chrome, and Opera have just recently added support for CSS @supports (CSS) and CSS.supports (JavaScript) to detect browser support for a given style directive. Let's see how it works!

出于所有正确的原因，通过JavaScript进行功能检测是客户端的最佳做法，但不幸的是，CSS中还没有提供相同的功能。我们最终要做的是使用每个浏览器前缀多次重复相同的属性。 uck 我们确实检查了JavaScript对CSS属性的支持，这会导致内容短暂闪烁，有希望的代码和支持以及其他问题。 Firefox ， Chrome和Opera最近才添加了对CSS @supports (CSS)和CSS.supports (JavaScript)的支持，以检测浏览器对给定样式指令的支持。让我们看看它是如何工作的！

View Demo 观看演示

CSS `@supports` (CSS `@supports`)

CSS @supports directives go in your CSS code just as @media queries do:

CSS @supports指令会像@media查询一样进入您CSS代码：


@supports(prop:value) {
	/* more styles */
}

CSS @supports allows developers to check style support in a number of different ways.

CSS @supports允许开发人员以多种不同方式检查样式支持。

基本属性检查 (Basic Property Checks)

You can perform basic property and value checks:

您可以执行基本的属性和值检查：


@supports (display: flex) {
	div { display: flex; }
}

This is the most basic usage of @supports.

这是@supports最基本用法。

`not`关键字 (`not` Keyword)

@supports can be paired with a 'not' keyword to check for no support:

可以将@supports与'not'关键字配对以检查是否不支持：


@supports not (display: flex) {
	div { float: left; } /* alternative styles */
}

多重检查和条件 (Multiple Checks and Conditionals)

Multiple CSS property checks can be made via 'or' and 'and' chaining:

可以通过'or'和'and'链接进行多个CSS属性检查：


/* or */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    /* use styles here */
}

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {
	
	/* something crazy here */
}

You can chain multiple multiple conditionals with parens, just as you can in most other programming languages:

您可以使用parens链接多个条件，就像大多数其他编程语言一样：


/* and and or */
@supports ((display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex)) and (-webkit-appearance: caret) {

    /* use styles here */
}

The @supports structure's conditional pattern matches that of @media's conditional pattern.

@supports结构的条件模式与@media的条件模式相匹配。

JavaScript `CSS.supports` (JavaScript `CSS.supports`)

The JavaScript counterpart to CSS @supports is window.CSS.supports. The CSS.supports spec provides two methods of usage. The first method of usage includes providing two arguments: one for the property and another for the value:

与CSS @supports对应JavaScript是window。 CSS.supports 。 CSS.supports规范提供了两种使用方法。第一种用法包括提供两个参数：一个用于属性，另一个用于值：


var supportsFlex = CSS.supports("display", "flex");

The second usage method includes simply providing the entire string to be parsed:

第二种用法包括简单地提供要解析的整个字符串：


var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");

Great that you can check CSS support via either method -- it avoids property checking on transient nodes and string-building to check for support.

很好，您可以通过这两种方法检查CSS支持-避免了在临时节点上进行属性检查以及避免通过字符串构建来检查支持。

Before using the JavaScript method of supports, it's important to detect the feature first. Opera uses a different method name so that throws things for a bit:

在使用JavaScript的支持方法之前，首先检测该功能很重要。 Opera使用不同的方法名称，因此会抛出一些错误：


var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);

`@supports`用法 (`@supports` Usage)

In most cases, the best usage of @supports is setting an older set of styles as backup and then canceling those styles out and enhancing if a given property is supported. One brilliant use case for @supports is layout. Some edge browsers are now providing support for flexbox while others lag behind. In this case, you could code:

在大多数情况下， @supports的最佳用法是将一组较旧的样式设置为备份，然后取消这些样式并在支持给定属性的情况下进行增强。 @supports一个出色用例是布局。一些边缘浏览器现在提供对flexbox的支持，而另一些则落后。在这种情况下，您可以编写以下代码：


section {
	float: left;
}

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
    	display: flex;
    	float: none;
    }
}

Other good uses cases will pop up as developers have more time to experiment with the new @supports feature.

随着开发人员有更多时间尝试新的@supports功能，还会出现其他一些用例。

启用`@supports` (Enabling `@supports`)

If you want to dabble with new features like @support, you should invest some time installing edge browsers like Canary, Firefox Nightly, and Opera Next. Opera 12.1, WebKit Nightly, and Firefox Nightly all support @supports. Old versions of Firefox provide support after [layout.CSS.supports-rule.enabled] is enabled.

如果您想使用@support等新功能，则应该花一些时间安装诸如Canary，Firefox Nightly和Opera Next之类的边缘浏览器。 Opera 12.1，WebKit Nightly和Firefox Nightly均支持@supports 。启用[ layout.CSS.supports-rule.enabled ]后，旧版本的Firefox将提供支持。

View Demo 观看演示

@supports is a welcomed addition to the CSS and JavaScript specs. Feature detection is our number one best practice for feature support and @supports provides a lower level layer than the hacks we've been using the past few years. I suspect we'll see loads of @support directives over the next few years as flexbox becomes more useful and widely used!

@supports是CSS和JavaScript规范的新增功能。功能检测是我们提供功能支持的最佳实践，而@supports提供的层次比我们过去几年来使用的hacks低。我怀疑随着flexbox变得更加有用和广泛使用，在未来几年中我们会看到大量@support指令！