[{"data":1,"prerenderedAt":250},["ShallowReactive",2],{"lesson:t5-s10-interaction-project":3,"course:taropood":55},{"meta":4,"prev":11,"next":15,"sections":20},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,10,"t5-s10-interaction-project","book",5,"فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},9,"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":16,"slug":17,"source":8,"term":18,"title_fa":19},1,"t6-s01-organizing",6,"فصل ۰۱ — CSS را سازماندهی کن",[21,25,28,33,36,39,42,45,48,52],{"kind":22,"heading":23,"html":24},"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> می‌سازی — یک فهرست از پرسش‌ها که هر کدام با یک کلیک باز و بسته می‌شوند — و همه‌اش بدونِ یک خط JavaScript. هر ابزاری که این ترم ساختی اینجا نقشی دارد: \u003Ccode>:checked\u003C\u002Fcode> برای حالت، \u003Ccode>:has()\u003C\u002Fcode> برای واکنشِ والد، \u003Ccode>::after\u003C\u002Fcode> برای علامتِ باز\u002Fبسته، \u003Ccode>transform\u003C\u002Fcode> و \u003Ccode>transition\u003C\u002Fcode> برای چرخشِ نرمِ آن علامت، \u003Ccode>:hover\u003C\u002Fcode> و \u003Ccode>:focus-visible\u003C\u002Fcode> برای واکنش، و از همه مهم‌تر، یک تعاملِ \u003Cstrong>قابلِ استفاده با صفحه‌کلید\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-accordion-open.9f72b9a85e.160.webp 160w, \u002F_img\u002F01-image-accordion-open.9f72b9a85e.320.webp 320w, \u002F_img\u002F01-image-accordion-open.9f72b9a85e.640.webp 640w, \u002F_img\u002F01-image-accordion-open.9f72b9a85e.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-accordion-open.9f72b9a85e.1280.jpg\" srcset=\"\u002F_img\u002F01-image-accordion-open.9f72b9a85e.160.jpg 160w, \u002F_img\u002F01-image-accordion-open.9f72b9a85e.320.jpg 320w, \u002F_img\u002F01-image-accordion-open.9f72b9a85e.640.jpg 640w, \u002F_img\u002F01-image-accordion-open.9f72b9a85e.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>:checked\u003C\u002Fcode> و \u003Ccode>:has()\u003C\u002Fcode> بسازی\u003C\u002Fli>\n\u003Cli>علامتِ باز\u002Fبسته را با \u003Ccode>::after\u003C\u002Fcode> و \u003Ccode>transform\u003C\u002Fcode> نرم بچرخانی\u003C\u002Fli>\n\u003Cli>یک checkbox را طوری پنهان کنی که دیده نشود ولی با صفحه‌کلید هنوز کار کند\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":22,"heading":26,"html":27},"قبل از شروع","\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>:checked\u003C\u002Fcode>. \u003Cstrong>از فصل ۹:\u003C\u002Fstrong> \u003Ccode>:has()\u003C\u002Fcode>. \u003Cstrong>از فصل ۳:\u003C\u002Fstrong> \u003Ccode>::after\u003C\u002Fcode> و \u003Ccode>content\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱:\u003C\u002Fstrong> \u003Ccode>:hover\u003C\u002Fcode> و \u003Ccode>:focus-visible\u003C\u002Fcode>. \u003Cstrong>از فصل ۶:\u003C\u002Fstrong> \u003Ccode>rotate\u003C\u002Fcode>. \u003Cstrong>از فصل ۷:\u003C\u002Fstrong> \u003Ccode>transition\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":29,"heading":30,"html":31,"embed":32},"lab","","— سه ردیفِ سؤال می‌بینی که پاسخشان پنهان است و هنوز باز نمی‌شوند. در این فصل تکه‌تکه آن‌ها را به یک آکاردئونِ واقعی تبدیل می‌کنی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-5-interaction\u002Fsession-10-interaction-project",{"kind":22,"heading":34,"html":35},"۱. اسکلت: هر ردیف یک checkbox پنهان دارد","\u003Ch2 id=\"۱-اسکلت-هر-ردیف-یک-checkbox-پنهان-دارد\">۱. اسکلت: هر ردیف یک checkbox پنهان دارد\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%A7%D8%B3%DA%A9%D9%84%D8%AA-%D9%87%D8%B1-%D8%B1%D8%AF%DB%8C%D9%81-%DB%8C%DA%A9-checkbox-%D9%BE%D9%86%D9%87%D8%A7%D9%86-%D8%AF%D8%A7%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>هر ردیف سه چیز دارد: یک \u003Ccode><input type="checkbox">\u003C\u002Fcode> که حالتِ باز\u002Fبسته را نگه می‌دارد، یک \u003Ccode><label>\u003C\u002Fcode> که همان سؤال است و با کلیک آن checkbox را می‌زند، و یک پنلِ پاسخ. label با \u003Ccode>for\u003C\u002Fcode> به checkbox وصل است، پس کلیک روی سؤال، تیک را می‌زند — همان چیزی که در فصل ۵ دیدی.\u003C\u002Fp>\n",{"kind":22,"heading":37,"html":38},"۲. باز و بسته با :has()","\u003Ch2 id=\"۲-باز-و-بسته-با-has\">۲. باز و بسته با \u003Ccode>:has()\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%A8%D8%A7%D8%B2-%D9%88-%D8%A8%D8%B3%D8%AA%D9%87-%D8%A8%D8%A7-has\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>پنل پیش‌فرض بسته است (\u003Ccode>max-height: 0\u003C\u002Fcode> و \u003Ccode>overflow: hidden\u003C\u002Fcode>). حالا با \u003Ccode>:has()\u003C\u002Fcode> از فصل ۹ می‌گوییم: «ردیفی که checkbox اش تیک خورده، پنلش باز شود». چون از فصل ۷ روی پنل \u003Ccode>transition\u003C\u002Fcode> گذاشته‌ایم، این باز شدن نرم است، نه ناگهانی. علامتِ \u003Ccode>+\u003C\u002Fcode> هم که با \u003Ccode>::after\u003C\u002Fcode> ساخته‌ایم، با \u003Ccode>rotate(45deg)\u003C\u002Fcode> به یک \u003Ccode>×\u003C\u002Fcode> می‌چرخد تا بگوید «حالا بازم، دوباره بزن تا ببندم».\u003C\u002Fp>\n",{"kind":22,"heading":40,"html":41},"۳. اشتباهِ رایج: پنهان‌کردنی که صفحه‌کلید را می‌کُشد","\u003Ch2 id=\"۳-اشتباهِ-رایج-پنهان‌کردنی-که-صفحه‌کلید-را-می‌کُشد\">۳. اشتباهِ رایج: پنهان‌کردنی که صفحه‌کلید را می‌کُشد\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87%D9%90-%D8%B1%D8%A7%DB%8C%D8%AC-%D9%BE%D9%86%D9%87%D8%A7%D9%86%E2%80%8C%DA%A9%D8%B1%D8%AF%D9%86%DB%8C-%DA%A9%D9%87-%D8%B5%D9%81%D8%AD%D9%87%E2%80%8C%DA%A9%D9%84%DB%8C%D8%AF-%D8%B1%D8%A7-%D9%85%DB%8C%E2%80%8C%DA%A9%D9%8F%D8%B4%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>checkbox واقعی زشت است و می‌خواهیم پنهانش کنیم. ساده‌ترین راهی که به ذهن می‌رسد این است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.q-input {\n  display: none;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>با ماوس همه‌چیز عالی به‌نظر می‌رسد: روی سؤال کلیک می‌کنی، باز و بسته می‌شود. ولی یک آزمایش کن: ماوس را کنار بگذار و فقط با کلیدِ \u003Ccode>Tab\u003C\u002Fcode> روی صفحه بگرد. \u003Cstrong>به هیچ سؤالی نمی‌رسی، و با صفحه‌کلید هیچ‌کدام باز نمی‌شوند.\u003C\u002Fstrong> برای کسی که ماوس ندارد، این آکاردئون کاملاً مرده است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> \u003Ccode>display: none\u003C\u002Fcode> فقط چیزی را پنهان نمی‌کند — آن را از \u003Cstrong>ترتیبِ Tab و از دسترسِ صفحه‌کلید هم\u003C\u002Fstrong> حذف می‌کند. راهِ درست این است که checkbox را طوری پنهان کنی که دیده نشود ولی هنوز focusable بماند: با \u003Ccode>position: absolute\u003C\u002Fcode> از جریان درش بیاور و با \u003Ccode>opacity: 0\u003C\u002Fcode> و اندازهٔ یک‌پیکسلی نامرئی‌اش کن. حالا هنوز آنجاست، فقط دیده نمی‌شود:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.q-input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>بعد با \u003Ccode>:focus-visible\u003C\u002Fcode> (فصل ۱) و \u003Ccode>:has()\u003C\u002Fcode> یک حلقهٔ focus روی خودِ سؤال نشان می‌دهیم تا کاربرِ صفحه‌کلید ببیند الان روی کدام ردیف است. حالا هم ماوس کار می‌کند، هم \u003Ccode>Tab\u003C\u002Fcode> و \u003Ccode>Space\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> با ماوس ردیف‌ها باز و بسته می‌شوند و علامتِ \u003Ccode>+\u003C\u002Fcode> نرم به \u003Ccode>×\u003C\u002Fcode> می‌چرخد. حالا \u003Ccode>Tab\u003C\u002Fcode> بزن: روی هر سؤال یک حلقهٔ آبی می‌آید، و با \u003Ccode>Space\u003C\u002Fcode> همان ردیف باز می‌شود. هر دو راه کار می‌کنند.\u003C\u002Fp>\n",{"kind":22,"heading":43,"html":44},"۴. کد کاملِ پروژه","\u003Ch2 id=\"۴-کد-کاملِ-پروژه\">۴. کد کاملِ پروژه\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D9%BE%D8%B1%D9%88%DA%98%D9%87\" 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>آکاردئون بدون JavaScript<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="page">\n      <section class="faq">\n        <h1>پرسش‌های پرتکرار<\u002Fh1>\n        <ul class="faq-list">\n          <li class="item">\n            <input class="q-input" type="checkbox" id="q1">\n            <label class="q-label" for="q1">CSS بدون JavaScript چقدر تعاملی می‌شود؟<\u002Flabel>\n            <p class="panel">خیلی بیشتر از چیزی که فکر می‌کنی — همین آکاردئون مثالش است.<\u002Fp>\n          <\u002Fli>\n          <li class="item">\n            <input class="q-input" type="checkbox" id="q2">\n            <label class="q-label" for="q2">چرا از checkbox استفاده کردیم؟<\u002Flabel>\n            <p class="panel">چون checkbox دو حالت دارد و مرورگر خودش این حالت را نگه می‌دارد.<\u002Fp>\n          <\u002Fli>\n          <li class="item">\n            <input class="q-input" type="checkbox" id="q3">\n            <label class="q-label" for="q3">با صفحه‌کلید هم باز می‌شود؟<\u002Flabel>\n            <p class="panel">اگر checkbox را درست پنهان کنیم، بله: با Tab می‌رسی و با Space بازش می‌کنی.<\u002Fp>\n          <\u002Fli>\n        <\u002Ful>\n      <\u002Fsection>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\n:root {\n  --bg: #f6edda;\n  --card: #ffffff;\n  --ink: #2c2114;\n  --muted: #6b6150;\n  --brand: #2a6b93;\n  --line: #d8ccae;\n  --open: #eaf1f6;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: var(--bg);\n  color: var(--ink);\n  padding: 40px 20px;\n  line-height: 1.9;\n}\n\n.faq {\n  max-width: 460px;\n  margin-inline: auto;\n}\n\n.faq h1 {\n  margin-block: 0 16px;\n  font-size: 1.5rem;\n}\n\n.faq-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.item {\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 12px;\n  margin-block-end: 10px;\n  overflow: hidden;\n}\n\n\u002F* checkbox penhan ast vali focusable mimanad *\u002F\n.q-input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  opacity: 0;\n}\n\n.q-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 14px 16px;\n  cursor: pointer;\n  font-weight: 700;\n  transition: background-color 0.2s;\n}\n\n.q-label:hover {\n  background-color: var(--open);\n}\n\n\u002F* alamat-e + ba ::after (fasl 3), ba charkhesh-e narm (fasl 6 + 7) *\u002F\n.q-label::after {\n  content: "+";\n  color: var(--brand);\n  font-size: 1.4rem;\n  line-height: 1;\n  transition: transform 0.2s;\n}\n\n.panel {\n  max-height: 0;\n  margin: 0;\n  padding: 0 16px;\n  overflow: hidden;\n  color: var(--muted);\n  transition: max-height 0.25s ease, padding 0.25s ease;\n}\n\n\u002F* :has() -> vaghti item baz ast (checkbox checked): panel baz shavad *\u002F\n.item:has(.q-input:checked) .panel {\n  max-height: 200px;\n  padding-block: 8px 16px;\n}\n\n.item:has(.q-input:checked) .q-label {\n  background-color: var(--open);\n}\n\n\u002F* + -> x *\u002F\n.item:has(.q-input:checked) .q-label::after {\n  transform: rotate(45deg);\n}\n\n\u002F* focus-visible ba safhe-kelid: halghe rooye label *\u002F\n.item:has(.q-input:focus-visible) .q-label {\n  outline: 3px solid var(--brand);\n  outline-offset: -3px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-accessible-focus.6736f33ab6.160.webp 160w, \u002F_img\u002F02-image-accessible-focus.6736f33ab6.320.webp 320w, \u002F_img\u002F02-image-accessible-focus.6736f33ab6.640.webp 640w, \u002F_img\u002F02-image-accessible-focus.6736f33ab6.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-accessible-focus.6736f33ab6.1280.jpg\" srcset=\"\u002F_img\u002F02-image-accessible-focus.6736f33ab6.160.jpg 160w, \u002F_img\u002F02-image-accessible-focus.6736f33ab6.320.jpg 320w, \u002F_img\u002F02-image-accessible-focus.6736f33ab6.640.jpg 640w, \u002F_img\u002F02-image-accessible-focus.6736f33ab6.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"نمای نزدیک از یک ردیفِ باز: نوارِ سؤالِ رنگی با علامتِ ضربدر، پاسخ زیرش، و یک حلقهٔ آبیِ focus دورِ نوار که نشانِ رسیدن با صفحه‌کلید است\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> سه ردیف داری که مستقل باز و بسته می‌شوند، علامتشان نرم می‌چرخد، با ماوس و با صفحه‌کلید هر دو کار می‌کنند — و در کلِ فایل یک خط JavaScript نیست. این کلِ ترمِ ۵ در یک component است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> آکاردئونِ کاملت را به دستیار AI ات بده و بپرس «این از نظرِ دسترس‌پذیری و کار با صفحه‌کلید چه ضعفی دارد؟». جوابش را یک فهرستِ کارها ببین، نه حکمِ نهایی — هر موردش را همان‌جا در آزمایشگاه با \u003Ccode>Tab\u003C\u002Fcode> و \u003Ccode>Space\u003C\u002Fcode> خودت چک کن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":22,"heading":46,"html":47},"واژه‌های تازهٔ این فصل","\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\u003Cp>این فصل یک فصلِ پروژه‌ای است و واژهٔ فنیِ تازه‌ای ندارد؛ فقط ابزارهای این ترم — \u003Ccode>:checked\u003C\u002Fcode>، \u003Ccode>:has()\u003C\u002Fcode>، \u003Ccode>::after\u003C\u002Fcode>، \u003Ccode>transform\u003C\u002Fcode>، \u003Ccode>transition\u003C\u002Fcode> و \u003Ccode>:focus-visible\u003C\u002Fcode> — را کنارِ هم به‌کار می‌گیرد.\u003C\u002Fp>\n",{"kind":49,"heading":50,"html":51},"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>display: none\u003C\u002Fcode> برای پنهان‌کردنِ checkbox یک اشتباه است؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک ردیفِ چهارم به آکاردئون اضافه کن، با یک سؤال و پاسخِ دلخواه. مطمئن شو \u003Ccode>id\u003C\u002Fcode> تازه‌اش با \u003Ccode>for\u003C\u002Fcode> ردیف یکی نباشد، وگرنه دو ردیف با هم باز می‌شوند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> کاری کن که با باز شدنِ هر ردیف، رنگِ متنِ سؤال هم عوض شود (نه فقط پس‌زمینه‌اش). راهنما: یک قاعدهٔ تازهٔ \u003Ccode>.item:has(.q-input:checked) .q-label { color: ...; }\u003C\u002Fcode> — و ببین \u003Ccode>transition\u003C\u002Fcode> را هم باید به \u003Ccode>color\u003C\u002Fcode> گسترش بدهی تا این تغییر هم نرم باشد.\u003C\u002Fp>\n",{"kind":22,"heading":53,"html":54},"در فصل بعد","\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>اینجا آخرِ ترمِ «تعامل و جزئیات» است. حالا می‌توانی صفحه را با حالت‌ها، pseudo-element، فرمِ استایل‌خورده، transform، animation و \u003Ccode>:has()\u003C\u002Fcode> زنده و تعاملی کنی — همه بدونِ JavaScript. تا اینجا هر فصل یک تکه بود؛ ترمِ بعد — \u003Cstrong>حرفه‌ای و واقعی\u003C\u002Fstrong> — یاد می‌گیری این تکه‌ها را مثلِ یک حرفه‌ای سازماندهی کنی: CSS را تمیز و مقیاس‌پذیر بنویسی، مثلِ component فکر کنی، یک design system کوچکِ خودت بسازی، دسترس‌پذیری را عمیق‌تر بگیری، و بالاخره یک سایتِ چندصفحه‌ایِ واقعی را روی اینترنت \u003Cstrong>منتشر\u003C\u002Fstrong> کنی.\u003C\u002Fp>\n",{"course":56,"entitled":64,"lessons":65,"payments_enabled":64,"terms":249,"live":5},{"active_window":57,"effective_price_toman":58,"free":5,"lesson_count":59,"price_toman":60,"slug":61,"summary_fa":62,"title_fa":63},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[66,69,73,77,81,84,87,91,95,98,101,104,107,110,113,116,119,122,125,128,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,217,218,219,222,225,228,231,234,237,240,243,246],{"free_preview":5,"order":16,"slug":67,"source":8,"term":16,"title_fa":68},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":70,"slug":71,"source":8,"term":16,"title_fa":72},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":74,"slug":75,"source":8,"term":16,"title_fa":76},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":78,"slug":79,"source":8,"term":16,"title_fa":80},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":9,"slug":82,"source":8,"term":16,"title_fa":83},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":18,"slug":85,"source":8,"term":16,"title_fa":86},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":88,"slug":89,"source":8,"term":16,"title_fa":90},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":92,"slug":93,"source":8,"term":16,"title_fa":94},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":12,"slug":96,"source":8,"term":16,"title_fa":97},"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":6,"slug":99,"source":8,"term":16,"title_fa":100},"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":16,"slug":102,"source":8,"term":70,"title_fa":103},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":70,"slug":105,"source":8,"term":70,"title_fa":106},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":74,"slug":108,"source":8,"term":70,"title_fa":109},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":78,"slug":111,"source":8,"term":70,"title_fa":112},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":9,"slug":114,"source":8,"term":70,"title_fa":115},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":18,"slug":117,"source":8,"term":70,"title_fa":118},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":88,"slug":120,"source":8,"term":70,"title_fa":121},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":92,"slug":123,"source":8,"term":70,"title_fa":124},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":12,"slug":126,"source":8,"term":70,"title_fa":127},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":6,"slug":129,"source":8,"term":70,"title_fa":130},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":132,"slug":133,"source":8,"term":70,"title_fa":134},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":16,"slug":136,"source":8,"term":74,"title_fa":137},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":70,"slug":139,"source":8,"term":74,"title_fa":140},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":74,"slug":142,"source":8,"term":74,"title_fa":143},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":78,"slug":145,"source":8,"term":74,"title_fa":146},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":9,"slug":148,"source":8,"term":74,"title_fa":149},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":18,"slug":151,"source":8,"term":74,"title_fa":152},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":88,"slug":154,"source":8,"term":74,"title_fa":155},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":92,"slug":157,"source":8,"term":74,"title_fa":158},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":12,"slug":160,"source":8,"term":74,"title_fa":161},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":6,"slug":163,"source":8,"term":74,"title_fa":164},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":132,"slug":166,"source":8,"term":74,"title_fa":167},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":16,"slug":169,"source":8,"term":78,"title_fa":170},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":70,"slug":172,"source":8,"term":78,"title_fa":173},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":74,"slug":175,"source":8,"term":78,"title_fa":176},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":78,"slug":178,"source":8,"term":78,"title_fa":179},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":9,"slug":181,"source":8,"term":78,"title_fa":182},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":18,"slug":184,"source":8,"term":78,"title_fa":185},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":88,"slug":187,"source":8,"term":78,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":92,"slug":190,"source":8,"term":78,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":16,"slug":193,"source":8,"term":9,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":70,"slug":196,"source":8,"term":9,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":74,"slug":199,"source":8,"term":9,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":78,"slug":202,"source":8,"term":9,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":9,"slug":205,"source":8,"term":9,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":18,"slug":208,"source":8,"term":9,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":88,"slug":211,"source":8,"term":9,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":92,"slug":214,"source":8,"term":9,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"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":18,"title_fa":19},{"free_preview":5,"order":70,"slug":220,"source":8,"term":18,"title_fa":221},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":74,"slug":223,"source":8,"term":18,"title_fa":224},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":78,"slug":226,"source":8,"term":18,"title_fa":227},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":9,"slug":229,"source":8,"term":18,"title_fa":230},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":18,"slug":232,"source":8,"term":18,"title_fa":233},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":88,"slug":235,"source":8,"term":18,"title_fa":236},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":92,"slug":238,"source":8,"term":18,"title_fa":239},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":12,"slug":241,"source":8,"term":18,"title_fa":242},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":6,"slug":244,"source":8,"term":18,"title_fa":245},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":132,"slug":247,"source":8,"term":18,"title_fa":248},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105727]