Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
petrukhin committed Dec 11, 2023
1 parent d0aa96e commit e808d33
Showing 1 changed file with 57 additions and 55 deletions.
112 changes: 57 additions & 55 deletions packages/postcss-logical-fallback/README.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,60 @@
# postcss-logical-fallback

[PostCSS] плагин для поддержки логических свойств в старых браузерах
This is [postcss](https://github.com/postcss/postcss) plugin for logical css props support in legacy browsers. Main idea of the plugin is
an opportunity to write logical styles like in modern browsers in legacy browsers. When all of your
supported browsers will support all modern logical spec you can just delete this plugin and don't rewrite
your styles. Second idea of the plugin is to use logical props where they supported and do fallback only in
non-supported browsers.

[PostCSS]: https://github.com/postcss/postcss
Main purpose of this plugin is creating fallbacks for bad supported logical props in legacy browsers.
We have distinguished:
- Absolute positioning props like
`inset-inline-start`, `inset-inline-end`,`inset-block-start`
and `inset-block-end` due to bad support in safari (14.1+ on desktop, 14.5+ on mobile),
chrome (87+) and firefox (66+) and due to high prevalence of these props.

Цель данного плагина в том, чтобы создавать фолбеки для плохо поддерживаемых логических
свойств.
Мы выделили:
- Cвойства для абсолютного позиционирования
`inset-inline-start`, `inset-inline-end`,`inset-block-start`
и `inset-block-end` из-за плохой поддержки в safari (14.1+ на десктопе, 14.5+ на мобилке),
chrome (87+) и firefox (66+) и большой распространенности данных свойств
- Shorthand props like `inset-inline`, `inset-block`, `margin-inline`, `margin-block`,
`padding-inline`, `padding-block` due to same bad support in browsers

- Свойства сокращения `inset-inline`, `inset-block`, `margin-inline`, `margin-block`,
`padding-inline`, `padding-block` из-за той же плохой поддержки в старых браузерах
Full logical props support you can see [here](https://caniuse.com/css-logical-props)

Подробнее про логические свойства, rtl и зачем нужен этот плагин
можно почитать на [вики](https://wiki.yandex-team.ru/i18n/guide/rtl/)
We recommend to use this plugin with [autoprefixer](https://github.com/postcss/autoprefixer)
and setup our plugin before autoprefixer

Данный плагин стоит использовать с [autoprefixer](https://github.com/postcss/autoprefixer)
и ставить по порядку до него
**WARNING**
Plugin is based on @supports at rule, so it has to be supported, see on [can i use](https://caniuse.com/css-featurequeries)

## Примеры
### Фолбек для свойств абсолютного позиционирования
До
## Usage

**Step 1:** install plugin and postcss

```sh
npm install --save-dev postcss postcss-logical-fallback
```

**Step 2:** Find config at the root of your project: `postcss.config.js`,
`"postcss"` section in `package.json`
or `postcss` section in your build config.

If you haven't already use postcss you should setup it according to
[official documentation](https://github.com/postcss/postcss#usage) and add postcss-logical-fallback
after it.

**Step 3:** Add plugin to the plugin list

```diff
module.exports = {
plugins: [
+ require('postcss-logical-fallback'),
require('autoprefixer')
]
}
```

## Examples
### Fallback for absolute positioning props

Before

```css
.class {
Expand All @@ -32,7 +63,7 @@ chrome (87+) и firefox (66+) и большой распространеннос
}
```

После
After

```css
@supports (inset-block-start: 12px) {
Expand All @@ -55,8 +86,9 @@ chrome (87+) и firefox (66+) и большой распространеннос
}
```

### Фолбек для сокращений
До
### Fallback for shorthands

Before

```css
.class {
Expand All @@ -65,7 +97,7 @@ chrome (87+) и firefox (66+) и большой распространеннос
}
```

После
After

```css
.class {
Expand All @@ -77,9 +109,9 @@ chrome (87+) и firefox (66+) и большой распространеннос
}
```

### Фолбек для сокращений inset
### Fallback for inset shorthands

До
Before

```css
.class {
Expand All @@ -91,7 +123,7 @@ chrome (87+) и firefox (66+) и большой распространеннос
}
```

После
After

```css
@supports (inset-inline: 12px) {
Expand Down Expand Up @@ -122,33 +154,3 @@ chrome (87+) и firefox (66+) и большой распространеннос
}

```

Больше примеров можно найти [здесь](https://wiki.yandex-team.ru/i18n/guide/rtl/#primerytransformacijjplagina)

## Использование

**Шаг1:** Установите плагин:

```sh
npm install --save-dev postcss postcss-logical-fallback
```

**Шаг 2:** Найдите конфиг postcss в корне проекта: `postcss.config.js`,
`"postcss"` секцию в `package.json`
иди `postcss` в конфиге вашего сборщика.

Если вы еще не используете postcss, то установите его в соответствии с
[официальной документацией] и добавьте данный плагин после установки

**Шаг 3:** Добавьте плагин в список плагинов

```diff
module.exports = {
plugins: [
+ require('postcss-logical-fallback'),
require('autoprefixer')
]
}
```

[официальной документацией]: https://github.com/postcss/postcss#usage

0 comments on commit e808d33

Please sign in to comment.