[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t6-s07-performance":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,7,"t6-s07-performance","book",6,"فصل ۰۷ — سرعت",{"free_preview":5,"order":9,"slug":12,"source":8,"term":9,"title_fa":13},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":15,"slug":16,"source":8,"term":9,"title_fa":17},8,"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",[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>یک صفحه می‌تواند درست ساخته شده باشد و باز هم بد باشد — اگر کند باز شود، یا موقعِ باز شدن جلوِ چشمِ کاربر بپرد و تکان بخورد. در این فصل چند عادتِ حرفه‌ای یاد می‌گیری که یک صفحهٔ سنگین و پرشی را به یک صفحهٔ سبک و آرام تبدیل می‌کنند. آخرِ فصل یک صفحهٔ سفرنامه داری که موقعِ بارگذاری \u003Cstrong>هیچ تکانی نمی‌خورد\u003C\u002Fstrong>: جای تصویر از قبل رزرو شده، تصویرش سبک است، و CSSِ بی‌استفاده‌اش را حذف کرده‌ای.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-cls-jump.7ab62490bd.160.webp 160w, \u002F_img\u002F01-image-cls-jump.7ab62490bd.320.webp 320w, \u002F_img\u002F01-image-cls-jump.7ab62490bd.640.webp 640w, \u002F_img\u002F01-image-cls-jump.7ab62490bd.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-cls-jump.7ab62490bd.1280.jpg\" srcset=\"\u002F_img\u002F01-image-cls-jump.7ab62490bd.160.jpg 160w, \u002F_img\u002F01-image-cls-jump.7ab62490bd.320.jpg 320w, \u002F_img\u002F01-image-cls-jump.7ab62490bd.640.jpg 640w, \u002F_img\u002F01-image-cls-jump.7ab62490bd.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>بگویی CLS چیست و چرا \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> روی تصویر جلویش را می‌گیرد\u003C\u002Fli>\n\u003Cli>تصویرها را به‌اندازه و سبک نگه داری\u003C\u002Fli>\n\u003Cli>با \u003Ccode>font-display\u003C\u002Fcode> جلوی متنِ نامرئیِ موقعِ بارگذاریِ فونت را بگیری\u003C\u002Fli>\n\u003Cli>CSSِ بی‌استفاده را پیدا و حذف کنی\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>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> و تصویرِ responsive — همان بحث را اینجا به سرعت وصل می‌کنیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲:\u003C\u002Fstrong> \u003Ccode>@font-face\u003C\u002Fcode> و فونتِ فارسی — این‌بار به بارگذاریِ فونت نگاه می‌کنیم.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":27,"heading":28,"html":29,"embed":30},"lab","","— یک صفحهٔ سفرنامه می‌بینی که تصویرش width و height ندارد و موقعِ بارگذاری متن را به پایین هُل می‌دهد. کارِ این فصل این است که این پرش را ببینی و درستش کنی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-6-professional\u002Fsession-07-performance",{"kind":20,"heading":32,"html":33},"۱. سرعت یک ویژگیِ طراحی است","\u003Ch2 id=\"۱-سرعت-یک-ویژگیِ-طراحی-است\">۱. سرعت یک ویژگیِ طراحی است\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%B3%D8%B1%D8%B9%D8%AA-%DB%8C%DA%A9-%D9%88%DB%8C%DA%98%DA%AF%DB%8C%D9%90-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فکر کن صفحه‌ای را باز می‌کنی، شروع می‌کنی به خواندن، و ناگهان همه‌چیز یک تکان می‌خورد و می‌پرد پایین — چون یک تصویر دیر رسید و جا باز کرد. یا روی یک دکمه انگشت می‌گذاری و در همان لحظه صفحه می‌پرد و دکمهٔ اشتباهی را می‌زنی. این آزاردهنده است، و کاربر معمولاً نمی‌داند \u003Cstrong>چرا\u003C\u002Fstrong> بد است؛ فقط حس می‌کند صفحه بی‌کیفیت است.\u003C\u002Fp>\n\u003Cp>سرعت و پایداری چیزی نیست که آخرِ کار به صفحه اضافه کنی؛ یک ویژگیِ طراحی است، مثلِ رنگ و چیدمان. خبرِ خوب این است که چند عادتِ ساده بیشترِ مشکل را حل می‌کنند، و در این فصل همان‌ها را می‌بینیم.\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. CLS: چرا صفحه می‌پرد","\u003Ch2 id=\"۲-cls-چرا-صفحه-می‌پرد\">۲. CLS: چرا صفحه می‌پرد\u003Ca class=\"head-anchor\" href=\"#%DB%B2-cls-%DA%86%D8%B1%D8%A7-%D8%B5%D9%81%D8%AD%D9%87-%D9%85%DB%8C%E2%80%8C%D9%BE%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آن پرشِ ناگهانی یک اسم دارد: \u003Ccode>CLS\u003C\u002Fcode>، یعنی جابه‌جاییِ ناگهانیِ چیدمان. شایع‌ترین علتش تصویری است که \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode> ندارد. چرا؟ چون مرورگر تا وقتی تصویر نرسیده \u003Cstrong>نمی‌داند چقدر جا لازم دارد\u003C\u002Fstrong>، پس صفر جا می‌گذارد و متن را می‌چسباند بالا. بعد که تصویر رسید، ناگهان جای واقعی‌اش را باز می‌کند و همه‌چیزِ زیرش را هُل می‌دهد پایین.\u003C\u002Fp>\n\u003Cp>بیا ببینیمش. تصویرِ صفحه را بدونِ اندازه بگذار — یعنی \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode> را از تگش بردار:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><img class="hero" src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F800\u002F450" alt="رودخانه‌ای در جنگل">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا در DevTools مرورگر، بخشِ Network، سرعت را روی \u003Ccode>Slow 3G\u003C\u002Fcode> بگذار و صفحه را دوباره بار کن. نگاه کن: اول متن می‌چسبد بالا، بعد که تصویر می‌رسد، همه‌چیز یک تکانِ زشت می‌خورد و می‌پرد پایین. این همان CLS است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> مرورگر جای تصویر را نمی‌دانست چون هیچ اندازه‌ای ندادی. راهِ حل این است که همان \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode>ِ اصلِ تصویر را روی تگ بنویسی. مرورگر از روی این دو، \u003Cstrong>نسبتِ\u003C\u002Fstrong> تصویر را می‌فهمد و از همان اول یک جای خالیِ درست‌اندازه رزرو می‌کند — پس وقتی تصویر می‌رسد، دقیقاً توی جای آماده می‌نشیند و چیزی تکان نمی‌خورد:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><img class="hero" src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F800\u002F450" alt="رودخانه‌ای در جنگل"\n  width="800" height="450">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> دوباره با \u003Ccode>Slow 3G\u003C\u002Fcode> بار کن. این‌بار از همان اول یک جای خالیِ به‌اندازهٔ تصویر آنجاست، متن سرِ جای نهایی‌اش نشسته، و وقتی تصویر می‌رسد \u003Cstrong>هیچ‌چیز نمی‌پرد\u003C\u002Fstrong>. در CSS هم \u003Ccode>width: 100%\u003C\u002Fcode> و \u003Ccode>height: auto\u003C\u002Fcode> داریم تا تصویر روی هر عرضی جمع‌وجور شود، ولی نسبتش از همان دو عددِ تگ می‌آید.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> اگر اندازهٔ دقیقِ پیکسلیِ تصویر را نداری، به‌جای \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> می‌توانی در CSS از \u003Ccode>aspect-ratio\u003C\u002Fcode> استفاده کنی (مثلاً \u003Ccode>aspect-ratio: 16 \u002F 9\u003C\u002Fcode>). آن هم جا را از قبل رزرو می‌کند و جلوی همان پرش را می‌گیرد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>قبل از ادامه، جواب بده: اگر یک \u003Ccode><video>\u003C\u002Fcode> را هم بدونِ \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> بگذاری، همان پرش را می‌بینی؟\u003C\u002Fp>\n\u003Cp>بله. CLS مخصوصِ تصویر نیست؛ هر چیزی که دیر بار می‌شود و جایش از قبل رزرو نشده — یک ویدیو، یک قابِ جاسازی‌شده — همان تکان را می‌سازد. برای همین عادتِ «جا را از قبل رزرو کن» یک قانونِ کلی است، نه فقط یک ترفندِ عکس.\u003C\u002Fp>\n",{"kind":20,"heading":38,"html":39},"۳. تصویر: اندازه و فرمت","\u003Ch2 id=\"۳-تصویر-اندازه-و-فرمت\">۳. تصویر: اندازه و فرمت\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87-%D9%88-%D9%81%D8%B1%D9%85%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک اشتباهِ رایجِ دیگر: یک تصویرِ غول‌پیکرِ ۳۰۰۰ پیکسلی را در یک جای ۴۰۰ پیکسلیِ صفحه می‌گذاری. مرورگر کلِ آن فایلِ سنگین را دانلود می‌کند، بعد کوچکش می‌کند تا جا شود — یعنی کاربر مِگابایت‌ها داده را برای چیزی که کوچک دیده می‌شود دانلود کرده. راهِ درست این است که تصویر را \u003Cstrong>قبل از گذاشتن روی سایت\u003C\u002Fstrong> به اندازهٔ واقعیِ نمایشش کوچک کنی.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-oversized.6fc7a764d4.160.webp 160w, \u002F_img\u002F02-image-oversized.6fc7a764d4.320.webp 320w, \u002F_img\u002F02-image-oversized.6fc7a764d4.640.webp 640w, \u002F_img\u002F02-image-oversized.6fc7a764d4.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-oversized.6fc7a764d4.1280.jpg\" srcset=\"\u002F_img\u002F02-image-oversized.6fc7a764d4.160.jpg 160w, \u002F_img\u002F02-image-oversized.6fc7a764d4.320.jpg 320w, \u002F_img\u002F02-image-oversized.6fc7a764d4.640.jpg 640w, \u002F_img\u002F02-image-oversized.6fc7a764d4.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک تصویرِ خیلی بزرگ در سمتِ راست که با یک فلش فشرده می‌شود تا داخلِ یک قابِ کوچکِ سمتِ چپ جا شود؛ اختلافِ اندازهٔ آن دو نشان می‌دهد چه حجمِ اضافه‌ای بی‌جهت دانلود شده\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>فرمت هم مهم است. فرمت‌های امروزی مثلِ \u003Ccode>WebP\u003C\u002Fcode> همان تصویر را با حجمِ خیلی کمتر از \u003Ccode>JPG\u003C\u002Fcode>ِ قدیمی ذخیره می‌کنند. برای عکس‌ها \u003Ccode>WebP\u003C\u002Fcode>، و برای آیکون‌ها همان \u003Ccode>SVG\u003C\u002Fcode>ِ فصلِ قبل که اصلاً حجمِ چندانی ندارد.\u003C\u002Fp>\n\u003Cp>از ترم ۴ یادت هست که با \u003Ccode>srcset\u003C\u002Fcode> می‌شد چند نسخهٔ هم‌عکس در اندازه‌های مختلف داد و مرورگر خودش مناسب‌ترین را برمی‌داشت؟ آنجا هم دقیقاً همین بحثِ سرعت بود: با \u003Ccode>srcset\u003C\u002Fcode>، تلفنِ کوچک نسخهٔ کوچک را می‌گیرد و مانیتورِ بزرگ نسخهٔ بزرگ را — هیچ‌کس بایتِ اضافه دانلود نمی‌کند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> در DevTools بخشِ Network، ستونِ اندازه (Size) به تو می‌گوید هر تصویر چند کیلوبایت است. یک تصویرِ چند مگابایتی برای یک عکسِ کوچک، یعنی همان‌جا جای بهترشدن داری. حدس نزن — عدد را ببین.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":41,"html":42},"۴. font-display: متنِ نامرئی وقتی فونت می‌آید","\u003Ch2 id=\"۴-font-display-متنِ-نامرئی-وقتی-فونت-می‌آید\">۴. \u003Ccode>font-display\u003C\u002Fcode>: متنِ نامرئی وقتی فونت می‌آید\u003Ca class=\"head-anchor\" href=\"#%DB%B4-font-display-%D9%85%D8%AA%D9%86%D9%90-%D9%86%D8%A7%D9%85%D8%B1%D8%A6%DB%8C-%D9%88%D9%82%D8%AA%DB%8C-%D9%81%D9%88%D9%86%D8%AA-%D9%85%DB%8C%E2%80%8C%D8%A2%DB%8C%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>وقتی یک فونتِ سفارشی (مثلِ یک فونتِ زیبای فارسی) را با \u003Ccode>@font-face\u003C\u002Fcode> بار می‌کنی، تا وقتی آن فایل نرسیده مرورگر باید تصمیم بگیرد با متن چه کند. رفتارِ پیش‌فرضش بد است: تا چند ثانیه متن را \u003Cstrong>کاملاً نامرئی\u003C\u002Fstrong> نگه می‌دارد تا فونت برسد. کاربر به یک صفحهٔ خالی زل می‌زند در حالی که متن آماده است.\u003C\u002Fp>\n\u003Cp>\u003Ccode>font-display: swap\u003C\u002Fcode> این را عوض می‌کند: «متن را همین حالا با یک فونتِ ساده نشان بده، و هر وقت فونتِ اصلی رسید، عوضش کن». این‌طور کاربر هیچ‌وقت متنِ نامرئی نمی‌بیند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@font-face {\n  font-family: "Vazirmatn";\n  src: url("vazirmatn.woff2") format("woff2");\n  font-display: swap;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این هم‌خانوادهٔ همان مشکلِ CLS است: هر دو دربارهٔ چیزی‌اند که دیر می‌رسد. با \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> جای تصویر را رزرو کردی؛ با \u003Ccode>font-display: swap\u003C\u002Fcode> متن را در فاصلهٔ رسیدنِ فونت خوانا نگه می‌داری. عادتِ حرفه‌ای این است: هر منبعی که ممکن است دیر برسد را طوری بچین که کاربر در آن فاصله سردرگم یا معطل نشود.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> \u003Ccode>swap\u003C\u002Fcode> یک معاملهٔ کوچک دارد — لحظه‌ای که فونتِ اصلی می‌رسد، متن یک تکانِ ریز از فونتِ ساده به فونتِ اصلی می‌خورد. این تکانِ کوچک تقریباً همیشه بهتر از چند ثانیه متنِ کاملاً نامرئی است، ولی خوب است بدانی هست.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":44,"html":45},"۵. CSSِ بی‌استفاده را حذف کن","\u003Ch2 id=\"۵-cssِ-بی‌استفاده-را-حذف-کن\">۵. CSSِ بی‌استفاده را حذف کن\u003Ca class=\"head-anchor\" href=\"#%DB%B5-css%D9%90-%D8%A8%DB%8C%E2%80%8C%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%B1%D8%A7-%D8%AD%D8%B0%D9%81-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>CSS هم دانلود می‌شود و هم باید خوانده شود. وقتی پروژه بزرگ می‌شود، پُر می‌شود از قاعده‌هایی که دیگر به هیچ عنصری نمی‌خورند — کلاسی که پاکش کردی ولی استایلش ماند، یک component که حذف شد ولی CSS اش نه. این‌ها بی‌فایده حجم اضافه می‌کنند و فایل را شلوغ نگه می‌دارند.\u003C\u002Fp>\n\u003Cp>DevTools مرورگر ابزاری به‌نامِ Coverage دارد که دقیقاً همین را نشان می‌دهد: کدام خط‌های CSS در این صفحه اصلاً به‌کار نرفته‌اند. آن‌ها را که پیدا کردی، مطمئن شو واقعاً جای دیگری لازم نیستند و بعد \u003Cstrong>حذفشان کن\u003C\u002Fstrong>. کمترین CSSِ درست، بهترین CSS است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> یک فایلِ CSS و HTML به دستیار AI ات بده و بپرس «کدام selector ها در این HTML به هیچ عنصری نمی‌خورند؟». می‌تواند سریع مظنون‌ها را نشان دهد — ولی \u003Cstrong>خودت\u003C\u002Fstrong> با Coverageِ مرورگر تأییدش کن؛ AI ممکن است کلاسی را که جای دیگری استفاده می‌شود اشتباه «بی‌استفاده» بخواند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":47,"html":48},"۶. کد کامل","\u003Ch2 id=\"۶-کد-کامل\">۶. کد کامل\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode> — دقت کن که تصویر هم \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\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>سرعت<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="post">\n      <p class="tag">سفرنامه<\u002Fp>\n      <h1>سه روز در جنگل<\u002Fh1>\n      <img\n        class="hero"\n        src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F800\u002F450"\n        alt="رودخانه‌ای که از میان کوه‌های جنگلی می‌گذرد"\n        width="800"\n        height="450">\n      <p>صبحِ روزِ اول با صدای رودخانه بیدار شدیم و تا شب بینِ درخت‌ها راه رفتیم.<\u002Fp>\n      <p>اینجا اینترنت نبود، و برای همین حواسمان فقط به مسیر و به هم بود.<\u002Fp>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode> — تصویر با \u003Ccode>width: 100%\u003C\u002Fcode> و \u003Ccode>height: auto\u003C\u002Fcode> روی هر عرضی جمع می‌شود، ولی نسبتش را از عددهای تگ می‌گیرد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\n:root {\n  --bg: #f6edda;\n  --card: #ffffff;\n  --ink: #2c2114;\n  --muted: #5a5342;\n  --accent: #55731b;\n  --line: #d8ccae;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: var(--bg);\n  color: var(--ink);\n  padding: 40px;\n  line-height: 1.9;\n}\n\n.post {\n  max-width: 480px;\n  margin-inline: auto;\n  padding: 24px;\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 16px;\n}\n\n.tag {\n  margin: 0;\n  color: var(--accent);\n  font-weight: 700;\n}\n\n.post h1 {\n  margin: 4px 0 16px;\n  font-size: 1.5rem;\n}\n\n.hero {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: 12px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> صفحه با \u003Ccode>Slow 3G\u003C\u002Fcode> هم آرام بار می‌شود: جای تصویر از اول رزرو است، متن سرِ جای نهایی‌اش نشسته، و موقعِ رسیدنِ تصویر هیچ‌چیز نمی‌پرد.\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>CLS\u003C\u002Ftd>\n\u003Ctd>سی‌اِل‌اِس\u003C\u002Ftd>\n\u003Ctd>جابه‌جاییِ ناگهانیِ چیدمان؛ وقتی صفحه موقعِ بارگذاری می‌پرد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>font-display\u003C\u002Ftd>\n\u003Ctd>فونت دیسپلِی\u003C\u002Ftd>\n\u003Ctd>property که می‌گوید تا رسیدنِ فونت با متن چه کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>swap\u003C\u002Ftd>\n\u003Ctd>سواپ\u003C\u002Ftd>\n\u003Ctd>مقدارِ \u003Ccode>font-display\u003C\u002Fcode> که یعنی «فعلاً فونتِ ساده، بعد عوضش کن»\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>WebP\u003C\u002Ftd>\n\u003Ctd>وِب‌پی\u003C\u002Ftd>\n\u003Ctd>فرمتِ تصویرِ امروزی با حجمِ کمتر از \u003Ccode>JPG\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Coverage\u003C\u002Ftd>\n\u003Ctd>کاوِرِج\u003C\u002Ftd>\n\u003Ctd>ابزارِ DevTools که CSS و کدِ بی‌استفادهٔ صفحه را نشان می‌دهد\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>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> روی تصویر باعثِ پرش می‌شود؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک تصویرِ دومِ کوچک‌تر به صفحه اضافه کن (مثلاً یک \u003Ccode><img>\u003C\u002Fcode>ِ کناری). اول بدونِ \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> بگذارش و با \u003Ccode>Slow 3G\u003C\u002Fcode> پرش را ببین، بعد اندازه‌ها را اضافه کن و ببین پرش تمام می‌شود. هر دو حالت را با چشمِ خودت مقایسه کن.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> در DevTools تبِ Coverage را باز کن (از منوی سه‌نقطه ← More tools ← Coverage) و صفحه را بار کن. ببین چند درصد از CSSِ صفحه‌ات واقعاً استفاده شده. حالا یک کلاسِ الکی به CSS اضافه کن که به هیچ عنصری نمی‌خورد، دوباره بگیر، و ببین Coverage آن را به‌عنوان بی‌استفاده نشان می‌دهد.\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>الان می‌توانی یک صفحه را سبک و آرام نگه داری. تا اینجا CSSِ ما کوچک بوده و همه‌چیز سرِ جایش. فصل بعد سراغِ چیزی می‌رویم که وقتی پروژه \u003Cstrong>بزرگ\u003C\u002Fstrong> می‌شود پیش می‌آید: معماریِ CSS. یاد می‌گیری چطور کلاس‌ها را طوری نام‌گذاری کنی که به‌هم نریزند، فرقِ کلاس‌های utility و semantic چیست، و مهم‌تر از همه چطور از «جنگِ specificity» فرار کنی — همان جایی که هر اصلاح به یک selectorِ سنگین‌تر نیاز پیدا می‌کند تا آخرش \u003Ccode>!important\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,86,90,93,96,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,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,244,245,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":83,"slug":84,"source":8,"term":71,"title_fa":85},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":87,"slug":88,"source":8,"term":71,"title_fa":89},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":9,"slug":91,"source":8,"term":71,"title_fa":92},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":6,"slug":94,"source":8,"term":71,"title_fa":95},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":15,"slug":97,"source":8,"term":71,"title_fa":98},"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":83,"slug":117,"source":8,"term":75,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":87,"slug":120,"source":8,"term":75,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":9,"slug":123,"source":8,"term":75,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":6,"slug":126,"source":8,"term":75,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":15,"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":83,"slug":151,"source":8,"term":79,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":87,"slug":154,"source":8,"term":79,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":9,"slug":157,"source":8,"term":79,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":6,"slug":160,"source":8,"term":79,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":15,"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":83,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":75,"slug":178,"source":8,"term":83,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":79,"slug":181,"source":8,"term":83,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":83,"slug":184,"source":8,"term":83,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":87,"slug":187,"source":8,"term":83,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":9,"slug":190,"source":8,"term":83,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":6,"slug":193,"source":8,"term":83,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":15,"slug":196,"source":8,"term":83,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":71,"slug":199,"source":8,"term":87,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":75,"slug":202,"source":8,"term":87,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":79,"slug":205,"source":8,"term":87,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":83,"slug":208,"source":8,"term":87,"title_fa":209},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":87,"slug":211,"source":8,"term":87,"title_fa":212},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":9,"slug":214,"source":8,"term":87,"title_fa":215},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":6,"slug":217,"source":8,"term":87,"title_fa":218},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":15,"slug":220,"source":8,"term":87,"title_fa":221},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":223,"source":8,"term":87,"title_fa":224},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":226,"source":8,"term":87,"title_fa":227},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":71,"slug":229,"source":8,"term":9,"title_fa":230},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":75,"slug":232,"source":8,"term":9,"title_fa":233},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":79,"slug":235,"source":8,"term":9,"title_fa":236},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":83,"slug":238,"source":8,"term":9,"title_fa":239},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":87,"slug":241,"source":8,"term":9,"title_fa":242},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"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":100,"slug":247,"source":8,"term":9,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":9,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":9,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105771]