[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t4-s06-responsive-nav":3,"course:taropood":57},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,6,"t4-s06-responsive-nav","book",4,"فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},5,"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},7,"t4-s07-dark-mode","فصل ۰۷ — dark mode",[20,24,27,32,35,38,41,44,47,50,54],{"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>بدونِ یک خط JavaScript\u003C\u002Fstrong> بسازی — فقط با دو tag که خودِ HTML برای همین دارد: \u003Ccode><details>\u003C\u002Fcode> و \u003Ccode><summary>\u003C\u002Fcode>. و مهم‌تر، طوری بسازی‌اش که با صفحه‌کلید هم کاملاً کار کند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-nav-collapse.7c4f844b5b.160.webp 160w, \u002F_img\u002F01-image-nav-collapse.7c4f844b5b.320.webp 320w, \u002F_img\u002F01-image-nav-collapse.7c4f844b5b.640.webp 640w, \u002F_img\u002F01-image-nav-collapse.7c4f844b5b.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-nav-collapse.7c4f844b5b.1280.jpg\" srcset=\"\u002F_img\u002F01-image-nav-collapse.7c4f844b5b.160.jpg 160w, \u002F_img\u002F01-image-nav-collapse.7c4f844b5b.320.jpg 320w, \u002F_img\u002F01-image-nav-collapse.7c4f844b5b.640.jpg 640w, \u002F_img\u002F01-image-nav-collapse.7c4f844b5b.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><details>\u003C\u002Fcode> و \u003Ccode><summary>\u003C\u002Fcode> بسازی که بدونِ JavaScript کار کند\u003C\u002Fli>\n\u003Cli>بگویی چرا یک \u003Ccode><div>\u003C\u002Fcode> نمی‌تواند دکمهٔ منو باشد، حتی اگر شبیهش باشد\u003C\u002Fli>\n\u003Cli>منو را با صفحه‌کلید (Tab و Enter) باز و بسته کنی و focus را نشکنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>@media\u003C\u002Fcode> منو را در دسکتاپ افقی و در موبایل عمودی کنی\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> \u003Ccode>@media\u003C\u002Fcode> و \u003Ccode>min-width\u003C\u002Fcode> — برای فرقِ موبایل و دسکتاپ.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۱:\u003C\u002Fstrong> \u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><ul>\u003C\u002Fcode>\u002F\u003Ccode><li>\u003C\u002Fcode> و لینک‌ها — منو یک فهرست از لینک‌هاست.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۳:\u003C\u002Fstrong> \u003Ccode>flexbox\u003C\u002Fcode> — برای سرصفحه و ردیفِ افقیِ لینک‌ها.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک سرصفحه با یک ردیفِ لینک می‌بینی. کارِ این فصل این است که خط‌به‌خط آن را به یک منوی بازشو تبدیل کنی که در موبایل جمع می‌شود و با صفحه‌کلید هم کار می‌کند","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-4-responsive\u002Fsession-06-responsive-nav",{"kind":21,"heading":33,"html":34},"۱. مشکل: منوی افقی در صفحهٔ کوچک","\u003Ch2 id=\"۱-مشکل-منوی-افقی-در-صفحهٔ-کوچک\">۱. مشکل: منوی افقی در صفحهٔ کوچک\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D9%85%D8%B4%DA%A9%D9%84-%D9%85%D9%86%D9%88%DB%8C-%D8%A7%D9%81%D9%82%DB%8C-%D8%AF%D8%B1-%D8%B5%D9%81%D8%AD%D9%87%D9%94-%DA%A9%D9%88%DA%86%DA%A9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک ردیفِ لینکِ ساده در سرصفحه، روی دسکتاپ خوب است. ولی همان ردیف را در عرضِ یک موبایل بگذار: لینک‌ها یا به خطِ بعد می‌شکنند و شلوغ می‌شوند، یا از لبه بیرون می‌زنند. راهِ حل این است که در صفحهٔ کوچک، یک دکمهٔ «منو» بگذاریم که با ضربه، لینک‌ها را باز کند. حالا سؤال این است: این دکمه را چطور بسازیم؟\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. تلاشِ اشتباه: دکمه‌ای که دکمه نیست","\u003Ch2 id=\"۲-تلاشِ-اشتباه-دکمه‌ای-که-دکمه-نیست\">۲. تلاشِ اشتباه: دکمه‌ای که دکمه نیست\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%AA%D9%84%D8%A7%D8%B4%D9%90-%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87-%D8%AF%DA%A9%D9%85%D9%87%E2%80%8C%D8%A7%DB%8C-%DA%A9%D9%87-%D8%AF%DA%A9%D9%85%D9%87-%D9%86%DB%8C%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اولین چیزی که به ذهن می‌رسد این است که یک کادر با نوشتهٔ «منو» بسازیم. شاید وسوسه شوی یک \u003Ccode><div>\u003C\u002Fcode> برداری:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><nav>\n  <div class="toggle">منو<\u002Fdiv>\n  <ul>\n    <li><a href="#home">خانه<\u002Fa><\u002Fli>\n    <li><a href="#lessons">درس‌ها<\u002Fa><\u002Fli>\n  <\u002Ful>\n<\u002Fnav>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>روی صفحه، این «منو» شبیهِ یک دکمه است. ولی امتحانش کن: رویش کلیک کن — هیچ اتفاقی نمی‌افتد. حالا سعی کن با کلیدِ Tab به آن برسی — نمی‌شود؛ انگشتِ صفحه‌کلید از رویش رد می‌شود و اصلاً بهش نمی‌رسد. این کادر فقط \u003Cstrong>شبیهِ\u003C\u002Fstrong> دکمه است، ولی هیچ کاری نمی‌کند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> یک \u003Ccode><div>\u003C\u002Fcode> یک جعبهٔ بی‌معناست (از ترم ۱ یادت هست)؛ مرورگر آن را یک کنترلِ قابلِ فشردن نمی‌داند، پس نه در مسیرِ Tab می‌گذاردش، نه به Enter جواب می‌دهد، و نه screen reader آن را «دکمه» اعلام می‌کند. از همه بدتر: بازوبسته‌کردنِ لیست کارِ رفتار است، و رفتار بدونِ JavaScript از یک \u003Ccode><div>\u003C\u002Fcode> درنمی‌آید — JavaScript را هم تا ترم ۷ نداریم. پس این راه بن‌بست است. خبرِ خوب: HTML یک جفت tag دارد که این منوی بازشو را \u003Cstrong>بدونِ\u003C\u002Fstrong> هیچ کدی می‌سازد. سراغِ همان می‌رویم.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. <details> و <summary>: منوی بازشو بدونِ کد","\u003Ch2 id=\"۳-details-و-summary-منوی-بازشو-بدونِ-کد\">۳. \u003Ccode><details>\u003C\u002Fcode> و \u003Ccode><summary>\u003C\u002Fcode>: منوی بازشو بدونِ کد\u003Ca class=\"head-anchor\" href=\"#%DB%B3-details-%D9%88-summary-%D9%85%D9%86%D9%88%DB%8C-%D8%A8%D8%A7%D8%B2%D8%B4%D9%88-%D8%A8%D8%AF%D9%88%D9%86%D9%90-%DA%A9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode><details>\u003C\u002Fcode> یک جعبهٔ بازشوست که خودِ مرورگر بلد است باز و بسته‌اش کند. داخلش یک \u003Ccode><summary>\u003C\u002Fcode> می‌گذاری که همیشه دیده می‌شود — این همان دکمهٔ ماست — و بقیهٔ محتوا فقط وقتی باز است دیده می‌شود. لینک‌ها را داخلش بگذار:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><nav>\n  <details class="menu">\n    <summary>منو<\u002Fsummary>\n    <ul>\n      <li><a href="#home">خانه<\u002Fa><\u002Fli>\n      <li><a href="#lessons">درس‌ها<\u002Fa><\u002Fli>\n      <li><a href="#about">درباره<\u002Fa><\u002Fli>\n      <li><a href="#contact">تماس<\u002Fa><\u002Fli>\n    <\u002Ful>\n  <\u002Fdetails>\n<\u002Fnav>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا یک دکمهٔ «منو» با یک مثلثِ کوچک می‌بینی. رویش کلیک کن: لیستِ لینک‌ها باز می‌شود؛ دوباره کلیک کن: بسته می‌شود. \u003Cstrong>هیچ CSS و هیچ JavaScript ای برای این بازوبسته‌شدن ننوشتی\u003C\u002Fstrong> — خودِ \u003Ccode><details>\u003C\u002Fcode> این رفتار را دارد.\u003C\u002Fp>\n\u003Cp>حالا مهم‌ترین آزمون را بده: دستت را از ماوس بردار. کلیدِ Tab را بزن تا focus به «منو» برسد (یک قابِ نازک دورش ظاهر می‌شود که می‌گوید «الان اینجایی»)، بعد Enter یا Space را بزن. منو باز می‌شود. \u003Ccode><summary>\u003C\u002Fcode> از پایه یک کنترلِ واقعی است: در مسیرِ Tab هست، به صفحه‌کلید جواب می‌دهد، و screen reader هم می‌گوید «باز» یا «بسته». این دقیقاً همان چیزی است که \u003Ccode><div>\u003C\u002Fcode> نداشت.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> آن قابِ نازکِ دورِ «منو» موقعِ Tab را هیچ‌وقت با \u003Ccode>outline: none\u003C\u002Fcode> پاک نکن. تنها راهنمای کسی که با صفحه‌کلید کار می‌کند همین است که بداند کجای صفحه است؛ برداشتنش یعنی او را کور کردن. اگر ظاهرش را دوست نداری، عوضش کن، ولی حذفش نکن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. responsive: عمودی در موبایل، افقی در دسکتاپ","\u003Ch2 id=\"۴-responsive-عمودی-در-موبایل-افقی-در-دسکتاپ\">۴. responsive: عمودی در موبایل، افقی در دسکتاپ\u003Ca class=\"head-anchor\" href=\"#%DB%B4-responsive-%D8%B9%D9%85%D9%88%D8%AF%DB%8C-%D8%AF%D8%B1-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84-%D8%A7%D9%81%D9%82%DB%8C-%D8%AF%D8%B1-%D8%AF%D8%B3%DA%A9%D8%AA%D8%A7%D9%BE\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان منو در هر عرضی یک لیستِ عمودی باز می‌کند. برای موبایل عالی است. در دسکتاپ که جا زیاد است، بیا لیستِ باز را یک ردیفِ افقی کنیم تا مثلِ یک نوارِ منو دیده شود. این کارِ \u003Ccode>@media\u003C\u002Fcode> است — لیست را در عرضِ پهن \u003Ccode>flex\u003C\u002Fcode> می‌کنیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@media (min-width: 700px) {\n  .menu ul {\n    display: flex;\n    gap: 6px;\n    padding: 6px;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> پنجره را باریک کن و «منو» را باز کن — لینک‌ها زیرِ هم می‌آیند. حالا پنجره را پهن کن و باز کن — همان لینک‌ها کنارِ هم، در یک ردیف. یک ساختار، دو شکل، بسته به عرضِ صفحه.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> پاک‌ترین کاری که پیدا کردی این است که در موبایل و دسکتاپ \u003Cstrong>یک\u003C\u002Fstrong> فهرستِ لینک داری، نه دو تا. اگر برای دسکتاپ یک منو و برای موبایل یک منوی دیگر بسازی، هم کد دوتا می‌شود هم screen reader دو بار لینک‌ها را می‌خواند. یک منبع، یک منو.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"۵. کد کاملِ این فصل","\u003Ch2 id=\"۵-کد-کاملِ-این-فصل\">۵. کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>ناوبری responsive<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <header class="site-header">\n      <a class="logo" href="#">تاروپود<\u002Fa>\n      <nav>\n        <details class="menu">\n          <summary>منو<\u002Fsummary>\n          <ul>\n            <li><a href="#home">خانه<\u002Fa><\u002Fli>\n            <li><a href="#lessons">درس‌ها<\u002Fa><\u002Fli>\n            <li><a href="#about">درباره<\u002Fa><\u002Fli>\n            <li><a href="#contact">تماس<\u002Fa><\u002Fli>\n          <\u002Ful>\n        <\u002Fdetails>\n      <\u002Fnav>\n    <\u002Fheader>\n\n    <main class="page">\n      <h1>یک منوی responsive بدونِ JavaScript<\u002Fh1>\n      <p>روی «منو» بزن تا باز و بسته شود — با ماوس و با صفحه‌کلید. بعد پنجره را پهن و باریک کن و ببین منو از حالتِ عمودی به یک ردیفِ افقی می‌رود.<\u002Fp>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: #f6edda;\n  color: #2c2114;\n  line-height: 1.8;\n}\n\n.site-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  padding: 14px 20px;\n  background-color: #ffffff;\n  border-block-end: 1px solid #d8ccae;\n}\n\n.logo {\n  font-weight: 700;\n  font-size: 1.3rem;\n  color: #2a6b93;\n}\n\n\u002F* summary = dokme-ye baz\u002Fbaste kardan-e menu *\u002F\n.menu summary {\n  width: max-content;\n  cursor: pointer;\n  padding: 8px 14px;\n  border: 1px solid #d8ccae;\n  border-radius: 8px;\n  font-weight: 700;\n}\n\n.menu ul {\n  list-style: none;\n  margin-block: 10px 0;\n  margin-inline: 0;\n  padding: 8px;\n  background-color: #ffffff;\n  border: 1px solid #d8ccae;\n  border-radius: 10px;\n}\n\n.menu a {\n  display: block;\n  padding: 10px;\n  border-radius: 6px;\n  color: #2c2114;\n}\n\n.page {\n  padding: 24px 20px;\n}\n\n\u002F* dar safheye pahn, list-e baz-shode radifi mishavad *\u002F\n@media (min-width: 700px) {\n  .menu ul {\n    display: flex;\n    gap: 6px;\n    padding: 6px;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> سه property اینجا اولین‌بار به‌کار رفته‌اند: \u003Ccode>list-style: none\u003C\u002Fcode> گلوله‌های \u003Ccode><ul>\u003C\u002Fcode> را برمی‌دارد تا منو دیگر فهرستِ نقطه‌دار به‌نظر نرسد، \u003Ccode>cursor: pointer\u003C\u002Fcode> روی \u003Ccode><summary>\u003C\u002Fcode> نشانگرِ ماوس را دست می‌کند تا پیدا باشد کلیک‌کردنی است، و \u003Ccode>width: max-content\u003C\u002Fcode> دکمه را دقیقاً هم‌اندازهٔ متنش می‌کند نه تمامِ عرض.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-details-keyboard.f316f97aba.160.webp 160w, \u002F_img\u002F02-image-details-keyboard.f316f97aba.320.webp 320w, \u002F_img\u002F02-image-details-keyboard.f316f97aba.640.webp 640w, \u002F_img\u002F02-image-details-keyboard.f316f97aba.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-details-keyboard.f316f97aba.1280.jpg\" srcset=\"\u002F_img\u002F02-image-details-keyboard.f316f97aba.160.jpg 160w, \u002F_img\u002F02-image-details-keyboard.f316f97aba.320.jpg 320w, \u002F_img\u002F02-image-details-keyboard.f316f97aba.640.jpg 640w, \u002F_img\u002F02-image-details-keyboard.f316f97aba.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک دکمهٔ «منو» با یک قابِ نازکِ focus دورش که نشانِ رسیدنِ صفحه‌کلید است، و کنارش دو حالتِ باز و بستهٔ جعبهٔ بازشو با فلشِ چرخشی بین‌شان\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بپرس «چه فرقی هست بین دکمهٔ منو با \u003Ccode><div>\u003C\u002Fcode> و با \u003Ccode><summary>\u003C\u002Fcode> از نظرِ دسترس‌پذیری؟». جوابش را با چیزی که خودت همین فصل دیدی بسنج: \u003Ccode><div>\u003C\u002Fcode> در مسیرِ Tab نیست و به Enter جواب نمی‌دهد، \u003Ccode><summary>\u003C\u002Fcode> هست و می‌دهد. و همان‌جا در آزمایشگاه هر دو را با صفحه‌کلید امتحان کن — دیدن، از شنیدن مطمئن‌تر است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>نکتهٔ صادقانه: تنها کاری که این منو در دسکتاپ نمی‌کند این است که خودش از اول باز باشد؛ کاربر باید «منو» را بزند. اینکه در صفحهٔ بزرگ منو خودبه‌خود باز و افقی باشد و در موبایل جمع، به یک تکه رفتار نیاز دارد که فقط با JavaScript می‌آید — \u003Cstrong>این را در ترم ۷ یاد می‌گیریم\u003C\u002Fstrong>. ولی همین منوی امروزی، بدونِ یک خط کد، برای همه — با ماوس، با صفحه‌کلید، با screen reader — کار می‌کند، و این خودش یک برد است.\u003C\u002Fp>\n",{"kind":21,"heading":48,"html":49},"واژه‌های تازهٔ این فصل","\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><details>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>دیتِیلز\u003C\u002Ftd>\n\u003Ctd>جعبهٔ بازشو که مرورگر خودش باز و بسته‌اش می‌کند، بدونِ کد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><summary>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>سامِری\u003C\u002Ftd>\n\u003Ctd>بخشِ همیشه‌دیدهٔ \u003Ccode><details>\u003C\u002Fcode> که با کلیک یا صفحه‌کلید بازش می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>focus\u003C\u002Ftd>\n\u003Ctd>فوکِس\u003C\u002Ftd>\n\u003Ctd>جایی از صفحه که صفحه‌کلید الان روی آن است؛ با یک قابِ نازک دیده می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>outline\u003C\u002Ftd>\n\u003Ctd>اوت‌لاین\u003C\u002Ftd>\n\u003Ctd>همان قابِ focus؛ هیچ‌وقت بی‌جایگزین حذفش نکن\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":51,"heading":52,"html":53},"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><div class="toggle">منو<\u002Fdiv>\u003C\u002Fcode> با صفحه‌کلید باز نمی‌شود، ولی \u003Ccode><summary>\u003C\u002Fcode> می‌شود؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به منو دو لینکِ دیگر اضافه کن و breakpoint را از \u003Ccode>700px\u003C\u002Fcode> به \u003Ccode>900px\u003C\u002Fcode> ببر. حالا پنجره را در عرض‌های مختلف باریک و پهن کن و مطمئن شو منو در جای درست از عمودی به افقی می‌رود. یک‌بار هم کلِ کار را فقط با صفحه‌کلید (Tab و Enter) انجام بده.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک \u003Ccode><details>\u003C\u002Fcode> دومِ کاملاً جدا برای بخشِ «پرسش‌های پرتکرار» بساز: هر پرسش یک \u003Ccode><summary>\u003C\u002Fcode> و جوابش داخلِ \u003Ccode><details>\u003C\u002Fcode>. ببین همان tag که منو ساخت، یک آکاردئونِ پرسش‌وپاسخ هم می‌سازد — و باز هم بدونِ یک خط JavaScript و با صفحه‌کلیدِ کامل.\u003C\u002Fp>\n",{"kind":21,"heading":55,"html":56},"در فصل بعد","\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>الان می‌توانی یک منوی بازشوی دسترس‌پذیر بدونِ کد بسازی. فصل بعد سراغِ چیزی می‌رویم که این روزها هر سایتی انتظارش را دارد: \u003Cstrong>dark mode\u003C\u002Fstrong>. یاد می‌گیری بفهمی کاربر تمِ روشن خواسته یا تیره (\u003Ccode>prefers-color-scheme\u003C\u002Fcode>)، و با همان custom property هایی که در ترم ۲ ساختی، کلِ سایت را با چند خط بین روشن و تیره جابه‌جا کنی — طوری که رنگ‌ها همیشه خوانا بمانند.\u003C\u002Fp>\n",{"course":58,"entitled":66,"lessons":67,"payments_enabled":66,"terms":252,"live":5},{"active_window":59,"effective_price_toman":60,"free":5,"lesson_count":61,"price_toman":62,"slug":63,"summary_fa":64,"title_fa":65},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[68,72,76,80,83,86,89,92,96,100,104,107,110,113,116,119,122,125,128,131,134,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,184,185,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249],{"free_preview":5,"order":69,"slug":70,"source":8,"term":69,"title_fa":71},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":73,"slug":74,"source":8,"term":69,"title_fa":75},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":77,"slug":78,"source":8,"term":69,"title_fa":79},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":9,"slug":81,"source":8,"term":69,"title_fa":82},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":12,"slug":84,"source":8,"term":69,"title_fa":85},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":6,"slug":87,"source":8,"term":69,"title_fa":88},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":16,"slug":90,"source":8,"term":69,"title_fa":91},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":93,"slug":94,"source":8,"term":69,"title_fa":95},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":97,"slug":98,"source":8,"term":69,"title_fa":99},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":101,"slug":102,"source":8,"term":69,"title_fa":103},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":69,"slug":105,"source":8,"term":73,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":73,"slug":108,"source":8,"term":73,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":77,"slug":111,"source":8,"term":73,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":9,"slug":114,"source":8,"term":73,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":12,"slug":117,"source":8,"term":73,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":6,"slug":120,"source":8,"term":73,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":16,"slug":123,"source":8,"term":73,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":93,"slug":126,"source":8,"term":73,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":129,"source":8,"term":73,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":132,"source":8,"term":73,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":73,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":69,"slug":139,"source":8,"term":77,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":73,"slug":142,"source":8,"term":77,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":77,"slug":145,"source":8,"term":77,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":9,"slug":148,"source":8,"term":77,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":12,"slug":151,"source":8,"term":77,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":6,"slug":154,"source":8,"term":77,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":16,"slug":157,"source":8,"term":77,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":93,"slug":160,"source":8,"term":77,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":163,"source":8,"term":77,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":166,"source":8,"term":77,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":77,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":69,"slug":172,"source":8,"term":9,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":73,"slug":175,"source":8,"term":9,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":77,"slug":178,"source":8,"term":9,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":9,"slug":181,"source":8,"term":9,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"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":93,"slug":187,"source":8,"term":9,"title_fa":188},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":69,"slug":190,"source":8,"term":12,"title_fa":191},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":73,"slug":193,"source":8,"term":12,"title_fa":194},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":77,"slug":196,"source":8,"term":12,"title_fa":197},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":9,"slug":199,"source":8,"term":12,"title_fa":200},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":12,"slug":202,"source":8,"term":12,"title_fa":203},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":6,"slug":205,"source":8,"term":12,"title_fa":206},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":16,"slug":208,"source":8,"term":12,"title_fa":209},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":93,"slug":211,"source":8,"term":12,"title_fa":212},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":97,"slug":214,"source":8,"term":12,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":101,"slug":217,"source":8,"term":12,"title_fa":218},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":69,"slug":220,"source":8,"term":6,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":73,"slug":223,"source":8,"term":6,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":77,"slug":226,"source":8,"term":6,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":9,"slug":229,"source":8,"term":6,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":12,"slug":232,"source":8,"term":6,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":6,"slug":235,"source":8,"term":6,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":16,"slug":238,"source":8,"term":6,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":93,"slug":241,"source":8,"term":6,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":97,"slug":244,"source":8,"term":6,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":101,"slug":247,"source":8,"term":6,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":250,"source":8,"term":6,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105158]