Cross-browser CSS Variants in PhpStorm?

Question

I was creating a stylesheet in PhpStorm.

I started with the intent of typing the following:

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

Not sure what I did, but got the following (very helpful):

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

Does anyone know the shortcuts to get all(most) cross-browser variants of a css declaration in PhpStorm?

jsyk, the box-sizing css attribute is supported without prefixes in 96% of browsers, and there is less than 1% that supports only with prefixes: caniuse.com/#feat=css3-boxsizing — markasoftware
– markasoftware, Commented Dec 11, 2015 at 4:26
What happened is called vendor prefixing - check the manual for how to do this, intentionally. — justinw
– justinw, Commented Dec 11, 2015 at 4:49

LazyOne · Accepted Answer · 2015-12-11 09:03:24Z

4

This is CSS Vendor Prefixes in action. It is done by Emmet.

You can see all settings at Settings/Preferences | Editor | Emmet | CSS.

Corresponding help page: https://www.jetbrains.com/phpstorm/help/css.html

answered Dec 11, 2015 at 9:03

LazyOne

167k49 gold badges420 silver badges422 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mehdi Soltani · Accepted Answer · 2017-01-07 07:52:56Z

If you want to generate codes like that (cross-browser codes), you can use from some short codes in PhpStorm. They are so useful and exist for HTML, CSS, JavaScript, SQL, PHP, Angular and so on. To see them in your IDE, you can go to setting and then in the search box, write: "Live Templates" (It's located in the 'Editor' section). In right hand side, you can see all of definitions, also you can define your desire short code to generate code easily in your IDE, e.g if you want to write CSS code like: border-right: 1px solid #000; you only need to write br+ and then press Tab key to complete all of this. It's so useful when you have to write long code and it will save your time a lot.

In your example above, you only need to write: 'bxz' and then press Tab key, you will see that all of cross-browser codes will generate automatically in your IDE. You can see this in the following images:

Collectives™ on Stack Overflow

Cross-browser CSS Variants in PhpStorm?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related