Перекрестные CSS-варианты CSS в PhpStorm?

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> 

Кто-нибудь знает ярлыки, чтобы получить все (большинство) кросс-браузерных вариантов объявления css в PhpStorm?

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, вы можете перейти к настройкам, а затем в поле поиска написать «« Живые шаблоны »(он находится в разделе« Редактор »). В правой части вы можете увидеть все определения, также вы можете определить свой короткий код желания, чтобы легко генерировать код в вашей среде IDE, например, если вы хотите написать код CSS, например: border-right: 1px solid #000;, вам нужно только написать br+, а затем нажать клавишу Tab чтобы завершить все это. Это так полезно, когда вам приходится писать длинный код, и это сэкономит ваше время.

В вашем примере выше, вам нужно только написать: «bxz», а затем нажмите Tab ключ, вы увидите, что все коды кросс-браузер будет генерировать автоматически в вашей IDE. Вы можете увидеть это в следующих изображениях: