[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t2-s09-custom-props":3,"course:taropood":60},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,9,"t2-s09-custom-props","book",2,"فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},8,"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},10,"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",[20,24,27,32,35,38,41,44,47,50,53,57],{"kind":21,"heading":22,"html":23},"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> با یک اسمِ دلخواهِ خودت تعریف کنی و همه‌جا صدایشان بزنی. به این‌ها \u003Cstrong>custom property\u003C\u002Fstrong> می‌گویند. آخر فصل یک theme کوچک داری که با عوض‌کردنِ \u003Cstrong>یک خط\u003C\u002Fstrong>، رنگِ کلِ صفحه عوض می‌شود — و همین دقیقاً همان چیزی است که بعدها dark mode را ممکن می‌کند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-theme-tokens.fcf9a42647.160.webp 160w, \u002F_img\u002F01-image-theme-tokens.fcf9a42647.320.webp 320w, \u002F_img\u002F01-image-theme-tokens.fcf9a42647.640.webp 640w, \u002F_img\u002F01-image-theme-tokens.fcf9a42647.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-theme-tokens.fcf9a42647.1280.jpg\" srcset=\"\u002F_img\u002F01-image-theme-tokens.fcf9a42647.160.jpg 160w, \u002F_img\u002F01-image-theme-tokens.fcf9a42647.320.jpg 320w, \u002F_img\u002F01-image-theme-tokens.fcf9a42647.640.jpg 640w, \u002F_img\u002F01-image-theme-tokens.fcf9a42647.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>یک custom property با \u003Ccode>--name\u003C\u002Fcode> تعریف کنی و با \u003Ccode>var()\u003C\u002Fcode> صدایش بزنی\u003C\u002Fli>\n\u003Cli>برای وقتی که متغیر تعریف نشده، یک مقدارِ پیش‌فرض (\u003Ccode>fallback\u003C\u002Fcode>) بگذاری\u003C\u002Fli>\n\u003Cli>فرق تعریف روی \u003Ccode>:root\u003C\u002Fcode> (کلِ صفحه) و روی یک عنصرِ خاص (فقط همان‌جا) را بفهمی\u003C\u002Fli>\n\u003Cli>یک theme کوچک بسازی و رنگِ کلِ صفحه را با یک خط عوض کنی\u003C\u002Fli>\n\u003Cli>بگویی چرا AI دربارهٔ CSS گاهی با اعتمادبه‌نفس اشتباه می‌گوید، و چطور خودت ردش کنی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\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> کارت با رنگ، حاشیه و سایه — همان کارت را این‌بار با متغیر می‌سازیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۳:\u003C\u002Fstrong> cascade و inheritance — custom property ها هم مثل رنگ، از بالا به پایین به فرزندها می‌رسند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۷:\u003C\u002Fstrong> فرق \u003Ccode>block\u003C\u002Fcode> و \u003Ccode>inline\u003C\u002Fcode> — در بخش AI به‌کارش می‌بریم.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— دو کارت با یک دکمه می‌بینی که رنگشان چند جا تکرار شده. کارِ این فصل این است که این رنگ‌های تکراری را به متغیر تبدیل کنی و ببینی چطور با یک تغییر، همه‌جا با هم عوض می‌شوند","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-2-css-basics\u002Fsession-09-custom-props",{"kind":21,"heading":33,"html":34},"۱. مشکل: یک رنگ، ده جا","\u003Ch2 id=\"۱-مشکل-یک-رنگ-ده-جا\">۱. مشکل: یک رنگ، ده جا\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D9%85%D8%B4%DA%A9%D9%84-%DB%8C%DA%A9-%D8%B1%D9%86%DA%AF-%D8%AF%D9%87-%D8%AC%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فرض کن رنگِ اصلیِ سایتت \u003Ccode>#5a4bff\u003C\u002Fcode> (یک بنفشِ خوش‌رنگ) است. آن را هم برای دکمه نوشته‌ای، هم برای برچسب، هم برای لینک‌ها:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn {\n  background-color: #5a4bff;\n}\n\n.tag {\n  color: #5a4bff;\n}\n\n.link {\n  color: #5a4bff;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا مدیرِ سایت می‌گوید «بنفش را دوست ندارم، سبزش کن». باید هر سه جا را پیدا کنی و عوض کنی. سه جا که ساده است؛ ولی در یک سایتِ واقعی همین رنگ شاید در چهل جا باشد. یکی را جا می‌اندازی، و یک دکمهٔ بنفش وسطِ یک سایتِ سبز باقی می‌ماند. مشکل این است که رنگِ \u003Ccode>#5a4bff\u003C\u002Fcode> \u003Cstrong>اسم ندارد\u003C\u002Fstrong>؛ فقط یک کدِ تکرارشده است که معنایش («رنگِ اصلیِ سایت») هیچ‌جا نوشته نشده.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. یک متغیر بساز: --name و var()","\u003Ch2 id=\"۲-یک-متغیر-بساز---name-و-var\">۲. یک متغیر بساز: \u003Ccode>--name\u003C\u002Fcode> و \u003Ccode>var()\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%DB%8C%DA%A9-%D9%85%D8%AA%D8%BA%DB%8C%D8%B1-%D8%A8%D8%B3%D8%A7%D8%B2---name-%D9%88-var\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>راهِ حل این است که به آن رنگ یک \u003Cstrong>اسم\u003C\u002Fstrong> بدهی و بعد همه‌جا با آن اسم صدایش بزنی. این کار دو قدم دارد:\u003C\u002Fp>\n\u003Cp>\u003Cstrong>قدم اول — تعریف.\u003C\u002Fstrong> یک اسم می‌سازی که با دو خط‌تیره \u003Ccode>--\u003C\u002Fcode> شروع می‌شود و یک مقدار به آن می‌دهی. معمولاً این تعریف را روی \u003Ccode>:root\u003C\u002Fcode> می‌گذاری. \u003Ccode>:root\u003C\u002Fcode> یعنی «ریشهٔ صفحه» — بالاترین نقطه، جایی که هرچه تعریف کنی به همه‌جای صفحه می‌رسد.\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>:root {\n  --brand: #5a4bff;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>--brand\u003C\u002Fcode> اسمی است که خودت انتخاب کرده‌ای؛ می‌توانست \u003Ccode>--main-color\u003C\u002Fcode> یا هرچیزِ دیگری باشد. این‌که با \u003Ccode>--\u003C\u002Fcode> شروع شود اجباری است — این‌طور مرورگر می‌فهمد که این یک custom property است، نه یک property واقعیِ CSS.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>قدم دوم — استفاده.\u003C\u002Fstrong> هرجا آن رنگ را می‌خواهی، به‌جای کدِ رنگ می‌نویسی \u003Ccode>var(--brand)\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn {\n  background-color: var(--brand);\n  color: #ffffff;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>var(--brand)\u003C\u002Fcode> به مرورگر می‌گوید «هرچه \u003Ccode>--brand\u003C\u002Fcode> تعریف شده، همان را اینجا بگذار». حالا در آزمایشگاه دکمه را با \u003Ccode>var(--brand)\u003C\u002Fcode> بساز و ببین بنفش می‌شود.\u003C\u002Fp>\n\u003Cp>حالا جادو را ببین: مقدارِ \u003Ccode>--brand\u003C\u002Fcode> را روی \u003Ccode>:root\u003C\u002Fcode> از \u003Ccode>#5a4bff\u003C\u002Fcode> به \u003Ccode>#1f9d55\u003C\u002Fcode> (یک سبز) عوض کن. \u003Cstrong>فقط همان یک خط.\u003C\u002Fstrong> دکمه — و هر چیزِ دیگری که \u003Ccode>var(--brand)\u003C\u002Fcode> را نوشته باشد — یک‌جا سبز می‌شود. این همان چیزی است که در بخش قبل نداشتیم: یک منبعِ واحد که همه از آن تغذیه می‌کنند.\u003C\u002Fp>\n\u003Cp>حالا بیا یک اشتباهِ خیلی رایج را عمداً مرتکب شویم تا وقتی واقعی‌اش برایت پیش آمد، بشناسی‌اش. اسمِ متغیر را در \u003Ccode>var()\u003C\u002Fcode> غلط تایپ کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn {\n  background-color: var(--brnad);\n  color: #ffffff;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>نگاه کن: دکمه رنگش را \u003Cstrong>کاملاً از دست داد\u003C\u002Fstrong> — پس‌زمینه‌اش انگار پاک شد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> دقت کن، \u003Ccode>--brnad\u003C\u002Fcode> نوشته‌ایم نه \u003Ccode>--brand\u003C\u002Fcode>. چون هیچ متغیری به این اسم تعریف نشده، مرورگر نمی‌داند چه رنگی بگذارد، پس آن خط را \u003Cstrong>بی‌سروصدا دور می‌ریزد\u003C\u002Fstrong> و پس‌زمینه به حالتِ پیش‌فرضش (بی‌رنگ) برمی‌گردد. برخلافِ یک نام property غلط که معمولاً زود لو می‌رود، یک اسمِ متغیرِ غلط خطایی نشان نمی‌دهد؛ فقط ساکت کار نمی‌کند. راهِ حل: اسم را درست بنویس. اسمِ custom property باید \u003Cstrong>مو‌به‌مو\u003C\u002Fstrong> یکی باشد — حتی \u003Ccode>--Brand\u003C\u002Fcode> با \u003Ccode>--brand\u003C\u002Fcode> فرق دارد، چون به بزرگ و کوچکِ حروف حساس است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>اسم را به \u003Ccode>var(--brand)\u003C\u002Fcode> برگردان تا دکمه دوباره بنفش شود.\u003C\u002Fp>\n\u003Cp>قبل از ادامه، جواب بده: اگر \u003Ccode>--brand\u003C\u002Fcode> را روی \u003Ccode>:root\u003C\u002Fcode> تعریف کنی ولی در ده جای CSS از \u003Ccode>var(--brand)\u003C\u002Fcode> استفاده کنی و بعد مقدارِ \u003Ccode>--brand\u003C\u002Fcode> را عوض کنی، چند جا تغییر می‌کند؟\u003C\u002Fp>\n\u003Cp>هر ده جا، با هم، با یک تغییر. این کلِ فایدهٔ custom property است: یک منبع، هر تعداد مصرف‌کننده.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. مقدار پیش‌فرض: وقتی متغیر نباشد","\u003Ch2 id=\"۳-مقدار-پیش‌فرض-وقتی-متغیر-نباشد\">۳. مقدار پیش‌فرض: وقتی متغیر نباشد\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D9%85%D9%82%D8%AF%D8%A7%D8%B1-%D9%BE%DB%8C%D8%B4%E2%80%8C%D9%81%D8%B1%D8%B6-%D9%88%D9%82%D8%AA%DB%8C-%D9%85%D8%AA%D8%BA%DB%8C%D8%B1-%D9%86%D8%A8%D8%A7%D8%B4%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>var()\u003C\u002Fcode> یک قابلیتِ دومِ مفید هم دارد: می‌توانی بعد از اسمِ متغیر، با یک ویرگول، یک \u003Cstrong>مقدارِ پیش‌فرض\u003C\u002Fstrong> بگذاری. اگر آن متغیر تعریف شده باشد، مقدارش استفاده می‌شود؛ اگر نه، مقدارِ پیش‌فرض:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn {\n  background-color: var(--brand, #5a4bff);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این یعنی «\u003Ccode>--brand\u003C\u002Fcode> را بگذار؛ ولی اگر تعریف نشده بود، \u003Ccode>#5a4bff\u003C\u002Fcode> را بگذار». این یک تورِ نجات است برای وقتی مطمئن نیستی متغیر همیشه تعریف شده.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> مقدارِ پیش‌فرض جای درست‌نوشتنِ اسم را نمی‌گیرد. اگر مثلِ بخشِ قبل اسم را \u003Ccode>--brnad\u003C\u002Fcode> غلط بنویسی و یک پیش‌فرض هم بگذاری، دکمه \u003Cstrong>پیش‌فرض\u003C\u002Fstrong> را نشان می‌دهد و انگار همه‌چیز درست است — ولی متغیرِ اصلی‌ات هیچ‌وقت به‌کار نرفته. پس اول اسم را درست بنویس؛ پیش‌فرض برای «شاید تعریف‌نشده باشد» است، نه برای پنهان‌کردنِ اشتباهِ تایپی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. scope: کلِ صفحه یا فقط یک‌جا","\u003Ch2 id=\"۴-scope-کلِ-صفحه-یا-فقط-یک‌جا\">۴. scope: کلِ صفحه یا فقط یک‌جا\u003Ca class=\"head-anchor\" href=\"#%DB%B4-scope-%DA%A9%D9%84%D9%90-%D8%B5%D9%81%D8%AD%D9%87-%DB%8C%D8%A7-%D9%81%D9%82%D8%B7-%DB%8C%DA%A9%E2%80%8C%D8%AC%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا متغیر را روی \u003Ccode>:root\u003C\u002Fcode> تعریف کردیم که یعنی «همه‌جای صفحه». ولی می‌توانی همان اسم را روی یک عنصرِ خاص هم تعریف کنی — و آنجا مقدارِ تازه فقط برای \u003Cstrong>همان عنصر و فرزندهایش\u003C\u002Fstrong> به‌کار می‌رود. چرا؟ چون custom property ها هم مثل بقیهٔ ارث در CSS از بالا به پایین می‌روند (همان inheritance از فصل ۳).\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-scope-tree.5b5a35e59a.160.webp 160w, \u002F_img\u002F02-image-scope-tree.5b5a35e59a.320.webp 320w, \u002F_img\u002F02-image-scope-tree.5b5a35e59a.640.webp 640w, \u002F_img\u002F02-image-scope-tree.5b5a35e59a.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-scope-tree.5b5a35e59a.1280.jpg\" srcset=\"\u002F_img\u002F02-image-scope-tree.5b5a35e59a.160.jpg 160w, \u002F_img\u002F02-image-scope-tree.5b5a35e59a.320.jpg 320w, \u002F_img\u002F02-image-scope-tree.5b5a35e59a.640.jpg 640w, \u002F_img\u002F02-image-scope-tree.5b5a35e59a.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"درختِ ارث از ریشه به پایین: یک نمونه‌رنگ در ریشه که به همهٔ فرزندها می‌رسد، و یک شاخهٔ کناری که رنگِ خودش را دارد و فقط زیرشاخهٔ خودش را عوض می‌کند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>بیا دو کارت داشته باشیم که هر دو یک دکمه دارند. کارتِ اول از رنگِ اصلیِ theme استفاده می‌کند؛ ولی می‌خواهیم دکمهٔ کارتِ دوم نارنجی باشد، \u003Cstrong>بدون این‌که به رنگِ کارتِ اول دست بزنیم\u003C\u002Fstrong>. برای این کار، فقط روی کارتِ دوم \u003Ccode>--brand\u003C\u002Fcode> را دوباره تعریف می‌کنیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card--warm {\n  --brand: #e0663a;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>دقت کن که قاعدهٔ \u003Ccode>.btn\u003C\u002Fcode> را \u003Cstrong>اصلاً عوض نکردیم\u003C\u002Fstrong>؛ هنوز همان \u003Ccode>background-color: var(--brand)\u003C\u002Fcode> است. ولی دکمه‌ای که داخلِ \u003Ccode>.card--warm\u003C\u002Fcode> باشد، \u003Ccode>--brand\u003C\u002Fcode> را از کارتِ نزدیک‌ترش می‌گیرد (نارنجی)، و دکمه‌ای که بیرونِ آن باشد، همان \u003Ccode>--brand\u003C\u002Fcode> از \u003Ccode>:root\u003C\u002Fcode> را (بنفش).\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> دو دکمه می‌بینی — اولی بنفش، دومی نارنجی — با این‌که قاعدهٔ هر دو کاملاً یکی است. تنها فرق، این است که کارتِ دوم \u003Ccode>--brand\u003C\u002Fcode> خودش را دارد. این را «scope محلیِ» متغیر می‌گویند: مقدار فقط جایی که تعریفش کرده‌ای و پایین‌ترش زندگی می‌کند.\u003C\u002Fp>\n\u003Cp>قبل از ادامه، جواب بده: اگر \u003Ccode>--brand\u003C\u002Fcode> را روی \u003Ccode>.card--warm\u003C\u002Fcode> تعریف کنی، آیا دکمهٔ کارتِ \u003Cstrong>اول\u003C\u002Fstrong> هم نارنجی می‌شود؟\u003C\u002Fp>\n\u003Cp>نه. تعریفِ روی \u003Ccode>.card--warm\u003C\u002Fcode> فقط به خودش و فرزندهایش می‌رسد. کارتِ اول فرزندِ آن نیست، پس همچنان \u003Ccode>--brand\u003C\u002Fcode> را از \u003Ccode>:root\u003C\u002Fcode> می‌گیرد و بنفش می‌ماند.\u003C\u002Fp>\n",{"kind":21,"heading":45,"html":46},"۵. چرا این پایهٔ theme است","\u003Ch2 id=\"۵-چرا-این-پایهٔ-theme-است\">۵. چرا این پایهٔ theme است\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DA%86%D8%B1%D8%A7-%D8%A7%DB%8C%D9%86-%D9%BE%D8%A7%DB%8C%D9%87%D9%94-theme-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا همه‌چیز را کنار هم می‌گذاریم. بالای CSS، یک دسته متغیر روی \u003Ccode>:root\u003C\u002Fcode> تعریف می‌کنیم — نه فقط رنگ، بلکه اندازهٔ گوشه و فاصله هم. این چند خط، «theme» سایت توست: یک‌جا، منظم، قابلِ عوض‌کردن. اول HTML:\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    <title>متغیرهای CSS<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <article class="card">\n      <h2>کارت اصلی<\u002Fh2>\n      <p>این کارت از رنگِ اصلیِ theme استفاده می‌کند.<\u002Fp>\n      <a class="btn" href="#">دنبال کن<\u002Fa>\n    <\u002Farticle>\n\n    <article class="card card--warm">\n      <h2>کارت ویژه<\u002Fh2>\n      <p>این کارت رنگِ خودش را دارد، ولی بقیهٔ theme ثابت مانده.<\u002Fp>\n      <a class="btn" href="#">دنبال کن<\u002Fa>\n    <\u002Farticle>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و CSSِ کامل:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n:root {\n  --brand: #5a4bff;\n  --ink: #172440;\n  --muted: #55607a;\n  --card-bg: #ffffff;\n  --radius: 16px;\n  --pad: 16px;\n}\n\nbody {\n  font-family: Tahoma, sans-serif;\n  background-color: #eef1f7;\n  padding: 40px;\n}\n\n.card {\n  max-width: 320px;\n  margin-bottom: 20px;\n  padding: var(--pad);\n  background-color: var(--card-bg);\n  border: 1px solid #e4e8f0;\n  border-radius: var(--radius);\n  box-shadow: 0 12px 30px rgb(23 36 64 \u002F 0.12);\n}\n\n.card h2 {\n  margin: 0 0 8px;\n  color: var(--ink);\n}\n\n.card p {\n  margin: 0 0 12px;\n  color: var(--muted);\n  line-height: 1.9;\n}\n\n.btn {\n  display: inline-block;\n  padding: 8px 16px;\n  border-radius: 10px;\n  background-color: var(--brand);\n  color: #ffffff;\n  font-weight: 700;\n}\n\n.card--warm {\n  --brand: #e0663a;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> دو کارتِ تمیز می‌بینی که رنگِ متن، گوشه‌ها و فاصله‌شان همه از متغیرهای بالای فایل می‌آید — و دکمهٔ کارتِ دوم نارنجی است. حالا این را امتحان کن: \u003Ccode>--card-bg\u003C\u002Fcode> را از \u003Ccode>#ffffff\u003C\u002Fcode> به \u003Ccode>#172440\u003C\u002Fcode> (یک سرمه‌ایِ تیره) و \u003Ccode>--ink\u003C\u002Fcode> را به \u003Ccode>#f2f4f8\u003C\u002Fcode> (روشن) عوض کن. کلِ صفحه تیره می‌شود، فقط با دو خط. این دقیقاً همان چیزی است که dark mode را می‌سازد — \u003Cstrong>این را در ترم ۴ کامل یاد می‌گیریم\u003C\u002Fstrong>، ولی موتورش همین است: یک theme از متغیرها، که با عوض‌کردنِ چند مقدار، کلِ ظاهر عوض می‌شود.\u003C\u002Fp>\n",{"kind":21,"heading":48,"html":49},"۶. همیار 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>این فصل یکی از چند فصلی است که کاملاً به 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> custom property ها دقیقاً همان‌جایی‌اند که AI می‌تواند یک جفت‌چشمِ دومِ خوب باشد — \u003Cstrong>بعد\u003C\u002Fstrong> از این‌که خودت CSS را نوشتی:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> CSSِ خودت را به دستیار AI ات بده و بپرس: «کدام رنگ‌ها و اندازه‌ها در این فایل تکرار شده‌اند و بهتر است به custom property تبدیل شوند؟ برای هرکدام یک اسمِ معنادار پیشنهاد بده». بعد پیشنهادهایش را خودت پیاده کن و \u003Cstrong>با چیزی که در آزمایشگاه می‌بینی چک کن\u003C\u002Fstrong>: اگر تبدیل درست انجام شده باشد، صفحه باید \u003Cstrong>دقیقاً مثل قبل\u003C\u002Fstrong> دیده شود — چون فقط اسم عوض شده، نه مقدار. اگر چیزی تغییر کرد، یعنی یک‌جا اشتباه شده. این بهترین آزمونِ یک refactor است: ظاهر نباید تکان بخورد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>کاربردِ اشتباه.\u003C\u002Fstrong> حالا نمونه‌ای که AI با اعتمادبه‌نفسِ کامل، اشتباه جواب می‌دهد. فرض کن می‌خواهی یک کارت را \u003Cstrong>وسطِ عمودیِ\u003C\u002Fstrong> صفحه بیاوری و از AI می‌پرسی «چطور این کارت را عمودی وسط بیاورم؟». خیلی وقت‌ها جوابی شبیه این می‌دهد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card {\n  vertical-align: middle;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>«فقط \u003Ccode>vertical-align: middle\u003C\u002Fcode> را اضافه کن، وسط می‌شود.» جمله‌اش قاطع و منطقی به‌نظر می‌رسد — «vertical» یعنی عمودی، «middle» یعنی وسط، پس باید کار کند. ولی در آزمایشگاه امتحانش کن: \u003Ccode>vertical-align: middle\u003C\u002Fcode> را به \u003Ccode>.card\u003C\u002Fcode> اضافه کن. \u003Cstrong>هیچ اتفاقی نمی‌افتد.\u003C\u002Fstrong> کارت یک میلی‌متر هم تکان نمی‌خورد.\u003C\u002Fp>\n\u003Cp>چرا؟ با همان چیزی که در فصل ۷ یاد گرفتی می‌توانی ردش کنی. \u003Ccode>vertical-align\u003C\u002Fcode> فقط روی عنصرهای \u003Ccode>inline\u003C\u002Fcode> و \u003Ccode>inline-block\u003C\u002Fcode> (و خانه‌های جدول) کار می‌کند — کارش این است که این‌ها را نسبت به خطِ متنِ کنارشان بالا و پایین کند. ولی \u003Ccode>.card\u003C\u002Fcode> یک عنصرِ \u003Ccode>block\u003C\u002Fcode> است، و یک block در جریانِ عادی، \u003Ccode>vertical-align\u003C\u002Fcode> را \u003Cstrong>کاملاً نادیده می‌گیرد\u003C\u002Fstrong>. AI یک property واقعی را برداشته و در جای اشتباه پیشنهاد داده؛ اسمش فریب‌دهنده است، ولی کارش آن چیزی نیست که به‌نظر می‌رسد.\u003C\u002Fp>\n\u003Cp>پس جوابِ درست چیست؟ وسط‌چینِ عمودیِ واقعیِ یک block با ابزاری به‌نامِ flexbox انجام می‌شود که \u003Cstrong>این را در ترم ۳ کامل یاد می‌گیریم\u003C\u002Fstrong>. نکتهٔ این فصل این نیست که چطور وسط‌چین کنی؛ نکته این است که AI جمله‌ای ساخت که \u003Cstrong>درست به‌نظر می‌رسید\u003C\u002Fstrong> ولی غلط بود، و تو با فهمِ خودت از block و inline توانستی ردش کنی. این بهترین درسِ «AI هم اشتباه می‌کند» است: AI دربارهٔ CSS مدام با اعتمادبه‌نفس اشتباه می‌گوید، و تنها محافظت، این است که هر پیشنهادش را در مرورگر ببینی. اول خودت، بعد AI.\u003C\u002Fp>\n",{"kind":21,"heading":51,"html":52},"واژه‌های تازهٔ این فصل","\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>custom property\u003C\u002Ftd>\n\u003Ctd>کاستِم پراپِرتی\u003C\u002Ftd>\n\u003Ctd>متغیرِ CSS که خودت با \u003Ccode>--name\u003C\u002Fcode> تعریف می‌کنی\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>var\u003C\u002Ftd>\n\u003Ctd>وَر\u003C\u002Ftd>\n\u003Ctd>تابعی که مقدارِ یک custom property را می‌خواند (\u003Ccode>var(--name)\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>fallback\u003C\u002Ftd>\n\u003Ctd>فال‌بک\u003C\u002Ftd>\n\u003Ctd>مقدارِ پیش‌فرض در \u003Ccode>var()\u003C\u002Fcode> برای وقتی متغیر تعریف نشده\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>root\u003C\u002Ftd>\n\u003Ctd>روت\u003C\u002Ftd>\n\u003Ctd>ریشهٔ صفحه؛ \u003Ccode>:root\u003C\u002Fcode> جایی است که متغیرهای سراسری را تعریف می‌کنی\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>scope\u003C\u002Ftd>\n\u003Ctd>اسکوپ\u003C\u002Ftd>\n\u003Ctd>محدوده‌ای که یک متغیر در آن زندگی می‌کند و به فرزندها می‌رسد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>theme\u003C\u002Ftd>\n\u003Ctd>تِم\u003C\u002Ftd>\n\u003Ctd>مجموعهٔ متغیرهایی که ظاهرِ کلی سایت را می‌سازند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":54,"heading":55,"html":56},"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>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا یک اسمِ custom propertyِ غلط، خطایی نشان نمی‌دهد و فقط ساکت کار نمی‌کند؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به theme خودت دو متغیرِ تازه اضافه کن: \u003Ccode>--danger\u003C\u002Fcode> (یک رنگِ قرمز برای هشدار) و \u003Ccode>--radius-small\u003C\u002Fcode> (یک گوشهٔ گردِ کوچک‌تر، مثلاً \u003Ccode>8px\u003C\u002Fcode>). حالا یک دکمهٔ دومِ «حذف» بساز که پس‌زمینه‌اش \u003Ccode>var(--danger)\u003C\u002Fcode> و گوشه‌اش \u003Ccode>var(--radius-small)\u003C\u002Fcode> باشد. باید بتوانی هر دو رنگِ اصلی و قرمز را فقط از بالای فایل کنترل کنی.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک کارتِ سومِ «سرد» بساز (\u003Ccode>card--cool\u003C\u002Fcode>) که مثلِ \u003Ccode>card--warm\u003C\u002Fcode>، \u003Ccode>--brand\u003C\u002Fcode> خودش را داشته باشد (مثلاً یک آبی). حالا سه کارت داری، هرکدام با دکمه‌ای به رنگِ خودش، در حالی که قاعدهٔ \u003Ccode>.btn\u003C\u002Fcode> هنوز فقط یک‌بار نوشته شده. این را به AI نشان بده و بپرس «چرا هر سه دکمه رنگِ متفاوت دارند با این‌که قاعده‌شان یکی است؟» — ببین جوابش با آنچه خودت دربارهٔ scope فهمیدی جور درمی‌آید یا نه.\u003C\u002Fp>\n",{"kind":21,"heading":58,"html":59},"در فصل بعد","\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>الان می‌توانی یک theme منظم بسازی. ولی وقتی CSS ات بزرگ شود، لحظه‌هایی پیش می‌آید که یک استایل «باید» اعمال شود ولی نمی‌شود، یا رنگی که انتظار داری ظاهر نمی‌شود — و حدس‌زدن جواب نیست. فصل بعد ابزارِ واقعیِ حرفه‌ای‌ها را باز می‌کنیم: \u003Cstrong>DevTools\u003C\u002Fstrong>. یاد می‌گیری قاعده‌ای که در cascade باخته و \u003Cstrong>خط‌خورده\u003C\u002Fstrong> را با چشمِ خودت ببینی، مقدارِ نهایی را در Computed بخوانی، و همان‌جا در مرورگر مقدارها را زنده عوض کنی. همان بدهیِ «چرا این استایل اعمال نشد؟» را آنجا نقد می‌کنیم.\u003C\u002Fp>\n",{"course":61,"entitled":69,"lessons":70,"payments_enabled":69,"terms":255,"live":5},{"active_window":62,"effective_price_toman":63,"free":5,"lesson_count":64,"price_toman":65,"slug":66,"summary_fa":67,"title_fa":68},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[71,75,78,82,86,90,94,98,101,104,107,110,113,116,119,122,125,128,129,130,131,135,138,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,246,249,252],{"free_preview":5,"order":72,"slug":73,"source":8,"term":72,"title_fa":74},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":9,"slug":76,"source":8,"term":72,"title_fa":77},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":79,"slug":80,"source":8,"term":72,"title_fa":81},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":83,"slug":84,"source":8,"term":72,"title_fa":85},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":87,"slug":88,"source":8,"term":72,"title_fa":89},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":91,"slug":92,"source":8,"term":72,"title_fa":93},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":95,"slug":96,"source":8,"term":72,"title_fa":97},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":12,"slug":99,"source":8,"term":72,"title_fa":100},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":6,"slug":102,"source":8,"term":72,"title_fa":103},"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":16,"slug":105,"source":8,"term":72,"title_fa":106},"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":72,"slug":108,"source":8,"term":9,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":9,"slug":111,"source":8,"term":9,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":79,"slug":114,"source":8,"term":9,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":83,"slug":117,"source":8,"term":9,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":87,"slug":120,"source":8,"term":9,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":91,"slug":123,"source":8,"term":9,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":95,"slug":126,"source":8,"term":9,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"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":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":132,"slug":133,"source":8,"term":9,"title_fa":134},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":72,"slug":136,"source":8,"term":79,"title_fa":137},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":9,"slug":139,"source":8,"term":79,"title_fa":140},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":79,"slug":142,"source":8,"term":79,"title_fa":143},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":83,"slug":145,"source":8,"term":79,"title_fa":146},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":87,"slug":148,"source":8,"term":79,"title_fa":149},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":91,"slug":151,"source":8,"term":79,"title_fa":152},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":95,"slug":154,"source":8,"term":79,"title_fa":155},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":12,"slug":157,"source":8,"term":79,"title_fa":158},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":6,"slug":160,"source":8,"term":79,"title_fa":161},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":16,"slug":163,"source":8,"term":79,"title_fa":164},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":132,"slug":166,"source":8,"term":79,"title_fa":167},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":72,"slug":169,"source":8,"term":83,"title_fa":170},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":9,"slug":172,"source":8,"term":83,"title_fa":173},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":79,"slug":175,"source":8,"term":83,"title_fa":176},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":83,"slug":178,"source":8,"term":83,"title_fa":179},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":87,"slug":181,"source":8,"term":83,"title_fa":182},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":91,"slug":184,"source":8,"term":83,"title_fa":185},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":95,"slug":187,"source":8,"term":83,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":12,"slug":190,"source":8,"term":83,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":72,"slug":193,"source":8,"term":87,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":9,"slug":196,"source":8,"term":87,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":79,"slug":199,"source":8,"term":87,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":83,"slug":202,"source":8,"term":87,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":87,"slug":205,"source":8,"term":87,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":91,"slug":208,"source":8,"term":87,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":95,"slug":211,"source":8,"term":87,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":12,"slug":214,"source":8,"term":87,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":6,"slug":217,"source":8,"term":87,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":16,"slug":220,"source":8,"term":87,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":72,"slug":223,"source":8,"term":91,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":9,"slug":226,"source":8,"term":91,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":79,"slug":229,"source":8,"term":91,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":83,"slug":232,"source":8,"term":91,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":87,"slug":235,"source":8,"term":91,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":91,"slug":238,"source":8,"term":91,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":95,"slug":241,"source":8,"term":91,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":12,"slug":244,"source":8,"term":91,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":6,"slug":247,"source":8,"term":91,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":16,"slug":250,"source":8,"term":91,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":132,"slug":253,"source":8,"term":91,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105047]