PostCSS, Autoprefixer, browserslist va Lightning CSS

Qisqacha: PostCSS — CSS'ni plaginlar bilan avtomatik o'zgartiradigan vosita: Autoprefixer kerakli -webkit- kabi prefikslarni qo'shadi, postcss-preset-env yangi sintaksisni eski brauzerlarga tarjima qiladi, cssnano faylni siqadi. Qaysi brauzerlarni qo'llab-quvvatlashni .browserslistrc dagi so'rov aytadi (defaults, baseline widely available). Lightning CSS — shu uch ishni bitta tez vositada qiladi; Vite 8 CSS'ni aynan u bilan siqadi.

Bu darsda

• PostCSS nima ekanini va nega uning o'zi hech narsa qilmasligini tushuntira olasiz.
• Autoprefixer bilan prefikslarni avtomatik qo'shasiz va eskirganlarini olib tashlaysiz.
• browserslist so'rovlarini yozasiz va qaysi brauzerlarni qamrashini tekshirasiz.
• postcss-preset-env, cssnano va Lightning CSS'ni ishga tushirib, natijalarini solishtirasiz.
• Vite loyihada CSS qaysi bosqichlardan o'tishini ayta olasiz.

Oldin bilishingiz kerak: Brauzer mosligi: Baseline va @supports, Sass/SCSS 2, display va yashirish.

1. Nega bu kerak?

display va yashirish darsida «Bahor» tugmasiga ikki qator yozgan edik:

button {
  -webkit-user-select: none;
  user-select: none;
}

Birinchi qator — Safari uchun. Portfolio'da ham xuddi shunday juftlik bor: -webkit-text-size-adjust (Mobil qurilma tuzoqlari). Savol: qaysi xususiyatga prefiks kerakligini qayerdan bilasiz? Har birini MDN'dan qidirish kerak. Ertaga Safari yangilanib, prefiks keraksiz bo'lsa — kim eslab, o'chiradi?

Ikkinchi muammo — yangi sintaksis. Brauzer mosligi darsida ko'rdik: native nesting yoki oklch() eski brauzerda ishlamaydi. Ularni eski yozuvga qo'lda tarjima qilish — zerikarli va xatoga moyil ish.

Uchinchisi — hajm. Izohlar, bo'sh joylar va qator ko'chirishlar dasturchiga kerak, brauzerga emas.

Pochtani tasavvur qiling. Siz xat yozasiz — bir marta. Pochta bo'limi har manzilga qarab kerakli markani yopishtiradi: Samarqandga bittasi, chet elga boshqasi. Siz markalar jadvalini yodlamaysiz. Bugungi vositalar CSS'ingiz uchun xuddi shu pochta bo'limi: siz toza, zamonaviy CSS yozasiz, ular esa "manzil"ga — qo'llab-quvvatlanadigan brauzerlarga — moslaydi.

2. PostCSS: CSS uchun konveyer

2.1 Qanday ishlaydi

PostCSS — CSS faylni o'qib, uni daraxt ko'rinishiga keltiradigan va plaginlarga o'zgartirishga beradigan vosita. Bu daraxt AST (Abstract Syntax Tree — mavhum sintaksis daraxti) deb ataladi. Unda har qoida — shox, har deklaratsiya — barg. CSS nima darsidagi "qoida → selektor → deklaratsiya → xususiyat va qiymat" sxemasini eslang — AST aynan shu tuzilma, faqat dastur ichida.

flowchart LR
  A["asosiy.css"] --> P["PostCSS:<br/>o'qish"]
  P --> T["AST daraxti"]
  T --> P1["Plagin 1<br/>Autoprefixer"]
  P1 --> P2["Plagin 2<br/>cssnano"]
  P2 --> Y["PostCSS:<br/>yozish"]
  Y --> B["dist/asosiy.css"]

Nimaga qarang: PostCSS'ning o'zi CSS'ni o'qiydi va qayta yozadi, xolos. O'zgartirishni plaginlar qiladi. Plaginsiz PostCSS faylni deyarli o'zgarishsiz qaytaradi. Shuning uchun "PostCSS ishlataman" degani aslida "PostCSS plaginlarini ishlataman" degani.

Nomi "post" bo'lsa ham, Sass kabi preprotsessorga qarama-qarshi emas. Bir loyihada ikkalasi ketma-ket ishlaydi: avval Sass .scss ni CSS'ga aylantiradi, keyin PostCSS o'sha CSS'ni brauzerlarga moslaydi.

2.2 O'rnatish

Yangi papkada (npm'ning chuqur imkoniyatlari — 16-qismda, hozir buyruqlarni aynan takrorlang):

npm init -y
npm install --save-dev postcss postcss-cli autoprefixer

Uchta paket: postcss — asosiy dvigatel, postcss-cli — uni terminaldan ishga tushiradigan buyruq, autoprefixer — birinchi plagin. Versiyalarni npm ls ko'rsatadi:

postcss90@1.0.0 C:\Users\...\postcss90
+-- autoprefixer@10.6.1
+-- postcss-cli@12.0.0
`-- postcss@8.5.28

3. Autoprefixer

3.1 Birinchi ishga tushirish

assets/css/asosiy.css — prefikssiz, toza CSS:

button {
  user-select: none;
}

html {
  text-size-adjust: 100%;
}

.aksiya {
  backdrop-filter: blur(4px);
  mask-image: linear-gradient(black, transparent);
}

input::placeholder {
  color: #5b6660;
}

.taom-karta {
  display: flex;
  position: sticky;
  appearance: none;
}

Buyruq: kirish fayli, -u bilan plagin (--use ning qisqasi), --no-map — source map kerak emas, -d — natija qaysi papkaga yozilsin.

npx postcss assets/css/asosiy.css -u autoprefixer --no-map -d dist/

dist/asosiy.css:

button {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

html {
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

.aksiya {
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(black, transparent);
          mask-image: linear-gradient(black, transparent);
}

input::-moz-placeholder {
  color: #5b6660;
}

input::placeholder {
  color: #5b6660;
}

.taom-karta {
  display: flex;
  position: sticky;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

Nimaga qarang:

• user-select, mask-image, appearance ga prefikslar qo'shildi. user-select va text-size-adjust — Baseline emas: birinchisini Safari faqat -webkit- bilan tushunadi, ikkinchisi kompyuterdagi Firefox va Safari'da umuman yo'q (telefonlar uchun xususiyat). Bo'sh joylar bilan tekislash — Autoprefixer'ning odati, ma'noga ta'sir qilmaydi.
• display: flex va position: sticky ga hech narsa qo'shilmadi — ularga bugungi brauzerlarda prefiks kerak emas.
• ::placeholder uchun alohida qoida paydo bo'ldi. Nega birlashtirilmadi? Brauzer selektorlar ro'yxatidagi bittasini tushunmasa, butun qoidani tashlaydi. Alohida qoida bo'lsa, har brauzer o'zinikini oladi.
• -moz- ko'p — bunga sabab keyingi bo'limda, browserslist'da.

3.2 Eskirgan prefikslarni olib tashlash

Autoprefixer faqat qo'shmaydi. Eski loyihadan qolgan kod:

.taom-karta {
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 2px #000;
  box-shadow: 0 1px 2px #000;
}

Autoprefixer'dan keyin:

.taom-karta {
  border-radius: 8px;
  box-shadow: 0 1px 2px #000;
}

-webkit-border-radius ga 2010-yillarning boshidan beri hech bir brauzer muhtoj emas — Autoprefixer uni o'chirdi. Bu uning eng foydali tomonlaridan biri: prefikslar ro'yxati brauzerlar bilan birga yangilanib boradi, siz esa hech narsani eslab qolmaysiz.

Tekshirib ko'ring: Autoprefixer bor loyihada dasturchi qo'lda -webkit-user-select: none; yozdi. Bu xatomi?

4. browserslist: "qaysi brauzerlar?"

4.1 So'rov

Autoprefixer qaysi prefiksni qo'shishni qayerdan biladi? Unga ikki narsa kerak:

1. Qaysi brauzerlarni qo'llab-quvvatlaysiz.
2. Har brauzer har xususiyatni qanday tushunadi — bu ma'lumot caniuse bazasidan olinadi (Brauzer mosligi darsida ko'rgan sayt).

Birinchisini browserslist aytadi — brauzerlar ro'yxatini qisqa so'rov bilan yozish usuli. U Autoprefixer bilan birga o'rnatiladi va terminalda ham ishlaydi:

npx browserslist "last 1 chrome version, safari 15"

chrome 154
safari 15

, — "yoki": ikkala guruh ham ro'yxatga kiradi. Asosiy so'rovlar:

Qo'shimcha kalit so'zlar: and — ikkala shart ham bajarilsin, not — chiqarib tashla.

4.2 defaults

So'rov yozilmasa, browserslist defaults ni oladi. U aslida to'rtta so'rovning qisqasi — tekshirdik, ro'yxatlar bir xil:

> 0.5%, last 2 versions, Firefox ESR, not dead

Firefox ESR — kompaniyalar uchun uzoq qo'llab-quvvatlanadigan Firefox versiyasi. npx browserslist "defaults" 35 ta brauzer versiyasini chiqardi, ular orasida:

chrome 109
kaios 2.5
op_mini all

Mana -moz- larning sababi. KaiOS 2.5 — tugmali "aqlli" telefonlar uchun tizim, uning brauzeri eski Firefox asosida. U defaults ga last 2 versions orqali kirgan: KaiOS'ning oxirgi ikki versiyasi — 3.0 va 2.5. Tekshirdik: > 0.5% ro'yxatida KaiOS yo'q. Autoprefixer esa ro'yxatdagi har brauzerga, jumladan unga ham -moz- qo'shdi. Qamrov (coverage) buyrug'i bilan tekshiramiz:

npx browserslist --coverage "defaults"

These browsers account for 84.65% of all users globally

Tarjimasi: "Bu brauzerlar dunyodagi barcha foydalanuvchilarning 84.65 foizini tashkil qiladi." Raqamlar caniuse ma'lumotlaridan, har yangilanishda o'zgaradi.

4.3 baseline widely available

Brauzer mosligi darsidagi Baseline'ni browserslist ham tushunadi:

npx browserslist --coverage "baseline widely available"

These browsers account for 87.4% of all users globally

Bu so'rov 133 ta versiyani qamradi: Chrome, Edge, Firefox va Safari'ning oxirgi taxminan ikki yarim yillik versiyalari. KaiOS va Opera Mini unda yo'q. Shu so'rov bilan Autoprefixer natijasi boshqacha — -moz- yo'qoldi, lekin Safari uchun yangisi paydo bo'ldi:

.aksiya {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  mask-image: linear-gradient(black, transparent);
}

Ro'yxatdagi eski Safari versiyalari backdrop-filter ni faqat -webkit- bilan biladi. Baseline ma'lumotiga ko'ra bu xususiyat yangi Baseline (2024-yil sentyabr) — eski brauzerlarda prefikssiz yo'q. mask-image ni esa ro'yxatdagi hamma brauzer prefikssiz ham tushunadi. Bitta CSS, ikki so'rov — ikki xil natija. Autoprefixer "ko'r-ko'rona" emas, ro'yxatga qarab ishlaydi.

O'zbekistonga qarab ham so'rov yozsa bo'ladi: npx browserslist --coverage=UZ "defaults" bizda 71.89% of all users in the UZ ko'rsatdi. Mintaqaviy statistika umumiy statistikadan kam aniq — uni qo'shimcha ma'lumot sifatida ishlating.

4.4 So'rov qayerga yoziladi

Har buyruqqa so'rov yozish o'rniga, uni loyihada bir marta saqlaymiz. Ikki yo'l bor. Loyiha ildizida .browserslistrc fayli:

baseline widely available

Yoki package.json ichida:

{
  "browserslist": ["baseline widely available"]
}

Ikkalasidan bittasini tanlang. Keyin Autoprefixer, postcss-preset-env, Lightning CSS va JavaScript vositalari (Babel — Transpilyatsiya darsida) shu bitta ro'yxatni o'qiydi. Loyiha qaysi brauzerlarga mo'ljallangani — bitta joyda, hujjat sifatida.

Diqqat: browserslist sozlamani CSS fayl turgan papkadan yuqoriga qarab qidiradi, terminal ochilgan papkadan emas. Tekshirdik: loyihadan tashqaridagi faylni (/tmp/asl.css) ishlaganimizda .browserslistrc e'tiborga olinmadi va defaults ishladi. Faylni loyiha ichida saqlang.

Tekshirib ko'ring: .browserslistrc da last 1 chrome version yozilgan. Nega bu yomon tanlov?

5. Boshqa plaginlar

5.1 postcss-preset-env: kelajak sintaksisi bugun

postcss-preset-env — yangi CSS imkoniyatlarini browserslist'dagi brauzerlar tushunadigan shaklga keltiradigan plaginlar to'plami. O'rnatamiz va sinaymiz:

npm install --save-dev postcss-preset-env cssnano

yangi.css:

@custom-media --planshet (width >= 40rem);

.taom-karta {
  color: oklch(48.4% 0.097 158.9);
  background: color-mix(in oklch, #2f6b3a 8%, #fffaf0);

  & .narx {
    color: #b4461a;
  }

  @media (--planshet) {
    padding: 1.5rem;
  }
}

@custom-media — Media queries darsida va'da qilingan "nomli breakpoint": --planshet bir marta e'lon qilinadi, keyin nomi bilan ishlatiladi. Brauzerlarda u hali yo'q, lekin build vositasi uni oddiy media query'ga aylantira oladi.

defaults bilan (.browserslistrc yo'q):

npx postcss yangi.css --use postcss-preset-env --no-map

.taom-karta {
  color: rgb(31, 111, 74);
  background: rgb(242, 237, 221);
}
.taom-karta .narx {
    color: #b4461a;
  }
@media (min-width: 40rem) {
  .taom-karta {
    padding: 1.5rem;
}
  }

Nimaga qarang:

• oklch() va color-mix() tayyor rgb() ranglarga hisoblandi. rgb(31, 111, 74) — portfolio'ning brend rangi #1f6f4a.
• Nesting yoyildi: .taom-karta .narx alohida qoida.
• @custom-media va width >= 40rem eski min-width: 40rem ga aylandi.
• Chekinishlar g'alati — plaginlar tekislash bilan shug'ullanmaydi. Buni Prettier to'g'rilaydi (Stylelint va Prettier).

Endi .browserslistrc da baseline widely available. Xuddi shu buyruq:

.taom-karta {
  color: oklch(48.4% 0.097 158.9);
  background: color-mix(in oklch, #2f6b3a 8%, #fffaf0);

  & .narx {
    color: #b4461a;
  }

  @media (width >= 40rem) {
    padding: 1.5rem;
  }
}

Deyarli hech narsa o'zgarmadi: ro'yxatdagi brauzerlar oklch, color-mix va nesting'ni biladi. Faqat @custom-media almashdi — uni hech kim bilmaydi. Plagin "kerak bo'lsa tarjima qil" tamoyilida ishlaydi.

Diqqat: defaults bilan oklch() butunlay rgb() ga almashdi — zamonaviy brauzerlar ham endi rgb() oladi. Ekranda farq deyarli yo'q, lekin keng rang gamutidagi (Ranglar 2) yorqinlik yo'qoladi. Eski brauzerlarni qo'llab-quvvatlash — har doim biror narxga.

5.2 cssnano: siqish

cssnano — PostCSS'ga asoslangan siquvchi (minifier): bo'sh joy, izoh va ortiqcha belgilarni olib tashlaydi, qiymatlarni qisqartiradi. Plaginlar ketma-ket beriladi — avval prefiks, keyin siqish:

npx postcss assets/css/asosiy.css --use autoprefixer cssnano --no-map

-o berilmadi — natija terminalga chiqadi:

button{-webkit-user-select:none;-moz-user-select:none;user-select:none}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}.aksiya{backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}input::-moz-placeholder{color:#5b6660}input::placeholder{color:#5b6660}.taom-karta{display:flex;position:sticky;-webkit-appearance:none;-moz-appearance:none;appearance:none}

black — #000 ga qisqardi. Portfolio'ning yig'ilgan CSS'ida (izohlari bilan) cssnano 13 390 baytni 7 541 baytga tushirdi — deyarli ikki marta.

Ishlaganda bitta ogohlantirish ham chiqdi:

585:5	⚠  Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: l - 0.1
^..^ [postcss-calc]

Tarjimasi: "585-qator: leksik xato — noma'lum matn." Portfolio'da oklch(from var(--rang-asosiy) calc(l - 0.1) c h) qatori bor — Ranglar 3 darsidagi nisbiy rang. cssnano ichidagi postcss-calc plagini uni tushunmadi. Undagi l — rangning yorug'lik kanali, plagin uchun esa notanish so'z. Natija buzilmadi — qator o'zgarishsiz qoldi. Xulosa: eski plagin yangi sintaksisni tanimasligi mumkin. Ogohlantirishni o'qing va natijani tekshiring.

5.3 Sozlama fayli

Plaginlarni har safar --use bilan yozmaslik uchun postcss.config.mjs fayli yaratiladi:

export default {
  plugins: {
    autoprefixer: {},
  },
};

Bu — JavaScript fayli. export default — "bu faylning asosiy natijasi shu obyekt" degani; JavaScript modullarini ESM import darsida o'rganamiz, hozir faylni aynan nusxalang. autoprefixer: {} — "Autoprefixer plagini, qo'shimcha sozlamasiz". Endi buyruq qisqa: npx postcss assets/css/asosiy.css --no-map -o dist/asosiy.css — PostCSS sozlamani o'zi topadi.

Kengaytma .mjs tanlanishining sababi bor. postcss.config.js deb nomlasak, Node shunday ogohlantiradi:

Warning: Module type of file:///C:/Users/.../postcss.config.js is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to C:\Users\...\package.json.

Tarjimasi: "Fayl modul turi ko'rsatilmagan va u CommonJS sifatida o'qilmaydi. ES modul sintaksisi topilgani uchun qayta o'qilyapti — bu sekinroq. Ogohlantirishni yo'qotish uchun package.json ga "type": "module" qo'shing." CommonJS — Node'dagi eski modul yozuvi (require() bilan), ES modul — yangisi (export bilan). npm darsidagi "type": "module" shu. Ikki yo'l: .mjs kengaytmasi yoki "type": "module". Vite loyihalarida ikkinchisi odatda allaqachon bor.

6. Lightning CSS

6.1 Uch vosita — bittada

Lightning CSS — Rust tilida yozilgan CSS vositasi. U PostCSS plaginlarining uch asosiy ishini bitta dasturda qiladi: prefiks qo'shish, yangi sintaksisni tarjima qilish va siqish. Rust'da yozilgani uchun juda tez — katta loyihada bu soniyalar farqi.

Terminal versiyasi lightningcss-cli paketida:

npm install --save-dev lightningcss-cli
npx lightningcss --targets "defaults" --custom-media yangi.css

--targets — browserslist so'rovi, --custom-media — @custom-media ni yoqish. Natija:

.taom-karta {
  color: #1f6f4a;
  color: lab(41.4212% -32.0114 13.4044);
  background: #f2eddd;
  background: lab(93.7568% .0985861 8.108);
}

.taom-karta .narx {
  color: #b4461a;
}

@media (width >= 40rem) {
  .taom-karta {
    padding: 1.5rem;
  }
}

postcss-preset-env bilan solishtiring. Lightning CSS rangni boshqacha tarjima qildi. Avval eski brauzer uchun hex (#1f6f4a), keyin zamonaviyi uchun lab(). CSS nima darsidagi qoida ishlaydi: eski brauzer lab() ni tushunmay tashlaydi va hex'da qoladi, yangisi esa pastdagi qatorni oladi. Gamut yo'qolmadi. width >= 40rem esa o'zgarmadi — ro'yxatdagi brauzerlar bu yozuvni biladi.

Siqish — --minify (yoki -m) bayrog'i bilan:

npx lightningcss --targets "defaults" --minify assets/css/asosiy.css

button{-webkit-user-select:none;user-select:none}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}.aksiya{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(#000,#0000);mask-image:linear-gradient(#000,#0000)}input::placeholder{color:#5b6660}.taom-karta{appearance:none;display:flex;position:sticky}

E'tibor bering: xuddi shu defaults bilan natija Autoprefixer'nikidan biroz farq qiladi. Lightning CSS o'z moslik ma'lumotlaridan foydalanadi: backdrop-filter ga prefiks qo'shdi, appearance ga qo'shmadi. Ikkala vosita ham "to'g'ri" — ma'lumot manbalari boshqa.

Tekshirib ko'ring: Lightning CSS natijasida color ikki marta yozilgan: avval hex, keyin lab(). Bu xato emasmi?

6.2 Tuzoq: eski CLI

lightningcss-cli paketi alohida yangilanadi: npx lightningcss --version bizda lightningcss 1.0.0-alpha.72 ko'rsatdi. Undagi browserslist eski va baseline widely available so'rovini tushunmaydi — .browserslistrc da shu so'rov bilan --browserslist bayrog'ini bersak, dastur tushunarsiz panicked xabari bilan to'xtadi. Terminalda Lightning CSS'ni --targets "defaults" kabi klassik so'rov bilan ishlating. Vite ichidagi Lightning CSS esa boshqa, yangi paket (lightningcss, Vite 8.3.1 da — 1.33.0) — u bu muammoga ega emas.

7. Vite'da CSS yo'li

16-qismdan boshlab loyihalar Vite bilan quriladi (Vite I) — hozir bilish shart emas, lekin bugungi vositalar u yerda qayerda turishini ko'rib qo'ying. Vite 8.3.1 ning o'z sozlama tavsifidan (tekshirdik):

• Loyihada postcss.config.* bo'lsa, Vite CSS'ni PostCSS plaginlaridan o'tkazadi — alohida buyruq kerak emas.
• .scss fayl — avval Sass'ga (Sass/SCSS 1).
• Build paytida CSS siqilishi — standart holatda Lightning CSS bilan (build.cssMinify qiymati 'lightningcss').
• Maqsadli brauzerlar — build.target, standart qiymati 'baseline-widely-available': Vite buni Chrome 111, Edge 111, Firefox 114, Safari 16.4 deb tushunadi.

flowchart LR
  A["asosiy.scss"] --> S["Sass"]
  S --> P["PostCSS<br/>(config bo'lsa)"]
  C["asosiy.css"] --> P
  P --> L["Lightning CSS<br/>siqish, tarjima"]
  L --> D["dist/assets/<br/>index-hash.css"]

Kichik sinov: Vite loyihada postcss.config siz shu CSS'ni build qildik:

button {
  user-select: none;
}

.taom-karta {
  & .narx {
    color: oklch(53.7% 0.153 39.8);
  }
}

dist/assets/ dagi natija:

button{-webkit-user-select:none;user-select:none}.taom-karta .narx{color:oklch(53.7% .153 39.8)}

Nimaga qarang: hech narsa sozlamadik, lekin Safari prefiksi qo'shildi va nesting yoyildi — Chrome 111 native nesting'ni hali bilmaydi (u 120 da kelgan). oklch() esa qoldi — Chrome 111 uni biladi. Bu Lightning CSS'ning build.target bo'yicha ishi. Vite shuning uchun kichik loyihalarda alohida Autoprefixer'siz ham yaxshi ishlaydi.

8. Qaysi birini tanlash kerak

Qaysini tanlasangiz ham, browserslist so'rovi — bitta, loyiha ildizida. U loyihangiz kimlar uchun ekanini hujjatlashtiradi.

9. Ko'p uchraydigan xatolar

9.1 Sozlama e'tiborga olinmadi

.browserslistrc yozdingiz, natija o'zgarmadi. Ko'pincha CSS fayl loyiha papkasidan tashqarida yoki fayl nomida xato (.browserlistrc — "s" tushib qolgan). Tuzatish: fayl loyiha ildizida, nomi aniq .browserslistrc. Tekshirish: loyiha papkasida npx browserslist — ro'yxat so'rovingizga mosmi?

9.2 dist/ dagi faylni tahrirlash

Natija faylga qo'lda tuzatish kiritdingiz — keyingi build uni o'chirdi. Tuzatish: o'zgarish faqat manba faylda. dist/ — vosita yozadigan joy.

9.3 -o unutilgan

npx postcss asosiy.css --use autoprefixer — natija faylga emas, terminalga chiqdi. Tuzatish: -o dist/asosiy.css (bitta fayl) yoki -d dist/ (bir nechta fayl, papkaga). Manba faylning o'zini qayta yozadigan --replace bayrog'i ham bor — lekin u manba va natijani aralashtiradi, ehtiyot bo'ling.

9.4 postcss.config.js ogohlantirishi

MODULE_TYPELESS_PACKAGE_JSON ogohlantirishi. Tuzatish: postcss.config.mjs yoki package.json da "type": "module".

9.5 Plagin yangi sintaksisni tanimaydi

cssnano'ning Lexical error ogohlantirishi kabi. Tuzatish: natija faylda o'sha qatorni tekshiring. Buzilgan bo'lsa — plaginni yangilang yoki o'sha qismni o'chiring; ko'p holatda Lightning CSS yangi sintaksisni yaxshiroq biladi.

10. Mashqlar

Mashqlar kurs/mashqlar/06/postcss/ da. Avval npm init -y va npm install --save-dev postcss postcss-cli autoprefixer.

1-mashq (oson): so'rovni o'qing

Uchta so'rovni npx browserslist bilan ishga tushiring va har birida nechta qator chiqqanini sanang: defaults, last 2 versions, baseline widely available. Qaysi birida op_mini all bor?

Ishora: Git Bash'da qatorlarni | wc -l sanaydi (Oqimlar, pipe va yo'naltirish darsi). PowerShell'da — | Measure-Object -Line.

2-mashq (o'rta): prefikslar tozalagichi

Eski «Bahor» faylida shunday qoida topildi:

.aksiya {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-user-select: none;
  user-select: none;
}

.browserslistrc ga baseline widely available yozing va faylni Autoprefixer'dan o'tkazing. Qaysi qatorlar qoladi? Nega -webkit-user-select o'chmaydi?

Ishora: buyruq — npx postcss eski.css --use autoprefixer --no-map.

.aksiya {
  border-radius: 8px;
  -webkit-user-select: none;
  user-select: none;
}

3-mashq (qiyin): ikki vosita, bitta fayl

«Bahor» uchun zamonaviy.css yozildi:

@custom-media --kompyuter (width >= 64rem);

.bron-havola {
  background: oklch(48.4% 0.097 158.9);

  &:hover {
    background: color-mix(in oklch, #2f6b3a 80%, black);
  }

  @media (--kompyuter) {
    padding-inline: 2rem;
  }
}

1. Uni postcss-preset-env bilan defaults uchun o'giring.
2. Xuddi shuni Lightning CSS bilan: npx lightningcss --targets "defaults" --custom-media zamonaviy.css.
3. Rang qatorlari farqini tushuntiring. Qaysi natija zamonaviy telefonda aniqroq rang ko'rsatadi?

Ishora: postcss-preset-env ni o'rnating; .browserslistrc bo'lmasa — defaults ishlaydi.

.bron-havola {
  background: rgb(31, 111, 74);
}
.bron-havola:hover {
    background: rgb(32, 78, 40);
  }
@media (min-width: 64rem) {
  .bron-havola {
    padding-left: 2rem;
    padding-right: 2rem;
}
  }

.bron-havola {
  background: #1f6f4a;
  background: lab(41.4212% -32.0114 13.4044);
}

.bron-havola:hover {
  background: #105020;
  background: lab(29.2612% -29.3021 21.796);
}

@media (width >= 64rem) {
  .bron-havola {
    padding-inline: 2rem;
  }
}

4-mashq: Portfolio qadami — brauzerlar ro'yxati va prefiks auditi

Portfolio'da build qadami yo'q: sayt/ papkasi GitHub Pages'ga shundayligicha yuklanadi. Shuning uchun Autoprefixer'ni doimiy ishlatmaymiz — uni auditor sifatida chaqiramiz: "qo'lda yozilgan prefikslarim yetarlimi?"

1. Portfolio ildizida .browserslistrc yarating: baseline widely available. Bu fayl portfolio kimlar uchun ekanini yozib qo'yadi va keyingi qismlardagi vositalar ham uni o'qiydi.
2. npm install --save-dev postcss postcss-cli autoprefixer.
3. Hamma CSS fayllarni sayt/ dan tashqaridagi tekshiruv/ papkasiga o'tkazing: npx postcss "sayt/assets/css/*.css" --use autoprefixer --no-map -d tekshiruv/.
4. Har faylni asli bilan solishtiring (VS Code: Select for Compare → Compare with Selected). Qaysi faylda farq bor?
5. Qaror qabul qiling: farqni portfolio'ga ko'chirasizmi?

Ishora: -d — natijalarni papkaga, har biri o'z nomi bilan. Qo'shtirnoq * ni terminal emas, postcss-cli o'zi ochishi uchun.

html {
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

11. Real ishda

• Deyarli har frontend loyihada .browserslistrc yoki package.json dagi browserslist bor. Yangi loyihaga kelganda birinchi so'raladigan savollardan biri: "qaysi brauzerlarni qo'llab-quvvatlaymiz?" — javob shu faylda.
• PostCSS bugun ko'pincha ko'rinmas holda ishlaydi: Next.js, eski Vite va webpack loyihalari, Tailwind v3 uning ustida qurilgan. postcss.config.js ni ko'rsangiz — endi uni o'qiy olasiz.
• Lightning CSS Vite 8 va Tailwind v4 ichida. Katta loyihalar tezlik uchun unga o'tmoqda.
• Intervyuda: "Autoprefixer qanday ishlaydi?" (browserslist + caniuse), "PostCSS va Sass farqi?" (plaginli transformator va til kengaytmasi), "Nega prefikslarni qo'lda yozmaymiz?"

Xulosa

• PostCSS — CSS'ni AST'ga aylantirib plaginlarga beradi; ishni plaginlar qiladi.
• Autoprefixer browserslist ro'yxati va caniuse ma'lumotiga qarab prefiks qo'shadi va eskirganini o'chiradi.
• browserslist so'rovi — .browserslistrc yoki package.json da, bitta; defaults = > 0.5%, last 2 versions, Firefox ESR, not dead; baseline widely available ham bor.
• postcss-preset-env yangi sintaksisni (nesting, oklch, @custom-media) kerak bo'lganda tarjima qiladi, cssnano siqadi.
• Lightning CSS — prefiks, tarjima va siqish bitta tez vositada; Vite 8 CSS'ni u bilan siqadi.

Keyingi dars: Stylelint va Prettier: CSS kod sifati — CSS'dagi xatolar va nomuvofiqliklarni avtomatik topadigan linter va uni portfolio tekshiruviga ulash.

Manbalar

• PostCSS — postcss.org; postcss-cli — github.com/postcss/postcss-cli
• Autoprefixer — github.com/postcss/autoprefixer
• browserslist: "Queries" — github.com/browserslist/browserslist
• postcss-preset-env — preset-env.cssdb.org
• Lightning CSS — lightningcss.dev
• Vite: "Build Options" (build.target, build.cssMinify) — vite.dev/config/build-options
• MDN: "text-size-adjust" (moslik jadvali) — developer.mozilla.org