[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t4-s04-fluid-type":3,"course:taropood":59},{"meta":4,"prev":10,"next":14,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":6,"title_fa":9},true,4,"t4-s04-fluid-type","book","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":11,"slug":12,"source":8,"term":6,"title_fa":13},3,"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":15,"slug":16,"source":8,"term":6,"title_fa":17},5,"t4-s05-container-queries","فصل ۰۵ — container query",[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> است: با عرضِ صفحه نرم بزرگ و کوچک می‌شود، ولی نه آن‌قدر بزرگ که روی دسکتاپ غول‌پیکر شود و نه آن‌قدر کوچک که روی موبایل خوانده نشود. و همهٔ این‌ها بدونِ حتی یک \u003Ccode>@media\u003C\u002Fcode>. رازش یک تکه ریاضیِ کوچک در خودِ CSS است: واحدهایی که به اندازهٔ صفحه بند‌اند، و توابعی که یک مقدار را بینِ یک کف و یک سقف نگه می‌دارند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-fluid-type-bounded.8742bb6949.160.webp 160w, \u002F_img\u002F01-image-fluid-type-bounded.8742bb6949.320.webp 320w, \u002F_img\u002F01-image-fluid-type-bounded.8742bb6949.640.webp 640w, \u002F_img\u002F01-image-fluid-type-bounded.8742bb6949.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-fluid-type-bounded.8742bb6949.1280.jpg\" srcset=\"\u002F_img\u002F01-image-fluid-type-bounded.8742bb6949.160.jpg 160w, \u002F_img\u002F01-image-fluid-type-bounded.8742bb6949.320.jpg 320w, \u002F_img\u002F01-image-fluid-type-bounded.8742bb6949.640.jpg 640w, \u002F_img\u002F01-image-fluid-type-bounded.8742bb6949.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>vw\u003C\u002Fcode> و \u003Ccode>vh\u003C\u002Fcode> اندازه‌ها را به عرض و ارتفاعِ صفحه ببندی\u003C\u002Fli>\n\u003Cli>بگویی چرا \u003Ccode>vw\u003C\u002Fcode> خالص در دو سرِ طیف خراب می‌شود\u003C\u002Fli>\n\u003Cli>با \u003Ccode>clamp()\u003C\u002Fcode> یک اندازه را بینِ یک کف و یک سقف نگه داری\u003C\u002Fli>\n\u003Cli>با \u003Ccode>min()\u003C\u002Fcode>، \u003Ccode>max()\u003C\u002Fcode> و \u003Ccode>calc()\u003C\u002Fcode> در 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>rem\u003C\u002Fcode> و \u003Ccode>%\u003C\u002Fcode> و \u003Ccode>font-size\u003C\u002Fcode> — پایهٔ کار همین‌هاست.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱ و ۲ (همین ترم):\u003C\u002Fstrong> \u003Ccode>max-width\u003C\u002Fcode>، mobile-first و \u003Ccode>@media\u003C\u002Fcode> — این فصل جای خیلی از \u003Ccode>@media\u003C\u002Fcode> ها را با ریاضی پر می‌کند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۳ (همین ترم):\u003C\u002Fstrong> واحدِ \u003Ccode>vw\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-04-fluid-type",{"kind":20,"heading":32,"html":33},"۱. vw و vh: واحدی که به اندازهٔ صفحه بند است","\u003Ch2 id=\"۱-vw-و-vh-واحدی-که-به-اندازهٔ-صفحه-بند-است\">۱. \u003Ccode>vw\u003C\u002Fcode> و \u003Ccode>vh\u003C\u002Fcode>: واحدی که به اندازهٔ صفحه بند است\u003Ca class=\"head-anchor\" href=\"#%DB%B1-vw-%D9%88-vh-%D9%88%D8%A7%D8%AD%D8%AF%DB%8C-%DA%A9%D9%87-%D8%A8%D9%87-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87%D9%94-%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D9%86%D8%AF-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجا اندازه‌ها را با \u003Ccode>px\u003C\u002Fcode> و \u003Ccode>rem\u003C\u002Fcode> می‌دادی — واحدهایی که به صفحه کاری ندارند. \u003Ccode>vw\u003C\u002Fcode> فرق دارد: \u003Ccode>1vw\u003C\u002Fcode> یعنی «یک درصدِ عرضِ صفحه». پس \u003Ccode>100vw\u003C\u002Fcode> یعنی کلِ عرض، و \u003Ccode>5vw\u003C\u002Fcode> یعنی پنج درصدِ عرض. چون به عرضِ صفحه بند است، وقتی صفحه پهن‌تر شود این اندازه هم بزرگ‌تر می‌شود — خودبه‌خود. یک خواهرِ هم دارد: \u003Ccode>vh\u003C\u002Fcode> که همان است ولی برای \u003Cstrong>ارتفاع\u003C\u002Fstrong>؛ \u003Ccode>1vh\u003C\u002Fcode> یعنی یک درصدِ ارتفاعِ صفحه.\u003C\u002Fp>\n\u003Cp>بیا روی تیتر امتحانش کنیم. در آزمایشگاه به \u003Ccode>h1\u003C\u002Fcode> این را بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>h1 {\n  font-size: 5vw;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> عرضِ پیش‌نمایش را آرام پهن و باریک کن. اندازهٔ تیتر نرم با عرض بالا و پایین می‌رود — بدونِ هیچ \u003Ccode>@media\u003C\u002Fcode>، بدونِ هیچ جهش. این همان «سیال» بودن است: به‌جای چند اندازهٔ پله‌ای، یک تغییرِ پیوسته.\u003C\u002Fp>\n\u003Cp>\u003Ccode>vh\u003C\u002Fcode> هم دقیقاً همین است، فقط برای ارتفاع. یک کاربردِ رایجش وقتی است که می‌خواهی یک ناحیه بلندیِ صفحه را پر کند — مثلِ یک بخشِ خوش‌آمدِ بالای سایت که می‌خواهی تقریباً کلِ صفحه را بگیرد. به \u003Ccode>.hero\u003C\u002Fcode> این را بده و ببین:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.hero {\n  min-height: 80vh;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>min-height: 80vh\u003C\u002Fcode> یعنی «حداقل هشتاد درصدِ ارتفاعِ صفحه بلند باش». ارتفاعِ پیش‌نمایش را کم و زیاد کن و ببین ناحیه با آن بالا و پایین می‌رود. برای ادامهٔ فصل این خط را می‌توانی برداری؛ تمرکزِ ما روی اندازهٔ فونت است، ولی خوب است بدانی \u003Ccode>vh\u003C\u002Fcode> هم همان‌جا هست.\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. مشکل: vw خالص در دو سرِ طیف خراب می‌شود","\u003Ch2 id=\"۲-مشکل-vw-خالص-در-دو-سرِ-طیف-خراب-می‌شود\">۲. مشکل: \u003Ccode>vw\u003C\u002Fcode> خالص در دو سرِ طیف خراب می‌شود\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D9%85%D8%B4%DA%A9%D9%84-vw-%D8%AE%D8%A7%D9%84%D8%B5-%D8%AF%D8%B1-%D8%AF%D9%88-%D8%B3%D8%B1%D9%90-%D8%B7%DB%8C%D9%81-%D8%AE%D8%B1%D8%A7%D8%A8-%D9%85%DB%8C%E2%80%8C%D8%B4%D9%88%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>5vw\u003C\u002Fcode> روی عرض‌های معمولی خوب کار می‌کند، ولی دو سرِ طیف را امتحان کن. پیش‌نمایش را تا جای ممکن \u003Cstrong>پهن\u003C\u002Fstrong> کن: تیتر آن‌قدر بزرگ می‌شود که مسخره است و از صفحه می‌زند بیرون. حالا تا جای ممکن \u003Cstrong>باریک\u003C\u002Fstrong> کن: تیتر آن‌قدر کوچک می‌شود که به‌زحمت خوانده می‌شود. \u003Ccode>5vw\u003C\u002Fcode> هیچ ترمزی ندارد — کورکورانه با عرض بالا و پایین می‌رود، تا هر اندازهٔ احمقانه‌ای.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> بله، این بزرگ‌شدنِ افسارگسیخته و کوچک‌شدنِ بیش‌ازحد همان چیزی است که باید ببینی — و مشکلِ اصلیِ \u003Ccode>vw\u003C\u002Fcode> خالص است. \u003Ccode>vw\u003C\u002Fcode> یک \u003Cstrong>کف\u003C\u002Fstrong> و یک \u003Cstrong>سقف\u003C\u002Fstrong> لازم دارد تا از حد خارج نشود. راهش این نیست که برای هر عرض یک \u003Ccode>@media\u003C\u002Fcode> بنویسی؛ راهِ تمیز یک تابعِ CSS است به اسم \u003Ccode>clamp()\u003C\u002Fcode> که در بخش بعد می‌سازیم.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":38,"html":39},"۳. clamp(): یک مقدار با کف، دلخواه و سقف","\u003Ch2 id=\"۳-clamp-یک-مقدار-با-کف-دلخواه-و-سقف\">۳. \u003Ccode>clamp()\u003C\u002Fcode>: یک مقدار با کف، دلخواه و سقف\u003Ca class=\"head-anchor\" href=\"#%DB%B3-clamp-%DB%8C%DA%A9-%D9%85%D9%82%D8%AF%D8%A7%D8%B1-%D8%A8%D8%A7-%DA%A9%D9%81-%D8%AF%D9%84%D8%AE%D9%88%D8%A7%D9%87-%D9%88-%D8%B3%D9%82%D9%81\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>clamp()\u003C\u002Fcode> سه مقدار می‌گیرد و همیشه یکی را برمی‌گرداند که در بازه بماند: \u003Ccode>clamp(کف, دلخواه, سقف)\u003C\u002Fcode>. کارش ساده است: مقدارِ \u003Cstrong>دلخواه\u003C\u002Fstrong> را حساب می‌کند؛ اگر از کف کمتر شد، کف را می‌دهد؛ اگر از سقف بیشتر شد، سقف را می‌دهد؛ وگرنه همان دلخواه. مقدارِ دلخواه را همان \u003Ccode>5vw\u003C\u002Fcode> می‌گذاریم تا سیال بماند، ولی این‌بار بینِ دو مرز:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>h1 {\n  font-size: clamp(1.75rem, 5vw, 3.5rem);\n  line-height: 1.2;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا همان دو سرِ طیف را دوباره امتحان کن. روی صفحهٔ خیلی پهن، تیتر به \u003Ccode>3.5rem\u003C\u002Fcode> می‌رسد و \u003Cstrong>می‌ایستد\u003C\u002Fstrong> — دیگر غول‌پیکر نمی‌شود. روی صفحهٔ خیلی باریک، زیرِ \u003Ccode>1.75rem\u003C\u002Fcode> نمی‌رود و خوانا می‌ماند. بینِ این دو، هنوز نرم و سیال با \u003Ccode>5vw\u003C\u002Fcode> تغییر می‌کند. یک خط، جای ده‌ها \u003Ccode>@media\u003C\u002Fcode> را گرفت.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-clamp-floor-ceiling.7b5ec7184f.160.webp 160w, \u002F_img\u002F02-image-clamp-floor-ceiling.7b5ec7184f.320.webp 320w, \u002F_img\u002F02-image-clamp-floor-ceiling.7b5ec7184f.640.webp 640w, \u002F_img\u002F02-image-clamp-floor-ceiling.7b5ec7184f.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-clamp-floor-ceiling.7b5ec7184f.1280.jpg\" srcset=\"\u002F_img\u002F02-image-clamp-floor-ceiling.7b5ec7184f.160.jpg 160w, \u002F_img\u002F02-image-clamp-floor-ceiling.7b5ec7184f.320.jpg 320w, \u002F_img\u002F02-image-clamp-floor-ceiling.7b5ec7184f.640.jpg 640w, \u002F_img\u002F02-image-clamp-floor-ceiling.7b5ec7184f.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک محورِ افقی که مقدارِ دلخواه با شیب بالا می‌رود، ولی زیرِ یک خطِ کف و بالای یک خطِ سقف صاف می‌شود؛ بخشِ میانیِ شیب‌دار جایی است که clamp سیال است و دو سرِ صافش جایی که به کف و سقف قفل شده\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> ترتیبِ سه مقدار را قاطی نکن: اول کف، وسط دلخواه، آخر سقف. یک قاعدهٔ سرانگشتی برای فونت: کف را روی کوچک‌ترین اندازه‌ای بگذار که هنوز راحت خوانده می‌شود، و سقف را جایی که دیگر بزرگ‌تر شدن زشت است. همین را برای \u003Ccode><p>\u003C\u002Fcode> هم می‌شود کرد، فقط با عددهای کوچک‌تر.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>قبل از ادامه، جواب بده:\u003C\u002Fstrong> در \u003Ccode>clamp(1rem, 2vw, 1.5rem)\u003C\u002Fcode>، اگر \u003Ccode>2vw\u003C\u002Fcode> روی یک صفحهٔ خیلی پهن برابرِ \u003Ccode>4rem\u003C\u002Fcode> شود، خروجی چه می‌شود؟ (\u003Ccode>1.5rem\u003C\u002Fcode> — چون از سقف بیشتر شده، سقف برمی‌گردد.)\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. min() و max(): کوچک‌ترین یا بزرگ‌ترین را انتخاب کن","\u003Ch2 id=\"۴-min-و-max-کوچک‌ترین-یا-بزرگ‌ترین-را-انتخاب-کن\">۴. \u003Ccode>min()\u003C\u002Fcode> و \u003Ccode>max()\u003C\u002Fcode>: کوچک‌ترین یا بزرگ‌ترین را انتخاب کن\u003Ca class=\"head-anchor\" href=\"#%DB%B4-min-%D9%88-max-%DA%A9%D9%88%DA%86%DA%A9%E2%80%8C%D8%AA%D8%B1%DB%8C%D9%86-%DB%8C%D8%A7-%D8%A8%D8%B2%D8%B1%DA%AF%E2%80%8C%D8%AA%D8%B1%DB%8C%D9%86-%D8%B1%D8%A7-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>clamp()\u003C\u002Fcode> دو خواهرِ ساده‌تر دارد. \u003Ccode>min()\u003C\u002Fcode> کوچک‌ترینِ چند مقدار را برمی‌گرداند و \u003Ccode>max()\u003C\u002Fcode> بزرگ‌ترین را. اسمشان اول گیج‌کننده است، پس با یک مثالِ ملموس: برای عرضِ یک ناحیه بنویس \u003Ccode>min(90%, 800px)\u003C\u002Fcode>. این یعنی «کوچک‌ترینِ این دو را بگیر» — روی صفحهٔ باریک \u003Ccode>90%\u003C\u002Fcode> کوچک‌تر است پس ناحیه ۹۰٪ می‌شود (با کمی فاصله از لبه)، و روی صفحهٔ پهن \u003Ccode>800px\u003C\u002Fcode> کوچک‌تر است پس ناحیه سرِ ۸۰۰ می‌ایستد. یعنی دقیقاً همان کارِ \u003Ccode>max-width\u003C\u002Fcode> را با یک خط انجام می‌دهد. به \u003Ccode>.hero\u003C\u002Fcode> بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.hero {\n  width: min(90%, 800px);\n  margin: 0 auto;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> عرض را بکش. ناحیه تا ۸۰۰ پیکسل بزرگ می‌شود و می‌ایستد، و روی باریک ۹۰٪ عرض را می‌گیرد و همیشه کمی حاشیه از لبه دارد. \u003Ccode>max()\u003C\u002Fcode> هم برعکس است: \u003Ccode>max(50%, 300px)\u003C\u002Fcode> یعنی «هیچ‌وقت باریک‌تر از ۳۰۰ پیکسل نشو» — یک \u003Cstrong>کفِ\u003C\u002Fstrong> اندازه.\u003C\u002Fp>\n",{"kind":20,"heading":44,"html":45},"۵. calc(): ریاضی و ترکیبِ واحدها","\u003Ch2 id=\"۵-calc-ریاضی-و-ترکیبِ-واحدها\">۵. \u003Ccode>calc()\u003C\u002Fcode>: ریاضی و ترکیبِ واحدها\u003Ca class=\"head-anchor\" href=\"#%DB%B5-calc-%D8%B1%DB%8C%D8%A7%D8%B6%DB%8C-%D9%88-%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8%D9%90-%D9%88%D8%A7%D8%AD%D8%AF%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>calc()\u003C\u002Fcode> می‌گذارد داخلِ CSS حساب کنی، و مهم‌تر: \u003Cstrong>واحدهای مختلف را با هم قاطی کنی\u003C\u002Fstrong> — چیزی که وگرنه ممکن نیست. مثلاً «کلِ عرض، منهای دو رِم فاصله» می‌شود \u003Ccode>calc(100% - 2rem)\u003C\u002Fcode>. مرورگر \u003Ccode>100%\u003C\u002Fcode> را که نمی‌داند چند پیکسل است و \u003Ccode>2rem\u003C\u002Fcode> را با هم حساب می‌کند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.hero {\n  width: calc(100% - 2rem);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>مهم: دورِ علامتِ منها و جمع \u003Cstrong>فاصله\u003C\u002Fstrong> بگذار (\u003Ccode>100% - 2rem\u003C\u002Fcode>، نه \u003Ccode>100%-2rem\u003C\u002Fcode>)، وگرنه CSS آن را نمی‌فهمد. \u003Ccode>calc()\u003C\u002Fcode> با \u003Ccode>clamp()\u003C\u002Fcode> هم ترکیب می‌شود؛ مثلاً به‌جای یک \u003Ccode>5vw\u003C\u002Fcode> خالی، می‌توانی مقدارِ دلخواه را نرم‌تر کنی: \u003Ccode>clamp(1rem, calc(0.5rem + 3vw), 3rem)\u003C\u002Fcode> — یک کفِ ثابتِ \u003Ccode>0.5rem\u003C\u002Fcode> که \u003Ccode>3vw\u003C\u002Fcode> رویش سوار می‌شود. فعلاً همین \u003Ccode>calc(100% - 2rem)\u003C\u002Fcode> را بفهم؛ ترکیب‌های پیشرفته‌ترش را در ترم‌های بعد بیشتر می‌بینی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بپرس «یک \u003Ccode>font-size\u003C\u002Fcode> سیال با \u003Ccode>clamp()\u003C\u002Fcode> برای یک تیتر بنویس که روی موبایل حدود ۲۸ پیکسل و روی دسکتاپ حدود ۵۶ پیکسل باشد». جوابش را خط‌به‌خط بخوان: کف و سقف را درست گذاشته؟ مقدارِ وسط \u003Ccode>vw\u003C\u002Fcode> دارد؟ بعد در آزمایشگاه بگذارش و دو سرِ طیف را بکش — AI گاهی کف و سقف را جابه‌جا می‌نویسد و آن‌وقت \u003Ccode>clamp()\u003C\u002Fcode> قفل می‌شود و اصلاً تغییر نمی‌کند. فقط با دیدن می‌فهمی‌اش.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":47,"html":48},"کد کاملِ این فصل","\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>تایپوگرافی سیال<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="hero">\n      <h1>سلام دنیا<\u002Fh1>\n      <p>این متن با عرضِ صفحه بزرگ و کوچک می‌شود، ولی هیچ‌وقت از حد خارج نمی‌شود.<\u002Fp>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode> — دقت کن که \u003Ccode>min()\u003C\u002Fcode> جای \u003Ccode>max-width\u003C\u002Fcode> را گرفته و \u003Ccode>clamp()\u003C\u002Fcode> اندازهٔ فونت را سیال کرده، همه بدونِ یک \u003Ccode>@media\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}\n\n.hero {\n  width: min(90%, 800px);\n  margin: 0 auto;\n  padding: clamp(1rem, 5vw, 3rem);\n}\n\nh1 {\n  font-size: clamp(1.75rem, 5vw, 3.5rem);\n  line-height: 1.2;\n}\n\np {\n  font-size: clamp(1rem, 2.5vw, 1.25rem);\n  line-height: 1.6;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی صفحه یک تیتر و یک پاراگراف در یک ناحیهٔ وسط‌چین می‌بینی. عرض را از خیلی باریک تا خیلی پهن بکش: همه‌چیز نرم بزرگ و کوچک می‌شود، ولی نه تیتر غول‌پیکر می‌شود و نه متن ناخوانا. حتی \u003Ccode>padding\u003C\u002Fcode> هم با \u003Ccode>clamp()\u003C\u002Fcode> سیال است. این کلِ قدرتِ ریاضیِ CSS است.\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>\u003Ccode>vw\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>وی-دبلیو\u003C\u002Ftd>\n\u003Ctd>یک درصدِ عرضِ صفحه؛ اندازه را به عرضِ صفحه می‌بندد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>vh\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>وی-اِیچ\u003C\u002Ftd>\n\u003Ctd>یک درصدِ ارتفاعِ صفحه\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>clamp()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کلَمپ\u003C\u002Ftd>\n\u003Ctd>یک مقدار را بینِ یک کف و یک سقف نگه می‌دارد: \u003Ccode>clamp(کف, دلخواه, سقف)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>min()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>مین\u003C\u002Ftd>\n\u003Ctd>کوچک‌ترینِ چند مقدار را برمی‌گرداند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>max()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>مکس\u003C\u002Ftd>\n\u003Ctd>بزرگ‌ترینِ چند مقدار را برمی‌گرداند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>calc()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کَلک\u003C\u002Ftd>\n\u003Ctd>داخلِ 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>font-size: 5vw\u003C\u002Fcode> به‌تنهایی روی صفحه‌های خیلی پهن یا خیلی باریک بد می‌شود، و \u003Ccode>clamp()\u003C\u002Fcode> چطور حلش می‌کند؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک کارت بساز با یک تیتر و دو پاراگراف. به تیتر \u003Ccode>font-size: clamp(...)\u003C\u002Fcode> بده تا بینِ یک اندازهٔ خوانا و یک اندازهٔ بزرگ سیال باشد، و عرضِ کارت را با \u003Ccode>min(90%, 600px)\u003C\u002Fcode> تعیین کن. عرض را بکش و مطمئن شو نه تیتر از حد بزرگ می‌شود نه کارت از ۶۰۰ رد می‌شود.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> همان تیتر را یک بار با \u003Ccode>font-size: 5vw\u003C\u002Fcode> خالی بنویس و یک بار با \u003Ccode>clamp()\u003C\u002Fcode>. عرض را تا دو سرِ نهایی بکش و برای هر کدام بنویس چه اتفاقی می‌افتد. بعد توضیح بده اگر بخواهی همین کار را فقط با \u003Ccode>@media\u003C\u002Fcode> بکنی، چند تا لازم داری و چرا \u003Ccode>clamp()\u003C\u002Fcode> تمیزتر است.\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>الان چیدمان، تصویر و متن — هر سه — می‌توانند responsive باشند، و خیلی از کارها را بدونِ \u003Ccode>@media\u003C\u002Fcode> با ریاضی انجام می‌دهی. تا اینجا همه‌چیز به عرضِ \u003Cstrong>کلِ صفحه\u003C\u002Fstrong> نگاه می‌کرد. ولی گاهی یک component باید به عرضِ \u003Cstrong>جعبهٔ خودش\u003C\u002Fstrong> پاسخ بدهد، نه کلِ صفحه — مثلِ یک کارت که در یک ستونِ باریک یک‌شکل و در یک ستونِ پهن شکلِ دیگری می‌گیرد. فصل بعد سراغِ \u003Ccode>container query\u003C\u002Fcode> می‌رویم: \u003Ccode>media query\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,81,84,87,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,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],{"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":11,"slug":79,"source":8,"term":71,"title_fa":80},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":6,"slug":82,"source":8,"term":71,"title_fa":83},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":15,"slug":85,"source":8,"term":71,"title_fa":86},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":88,"slug":89,"source":8,"term":71,"title_fa":90},6,"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":11,"slug":114,"source":8,"term":75,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":6,"slug":117,"source":8,"term":75,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":15,"slug":120,"source":8,"term":75,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":88,"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":11,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":75,"slug":145,"source":8,"term":11,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":11,"slug":148,"source":8,"term":11,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":6,"slug":151,"source":8,"term":11,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":15,"slug":154,"source":8,"term":11,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":88,"slug":157,"source":8,"term":11,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":92,"slug":160,"source":8,"term":11,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":96,"slug":163,"source":8,"term":11,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":100,"slug":166,"source":8,"term":11,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":169,"source":8,"term":11,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":172,"source":8,"term":11,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":71,"slug":175,"source":8,"term":6,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":75,"slug":178,"source":8,"term":6,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":11,"slug":12,"source":8,"term":6,"title_fa":13},{"free_preview":5,"order":6,"slug":7,"source":8,"term":6,"title_fa":9},{"free_preview":5,"order":15,"slug":16,"source":8,"term":6,"title_fa":17},{"free_preview":5,"order":88,"slug":184,"source":8,"term":6,"title_fa":185},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":92,"slug":187,"source":8,"term":6,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":96,"slug":190,"source":8,"term":6,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":71,"slug":193,"source":8,"term":15,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":75,"slug":196,"source":8,"term":15,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":11,"slug":199,"source":8,"term":15,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":6,"slug":202,"source":8,"term":15,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":15,"slug":205,"source":8,"term":15,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":88,"slug":208,"source":8,"term":15,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":92,"slug":211,"source":8,"term":15,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":96,"slug":214,"source":8,"term":15,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":217,"source":8,"term":15,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":220,"source":8,"term":15,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":71,"slug":223,"source":8,"term":88,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":75,"slug":226,"source":8,"term":88,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":11,"slug":229,"source":8,"term":88,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":6,"slug":232,"source":8,"term":88,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":15,"slug":235,"source":8,"term":88,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":88,"slug":238,"source":8,"term":88,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":92,"slug":241,"source":8,"term":88,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":96,"slug":244,"source":8,"term":88,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":247,"source":8,"term":88,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":88,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":88,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105147]