Skip to content

Mundarija tarjima qilindi #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 20, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
253 changes: 252 additions & 1 deletion README-UZ.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# PostCSS Sort Media Queries
# PostCSS tartiblash media so'rovlari

[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/solversgroup/postcss-sort-media-queries.svg
Expand All @@ -13,3 +13,254 @@
<img src="logo.svg?sanitize=true" align="right" title="PostCSS sort media queries logotype" width="100" height="100">

🌏 [**English**](README.md) ▫ **O'zbek**

[PostCSS] CSS media so'rovlarini **mobil qurilma** va **ish stoli kompyuter** metodologiyalari bilan ularni saralash va birlashtirish uchun xizmat qiladi.



> 5.0.0 plaginini qo'llab-quvvatlaydigan [Media funksiyasi turlari: “diapazon”](https://www.w3.org/TR/mediaqueries-4/#mq-ranges)


## Mundarija

- [Onlayn demo](#onlayn-demo)
- [Misollar](#misollar)
- [Mobil qurilmalarni tartiblash](#mobil-qurilmalarni-tartiblash)
- [Ish stoli kompyuter qurilmalarni tartiblash](#ish-stoli-kompyuter-qurilmalarni-tartiblash)
- [O'rnatish](#ornatish)
- [Foydalanish](#foydalanish)
- [Optsiyalar](#optsiyalar)
- [Saralash](#saralash)
- [Maxsus tartiblash funksiyasi](#maxsus-tartiblash-funksiyasi)
- [Saralash konfiguratsiyasi](#saralash-konfiguratsiyasi)
- [O'zgarishlar jurnali](#ozgarishlar-jurnali)
- [Litsenziya](#litsenziya)
- [Boshqa PostCSS plaginlari](#boshqa-postcss-plaginlari)
- [Rahmat 💪](#rahmat)


## Onlayn demo

Bu yerda: [onlayn demo](https://postcss-sort-media-queries.github.io)


## Misollar

### Mobil qurilmalarni tartiblash

**oldin**

```css
@media screen and (max-width: 640px) {
.head { color: #cfcfcf }
}
@media screen and (max-width: 768px) {
.footer { color: #cfcfcf }
}
@media screen and (max-width: 640px) {
.main { color: #cfcfcf }
}
@media screen and (min-width: 1280px) {
.mobile-first { color: #cfcfcf }
}
@media screen and (min-width: 640px) {
.mobile-first { color: #cfcfcf }
}
@media screen and (max-width: 640px) {
.footer { color: #cfcfcf }
}
```

**keyin**

```css
@media screen and (min-width: 640px) {
.mobile-first { color: #cfcfcf }
}
@media screen and (min-width: 1280px) {
.mobile-first { color: #cfcfcf }
}
@media screen and (max-width: 768px) {
.footer { color: #cfcfcf }
}
@media screen and (max-width: 640px) {
/* birlashtirilgan */
.head { color: #cfcfcf }
.main { color: #cfcfcf }
.footer { color: #cfcfcf }
}
```

### Ish stoli kompyuter qurilmalarni tartiblash

**oldin**
```css
@media screen and (max-width: 640px) {
.header { color: #cdcdcd }
}
@media screen and (min-width: 760px) {
.desktop-first { color: #cdcdcd }
}
@media screen and (max-width: 640px) {
.main { color: #cdcdcd }
}
@media screen and (min-width: 1280px) {
.desktop-first { color: #cdcdcd }
}
@media screen and (max-width: 760px) {
.footer { color: #cdcdcd }
}
@media screen and (max-width: 640px) {
.footer { color: #cdcdcd }
}
```

**keyin**

```css
@media screen and (max-width: 760px) {
.footer { color: #cdcdcd }
}
@media screen and (max-width: 640px) {
/* combined */
.header { color: #cdcdcd }
.main { color: #cdcdcd }
.footer { color: #cdcdcd }
}
@media screen and (min-width: 760px) {
.desktop-first { color: #cdcdcd }
}
@media screen and (min-width: 1280px) {
.desktop-first { color: #cdcdcd }
}
```

## O'rnatish

Birinchi navbatda, modulni o'rnating:

```
npm install postcss postcss-sort-media-queries --save-dev
```

## Foydalanish

Mavjud PostCSS konfiguratsiyasi uchun loyihangizni tekshiring: `postcss.config.js`
loyiha ildizida, `package.json` ichidagi `"postcss"` bo`limida
yoki to'plam konfiguratsiyasida "postcss".

Agar siz allaqachon PostCSS-dan foydalansangiz, plaginni plaginlar ro'yxatiga qo'shing:

```diff
module.exports = {
plugins: [
+ require('postcss-sort-media-queries')({
+ sort: 'mobile-first' default value
+ }),
require('autoprefixer')
]
}
```

yoki maxsus tartiblash funksiyasi bilan
```diff
module.exports = {
plugins: [
+ require('postcss-sort-media-queries')({
+ sort: function(a, b) {
+ // custom sorting function
+ }
+ }),
require('autoprefixer')
]
}
```

Agar siz PostCSS-dan foydalanmasangiz, uni [official docs] ga
muvofiq qo'shing va sozlamalarda ushbu plaginni o'rnating.


## Optsiyalar

> Saralash asosida ishlaydi, funktsiyasi [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries)

### Saralash

Ushbu parametr **string** yoki **funktsiya** qiymatlarini qo'llab-quvvatlaydi.

- `{string}` `'mobile-first'` - (standart) mobil qurilmalarni tartiblash
- `{string}` `'desktop-first'` - kompyuter qurilmalarni tartiblash
- `{function}` o'zingizning saralash funksiyangiz

#### `'mobil-qurilmalar'`

```js
postcss([
sortMediaQueries({
sort: 'mobile-first' // standart
})
]).process(css);
```

#### `'kompyuter-qurilmalar'`

```js
postcss([
sortMediaQueries({
sort: 'desktop-first'
})
]).process(css);
```

### Maxsus tartiblash funksiyasi
```js
postcss([
sortMediaQueries({
function(a, b) {
return a.localeCompare(b);
}
})
]).process(css);
```

Ishbu misolda barcha media so'rovlaringiz A dan Z gacha tartib bo'yicha saralanadi

Ushbu tartiblash funksiyasi to'g'ridan-to'g'ri barcha media so'rovlaringiz qatorini Array#sort() usuliga o'tkaziladi.

### Saralash konfiguratsiyasi

Ushbu konfiguratsiya orqali siz tartiblash xatti-harakatlarini boshqarishingiz mumkin.

```js
postcss([
sortMediaQueries({
configuration: {
unitlessMqAlwaysFirst: true, // yoki false
}
})
]).process(css);
```

Yoki muqobil ravishda loyihangiz ildizida “sort-css-mq.config.json” faylini yarating. Yoki “package.json”ingizga “sortCssMQ: {}” xususiyatini qo‘shing.

---

## O'zgarishlar jurnali

Bu yerda: [Releases history]

## Litsenziya

[MIT]

## Boshqa PostCSS plaginlari

- [`postcss-momentum-scrolling`](https://github.com/solversgroup/postcss-momentum-scrolling) - iOS tizimida toʻlib-toshgan (aylantirish, avtomatik) elementlar uchun **momentum** uslubidagi aylantirish harakatini qoʻshish uchun plagin (`-webkit-overflow-scrolling:touch`)

## Rahmat

- Andrey Sitnik [@ai](https://github.com/ai)
- Oleh Dutchenko [@dutchenkoOleg](https://github.com/dutchenkoOleg)
- Jakub Caban [@Lustmored](https://github.com/Lustmored)
- Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
- Kai Falkowski [@SassNinja](https://github.com/SassNinja)