[{"data":1,"prerenderedAt":259},["ShallowReactive",2],{"lesson:t4-s03-responsive-images":3,"course:taropood":62},{"meta":4,"prev":11,"next":15,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,3,"t4-s03-responsive-images","book",4,"فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},2,"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":9,"slug":16,"source":8,"term":9,"title_fa":17},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",[19,23,26,31,34,37,40,43,46,49,52,55,59],{"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>آخر این فصل یک صفحهٔ پستِ کوتاه داری با یک عکسِ بزرگِ بالای مطلب و یک عکسِ کوچکِ گردِ نویسنده — و هر دو کاملاً responsive‌اند. عکسِ بزرگ روی هر عرضی جا می‌شود و از صفحه بیرون نمی‌زند، عکسِ گرد شکلش را نگه می‌دارد و کش نمی‌آید، و مرورگر برای هر صفحه اندازهٔ درستِ فایل را دانلود می‌کند نه یک عکسِ غول‌پیکر. تصویر تا اینجا تنها چیزی بود که به قاعده‌های responsive گوش نمی‌داد؛ این فصل رامش می‌کند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-responsive-image-fits.73e060b4a5.160.webp 160w, \u002F_img\u002F01-image-responsive-image-fits.73e060b4a5.320.webp 320w, \u002F_img\u002F01-image-responsive-image-fits.73e060b4a5.640.webp 640w, \u002F_img\u002F01-image-responsive-image-fits.73e060b4a5.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-responsive-image-fits.73e060b4a5.1280.jpg\" srcset=\"\u002F_img\u002F01-image-responsive-image-fits.73e060b4a5.160.jpg 160w, \u002F_img\u002F01-image-responsive-image-fits.73e060b4a5.320.jpg 320w, \u002F_img\u002F01-image-responsive-image-fits.73e060b4a5.640.jpg 640w, \u002F_img\u002F01-image-responsive-image-fits.73e060b4a5.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>max-width: 100%\u003C\u002Fcode> جلوی سرریزِ یک عکس را بگیری\u003C\u002Fli>\n\u003Cli>با \u003Ccode>object-fit\u003C\u002Fcode> یک عکس را در یک شکلِ مشخص بدونِ کش‌آمدن جا بدهی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>aspect-ratio\u003C\u002Fcode> جای عکس را رزرو کنی تا صفحه نپرد\u003C\u002Fli>\n\u003Cli>با \u003Ccode>srcset\u003C\u002Fcode> و \u003Ccode>sizes\u003C\u002Fcode> بگذاری مرورگر اندازهٔ درستِ عکس را انتخاب کند\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><img>\u003C\u002Fcode>، \u003Ccode>src\u003C\u002Fcode>، \u003Ccode>alt\u003C\u002Fcode>، \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> و \u003Ccode><figure>\u003C\u002Fcode>\u002F\u003Ccode><figcaption>\u003C\u002Fcode> — پایهٔ کار همین‌هاست.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱ و ۲ (همین ترم):\u003C\u002Fstrong> \u003Ccode>max-width\u003C\u002Fcode>، \u003Ccode>%\u003C\u002Fcode> و mobile-first.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۳:\u003C\u002Fstrong> \u003Ccode>display: flex\u003C\u002Fcode>، \u003Ccode>align-items\u003C\u002Fcode> و \u003Ccode>gap\u003C\u002Fcode> — برای چیدنِ عکسِ نویسنده کنارِ اسمش.\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-03-responsive-images",{"kind":20,"heading":32,"html":33},"۱. تصویری که از جعبه‌اش بیرون می‌زند","\u003Ch2 id=\"۱-تصویری-که-از-جعبه‌اش-بیرون-می‌زند\">۱. تصویری که از جعبه‌اش بیرون می‌زند\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1%DB%8C-%DA%A9%D9%87-%D8%A7%D8%B2-%D8%AC%D8%B9%D8%A8%D9%87%E2%80%8C%D8%A7%D8%B4-%D8%A8%DB%8C%D8%B1%D9%88%D9%86-%D9%85%DB%8C%E2%80%8C%D8%B2%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بیا با یک پستِ ساده شروع کنیم: یک \u003Ccode><main>\u003C\u002Fcode> باریک با یک تیتر و یک عکسِ بزرگ. عکس را با \u003Ccode><img>\u003C\u002Fcode> می‌گذاریم، مثل ترم ۱:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><main class="post">\n  <h1>یک سفر کوتاه<\u002Fh1>\n  <img src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F800\u002F450"\n       alt="رودخانه‌ای که از میان کوه‌های جنگلی می‌گذرد"\n       width="800" height="450">\n<\u002Fmain>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و به \u003Ccode>.post\u003C\u002Fcode> یک عرضِ نسبی بده تا مثل فصل ۱ جمع‌وجور بماند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.post {\n  max-width: 700px;\n  margin: 0 auto;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا نگاه کن. \u003Ccode>.post\u003C\u002Fcode> نهایتاً ۷۰۰ پیکسل است، ولی عکس ۸۰۰ پیکسل پهناست — و از جعبه‌اش بیرون می‌زند، از لبهٔ صفحه رد می‌شود و یک نوارِ لغزشِ افقی می‌سازد. عرضِ پیش‌نمایش را باریک‌تر کن؛ بدتر می‌شود، چون عکس همچنان اصرار دارد ۸۰۰ پیکسل بماند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> بله، این سرریز همان چیزی است که باید ببینی. یک \u003Ccode><img>\u003C\u002Fcode> به‌طور پیش‌فرض به عرضِ \u003Cstrong>واقعیِ فایل\u003C\u002Fstrong> کشیده می‌شود و به عرضِ جعبه‌اش کاری ندارد. علاجش یک خطِ کوتاه است که در بخش بعد می‌نویسیم: \u003Ccode>max-width: 100%\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":35,"html":36},"۲. max-width: 100% و height: auto","\u003Ch2 id=\"۲-max-width-100%-و-height-auto\">۲. \u003Ccode>max-width: 100%\u003C\u002Fcode> و \u003Ccode>height: auto\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B2-max-width-100%25-%D9%88-height-auto\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>max-width: 100%\u003C\u002Fcode> روی یک عکس یعنی «هیچ‌وقت پهن‌تر از جعبه‌ات نشو». اگر جعبه از عکس بزرگ‌تر بود، عکس اندازهٔ واقعی‌اش می‌ماند؛ اگر جعبه کوچک‌تر شد، عکس با آن جمع می‌شود. \u003Ccode>height: auto\u003C\u002Fcode> را هم کنارش می‌گذاری تا وقتی عرض کم می‌شود، ارتفاع هم به همان نسبت کم شود و عکس کش نیاید:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.hero {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا عرضِ پیش‌نمایش را باریک و پهن کن. عکس دیگر بیرون نمی‌زند و نوارِ لغزشِ افقی رفته؛ روی صفحهٔ باریک با آن جمع می‌شود و نسبتش هم حفظ می‌ماند. این دو خط (\u003Ccode>max-width: 100%\u003C\u002Fcode> و \u003Ccode>height: auto\u003C\u002Fcode>) مهم‌ترین چیزِ کلِ فصل‌اند — تقریباً هر عکسی روی وب به همین دو نیاز دارد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> فرق \u003Ccode>width: 100%\u003C\u002Fcode> و \u003Ccode>max-width: 100%\u003C\u002Fcode> مثل فصل ۱ است: \u003Ccode>width: 100%\u003C\u002Fcode> عکسِ کوچک را هم به زور بزرگ می‌کند تا کلِ جعبه را پر کند (و تارش می‌کند)، ولی \u003Ccode>max-width: 100%\u003C\u002Fcode> فقط جلوی بزرگ‌ترشدن از جعبه را می‌گیرد و عکسِ کوچک را کش نمی‌دهد. برای عکس، تقریباً همیشه \u003Ccode>max-width\u003C\u002Fcode> را می‌خواهی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":38,"html":39},"۳. object-fit: پر کردنِ یک شکل بدونِ کش‌آمدن","\u003Ch2 id=\"۳-object-fit-پر-کردنِ-یک-شکل-بدونِ-کش‌آمدن\">۳. \u003Ccode>object-fit\u003C\u002Fcode>: پر کردنِ یک شکل بدونِ کش‌آمدن\u003Ca class=\"head-anchor\" href=\"#%DB%B3-object-fit-%D9%BE%D8%B1-%DA%A9%D8%B1%D8%AF%D9%86%D9%90-%DB%8C%DA%A9-%D8%B4%DA%A9%D9%84-%D8%A8%D8%AF%D9%88%D9%86%D9%90-%DA%A9%D8%B4%E2%80%8C%D8%A2%D9%85%D8%AF%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>گاهی می‌خواهی عکس یک \u003Cstrong>شکلِ مشخص\u003C\u002Fstrong> بگیرد — مثلاً عکسِ گردِ نویسنده که باید مربع (بعد گرد) باشد، هرچند فایلش مستطیل است. بیا \u003Ccode><figure>\u003C\u002Fcode> نویسنده را اضافه کنیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><figure class="author">\n  <img class="avatar"\n       src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F64\u002F300\u002F200"\n       alt="عکس نویسنده" width="300" height="200">\n  <figcaption>نوشتهٔ آوا<\u002Ffigcaption>\n<\u002Ffigure>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>فایلِ این عکس مستطیل است (۳۰۰ در ۲۰۰). اگر به زور در یک مربعِ ۹۶ در ۹۶ بگذاری‌اش، پهن‌به‌پهن فشرده می‌شود و صورتِ آدم کشیده و بدشکل می‌شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.avatar {\n  width: 96px;\n  height: 96px;\n  border-radius: 50%;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این را در آزمایشگاه امتحان کن و ببین: عکس در مربع فشرده و لهیده شده. \u003Ccode>object-fit: cover\u003C\u002Fcode> این را حل می‌کند — به عکس می‌گوید «جعبه را پر کن، ولی نسبتت را نگه دار؛ هرچه اضافه آمد را از لبه‌ها ببُر». \u003Ccode>height: 96px\u003C\u002Fcode> را با \u003Ccode>object-fit\u003C\u002Fcode> عوض کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.avatar {\n  width: 96px;\n  height: 96px;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا عکسِ گرد بدونِ هیچ کش‌آمدنی جا شده؛ به‌جای فشرده‌شدن، وسطش نگه داشته شده و طرفینِ اضافه بریده شده. \u003Ccode>object-fit: cover\u003C\u002Fcode> رایج‌ترین حالت است؛ یک حالتِ دیگرش \u003Ccode>contain\u003C\u002Fcode> است که کلِ عکس را نشان می‌دهد و اگر لازم شد دورش فضای خالی می‌گذارد.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-object-fit-cover.96de142ba3.160.webp 160w, \u002F_img\u002F02-image-object-fit-cover.96de142ba3.320.webp 320w, \u002F_img\u002F02-image-object-fit-cover.96de142ba3.640.webp 640w, \u002F_img\u002F02-image-object-fit-cover.96de142ba3.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-object-fit-cover.96de142ba3.1280.jpg\" srcset=\"\u002F_img\u002F02-image-object-fit-cover.96de142ba3.160.jpg 160w, \u002F_img\u002F02-image-object-fit-cover.96de142ba3.320.jpg 320w, \u002F_img\u002F02-image-object-fit-cover.96de142ba3.640.jpg 640w, \u002F_img\u002F02-image-object-fit-cover.96de142ba3.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"مقایسهٔ یک عکسِ منظرهٔ مستطیل که در یک جعبهٔ مربع قرار می‌گیرد: سمت راست فشرده و کش‌آمده، سمت چپ با object-fit وسطش نگه‌داشته و لبه‌ها بریده و بدونِ کش‌آمدن\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. aspect-ratio: نسبتِ ثابت بدونِ پرش","\u003Ch2 id=\"۴-aspect-ratio-نسبتِ-ثابت-بدونِ-پرش\">۴. \u003Ccode>aspect-ratio\u003C\u002Fcode>: نسبتِ ثابت بدونِ پرش\u003Ca class=\"head-anchor\" href=\"#%DB%B4-aspect-ratio-%D9%86%D8%B3%D8%A8%D8%AA%D9%90-%D8%AB%D8%A7%D8%A8%D8%AA-%D8%A8%D8%AF%D9%88%D9%86%D9%90-%D9%BE%D8%B1%D8%B4\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آن \u003Ccode>height: 96px\u003C\u002Fcode> یک عیبِ کوچک دارد: عددِ ثابت است. اگر بعداً عرض را عوض کنی، شکل به‌هم می‌ریزد. \u003Ccode>aspect-ratio\u003C\u002Fcode> بهتر است: به‌جای ارتفاعِ ثابت، \u003Cstrong>نسبت\u003C\u002Fstrong> را ثابت می‌کند و ارتفاع را خودش از روی عرض حساب می‌کند. برای یک مربع می‌نویسی \u003Ccode>aspect-ratio: 1 \u002F 1\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.avatar {\n  width: 96px;\n  aspect-ratio: 1 \u002F 1;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> عکس هنوز یک مربعِ گرد است، ولی حالا اگر \u003Ccode>width\u003C\u002Fcode> را عوض کنی، مربع بودنش حفظ می‌ماند چون ارتفاع همیشه برابرِ عرض حساب می‌شود. یک سودِ بزرگِ دیگر هم دارد: مرورگر پیش از دانلودِ عکس هم می‌داند جایش چه شکلی است، پس جای عکس را از اول رزرو می‌کند و وقتی عکس می‌رسد، بقیهٔ صفحه \u003Cstrong>نمی‌پرد\u003C\u002Fstrong>. همین پرش، یکی از آزاردهنده‌ترین عیب‌های صفحه‌های کُند است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> همان \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode> که در ترم ۱ روی \u003Ccode><img>\u003C\u002Fcode> گذاشتی هم همین کارِ رزروِ جا را می‌کند. \u003Ccode>aspect-ratio\u003C\u002Fcode> وقتی به کار می‌آید که شکلِ نمایشِ عکس با شکلِ فایلش فرق دارد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":44,"html":45},"۵. srcset و sizes: عکسِ درست برای هر عرض","\u003Ch2 id=\"۵-srcset-و-sizes-عکسِ-درست-برای-هر-عرض\">۵. \u003Ccode>srcset\u003C\u002Fcode> و \u003Ccode>sizes\u003C\u002Fcode>: عکسِ درست برای هر عرض\u003Ca class=\"head-anchor\" href=\"#%DB%B5-srcset-%D9%88-sizes-%D8%B9%DA%A9%D8%B3%D9%90-%D8%AF%D8%B1%D8%B3%D8%AA-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%87%D8%B1-%D8%B9%D8%B1%D8%B6\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک مشکل باقی مانده که دیده نمی‌شود ولی مهم است: عکسِ بزرگ همیشه فایلِ ۸۰۰ پیکسلی را دانلود می‌کند، حتی روی یک موبایلِ باریک که فقط ۳۶۰ پیکسل جا دارد. یعنی موبایل دارد دیتای هدر می‌دهد. \u003Ccode>srcset\u003C\u002Fcode> این را حل می‌کند: چند نسخه با عرض‌های مختلف به مرورگر می‌دهی و می‌گویی هر کدام چند پیکسل پهناست (با پسوندِ \u003Ccode>w\u003C\u002Fcode>)، و مرورگر خودش مناسب‌ترین را برمی‌دارد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><img\n  class="hero"\n  src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F800\u002F450"\n  srcset="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F400\u002F225 400w,\n          https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F800\u002F450 800w,\n          https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F1200\u002F675 1200w"\n  sizes="(min-width: 700px) 680px, 100vw"\n  alt="رودخانه‌ای که از میان کوه‌های جنگلی می‌گذرد"\n  width="800"\n  height="450">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>srcset\u003C\u002Fcode> فهرستِ نسخه‌هاست و \u003Ccode>400w\u003C\u002Fcode> یعنی «این فایل ۴۰۰ پیکسل پهناست». \u003Ccode>sizes\u003C\u002Fcode> به مرورگر می‌گوید عکس روی صفحه چقدر جا می‌گیرد تا بتواند درست انتخاب کند: اینجا نوشته‌ایم «اگر عرضِ صفحه از ۷۰۰ بیشتر بود، عکس ۶۸۰ پیکسل جا می‌گیرد؛ وگرنه کلِ عرضِ صفحه». آن \u003Ccode>100vw\u003C\u002Fcode> یعنی «کلِ عرضِ صفحه» — این \u003Ccode>vw\u003C\u002Fcode> را فعلاً همین‌طور بپذیر؛ فصل بعد کامل یادش می‌گیریم. \u003Ccode>src\u003C\u002Fcode> هم می‌ماند به‌عنوان نسخهٔ پیش‌فرض برای مرورگرهای خیلی قدیمی.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی صفحه فرقی نمی‌بینی — و همین درست است. سودِ \u003Ccode>srcset\u003C\u002Fcode> در سرعت و مصرفِ دیتاست، نه در ظاهر. مرورگر روی موبایل نسخهٔ کوچک را برمی‌دارد و روی دسکتاپِ پهن نسخهٔ بزرگ را.\u003C\u002Fp>\n",{"kind":20,"heading":47,"html":48},"۶. <picture>: وقتی عکسِ متفاوت می‌خواهی","\u003Ch2 id=\"۶-picture-وقتی-عکسِ-متفاوت-می‌خواهی\">۶. \u003Ccode><picture>\u003C\u002Fcode>: وقتی عکسِ متفاوت می‌خواهی\u003Ca class=\"head-anchor\" href=\"#%DB%B6-picture-%D9%88%D9%82%D8%AA%DB%8C-%D8%B9%DA%A9%D8%B3%D9%90-%D9%85%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%D9%85%DB%8C%E2%80%8C%D8%AE%D9%88%D8%A7%D9%87%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>srcset\u003C\u002Fcode> نسخه‌های هم‌شکل با اندازه‌های مختلف می‌دهد. ولی گاهی می‌خواهی روی موبایل یک \u003Cstrong>عکسِ متفاوت\u003C\u002Fstrong> نشان بدهی — مثلاً یک بُرشِ نزدیک‌ترِ عمودی به‌جای منظرهٔ عریض. برای این کار \u003Ccode><picture>\u003C\u002Fcode> هست: چند \u003Ccode><source>\u003C\u002Fcode> با شرطِ \u003Ccode>media\u003C\u002Fcode> می‌گذاری و مرورگر اولین شرطِ درست را برمی‌دارد؛ \u003Ccode><img>\u003C\u002Fcode> هم همیشه ته‌اش می‌ماند به‌عنوان پیش‌فرض:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><picture>\n  <source media="(min-width: 700px)"\n          srcset="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F1200\u002F675">\n  <img src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F500\u002F700"\n       alt="رودخانه‌ای در میان کوه‌ها"\n       width="500" height="700">\n<\u002Fpicture>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>اینجا روی صفحهٔ پهن عکسِ عریض می‌آید و روی باریک عکسِ عمودی. به این کار «art direction» می‌گویند: تصمیم می‌گیری روی هر صفحه کدام بُرش بهتر است. برای اکثرِ عکس‌ها همان \u003Ccode>srcset\u003C\u002Fcode> کافی است؛ \u003Ccode><picture>\u003C\u002Fcode> را وقتی بیاور که واقعاً به عکسِ \u003Cstrong>متفاوت\u003C\u002Fstrong> نیاز داری.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> یک \u003Ccode><img>\u003C\u002Fcode> معمولی به دستیار AI ات بده و بپرس «این را برای responsive کامل کن — چه چیزهایی کم دارد؟». جوابش را خط‌به‌خط بسنج: آیا \u003Ccode>max-width: 100%\u003C\u002Fcode> را گفت؟ \u003Ccode>srcset\u003C\u002Fcode> و \u003Ccode>sizes\u003C\u002Fcode> را درست نوشت؟ \u003Ccode>alt\u003C\u002Fcode> را دست‌نخورده نگه داشت؟ بعد در آزمایشگاه امتحانش کن — AI گاهی \u003Ccode>sizes\u003C\u002Fcode> را غلط می‌نویسد و همان باعث می‌شود نسخهٔ اشتباه دانلود شود، که فقط با دیدنِ نتیجه پیدا می‌شود.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":50,"html":51},"کد کاملِ این فصل","\u003Ch2 id=\"کد-کاملِ-این-فصل\">کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%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>عکس responsive<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="post">\n      <h1>یک سفر کوتاه<\u002Fh1>\n      <img\n        class="hero"\n        src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F800\u002F450"\n        srcset="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F400\u002F225 400w,\n                https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F800\u002F450 800w,\n                https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F1200\u002F675 1200w"\n        sizes="(min-width: 700px) 680px, 100vw"\n        alt="رودخانه‌ای که از میان کوه‌های جنگلی می‌گذرد"\n        width="800"\n        height="450">\n      <p>این عکس روی هر عرضی اندازهٔ درستِ خودش را می‌گیرد و بدشکل نمی‌شود.<\u002Fp>\n      <figure class="author">\n        <img\n          class="avatar"\n          src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F64\u002F300\u002F200"\n          alt="عکس نویسنده"\n          width="300"\n          height="200">\n        <figcaption>نوشتهٔ آوا<\u002Ffigcaption>\n      <\u002Ffigure>\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  background-color: #f6edda;\n  margin: 0;\n  padding: 16px;\n}\n\n.post {\n  max-width: 700px;\n  margin: 0 auto;\n}\n\n.hero {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n}\n\n.author {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 0;\n}\n\n.avatar {\n  width: 96px;\n  aspect-ratio: 1 \u002F 1;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی صفحه یک پستِ تمیز می‌بینی: عکسِ بزرگِ بالای مطلب که با عرض جمع و باز می‌شود، و عکسِ گردِ نویسنده کنارِ اسمش که شکلش را نگه می‌دارد. عرض را بکش و مطمئن شو هیچ‌چیز بیرون نمی‌زند و هیچ‌چیز کش نمی‌آید.\u003C\u002Fp>\n",{"kind":20,"heading":53,"html":54},"واژه‌های تازهٔ این فصل","\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>\u003Ccode>max-width: 100%\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>مکس-ویدث صد درصد\u003C\u002Ftd>\n\u003Ctd>عکس هیچ‌وقت پهن‌تر از جعبه‌اش نمی‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>object-fit\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>آبجکت-فیت\u003C\u002Ftd>\n\u003Ctd>چطور عکس داخلِ جعبه‌اش جا شود؛ \u003Ccode>cover\u003C\u002Fcode> یعنی پر کن و لبه‌ها را ببُر\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>aspect-ratio\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اسپکت-ریشو\u003C\u002Ftd>\n\u003Ctd>نسبتِ عرض به ارتفاع را ثابت می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>srcset\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>سورس-ست\u003C\u002Ftd>\n\u003Ctd>فهرستِ چند نسخهٔ عکس با عرض‌های مختلف برای انتخابِ مرورگر\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>sizes\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>سایزِز\u003C\u002Ftd>\n\u003Ctd>به مرورگر می‌گوید عکس روی صفحه چقدر جا می‌گیرد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><picture>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>پیکچر\u003C\u002Ftd>\n\u003Ctd>برای دادنِ عکسِ متفاوت روی صفحه‌های مختلف (art direction)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":56,"heading":57,"html":58},"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>max-width: 100%\u003C\u002Fcode> بهتر از \u003Ccode>width: 100%\u003C\u002Fcode> برای یک عکس است؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک گالریِ سه‌تایی عکس بساز (از فصل ۲ grid را قرض بگیر). به همهٔ عکس‌ها \u003Ccode>max-width: 100%\u003C\u002Fcode> بده و هر کدام را با \u003Ccode>aspect-ratio: 4 \u002F 3\u003C\u002Fcode> و \u003Ccode>object-fit: cover\u003C\u002Fcode> هم‌شکل کن. عرض را باریک کن و مطمئن شو هیچ عکسی بیرون نمی‌زند و همه یک‌شکل می‌مانند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> عکسِ نویسنده را یک بار با \u003Ccode>object-fit: cover\u003C\u002Fcode> و یک بار با \u003Ccode>object-fit: contain\u003C\u002Fcode> بگذار و فرقشان را در یک جمله بنویس. بعد \u003Ccode>object-fit\u003C\u002Fcode> را کلاً بردار و توضیح بده چرا عکس بدشکل می‌شود.\u003C\u002Fp>\n",{"kind":20,"heading":60,"html":61},"در فصل بعد","\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>الان چیدمان و تصویر، هر دو، responsive‌اند. یک چیزِ آخر مانده: \u003Cstrong>متن\u003C\u002Fstrong>. اندازهٔ فونت را هم می‌شود سیال کرد تا خودش با عرضِ صفحه بزرگ و کوچک شود — بدونِ اینکه برای هر breakpoint یک \u003Ccode>@media\u003C\u002Fcode> بنویسی. فصل بعد سراغِ ریاضیِ CSS می‌رویم: \u003Ccode>clamp()\u003C\u002Fcode>، \u003Ccode>min()\u003C\u002Fcode>، \u003Ccode>max()\u003C\u002Fcode>، \u003Ccode>calc()\u003C\u002Fcode> و همان واحدِ \u003Ccode>vw\u003C\u002Fcode> که این فصل قرضش گرفتیم، این‌بار کامل.\u003C\u002Fp>\n",{"course":63,"entitled":71,"lessons":72,"payments_enabled":71,"terms":258,"live":5},{"active_window":64,"effective_price_toman":65,"free":5,"lesson_count":66,"price_toman":67,"slug":68,"summary_fa":69,"title_fa":70},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[73,77,80,83,86,90,94,98,102,106,110,113,116,119,122,125,128,131,134,137,140,144,147,150,153,156,159,162,165,168,171,174,177,180,181,182,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255],{"free_preview":5,"order":74,"slug":75,"source":8,"term":74,"title_fa":76},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":12,"slug":78,"source":8,"term":74,"title_fa":79},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":6,"slug":81,"source":8,"term":74,"title_fa":82},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":9,"slug":84,"source":8,"term":74,"title_fa":85},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":87,"slug":88,"source":8,"term":74,"title_fa":89},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":91,"slug":92,"source":8,"term":74,"title_fa":93},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":95,"slug":96,"source":8,"term":74,"title_fa":97},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":99,"slug":100,"source":8,"term":74,"title_fa":101},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":103,"slug":104,"source":8,"term":74,"title_fa":105},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":107,"slug":108,"source":8,"term":74,"title_fa":109},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":74,"slug":111,"source":8,"term":12,"title_fa":112},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":12,"slug":114,"source":8,"term":12,"title_fa":115},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":6,"slug":117,"source":8,"term":12,"title_fa":118},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":9,"slug":120,"source":8,"term":12,"title_fa":121},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":87,"slug":123,"source":8,"term":12,"title_fa":124},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":91,"slug":126,"source":8,"term":12,"title_fa":127},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":95,"slug":129,"source":8,"term":12,"title_fa":130},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":99,"slug":132,"source":8,"term":12,"title_fa":133},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":103,"slug":135,"source":8,"term":12,"title_fa":136},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":107,"slug":138,"source":8,"term":12,"title_fa":139},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":141,"slug":142,"source":8,"term":12,"title_fa":143},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":74,"slug":145,"source":8,"term":6,"title_fa":146},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":12,"slug":148,"source":8,"term":6,"title_fa":149},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":6,"slug":151,"source":8,"term":6,"title_fa":152},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":9,"slug":154,"source":8,"term":6,"title_fa":155},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":87,"slug":157,"source":8,"term":6,"title_fa":158},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":91,"slug":160,"source":8,"term":6,"title_fa":161},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":95,"slug":163,"source":8,"term":6,"title_fa":164},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":99,"slug":166,"source":8,"term":6,"title_fa":167},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":103,"slug":169,"source":8,"term":6,"title_fa":170},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":107,"slug":172,"source":8,"term":6,"title_fa":173},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":141,"slug":175,"source":8,"term":6,"title_fa":176},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":74,"slug":178,"source":8,"term":9,"title_fa":179},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":9,"slug":16,"source":8,"term":9,"title_fa":17},{"free_preview":5,"order":87,"slug":184,"source":8,"term":9,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":91,"slug":187,"source":8,"term":9,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":95,"slug":190,"source":8,"term":9,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":99,"slug":193,"source":8,"term":9,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":74,"slug":196,"source":8,"term":87,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":12,"slug":199,"source":8,"term":87,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":6,"slug":202,"source":8,"term":87,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":9,"slug":205,"source":8,"term":87,"title_fa":206},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":87,"slug":208,"source":8,"term":87,"title_fa":209},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":91,"slug":211,"source":8,"term":87,"title_fa":212},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":95,"slug":214,"source":8,"term":87,"title_fa":215},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":99,"slug":217,"source":8,"term":87,"title_fa":218},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":103,"slug":220,"source":8,"term":87,"title_fa":221},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":107,"slug":223,"source":8,"term":87,"title_fa":224},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":74,"slug":226,"source":8,"term":91,"title_fa":227},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":12,"slug":229,"source":8,"term":91,"title_fa":230},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":6,"slug":232,"source":8,"term":91,"title_fa":233},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":9,"slug":235,"source":8,"term":91,"title_fa":236},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":87,"slug":238,"source":8,"term":91,"title_fa":239},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":91,"slug":241,"source":8,"term":91,"title_fa":242},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":95,"slug":244,"source":8,"term":91,"title_fa":245},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":99,"slug":247,"source":8,"term":91,"title_fa":248},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":103,"slug":250,"source":8,"term":91,"title_fa":251},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":107,"slug":253,"source":8,"term":91,"title_fa":254},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":141,"slug":256,"source":8,"term":91,"title_fa":257},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105142]