Авто префикс sublime text

Автоматическое добавление браузерных префиксов в CSS при помощи Sublime Text

Есть множество CSS3-свойств, которые на сегодняшний день находятся в экспериментальной стадии. Экспериментальные CSS-свойства используют браузерные префиксы, и как нам всем уже известно, у каждого браузера есть собственные префиксы: Firefox использует –moz-, IE использует –ms-, Chrome и Safari используют –webkit-, а Opera в свою очередь использовала –о- (но уже перешла –webkit-).

Если вы используете Sublime Text, то мы предлагаем вам рассмотреть более простой способ.

Если он уже установлен, то вы получите сведения о версии, как показано ниже.

Для установки нажмите Ввод.

Autoprefixer предлагается с настройками по умолчанию:

Но вы можете персонализировать его, адаптировав под собственные требования.

Autoprefixer использует базу данных CanIuse.com для добавления префиксов. CanIUse.com предлагает вам статистику поддержки свойств CSS3, а также HTML5, JS и SVG. И как можно видеть в настройках по умолчанию, Autoprefixer добавляет приставки для двух последних версий.

Если мы возьмем в пример CSS3 Transition, то Autoprefixer добавит префиксы для браузеров Webkit и Opera.

И у нас есть возможность установить поддержку сразу нескольких прошлых версий следующим образом:

Ввиду чего инструмент добавит префикс –moz- для Firefox.

Чтобы добавить префикс, вы можете нажать Command + Shift + P и выбрать Autoprefix CSS.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Источник

Adding CSS Vendor Prefix Automatically with Sublime Text

The problem is, unless you are utilizing Compass, including vendor prefix is tedious. The requirement is also varied for each browser, and whether we should include the prefix (or not) becomes a question worthy of consideration.

If you are using Sublime Text though, here is an easier way.

Installing Node.js

First, we need Node.js installed in our system. The installation package is available for Windows, OSX, and Linux, which you can download here. If you are unsure if you have it or not, run the following command in the Terminal.

If it is already installed, it should return the version, as shown below.

Installing AutoPrefixer

The Autoprefixer is developed by Andrey Sitnik. It is then ported to Sublime Text package by Sindre Sorhus.

I recommend that you install Package Control for easier package installation. You can go to Wbond for the official instructions. After that, you can hit the Command + Shift + P keys and select «Install Package». Then search for Autoprefixer.

Hit enter to install.

Using AutoPrefixer

AutoPrefixer comes with a default setting, as follows

But, we can personalize this to meet our own requirement.

Autoprefixer uses the CanIUse.com database for adding the prefixes. CanIUse.com lists CSS3 as well as HTML5, JS and SVG support statistics in the browsers including the use of vendor prefixes. And as we can see from the default setting, Autoprefixer adds prefixes for the last 2 versions as well.

If we take CSS3 Transition as an example, it will add the prefixes for the Webkit and Opera browsers.

And if we set it for 7 versions back, like so.

To include the prefix you can hit Command + Shift + P and select Autoprefix CSS, like so.

Now, you can simply write the standard CSS3 syntax, and this plugin will include the prefix for you in a snap.

Источник

Autoprefixer

Sublime plugin to prefix your CSS

Details

Installs

Readme

sublime-autoprefixer

Sublime plugin to prefix your CSS or SCSS

You shouldn’t have to care about vendor prefixes. Now you don’t have to!

Adding prefixes manually is a chore. It’s also hard to keep track of where and which prefixes are needed. This plugin uses the Autoprefixer module to prefix properties and values according to the Can I Use database. Which means it will only add the necessary prefixes and not bloat your stylesheet. It even lets you specify what browsers you want to target. In addition it will remove existing prefixes which are no longer needed.

Works with CSS and SCSS, but not other preprocessors.

Install

Install Autoprefixer with Package Control and restart Sublime.

See the Autoprefixer version in use here.

Getting started

Options

(Preferences → Package Settings → Autoprefixer)

You can specify which browsers you need to support using an array of rules.

Default

Example

This will add the needed prefixes for the last version of each browser, all browsers with market share of more than 10% globally and 5% in the US, and Internet Explorer 7 and 8.

Keyboard shortcut

Project settings

Источник

Авто префикс sublime text

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.

Write your CSS rules without vendor prefixes (in fact, forget about them entirely):

Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You can try the interactive demo of Autoprefixer.

Twitter account for news and releases: @autoprefixer.

Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project with queries like > 5% (see Best Practices).

We recommend the use of these options over passing options to Autoprefixer so that the config can be shared with other tools such as babel-preset-env and Stylelint.

See Browserslist docs for queries, browser names, config format, and defaults.

Does Autoprefixer polyfill Grid Layout for IE?

Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this polyfill will not work in 100% of cases. This is why it is disabled by default.

Second, you need to test every fix with Grid in IE. It is not an enable and forget feature, but it is still very useful. Financial Times and Yandex use it in production.

Third, there is only very limited auto placement support. Read the Grid Autoplacement support in IE section for more details.

Does it add polyfills?

No. Autoprefixer only adds prefixes.

Most new CSS features will require client side JavaScript to handle a new behavior correctly.

Depending on what you consider to be a “polyfill”, you can take a look at some other tools and libraries. If you are just looking for syntax sugar, you might take a look at:

Developers are often surprised by how few prefixes are required today. If Autoprefixer doesn’t add prefixes to your CSS, check if they’re still required on Can I Use.

Browser teams can remove some prefixes before others, so we try to use all combinations of prefixed/unprefixed values.

But PostCSS has plugins to convert CSS to unprefixed state. Use postcss-unprefix before Autoprefixer.

No, Autoprefixer works only with browsers prefixes from Can I Use. But you can use postcss-epub for prefixing ePub3 properties.

system-ui is technically not a prefix and the transformation is not future-proof. You can use postcss-font-family-system-ui to transform system-ui to a practical font-family list.

In Gulp you can use gulp-postcss with autoprefixer npm package.

With gulp-postcss you also can combine Autoprefixer with other PostCSS plugins.

And create a postcss.config.js with:

Then create postcss.config.js :

You can use the postcss-cli to run Autoprefixer from CLI:

You can use Autoprefixer with PostCSS in your Node.js application or if you want to develop an Autoprefixer plugin for a new environment.

There is also a standalone build for the browser or for a non-Node.js runtime.

You can use html-autoprefixer to process HTML with inlined CSS.

Text Editors and IDE

Autoprefixer should be used in assets build tools. Text editor plugins are not a good solution, because prefixes decrease code readability and you will need to change values in all prefixed properties.

I recommend you to learn how to use build tools like Parcel. They work much better and will open you a whole new world of useful plugins and automation.

If you can’t move to a build tool, you can use text editor plugins:

Autoprefixer uses the PostCSS warning API to warn about really important problems in your CSS:

You can get warnings from result.warnings() :

Every Autoprefixer runner should display these warnings.

Autoprefixer was designed to have no interface – it just works. If you need some browser specific hack just write a prefixed property after the unprefixed one.

If some prefixes were generated incorrectly, please create an issue on GitHub.

You can use these plugin options to control some of Autoprefixer’s features.

You should set them inside the plugin like so:

If you do not need Autoprefixer in some part of your CSS, you can use control comments to disable Autoprefixer.

There are three types of control comments:

You can also use comments recursively:

Note that comments that disable the whole block should not be featured in the same block twice:

Function autoprefixer(options) returns a new PostCSS plugin. See PostCSS API for plugin usage documentation.

Available options are:

Plugin object has info() method for debugging purpose.

You can use PostCSS processor to process several CSS files to increase performance.

Environment variables are useful, when you want to change Autoprefixer options but don’t have access to config files. Create React App is a good example of this.

Using environment variables to support CSS Grid prefixes in Create React App

Replace autoplace with no-autoplace in the above example if you prefer to disable Autoprefixer Grid autoplacement support.

Now when you run npm start you will see CSS Grid prefixes automatically being applied to your output CSS.

See also Browserslist environment variables for more examples on how to use environment variables in your project.

Grid Autoplacement support in IE

Autoprefixer will only autoplace grid cells if both grid-template-rows and grid-template-columns has been set. If grid-template or grid-template-areas has been set, Autoprefixer will use area based cell placement instead.

Autoprefixer supports autoplacement by using nth-child CSS selectors. It creates [number of columns] x [number of rows] nth-child selectors. For this reason Autoplacement is only supported within the explicit grid.

Beware of enabling autoplacement in old projects

Be careful about enabling autoplacement in any already established projects that have previously not used Autoprefixer’s grid autoplacement feature before.

If this was your html:

The following CSS will not work as expected with the autoplacement feature enabled:

Swapping the rules around will not fix the issue either:

One way to deal with this issue is to disable autoplacement in the grid-declaration rule:

The absolute best way to integrate autoplacement into already existing projects though is to leave autoplacement turned off by default and then use a control comment to enable it when needed. This method is far less likely to cause something on the site to break.

Note that the grid: «no-autoplace» setting and the /* autoprefixer grid: no-autoplace */ control comment share identical functionality to the grid: true setting and the /* autoprefixer grid: on */ control comment. There is no need to refactor old code to use no-autoplace in place of the old true and on statements.

Both columns and rows must be defined

Autoplacement only works inside the explicit grid. The columns and rows need to be defined so that Autoprefixer knows how many nth-child selectors to generate.

Repeat auto-fit and auto-fill are not supported

No manual cell placement or column/row spans allowed inside an autoplacement grid

Elements must not be manually placed or given column/row spans inside an autoplacement grid. Only the most basic of autoplacement grids are supported. Grid cells can still be placed manually outside the the explicit grid though. Support for manually placing individual grid cells inside an explicit autoplacement grid is planned for a future release.

If manual cell placement is required, we recommend using grid-template or grid-template-areas instead:

Do not create ::before and ::after pseudo elements

Источник

Авто префикс sublime text

Подготовка Sublime Text 3 к работе

Установка редактора под Windows не вызывает никаких затруднений – просто следуйте указаниям. Можно упомянуть только один нюанс – по ходу установки можно отметить чекбокс, чтобы добавить Sublime Text в контекстное меню операционной системы. Т.е. при клике правой клавишей мыши на каком-либо файле, его можно будет сразу открыть в данном редакторе.

Установка и удаление плагинов и тем

Для установки выполняем следующие шаги:

Темы устанавливаются так же, как и плагины. При этом добавится 4-й шаг: нужно зайти в Preferences > Settings и далее в Preferences.sublime-settings – User добавить тему. Если конкретнее, то добавить примерно такой код:

Плагины для Sublime Text 3

Кто бы что ни говорил или писал, но для начала не помешает зайти на страничку популярных плагинов и выбрать те, которые подойдут непосредственно Вам. Также я бы порекомендовал перед установкой плагина ознакомиться с его документацией, потому как могут быть нюансы. Ну а ниже перечислю те плагины, которые использую сам:

EditorConfig

Работать приходится с разными проектами и с разными людьми. Дабы определить единый стиль кода и придерживаться его и нужен EditorConfig. Подробнее об этом плагине можно почитать здесь

SideBarEnhancement

Расширяет функционал сайдбара. Надо признать, что у самого Sublime этот функционал уж очень скуден.

SublimeCodeIntel

Довольно удобная штука – позволяет «прыгнуть» в файл и на строку определения класса или метода. И вот об упомянутых выше нюансах – до установки плагина надо убедиться, что CodeIntel установлен в вашей системе, о чём подробнее в документации.

BracketHighlighter

Подсвечивает парные скобки и теги.

PHP Companion

DocBlockr

Я противник комментариев как таковых – если понимаешь, что надо написать комментарий к коду, то тут надо не комментарии писать, а код переписывать. Но это не касается комментариев DocBlock, написание которых и упрощает данный плагин.

TrailingSpaces

Подсвечивает пробелы в конце строк и может удалять их при сохранении. По умолчанию опция удаления отключена. Чтобы её включить, надо зайти в Preferences > Package Settings > Trailing Spaces > Settings User и вставить следующее:

A File Icon

В сайдбаре к названиям файлов добавляет иконки. Так воспринимать информацию гораздо удобнее.

Emmet

Незаменимая вещь для вёрстки, значительно ускоряет процесс, позволяя расширять табом аббревиатуры HTML, XML, HAML и CSS/SASS/LESS/Stylus. Если раньше не работали с Emmet, то на первых порах будет полезна вот эта шпаргалка.

Autoprefixer

Ещё один очень полезный инструмент для фронтенда. Не надо больше думать о вендорных префиксах – плагин их вставляет в соответствии с данными caniuse.com. Работает только с препроцессорами CSS, SCSS и требует предустановленного NodeJS. Подробнее здесь. Я добавляю префиксы для двух последних версий браузеров, то бишь мои настройки такие:

Color Highlighter

Полагаю, из названия уже понятно о чём речь. Поставляется вместе с конвертором цветов. Настроек достаточно, поэтому следует почитать доки.

С основными плагинами вроде всё. Что касается конкретных фреймворков или библиотек– тут уж кто с чем работает. Можно лишь сказать, что, как минимум, помимо подсветки желательно также ставить и плагины сниппетов. Лично у меня ещё установлены:
Laravel Blade Highlighter, Blade Snippets, Babel, Babel Snippets, Vue Syntax Highlight, Vuejs Snippets, Sass, LESS, Pug.

Следует упомянуть такие плагины как Git или Laravel Artisan, но им я всё-таки предпочитаю консоль.

О горячих клавишах

Практически полный перечень находится здесь. Я же приведу лишь небольшую выдержку комманд, которые использую чаще всего:

И в завершение. Из редактора IDE не слепить, но с другой стороны – а нужно ли? Я пробовал NetBeans, Eclipse, PhpStorm, но в итоге (наряду с последним) всё равно продолжаю пользоваться Sublime. Этот быстрый на подъём и шустрый редактор меня полностью устраивает.

Источник