CODEWITHSUNDEEP
cssphpstorm
Jordan
Jordan

Reputation: 159

Cross-browser CSS Variants in PhpStorm?

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?

Upvotes: 2

Views: 2561

Answers (2)

Mehdi Soltani
Mehdi Soltani

Reputation: 173

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.

The image of Live Templates in PhpStorm setting

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:

enter image description here

enter image description here

Upvotes: 3

LazyOne
LazyOne

Reputation: 165148

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

Upvotes: 4

Related Questions