HTML email'larni stillash: jadval, inline CSS, Outlook va MJML

Qisqacha: Email xat — brauzer emas, pochta dasturi (Gmail, Outlook, Apple Mail) ichida ochiladigan HTML sahifa. Pochta dasturlari zamonaviy CSS'ning katta qismini tushunmaydi: klassik Outlook'da flex, grid, border-radius yo'q, Gmail <style> ni faqat head da va cheklov bilan o'qiydi. Shuning uchun xat 600 pikselli jadval bilan quriladi, stillar har elementga inline yoziladi va Outlook uchun alohida "yashirin" kod qo'shiladi. Buni qo'lda qilmaslik uchun MJML yoki React Email ishlatiladi; har da'voni esa caniemail.com dan tekshiriladi.

Bu darsda

• Nega email HTML'i oddiy sahifadan farq qilishini va qaysi CSS qayerda ishlashini caniemail.com dan qanday topishni bilasiz.
• 600 pikselli jadval skeletini, preheader matnini va "o'q o'tmas" (bulletproof) tugmani qo'lda yozasiz.
• <style> dagi CSS'ni juice bilan inline stilga aylantirasiz va Outlook'ning shartli izohlarini o'qiy olasiz.
• Xatni qorong'i rejimga moslash nima uchun qiyinligini tushuntirasiz.
• MJML bilan xat yozib, uni HTML'ga kompilyatsiya qilasiz; React Email, Maizzle va test vositalari qachon kerakligini bilasiz.

Oldin bilishingiz kerak: Jadval asoslari, Ro'yxatlar, hisoblagichlar va jadvallar stili, Rasmlar CSS tomoni, CSS nima, Brauzer mosligi.

1. Nega bu kerak?

Mehmon «Bahor» saytida stol band qildi. Bir daqiqadan keyin unga xat keladi: "Stolingiz band qilindi: 12-oktabr, 19:00". Bu xat ham HTML — logotip, yashil sarlavha, "Bronni ko'rish" tugmasi.

Siz 05–06 qismlarda o'rgangan hamma narsani ishlatib, xatni chiroyli qildingiz: flex, grid, CSS o'zgaruvchilari, border-radius, @media. Brauzerda ochdingiz — ajoyib. Jasur akaning ofisidagi Outlook'da esa — tugma kvadrat, ustunlar ustma-ust, ranglar yo'qolgan.

Sababi: xatni brauzer emas, pochta dasturi ochadi. Har birining o'z qoidasi bor, ko'pchiligi zamonaviy CSS'dan orqada. Jadval asoslari darsida "email xatlar hali ham jadval bilan quriladi" degan edik — bugun nega va qanday ekanini ko'ramiz.

Taqqoslash uchun: veb-sahifa — o'z uyingiz, mebelni xohlagancha qo'yasiz. Email — boshqa odamning uyiga yuborilgan posilka: ichini qanday ochishni, qaysi javonga qo'yishni u hal qiladi. Siz faqat posilkani har qanday qo'lda ham buzilmaydigan qilib qadoqlay olasiz.

2. Qaysi CSS qayerda ishlaydi: caniemail.com

2.1 "Can I use" ning email varianti

Brauzerlar uchun Baseline va caniuse bor (Brauzer mosligi). Email uchun uning egizagi — caniemail.com: har bir HTML va CSS imkoniyati pochta dasturlarida sinab ko'rilgan jadval. Ma'lumotlari ochiq — GitHub saytidagi hteumeuleu/caniemail loyihasida (GitHub — dasturchilar kodini saqlaydigan sayt, uni Git qismida o'rganamiz). Quyidagi jadvallar o'sha ma'lumotdan, har qatorning oxirgi sinovi bo'yicha (ma'lumot 2026-yil 30-sentabrda olingan).

Izohlar caniemail'dan:

• Gmail <style> — body ichida qo'llanmaydi, faqat head da; hajmi 16 KB bilan cheklangan. Gmail ilovalarida Google bo'lmagan hisoblar (masalan, Gmail ilovasida ochilgan boshqa pochta) uchun umuman ishlamaydi.
• Gmail CSS o'zgaruvchilari — var() funksiyasi tushuniladi, lekin o'zgaruvchini e'lon qilish (--rang: ...) yo'q. Amalda — ishlatib bo'lmaydi.
• Gmail @media — balandlikka oid so'rovlar qo'llanmaydi.
• Klassik Outlook padding — faqat jadval kataklarida (td). Bir qatordagi hamma kataklarning tik padding'i eng kattasiga tenglashadi.

2.2 Nima uchun Outlook?

Windows uchun klassik Outlook xatni veb-brauzer dvigateli bilan emas, Microsoft Word dvigateli bilan chizadi (Microsoft hujjati: "Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007"). Word — matn muharriri, u 2007-yildagi CSS'ning ham faqat bir qismini biladi. Jadvallarni esa yaxshi biladi — shuning uchun email hali ham jadvallarda.

Microsoft yangi Outlook for Windows'ga o'tishni bosqichma-bosqich olib bormoqda. Lekin uning rasmiy hujjatiga ko'ra ("Stages of migration to new Outlook for Windows"), mavjud klassik Outlook o'rnatmalari kamida 2029-yilgacha qo'llab-quvvatlanadi. Korporativ mijozlar — idoralar, banklar — ko'pincha aynan unda o'tiradi. Shuning uchun uni hisobga olish hali ham kasbiy talab.

Diqqat: Pochta dasturlari haqidagi da'volarni hech qachon eslab yoki "internetdagi maqola"dan yozmang. Holat o'zgaradi: masalan, caniemail'da Gmail'ning display: grid qatori 2026-yil martida yangilangan. Har safar caniemail'ning o'zidan tekshiring.

Tekshirib ko'ring: Xatda kartalarni yonma-yon qo'yish uchun display: flex ishlatdingiz. Gmail'da yonma-yon, klassik Outlook'da-chi?

3. Xat skeleti: jadval, 600 piksel va inline stil

3.1 Qo'lda yozilgan xat

«Bahor» bron tasdig'ining skeleti. Unda yangi narsa yo'q — hammasini HTML va CSS qismlarida o'rgangansiz. Yangisi — qoidalar:

<div style="display: none; max-height: 0; overflow: hidden;">
  Stol 19:00 ga tayyor. Bekor qilish — bir bosishda.
</div>
<table role="presentation" width="100%" cellpadding="0"
       cellspacing="0" border="0"
       style="background-color: #fffaf0;">
  <tr>
    <td align="center" style="padding: 16px 8px;">
      <table role="presentation" width="100%" cellpadding="0"
             cellspacing="0" border="0"
             style="max-width: 600px; background-color: #ffffff;">
        <tr>
          <td style="padding: 16px 24px; background-color: #2f6b3a;
                     color: #fffaf0;
                     font: bold 22px Arial, sans-serif;">
            Choyxona «Bahor»
          </td>
        </tr>
        <tr>
          <td style="padding: 24px; color: #1f2a24;
                     font: 16px/1.5 Arial, sans-serif;">
            <p style="margin: 0 0 12px;">Assalomu alaykum, Ali!</p>
            <p style="margin: 0 0 20px;">Stolingiz band qilindi:
              12-oktabr, 19:00, 4 kishi.</p>
            <table role="presentation" cellpadding="0"
                   cellspacing="0" border="0">
              <tr>
                <td bgcolor="#2f6b3a"
                    style="border-radius: 6px;">
                  <a href="https://example.com/bron"
                     style="display: inline-block;
                            padding: 12px 24px;
                            border: 1px solid #2f6b3a;
                            border-radius: 6px;
                            color: #fffaf0;
                            font: bold 16px Arial, sans-serif;
                            text-decoration: none;">
                    Bronni ko'rish
                  </a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td style="padding: 16px 24px; color: #5b6660;
                     font: 13px/1.5 Arial, sans-serif;">
            Choyxona «Bahor», Toshkent · +998 90 000 00 00
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Nimaga qarang: qaymoq fon ustida oq "varaq", tepada yashil sarlavha, matn, yashil tugma va kichik kulrang pastki qator. Kompyuterda (800 va 1280) varaq 600 pikseldan kengaymaydi va o'rtada turadi. Telefon enida (360) esa ekranga moslashib torayadi, matn qatorlarga bo'linadi. Birinchi div dagi matn ko'rinmaydi — u preheader, pastda tushuntiramiz.

Bu natija — Chrome'da. Pochta dasturida qanday ko'rinishini brauzer ko'rsatmaydi; buning uchun pastdagi test vositalari kerak.

3.2 Qoidalar

• Ikki qavat jadval. Tashqi jadval — butun ekran foni (width="100%"). Ichkisi — xatning o'zi, max-width: 600px. Nega 600? Ko'p pochta dasturlarida xat ekranning bir qismida, ro'yxat yonida ochiladi — 600 piksel sanoatda yillar davomida sinalgan xavfsiz en.
• role="presentation" — Jadval asoslari darsidagi qoida: "bu jadval ma'lumot emas, faqat joylashuv". Ekran o'quvchi uni "3 qatorli jadval" deb e'lon qilmaydi. caniemail: role atributi Gmail, Outlook va Apple Mail'da qo'llanadi.
• cellpadding="0" cellspacing="0" border="0" — HTML atributlari. CSS'dagi padding va border-spacing ning eski egizaklari. Ba'zi pochta dasturlari CSS'ni o'chirib yuboradi — atributlar qoladi.
• Stil — style atributida. Har td va a o'z stilini o'zi olib yuradi. Veb-sahifada bu yomon amaliyot edi (CSS nima darsida "deyarli hech qachon" degan edik), emailda esa — eng ishonchli yo'l.
• Padding — td da. Klassik Outlook padding ni faqat jadval katagida tushunadi. p larning margin i — oddiy qiymatlar bilan (manfiy va auto — yo'q, caniemail).
• Shrift — tizim shrifti. Arial kabi hamma kompyuterda bor shrift. Web shriftlarni (Web shriftlar) ko'p pochta dasturi yuklamaydi.
• Rasm — faqat to'liq URL bilan (https://...). Nisbiy yo'l xatda ochilmaydi. Ko'p pochta dasturi rasmlarni sukut bo'yicha yuklamaydi — shuning uchun alt majburiy va muhim matn rasm ichida bo'lmasin (Rasmlar CSS tomoni).

3.3 Preheader: pochta qutisidagi ikkinchi qator

Pochta qutisida xat mavzusining yonida (yoki ostida) kulrang qisqa matn chiqadi. Bu preheader (xat oldi matni). Pochta dasturi uni xatning birinchi matnidan oladi. Hech narsa qilmasangiz, u yerda "Brauzerda ochish" yoki logotipning alt matni chiqib qoladi.

Shuning uchun xatning eng boshiga ko'zga ko'rinmaydigan qisqa matn qo'yiladi — natijadagi birinchi div. display: none va qo'shimcha max-height: 0; overflow: hidden — ikkinchisi display: none ni o'chirib yuboradigan dasturlar uchun zaxira.

Preheader'ni mavzuning davomi deb yozing: mavzu "Bron tasdiqlandi", preheader "Stol 19:00 ga tayyor. Bekor qilish — bir bosishda.". 40–90 belgi atrofida — ko'p ilovalar undan uzunini kesadi.

3.4 Bulletproof tugma

Bulletproof tugma ("o'q o'tmas" tugma) — hech bir pochta dasturida buzilmaydigan tugma. Rasm emas: rasmlar yuklanmasa, rasm-tugma yo'qoladi. Natijadagi tugma uch qatlamdan iborat:

1. td ga bgcolor — HTML atributi. Hatto CSS o'chirilganda ham yashil fon qoladi.
2. a ga padding va display: inline-block — bosish maydoni butun tugma bo'ylab. Klassik Outlook a dagi padding'ni tushunmaydi, lekin tugma yashil to'rtburchak bo'lib qolaveradi — faqat bosiladigan joyi matn bilan cheklanadi.
3. border-radius — yumaloq burchak. Klassik Outlook'da burchak to'g'ri bo'ladi (caniemail: VML — Outlook'ning eski chizish tili — bilan yumaloq qilish mumkin). Bu — progressive enhancement: burchak bezak, tugma esa ishlaydi.

Kontrast unutilmasin: qaymoq matn yashil fonda 6.1:1 (Ranglar). Xat ham accessibility qoidalariga bo'ysunadi.

Tekshirib ko'ring: Dizayner tugmani chiroyli PNG rasm qilib berdi. Nega bu yomon fikr?

4. <style> dan inline'ga: juice

4.1 Nega qo'lda yozmaymiz

Har td ga style yozish zerikarli va xatoga moyil: rangni almashtirsangiz, 30 joyni tuzatasiz. Shuning uchun email CSS odatda oddiy <style> blokida yoziladi, keyin maxsus vosita uni har elementning style atributiga "ko'chiradi". Bu jarayon CSS inlining (inline'ga aylantirish) deyiladi.

Eng mashhur vosita — juice (npm paketi). npm'ni keyingi qismlarda to'liq o'rganamiz; hozir faqat natijaga qarang. %TEMP% papkasida juice 12.2.0 bilan sinadik:

<style>
  .narx { color: #b4461a; font-weight: bold; }
  td { padding: 8px; }
</style>
<table role="presentation"><tr>
  <td>Osh</td><td class="narx">35 000 so'm</td>
</tr></table>

juice chiqishi (haqiqiy):

<table role="presentation"><tr>
  <td style="padding: 8px;">Osh</td><td class="narx" style="padding: 8px; color: #b4461a; font-weight: bold;">35 000 so'm</td>
</tr></table>

Nimaga qarang: <style> bloki yo'qoldi, uning qoidalari mos elementlarga yozildi. td qoidasi ikkala katakka tushdi, .narx — faqat ikkinchisiga. Kaskad ham hisobga olingan: ikkala qoida bir elementga to'g'ri kelsa, ikkalasi birlashtirildi.

4.2 Nima inline bo'lmaydi

@media va :hover ni style atributiga yozib bo'lmaydi — ular faqat <style> da yashaydi. Shuning uchun inlining vositalari ularni <style> da qoldiradi (juice'da buning sozlamalari bor). Bular — qo'shimcha: ularni tushunmagan dastur xatni asosiy, inline ko'rinishda ko'rsatadi. Veb'dagi mobile-first g'oyasi emailda boshqacha: avval hamma joyda ishlaydigan inline asos, keyin tushunadiganlar uchun @media.

5. Outlook'ga maxsus kod: shartli izohlar

5.1 Faqat Outlook o'qiydigan izoh

Klassik Outlook max-width ni div da tushunmaydi. Natijada xat 600 piksel emas, butun oyna eniga cho'ziladi. Yechim — faqat Outlook ko'radigan qo'shimcha jadval. Buning uchun shartli izohlar (conditional comments) ishlatiladi:

<!--[if mso]>
<table role="presentation" width="600" align="center"><tr><td>
<![endif]-->
<div style="max-width: 600px; margin: 0 auto;">
  ... xat mazmuni ...
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->

• <!--[if mso]> ... <![endif]--> — oddiy brauzer va boshqa pochta dasturlari uchun bu izoh: ular ichini o'qimaydi. mso (Microsoft Office) esa bu shartni taniydi va ichidagi kodni bajaradi.
• Natijada Outlook qat'iy 600 pikselli jadvalni ko'radi, qolganlar — max-width li div. Bunday faqat Outlook uchun jadval "arvoh jadval" (ghost table) deb ataladi.

Shartli izohlar ichida Outlook'ga xos CSS xususiyatlari ham uchraydi — mso- bilan boshlanadiganlar (masalan mso-padding-alt). Ular faqat Outlook uchun, brauzer ularni tashlab ketadi (CSS nima darsidagi kechirimli o'qish).

Buni har xatda qo'lda yozish — og'ir ish. Keyingi bo'limdagi vositalar aynan shu ishni o'z bo'yniga oladi.

Tekshirib ko'ring: Gmail <!--[if mso]> ... <![endif]--> ichidagi jadvalni ko'radimi?

6. Qorong'i rejim emailda

Veb'da qorong'i rejim — prefers-color-scheme va light-dark() (Qorong'i rejim). Emailda vaziyat chalkash. caniemail bo'yicha:

• Apple Mail — @media (prefers-color-scheme: dark) ni ham, <meta name="color-scheme"> ni ham (macOS) tushunadi.
• Outlook.com va Outlook ilovalari — prefers-color-scheme ni tushunadi. Qorong'i rejimda ular xat elementlariga data-ogsc, data-ogsb kabi o'z atributlarini qo'shadi — ular bilan [data-ogsc] .sarlavha { ... } kabi alohida qoida yozish mumkin.
• Gmail — prefers-color-scheme ni tushunmaydi (veb, iOS, Android — hammasida "yo'q").
• Klassik Outlook — yo'q.

Demak, hamma joyda qorong'i versiyani boshqarib bo'lmaydi. Amaliy qoidalar:

• Xat ikkala fonda ham o'qilsin. Logotipni shaffof PNG qilsangiz, qora logotip qorong'i fonda yo'qolib qoladi — logotip atrofida och "halqa" yoki o'z foni bo'lsin.
• Ma'noni rangga ishonib topshirmang. Rang almashishi mumkin — so'z va belgi qoladi.
• Tushunadiganlar uchun — <style> da @media (prefers-color-scheme: dark) bloki, asosiy stil esa inline.

/* Faqat prefers-color-scheme ni tushunadigan dasturlar uchun */
@media (prefers-color-scheme: dark) {
  .xat-fon {
    background-color: #16301b !important;
  }

  .xat-matn {
    color: #fffaf0 !important;
  }
}

!important bu yerda zarur: inline style atributidagi qiymat oddiy qoidadan kuchli (Kaskad). Veb'da biz !important dan qochardik — emailda u inline stilni bosishning yagona yo'li. #16301b — «Bahor»ning qorong'i fon rangi (Ranglar 3).

Tekshirib ko'ring: Qorong'i rejim blokidan !important ni olib tashladingiz. Apple Mail'da fon qorayadimi?

7. Vositalar: MJML, React Email, Maizzle

7.1 MJML

MJML — email uchun maxsus belgilash tili. Siz <mj-section>, <mj-column>, <mj-button> kabi teglar bilan yozasiz, MJML esa ularni jadvallar, inline stillar va Outlook uchun shartli izohlarga to'la HTML'ga aylantiradi. Bu jarayon kompilyatsiya deyiladi — bir tildan boshqasiga avtomatik tarjima.

MJML butun yo'lni avtomatlashtiradi (juice — faqat inline qismini):

flowchart TD
  A["Siz yozasiz:<br>MJML teglari"] --> B["MJML: jadval,<br>inline stil, mso"]
  B --> C[Tayyor HTML xat]
  C --> D[Gmail]
  C --> E[Klassik Outlook]
  C --> F[Apple Mail]

«Bahor» bron xati MJML'da:

<mjml lang="uz">
  <mj-head>
    <mj-title>Bron tasdiqlandi — Choyxona «Bahor»</mj-title>
    <mj-preview>
      Stol 19:00 ga tayyor. Bekor qilish — bir bosishda.
    </mj-preview>
    <mj-attributes>
      <mj-all font-family="Arial, sans-serif" />
      <mj-text font-size="16px" line-height="1.5" color="#1f2a24" />
    </mj-attributes>
  </mj-head>
  <mj-body width="600px" background-color="#fffaf0">
    <mj-section background-color="#2f6b3a">
      <mj-column>
        <mj-text color="#fffaf0" font-size="22px" font-weight="bold">
          Choyxona «Bahor»
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff">
      <mj-column>
        <mj-text>Assalomu alaykum, Ali!</mj-text>
        <mj-text>
          Stolingiz band qilindi: 12-oktabr, 19:00, 4 kishi.
        </mj-text>
        <mj-button background-color="#2f6b3a" color="#fffaf0"
                   href="https://example.com/bron">
          Bronni ko'rish
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

• mj-preview — preheader. MJML uni o'zi yashirin div ga aylantiradi.
• mj-attributes — hamma mj-text ga umumiy shrift va rang. CSS'dagi meros g'oyasiga o'xshaydi.
• mj-section — gorizontal qator, mj-column — undagi ustun. Telefonda ustunlar o'zi ustma-ust tushadi.

Kompilyatsiya — bitta buyruq. npm'ni keyingi qismlarda o'rganamiz, hozir buyruqni aynan takrorlang (Node 03-qismda o'rnatilgan):

npx --yes mjml bron.mjml -o bron.html

npx --yes — "paketni vaqtincha yuklab, ishga tushir". -o bron.html — natija fayli. Biz shunday sinadik (npx mjml --version chiqishi):

mjml-core: 5.4.1
mjml-cli: 5.4.1

33 qatorli MJML fayldan 147 qatorli, 7 066 baytli HTML chiqdi. Uning ichida 8 ta <!--[if mso shartli izohi bor — biz birortasini ham qo'lda yozmadik. Tugma qismi (qisqartirilgan):

<td align="center" bgcolor="#2f6b3a" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#2f6b3a;" valign="middle">
  <a href="https://example.com/bron" style="display:inline-block;background:#2f6b3a;color:#fffaf0;...;padding:10px 25px;...">

Tanish uchlik: td da bgcolor, a da padding, Outlook uchun mso-padding-alt. Bu — bulletproof tugma, faqat MJML yozib bergan.

MJML xatoni ham ushlaydi. mj-text ni mj-column siz, to'g'ridan-to'g'ri mj-section ga qo'ysak:

Line 4 of ...\xato.mjml (mj-text) — mj-text cannot be used inside mj-section, only inside: mj-attributes, mj-column, mj-hero

Tarjimasi: "4-qator (mj-text) — mj-text ni mj-section ichida ishlatib bo'lmaydi, faqat mj-attributes, mj-column, mj-hero ichida". Sukut bo'yicha bu faqat ogohlantirish: fayl baribir yaratiladi. --config.validationLevel=strict bilan esa MJML xato beradi va fayl yaratmaydi — jamoada shunday qilish yaxshi.

7.2 React Email

React Email — xatni React komponentlari bilan yozish kutubxonasi. React'ni kursda alohida qismda o'rganamiz — hozir bilish shart emas, faqat g'oyani ko'ring:

import { Html, Head, Preview, Body, Container, Heading, Text, Button }
  from "@react-email/components";

export default function BronXat({ ism, vaqt }) {
  return (
    <Html lang="uz">
      <Head />
      <Preview>Stol {vaqt} ga tayyor</Preview>
      <Body style={{ backgroundColor: "#fffaf0" }}>
        <Container style={{ maxWidth: "600px" }}>
          <Heading style={{ color: "#2f6b3a" }}>
            Choyxona «Bahor»
          </Heading>
          <Text>Assalomu alaykum, {ism}!</Text>
          <Button href="https://example.com/bron"
            style={{ backgroundColor: "#2f6b3a", color: "#fffaf0" }}>
            Bronni ko'rish
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

Farqi — {ism} va {vaqt}: bitta shablon, har mehmon uchun o'z ma'lumoti. Server bron qabul qilganda shablonga "Ali" va "19:00" ni qo'yib, tayyor HTML oladi. Biz %TEMP% da @react-email/components 1.0.12 va @react-email/render 2.1.0 bilan xuddi shunday komponentni HTML'ga aylantirdik. Chiqishdan parchalar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...>
<html dir="ltr" lang="uz">...
<div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Stol 19:00 ga tayyor<div> [... ko'rinmas belgilar ...]</div></div>
...<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:600px;...">

Yana tanish narsalar: yashirin preheader, role="presentation" li jadval, inline stillar. Preheader ortidan esa uzun ko'rinmas belgilar qatori qo'shilgan. Ular pochta dasturi preheader'dan keyin xat matnini "tortib olmasligi" uchun — qisqa preheader'ning ortida bo'sh joy qolsin.

Serverda xat yuborish (Nodemailer, Resend) va shablonni ma'lumot bilan to'ldirishni backend qismida, Email shablonlarini serverda render qilish darsida o'rganamiz.

7.3 Maizzle

Maizzle — Tailwind CSS (Tailwind CSS 1) bilan email yozish freymvorki (npm'da @maizzle/framework, hozir 6.1). Siz Tailwind class'lari bilan yozasiz, Maizzle ularni inline stilga aylantiradi va keraksizini olib tashlaydi. Tailwind'ni yaxshi biladigan jamoa uchun qulay.

8. Xatni tekshirish

Brauzerda chiroyli — hali hech narsa emas. Tekshirish yo'llari, oddiydan murakkabga:

1. O'zingizga yuboring. Gmail, Outlook.com va telefoningizdagi pochta ilovasiga. Bepul va eng haqiqiy — lekin faqat sizda bor dasturlar.
2. Mailpit — kompyuteringizda ishlaydigan "soxta pochta serveri": xatlar hech kimga ketmaydi, uning veb-sahifasida ko'rinadi. Uning "HTML check" bo'limi xatingizni 175 dan ortiq HTML va CSS tekshiruvidan o'tkazadi — rasmiy hujjatiga ko'ra, ularning hammasi (<script> dan tashqari) caniemail testlariga bog'langan.
3. Litmus va Email on Acid — pullik xizmatlar: xatingizni o'nlab haqiqiy pochta dasturi va qurilmada ochib, skrinshot beradi. Kompaniyalarning email jamoalari shular bilan ishlaydi.

Tekshirishda ro'yxat: rasmlar o'chirilganda xat o'qiladimi, telefonda tugma barmoqqa sig'adimi, qorong'i rejimda logotip ko'rinadimi, preheader to'g'rimi, havolalar ishlaydimi.

9. Ko'p uchraydigan xatolar

9.1 Veb uslubidagi layout

Xat flex, grid va div larda yozildi. Brauzerda chiroyli, klassik Outlook'da ustma-ust. Tuzatish: jadval skeleti yoki MJML.

9.2 Stil faqat <style> da

Qoidalar <style> da qoldi, inline'ga aylantirilmadi. Gmail ilovasida Google bo'lmagan hisob bilan ochilgan xat stilsiz chiqadi (caniemail). Tuzatish: juice, MJML yoki React Email bilan inline.

9.3 Muhim ma'lumot rasm ichida

"Bron tasdiqlandi, 19:00" — chiroyli banner rasmida. Rasmlar yuklanmasa, mehmon hech narsa ko'rmaydi. Tuzatish: asosiy ma'lumot — matn; rasm faqat bezak, alt bilan.

9.4 Preheader unutilgan

Pochta qutisida mavzu ostida "Brauzerda ko'rish | Logotip" chiqdi. Tuzatish: xat boshida yashirin preheader matni.

9.5 CSS o'zgaruvchilari

var(--rang-asosiy) — Gmail'da e'lon qilinmaydi, Outlook'da umuman yo'q. Tuzatish: emailda ranglar to'g'ridan-to'g'ri qiymat bilan. Tokenlarni (Dizayn tokenlari) kompilyatsiya bosqichida qo'yadigan vosita (Maizzle, React Email'da JavaScript o'zgaruvchisi) ishlatsa bo'ladi.

10. Mashqlar

Mashqlarni kurs/mashqlar/06/ papkasida bajaring: har mashqqa alohida papka.

1-mashq (oson): caniemail'dan toping

caniemail.com ni oching va uch savolga javob toping: (1) box-shadow klassik Outlook'da ishlaydimi? (2) Gmail vebda-chi? (3) Apple Mail'da-chi? Qaysi sanada sinalganini ham yozing.

Ishora: saytdagi qidiruvga "box-shadow" yozing.

2-mashq (o'rta): Ikki ustunli qator

«Bahor» xatiga "Bugungi taklif" qatorini qo'shing: chapda taom nomi va narxi, o'ngda "Menyuni ochish" havolasi. Klassik Outlook'da ham yonma-yon tursin. Stil faqat inline.

Ishora: flex emas — bitta qatorda ikkita td. Qaysi katak qaysi tomonga tekislanishini align atributi aytadi (Jadval qismlari).

<table role="presentation" width="100%" cellpadding="0"
       cellspacing="0" border="0">
  <tr>
    <td style="padding: 16px 24px; font: 16px/1.5 Arial, sans-serif;
               color: #1f2a24;">
      Osh — <strong style="color: #b4461a;">35 000 so'm</strong>
    </td>
    <td align="right" style="padding: 16px 24px;
                             font: 16px/1.5 Arial, sans-serif;">
      <a href="https://example.com/menyu"
         style="color: #2f6b3a;">Menyuni ochish</a>
    </td>
  </tr>
</table>

3-mashq (qiyin): Stajyorning xati

Stajyor bron xatini shunday yozdi:

<style>
  :root { --yashil: #2f6b3a; }
  .xat { display: grid; gap: 16px; max-width: 600px; }
  .tugma {
    background: var(--yashil);
    border-radius: 999px;
    padding: 12px 24px;
  }
</style>
<div class="xat">
  <img src="banner.png">
  <a class="tugma" href="/bron">Bronni ko'rish</a>
</div>

Kamida oltita muammoni toping va har biri qaysi pochta dasturida nimaga olib kelishini ayting. Keyin xatni MJML'da qayta yozing.

Ishora: «Qaysi CSS qayerda ishlaydi» jadvallari, «Xat skeleti» qoidalari va «Ko'p uchraydigan xatolar».

<mjml lang="uz">
  <mj-head>
    <mj-preview>Stol 19:00 ga tayyor.</mj-preview>
  </mj-head>
  <mj-body width="600px">
    <mj-section>
      <mj-column>
        <mj-image src="https://example.com/banner.png"
                  alt="Choyxona «Bahor» hovlisi" />
        <mj-button href="https://example.com/bron"
                   background-color="#2f6b3a" color="#fffaf0"
                   border-radius="999px">
          Bronni ko'rish
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

4-mashq: Portfolio qadami — "Rahmat" xati

Portfolio'ning aloqa formasi hozir hech qayerga yubormaydi — server backend qismida bo'ladi. Lekin xatning shablonini hozir tayyorlab qo'ysa bo'ladi: kimdir formani to'ldirsa, unga avtomatik "Rahmat, xabaringiz keldi" xati boradi.

1. Portfolio'ning tajriba/ papkasida (Tailwind CSS 1 darsidan beri bor) email/ papkasi va unda rahmat.mjml.
2. Xatda: sarlavha "Rahmat, xabaringiz keldi!", javob vaqti haqida bir gap, Telegram tugmasi, pastda kichik izoh. Ranglar — portfolio ranglari.
3. Preheader bo'lsin.
4. npx --yes mjml rahmat.mjml -o rahmat.html bilan kompilyatsiya qiling va natijani brauzerda, telefon enida ham oching.
5. rahmat.html ni o'zingizning Gmail'ingizga yuborib ko'ring (masalan, Gmail'da yangi xat ochib, brauzerda ochilgan xatni nusxalab qo'yish) — ko'rinishi farq qiladimi?

Ishora: «MJML» bo'limidagi namuna — shablon; mj-button ga border-radius atributi bor.

<mjml lang="uz">
  <mj-head>
    <mj-title>Xabaringiz keldi — Aziz Karimov</mj-title>
    <mj-preview>Odatda bir kun ichida javob beraman.</mj-preview>
    <mj-attributes>
      <mj-all font-family="Arial, sans-serif" />
      <mj-text font-size="16px" line-height="1.5" color="#1f2a24" />
    </mj-attributes>
  </mj-head>
  <mj-body width="600px" background-color="#f7faf8">
    <mj-section background-color="#ffffff" padding="24px">
      <mj-column>
        <mj-text font-size="22px" font-weight="bold" color="#1f6f4a">
          Rahmat, xabaringiz keldi!
        </mj-text>
        <mj-text>
          Odatda bir kun ichida javob beraman. Shoshilinch bo'lsa —
          Telegram'da yozing.
        </mj-text>
        <mj-button href="https://t.me/sizning_kanal"
                   background-color="#1f6f4a" color="#ffffff"
                   border-radius="6px" font-size="16px">
          Telegram'da yozish
        </mj-button>
        <mj-text font-size="13px" color="#5b6660">
          Bu xat aloqa formasidan avtomatik yuborildi.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

11. Real ishda

• Har bir mahsulotda email bor: ro'yxatdan o'tish, parolni tiklash, buyurtma cheki, bron tasdig'i. Ularni ko'pincha frontend dasturchi yozadi — va aynan shu darsdagi bilim kerak bo'ladi.
• Marketing jamoalari alohida email dasturchi yoki "email developer" lavozimini ochadi — bu tor, lekin talab yuqori mutaxassislik.
• Backend bilan bog'liq: xatni yuborish — server ishi (Nodemailer, Resend kabi vositalar). Shablonni esa siz tayyorlaysiz — Email shablonlarini serverda render qilish darsida ikkalasi uchrashadi.
• Intervyuda so'raladi: "Nega email'da jadval ishlatiladi?", "Inline CSS nima uchun kerak?", "Outlook'ni qanday qo'llab-quvvatlaysiz?". caniemail, shartli izohlar va MJML — kuchli javob.

Xulosa

• Email'ni pochta dasturi ochadi: klassik Outlook Word dvigateli bilan chizadi (flex, grid, border-radius yo'q), Gmail <style> ni cheklab o'qiydi.
• Har da'voni caniemail.com dan tekshiring — ma'lumot ochiq va sanali.
• Skelet: ikki qavat role="presentation" jadval, 600 piksel, padding td da, stil inline, tizim shrifti, to'liq URL'lar.
• Preheader — xat boshidagi yashirin qisqa matn; bulletproof tugma — td + bgcolor + a padding, rasm emas.
• Outlook uchun <!--[if mso]> shartli izohlar; qorong'i rejim hamma joyda boshqarilmaydi — xat ikkala fonda o'qilsin.
• MJML, React Email yoki Maizzle bu ishni avtomatlashtiradi; natijani o'zingizga yuborib, Mailpit yoki Litmus bilan tekshiring.

Keyingi dars: Yakuniy loyiha: Figma'dan dizayn tizimi va responsive landing — 06-qismda o'rganganlaringizni bitta real loyihaga yig'amiz.

Manbalar

• caniemail.com va uning ochiq ma'lumotlari — github.com/hteumeuleu/caniemail
• Microsoft Learn: "Stages of migration to new Outlook for Windows" — learn.microsoft.com
• MJML hujjatlari — documentation.mjml.io
• React Email hujjatlari — react.email/docs
• Mailpit: "HTML check" — mailpit.axllent.org/docs
• Maizzle hujjatlari — maizzle.com/docs