[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t4-s05-container-queries":3,"course:taropood":59},{"meta":4,"prev":11,"next":14,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,5,"t4-s05-container-queries","book",4,"فصل ۰۵ — container query",{"free_preview":5,"order":9,"slug":12,"source":8,"term":9,"title_fa":13},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":15,"slug":16,"source":8,"term":9,"title_fa":17},6,"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",[19,23,26,31,34,37,40,43,46,49,52,56],{"kind":20,"heading":21,"html":22},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجا با \u003Ccode>@media\u003C\u002Fcode> یاد گرفتی به عرضِ کلِ صفحه واکنش نشان بدهی. ولی یک کارت که هم در یک ستونِ پهن و هم در یک نوارِ باریکِ کناری به‌کار می‌رود، نباید به عرضِ \u003Cstrong>صفحه\u003C\u002Fstrong> نگاه کند — باید به عرضِ \u003Cstrong>جای خودش\u003C\u002Fstrong> نگاه کند. در این فصل ابزارِ دقیقاً همین کار را یاد می‌گیری: \u003Ccode>container query\u003C\u002Fcode>. آخر فصل یک کارت داری که در جای پهن، دو ستونی و افقی می‌شود، و همان کارت در جای باریک، ساده و عمودی می‌ماند — بی‌آنکه یک خط از خودِ کارت را عوض کنی.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-container-vs-viewport.f9469394c4.160.webp 160w, \u002F_img\u002F01-image-container-vs-viewport.f9469394c4.320.webp 320w, \u002F_img\u002F01-image-container-vs-viewport.f9469394c4.640.webp 640w, \u002F_img\u002F01-image-container-vs-viewport.f9469394c4.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-container-vs-viewport.f9469394c4.1280.jpg\" srcset=\"\u002F_img\u002F01-image-container-vs-viewport.f9469394c4.160.jpg 160w, \u002F_img\u002F01-image-container-vs-viewport.f9469394c4.320.jpg 320w, \u002F_img\u002F01-image-container-vs-viewport.f9469394c4.640.jpg 640w, \u002F_img\u002F01-image-container-vs-viewport.f9469394c4.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو کارتِ یک‌شکل روی صفحه: کارتِ سمتِ راست در یک ناحیهٔ پهن، افقی و دوقسمتی چیده شده و یک فلش به لبهٔ همان ناحیه اشاره دارد؛ کارتِ سمتِ چپ در یک ستونِ باریک، عمودی مانده و فلشش به لبهٔ ستونِ باریک اشاره دارد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>یک عنصر را با \u003Ccode>container-type\u003C\u002Fcode> به یک container تبدیل کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>@container\u003C\u002Fcode> بنویسی که فرزندها به عرضِ همان container واکنش نشان بدهند\u003C\u002Fli>\n\u003Cli>در یک جمله بگویی \u003Ccode>@container\u003C\u002Fcode> با \u003Ccode>@media\u003C\u002Fcode> چه فرقِ بنیادی‌ای دارد\u003C\u002Fli>\n\u003Cli>بگویی چرا AI اینجا با اعتمادبه‌نفس اشتباه می‌گوید و خودت ردش کنی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":20,"heading":24,"html":25},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۲ (همین ترم):\u003C\u002Fstrong> \u003Ccode>@media\u003C\u002Fcode> و \u003Ccode>min-width\u003C\u002Fcode> — \u003Ccode>@container\u003C\u002Fcode> خواهرِ نزدیکِ آن است، با یک تفاوتِ مهم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۳:\u003C\u002Fstrong> \u003Ccode>display: flex\u003C\u002Fcode> و \u003Ccode>grid\u003C\u002Fcode> — کارت را با flex به دو قسمت می‌کنیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲ فصل ۹:\u003C\u002Fstrong> custom property و فکرِ «یک component، چند جا».\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":27,"heading":28,"html":29,"embed":30},"lab","","— یک کارت در ناحیهٔ پهن و همان کارت در ناحیهٔ باریک می‌بینی که هنوز هر دو یک‌شکل‌اند. کارِ این فصل این است که خط‌به‌خط کاری کنی هر کارت به عرضِ جای خودش واکنش نشان بدهد","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-4-responsive\u002Fsession-05-container-queries",{"kind":20,"heading":32,"html":33},"۱. مشکلی که @media حلش نمی‌کند","\u003Ch2 id=\"۱-مشکلی-که-@media-حلش-نمی‌کند\">۱. مشکلی که \u003Ccode>@media\u003C\u002Fcode> حلش نمی‌کند\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D9%85%D8%B4%DA%A9%D9%84%DB%8C-%DA%A9%D9%87-%40media-%D8%AD%D9%84%D8%B4-%D9%86%D9%85%DB%8C%E2%80%8C%DA%A9%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک کارت را در نظر بگیر که یک \u003Ccode><h2>\u003C\u002Fcode> و یک \u003Ccode><p>\u003C\u002Fcode> دارد. همین کارت را دو جا گذاشته‌ای: یک‌بار در ناحیهٔ پهنِ اصلی، یک‌بار در یک نوارِ کناریِ باریک.\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><main class="areas">\n  <section class="wide">\n    <article class="card">\n      <h2>مطلبِ اصلی<\u002Fh2>\n      <p>این کارت به عرضِ جای خودش نگاه می‌کند، نه به عرضِ کلِ صفحه.<\u002Fp>\n    <\u002Farticle>\n  <\u002Fsection>\n\n  <aside class="narrow">\n    <article class="card">\n      <h2>یک نکته<\u002Fh2>\n      <p>همین کارت اینجا در یک ستونِ باریک نشسته، پس ساده و عمودی می‌ماند.<\u002Fp>\n    <\u002Farticle>\n  <\u002Faside>\n<\u002Fmain>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>می‌خواهی کارتِ داخلِ ناحیهٔ پهن، افقی و دوقسمتی شود (تیتر یک طرف، متن طرفِ دیگر)، ولی کارتِ داخلِ نوارِ باریک همان‌طور عمودی بماند. حالا فکر کن با \u003Ccode>@media\u003C\u002Fcode> می‌شود؟ \u003Cstrong>نه.\u003C\u002Fstrong> \u003Ccode>@media\u003C\u002Fcode> فقط یک چیز را می‌داند: عرضِ کلِ پنجره. هر دو کارت روی یک پنجره‌اند، پس \u003Ccode>@media\u003C\u002Fcode> نمی‌تواند یکی را افقی و دیگری را عمودی کند — هر تصمیمی بگیرد، برای \u003Cstrong>هر دو\u003C\u002Fstrong> می‌گیرد. مشکل این است که کارتِ باریک، در یک پنجرهٔ پهن هم باید باریک بماند. \u003Ccode>@media\u003C\u002Fcode> عرضِ پنجره را می‌بیند؛ ما به عرضِ \u003Cstrong>جای کارت\u003C\u002Fstrong> نیاز داریم.\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. @container: به عرضِ جای خودت نگاه کن","\u003Ch2 id=\"۲-@container-به-عرضِ-جای-خودت-نگاه-کن\">۲. \u003Ccode>@container\u003C\u002Fcode>: به عرضِ جای خودت نگاه کن\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%40container-%D8%A8%D9%87-%D8%B9%D8%B1%D8%B6%D9%90-%D8%AC%D8%A7%DB%8C-%D8%AE%D9%88%D8%AF%D8%AA-%D9%86%DA%AF%D8%A7%D9%87-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اینجاست که \u003Ccode>container query\u003C\u002Fcode> وارد می‌شود. به‌جای «وقتی پنجره پهن شد»، می‌گویی «وقتی \u003Cstrong>جای این کارت\u003C\u002Fstrong> پهن شد». قاعده‌اش خیلی شبیهِ \u003Ccode>@media\u003C\u002Fcode> است، فقط به‌جای \u003Ccode>@media\u003C\u002Fcode> می‌نویسی \u003Ccode>@container\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@container (min-width: 400px) {\n  .card {\n    display: flex;\n  }\n\n  .card h2 {\n    flex: 0 0 40%;\n    display: flex;\n    align-items: center;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این یعنی «هر جا عرضِ container به ۴۰۰ پیکسل رسید، کارتِ داخلش را افقی کن». این را در آزمایشگاه اضافه کن و صفحه را نگاه کن.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>هیچ اتفاقی نمی‌افتد.\u003C\u002Fstrong> هر دو کارت هنوز عمودی‌اند — حتی آن‌که در ناحیهٔ پهن است. انگار کلِ این قاعده نادیده گرفته شد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> درست است، و باید همین را ببینی. \u003Ccode>@container\u003C\u002Fcode> می‌پرسد «عرضِ container چقدر است؟» — ولی ما هنوز به هیچ عنصری نگفته‌ایم که «تو یک container هستی». بدونِ آن، این پرسش هیچ عنصری برای اندازه‌گرفتن ندارد، پس قاعده هرگز اجرا نمی‌شود. باید \u003Cstrong>والدِ\u003C\u002Fstrong> کارت را صریح یک container اعلام کنیم. این کارِ property بعدی است: \u003Ccode>container-type\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":38,"html":39},"۳. container-type: والد را container کن","\u003Ch2 id=\"۳-container-type-والد-را-container-کن\">۳. \u003Ccode>container-type\u003C\u002Fcode>: والد را container کن\u003Ca class=\"head-anchor\" href=\"#%DB%B3-container-type-%D9%88%D8%A7%D9%84%D8%AF-%D8%B1%D8%A7-container-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>روی عنصری که کارت \u003Cstrong>داخلش\u003C\u002Fstrong> است — یعنی \u003Ccode>.wide\u003C\u002Fcode> و \u003Ccode>.narrow\u003C\u002Fcode> — یک خط اضافه کن که می‌گوید «عرضِ من را قابلِ پرسش کن»:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.wide,\n.narrow {\n  container-type: inline-size;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>inline-size\u003C\u002Fcode> یعنی «عرض را رصد کن» (در فارسیِ راست‌به‌چپ هم منظور همان بُعدِ افقیِ متن است). حالا هر کدام از این دو ناحیه یک container است، و \u003Ccode>@container\u003C\u002Fcode> بالاخره چیزی برای اندازه‌گرفتن دارد.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا کارتِ ناحیهٔ پهن افقی شد — تیترِ آبی یک طرف، متن طرفِ دیگر — ولی کارتِ نوارِ باریک هنوز عمودی است. \u003Cstrong>دو کارتِ کاملاً هم‌قاعده، با دو شکلِ متفاوت\u003C\u002Fstrong>، چون هر کدام عرضِ container خودش را دارد: ناحیهٔ پهن از ۴۰۰ رد شده، نوارِ باریک نه. حالا عرضِ آزمایشگاه را کم و زیاد کن: کارتِ باریک هیچ‌وقت تغییر نمی‌کند (چون container اش همیشه باریک است)، ولی کارتِ پهن وقتی جایش زیرِ ۴۰۰ برود، خودش عمودی می‌شود.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> \u003Ccode>container-type\u003C\u002Fcode> را روی \u003Cstrong>والد\u003C\u002Fstrong> بگذار، نه روی خودِ کارت. یک container عرضِ \u003Cstrong>فرزندهایش\u003C\u002Fstrong> را کنترل می‌کند؛ اگر روی خودِ \u003Ccode>.card\u003C\u002Fcode> بگذاری‌اش، کارت نمی‌تواند عرضِ خودش را از خودش بپرسد، و باز هیچ‌چیز کار نمی‌کند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":41,"html":42},"۴. تفاوتِ بنیادی با @media","\u003Ch2 id=\"۴-تفاوتِ-بنیادی-با-@media\">۴. تفاوتِ بنیادی با \u003Ccode>@media\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%AA%D9%81%D8%A7%D9%88%D8%AA%D9%90-%D8%A8%D9%86%DB%8C%D8%A7%D8%AF%DB%8C-%D8%A8%D8%A7-%40media\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا مهم‌ترین جملهٔ این فصل: \u003Cstrong>\u003Ccode>@media\u003C\u002Fcode> عرضِ پنجره را می‌بیند؛ \u003Ccode>@container\u003C\u002Fcode> عرضِ نزدیک‌ترین container را می‌بیند.\u003C\u002Fstrong> \u003Ccode>@media\u003C\u002Fcode> یک نگاهِ سراسری است — برای کلِ صفحه یک تصمیم می‌گیرد. \u003Ccode>@container\u003C\u002Fcode> یک نگاهِ محلی است — به هر component اجازه می‌دهد به جای خودش واکنش نشان بدهد. برای همین یک کارت که با \u003Ccode>@container\u003C\u002Fcode> نوشته شده، هر جای صفحه بگذاری‌اش درست کار می‌کند: اسکلتِ صفحه دیگر مهم نیست، خودِ کارت می‌داند چه‌کار کند.\u003C\u002Fp>\n\u003Cp>قبل از ادامه، جواب بده: اگر همین کارت را از نوارِ باریک برداری و در ناحیهٔ پهن بگذاری، شکلش عوض می‌شود؟\u003C\u002Fp>\n\u003Cp>بله. کارت به هیچ کلاسِ تازه‌ای وابسته نیست؛ فقط عرضِ container جدیدش را می‌خواند. همین نقلِ‌مکان کافی است تا افقی شود. این کاری است که \u003Ccode>@media\u003C\u002Fcode> هرگز نمی‌توانست بکند.\u003C\u002Fp>\n",{"kind":20,"heading":44,"html":45},"۵. کد کاملِ این فصل","\u003Ch2 id=\"۵-کد-کاملِ-این-فصل\">۵. کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>container query<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="areas">\n      <section class="wide">\n        <article class="card">\n          <h2>مطلبِ اصلی<\u002Fh2>\n          <p>این کارت به عرضِ جای خودش نگاه می‌کند، نه به عرضِ کلِ صفحه.<\u002Fp>\n        <\u002Farticle>\n      <\u002Fsection>\n\n      <aside class="narrow">\n        <article class="card">\n          <h2>یک نکته<\u002Fh2>\n          <p>همین کارت اینجا در یک ستونِ باریک نشسته، پس ساده و عمودی می‌ماند.<\u002Fp>\n        <\u002Farticle>\n      <\u002Faside>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 20px;\n  font-family: Tahoma, sans-serif;\n  background-color: #f6edda;\n  color: #2c2114;\n}\n\n.areas {\n  display: grid;\n  grid-template-columns: 1fr 240px;\n  gap: 20px;\n}\n\n\u002F* har naahiye ra yek container elam mikonim *\u002F\n.wide,\n.narrow {\n  container-type: inline-size;\n}\n\n.card {\n  background-color: #ffffff;\n  border: 1px solid #d8ccae;\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.card h2 {\n  margin: 0;\n  padding: 16px;\n  background-color: #2a6b93;\n  color: #ffffff;\n}\n\n.card p {\n  margin: 0;\n  padding: 16px;\n  line-height: 1.9;\n}\n\n\u002F* vaghti container-e kart pahntar az 400px shod, radifi sho *\u002F\n@container (min-width: 400px) {\n  .card {\n    display: flex;\n  }\n\n  .card h2 {\n    flex: 0 0 40%;\n    display: flex;\n    align-items: center;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-container-type-parent.71847f6261.160.webp 160w, \u002F_img\u002F02-image-container-type-parent.71847f6261.320.webp 320w, \u002F_img\u002F02-image-container-type-parent.71847f6261.640.webp 640w, \u002F_img\u002F02-image-container-type-parent.71847f6261.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-container-type-parent.71847f6261.1280.jpg\" srcset=\"\u002F_img\u002F02-image-container-type-parent.71847f6261.160.jpg 160w, \u002F_img\u002F02-image-container-type-parent.71847f6261.320.jpg 320w, \u002F_img\u002F02-image-container-type-parent.71847f6261.640.jpg 640w, \u002F_img\u002F02-image-container-type-parent.71847f6261.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو جعبهٔ تودرتو: جعبهٔ بیرونی که «container» است و روی لبه‌اش یک نشانه دارد، و یک کارتِ فرزند داخلش که فلشی از فرزند به لبهٔ جعبهٔ بیرونی می‌رود و نشان می‌دهد فرزند عرضِ والد را می‌خواند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":20,"heading":47,"html":48},"۶. همیار AI: کمکِ درست، اشتباهِ رایج","\u003Ch2 id=\"۶-همیار-ai-کمکِ-درست-اشتباهِ-رایج\">۶. همیار AI: کمکِ درست، اشتباهِ رایج\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%D9%87%D9%85%DB%8C%D8%A7%D8%B1-ai-%DA%A9%D9%85%DA%A9%D9%90-%D8%AF%D8%B1%D8%B3%D8%AA-%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87%D9%90-%D8%B1%D8%A7%DB%8C%D8%AC\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>container query\u003C\u002Fcode> تازه است و دقیقاً همان‌جایی است که AI زیاد اشتباه می‌کند — چون سال‌ها فقط \u003Ccode>@media\u003C\u002Fcode> وجود داشت و خیلی از جواب‌هایی که AI یاد گرفته، از آن دورانند. سه قانونِ ثابتِ کار با AI در کلِ این خودآموز اینهاست:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> سه قانون را عیناً به خاطر بسپار: \u003Cstrong>«اول خودت، بعد AI»\u003C\u002Fstrong> — اول با معیارهای خودت تصمیم بگیر، بعد نظر AI را به‌عنوان نظرِ دوم بشنو، نه جوابِ نهایی. \u003Cstrong>«خط به خط»\u003C\u002Fstrong> — هر چیزی که AI می‌دهد را خط‌به‌خط بخوان و بفهم، هیچ‌وقت یک‌جا کپی نکن. \u003Cstrong>«AI هم اشتباه می‌کند»\u003C\u002Fstrong> — و همین الان یک نمونه‌اش را با هم می‌بینیم.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>کاربردِ خوب.\u003C\u002Fstrong> بعد از اینکه خودت container query را نوشتی، AI یک جفت‌چشمِ دومِ خوب است:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> کدِ خودت را به دستیار AI ات بده و بپرس: «\u003Ccode>container-type\u003C\u002Fcode> را روی درست‌ترین عنصر گذاشته‌ام؟ و آیا \u003Ccode>400px\u003C\u002Fcode> نقطهٔ خوبی برای شکستِ این کارت است؟». جوابش را با چیزی که \u003Cstrong>در آزمایشگاه می‌بینی\u003C\u002Fstrong> بسنج: عددِ پیشنهادی‌اش را امتحان کن و ببین کارت واقعاً همان‌جا که باید، تمیز می‌شکند یا نه.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>کاربردِ اشتباه.\u003C\u002Fstrong> حالا نمونه‌ای که AI با اعتمادبه‌نفسِ کامل اشتباه می‌گوید. فرض کن می‌پرسی «چطور کاری کنم این کارت به عرضِ \u003Cstrong>جای خودش\u003C\u002Fstrong> واکنش نشان بدهد؟». خیلی وقت‌ها جوابی شبیه این می‌دهد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@media (min-width: 400px) {\n  .card {\n    display: flex;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>«فقط یک \u003Ccode>@media\u003C\u002Fcode> بگذار، وقتی صفحه از ۴۰۰ رد شد کارت افقی می‌شود.» جمله‌اش قاطع و منطقی به‌نظر می‌رسد. ولی در آزمایشگاه امتحانش کن: این \u003Ccode>@media\u003C\u002Fcode> را بگذار و پنجره را پهن کن. \u003Cstrong>هر دو کارت با هم افقی می‌شوند\u003C\u002Fstrong> — حتی کارتِ نوارِ باریک، که در جای تنگش زشت و درهم می‌شود. AI به سؤالِ «جای خودش» جوابِ «عرضِ پنجره» داد.\u003C\u002Fp>\n\u003Cp>چرا؟ با همان چیزی که در این فصل فهمیدی می‌توانی ردش کنی: \u003Ccode>@media\u003C\u002Fcode> عرضِ \u003Cstrong>پنجره\u003C\u002Fstrong> را می‌بیند، نه عرضِ container را. جوابِ درست همان است که خودت نوشتی — \u003Ccode>@container\u003C\u002Fcode> روی والدی که \u003Ccode>container-type\u003C\u002Fcode> دارد. این بهترین درسِ «AI هم اشتباه می‌کند» است: AI جمله‌ای ساخت که درست به‌نظر می‌رسید ولی به سؤالِ دیگری جواب می‌داد، و تو با فهمِ خودت از تفاوتِ \u003Ccode>@container\u003C\u002Fcode> و \u003Ccode>@media\u003C\u002Fcode> توانستی ردش کنی. اول خودت، بعد AI.\u003C\u002Fp>\n",{"kind":20,"heading":50,"html":51},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>container query\u003C\u002Ftd>\n\u003Ctd>کانتینِر کوئری\u003C\u002Ftd>\n\u003Ctd>قاعده‌ای که فرزند به عرضِ container خودش واکنش نشان می‌دهد، نه به عرضِ پنجره\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>container-type\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کانتینِر تایپ\u003C\u002Ftd>\n\u003Ctd>والد را یک container اعلام می‌کند تا عرضش قابلِ پرسش شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>inline-size\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>این‌لاین سایز\u003C\u002Ftd>\n\u003Ctd>مقداری که می‌گوید فقط بُعدِ افقی (عرض) رصد شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>@container\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اَت کانتینِر\u003C\u002Ftd>\n\u003Ctd>قاعدهٔ شرطی که وقتی عرضِ container به حدی رسید اجرا می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":53,"heading":54,"html":55},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا \u003Ccode>@container\u003C\u002Fcode> بدونِ \u003Ccode>container-type\u003C\u002Fcode> روی والد هیچ کاری نمی‌کند؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک \u003Ccode>@container (min-width: 600px)\u003C\u002Fcode> دوم اضافه کن که وقتی جای کارت خیلی پهن شد، \u003Ccode>padding\u003C\u002Fcode> و اندازهٔ تیتر را هم بزرگ‌تر کند. حالا سه حالت داری: باریک، متوسط، پهن — و همه بر اساسِ عرضِ container، نه پنجره.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> ناحیهٔ باریک را از \u003Ccode>240px\u003C\u002Fcode> به \u003Ccode>1fr\u003C\u002Fcode> عوض کن تا دو ناحیهٔ هم‌عرض شوند. حالا پنجره را باریک و پهن کن و با یک جمله بنویس چرا هر دو کارت \u003Cstrong>هم‌زمان\u003C\u002Fstrong> می‌شکنند، در حالی که قبلاً فقط یکی می‌شکست. (راهنما: حالا container هر دو با هم بزرگ و کوچک می‌شود.)\u003C\u002Fp>\n",{"kind":20,"heading":57,"html":58},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی هر component را وادار کنی به جای خودش واکنش نشان بدهد. فصل بعد سراغِ یک تکهٔ واقعیِ هر سایت می‌رویم که در موبایل دردسر می‌شود: منوی ناوبری. یاد می‌گیری یک منوی موبایلِ بازشو بسازی که با صفحه‌کلید هم کار کند و \u003Cstrong>یک خط JavaScript هم نخواهد\u003C\u002Fstrong> — فقط با \u003Ccode><details>\u003C\u002Fcode> و \u003Ccode><summary>\u003C\u002Fcode>.\u003C\u002Fp>\n",{"course":60,"entitled":68,"lessons":69,"payments_enabled":68,"terms":255,"live":5},{"active_window":61,"effective_price_toman":62,"free":5,"lesson_count":63,"price_toman":64,"slug":65,"summary_fa":66,"title_fa":67},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[70,74,78,82,85,88,91,95,99,103,107,110,113,116,119,122,125,128,131,134,137,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,184,185,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252],{"free_preview":5,"order":71,"slug":72,"source":8,"term":71,"title_fa":73},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":75,"slug":76,"source":8,"term":71,"title_fa":77},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":79,"slug":80,"source":8,"term":71,"title_fa":81},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":9,"slug":83,"source":8,"term":71,"title_fa":84},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":6,"slug":86,"source":8,"term":71,"title_fa":87},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":15,"slug":89,"source":8,"term":71,"title_fa":90},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":92,"slug":93,"source":8,"term":71,"title_fa":94},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":96,"slug":97,"source":8,"term":71,"title_fa":98},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":100,"slug":101,"source":8,"term":71,"title_fa":102},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":71,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":71,"slug":108,"source":8,"term":75,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":75,"slug":111,"source":8,"term":75,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":79,"slug":114,"source":8,"term":75,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":9,"slug":117,"source":8,"term":75,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":6,"slug":120,"source":8,"term":75,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":15,"slug":123,"source":8,"term":75,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":92,"slug":126,"source":8,"term":75,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":96,"slug":129,"source":8,"term":75,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":100,"slug":132,"source":8,"term":75,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":75,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":75,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":71,"slug":142,"source":8,"term":79,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":75,"slug":145,"source":8,"term":79,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":79,"slug":148,"source":8,"term":79,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":9,"slug":151,"source":8,"term":79,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":6,"slug":154,"source":8,"term":79,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":15,"slug":157,"source":8,"term":79,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":92,"slug":160,"source":8,"term":79,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":96,"slug":163,"source":8,"term":79,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":100,"slug":166,"source":8,"term":79,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":169,"source":8,"term":79,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":172,"source":8,"term":79,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":71,"slug":175,"source":8,"term":9,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":75,"slug":178,"source":8,"term":9,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":79,"slug":181,"source":8,"term":9,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":9,"slug":12,"source":8,"term":9,"title_fa":13},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":15,"slug":16,"source":8,"term":9,"title_fa":17},{"free_preview":5,"order":92,"slug":187,"source":8,"term":9,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":96,"slug":190,"source":8,"term":9,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":71,"slug":193,"source":8,"term":6,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":75,"slug":196,"source":8,"term":6,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":79,"slug":199,"source":8,"term":6,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":9,"slug":202,"source":8,"term":6,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":6,"slug":205,"source":8,"term":6,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":15,"slug":208,"source":8,"term":6,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":92,"slug":211,"source":8,"term":6,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":96,"slug":214,"source":8,"term":6,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":217,"source":8,"term":6,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":220,"source":8,"term":6,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":71,"slug":223,"source":8,"term":15,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":75,"slug":226,"source":8,"term":15,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":79,"slug":229,"source":8,"term":15,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":9,"slug":232,"source":8,"term":15,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":6,"slug":235,"source":8,"term":15,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":15,"slug":238,"source":8,"term":15,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":92,"slug":241,"source":8,"term":15,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":96,"slug":244,"source":8,"term":15,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":247,"source":8,"term":15,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":15,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":15,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105153]