PhpStorm中的跨浏览器CSS变种？

Question

我在PhpStorm中创建了一个样式表。

我开始打算输入以下内容：

<code>
*{
box-sizing: border-box;
}
</code>

不确定我做了什么，但得到了以下（非常有用）：

<code>
*{
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
 box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</code>

有没有人知道在PhpStorm中获取css声明的所有（大多数）跨浏览器变体的快捷方式？

Answer 1

这是CSS Vendor Prefixes。它由Emmet 完成。

您可以在Settings/Preferences | Editor | Emmet | CSS找到所有设置。

相应的帮助页面：https://www.jetbrains.com/phpstorm/help/css.html

Answer 2

如果要生成类似的代码（跨浏览器代码），可以使用PhpStorm中的一些短代码。它们非常有用，适用于HTML，CSS，JavaScript，SQL，PHP，Angular等。 要在IDE中查看它们，您可以转到设置，然后在搜索框中输入：＆＃34; 实时模板＆＃34; （它位于＆＃39;编辑器部分）。在右侧，您可以看到所有定义，也可以定义您希望的简短代码，以便在IDE中轻松生成代码，例如，如果您想编写CSS代码，例如：border-right: 1px solid #000;，您只需要编写{{ 1}}然后按Tab键完成所有这些操作。当您必须编写长代码时它非常有用，它会节省您的时间。

在上面的示例中，您只需要写：＆＃39; bxz ＆＃39;然后按 Tab键，您将看到所有跨浏览器代码将在IDE中自动生成。您可以在以下图像中看到这一点：