[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t5-s01-states":3,"course:taropood":61},{"meta":4,"prev":11,"next":16,"sections":20},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,1,"t5-s01-states","book",5,"فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":12,"slug":13,"source":8,"term":14,"title_fa":15},8,"t4-s08-responsive-project",4,"فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":17,"slug":18,"source":8,"term":9,"title_fa":19},2,"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",[21,25,28,33,36,39,42,45,48,51,54,58],{"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>تا اینجا هر استایلی که نوشتی همیشگی بود: یک دکمه یک رنگ داشت و همان می‌ماند. ولی یک دکمهٔ واقعی به کاربر جواب می‌دهد. آخر این فصل سه دکمه داری که زنده‌اند: وقتی ماوس رویشان می‌رود رنگ عوض می‌کنند، وقتی رویشان می‌زنی یک پله تیره‌تر می‌شوند، وقتی با صفحه‌کلید به آن‌ها می‌رسی یک قابِ پررنگ دورشان روشن می‌شود، و آن‌که غیرفعال است خاموش و بی‌جان دیده می‌شود — همه بدون یک خط JavaScript.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-button-states.cdd29dd60c.160.webp 160w, \u002F_img\u002F01-image-button-states.cdd29dd60c.320.webp 320w, \u002F_img\u002F01-image-button-states.cdd29dd60c.640.webp 640w, \u002F_img\u002F01-image-button-states.cdd29dd60c.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-button-states.cdd29dd60c.1280.jpg\" srcset=\"\u002F_img\u002F01-image-button-states.cdd29dd60c.160.jpg 160w, \u002F_img\u002F01-image-button-states.cdd29dd60c.320.jpg 320w, \u002F_img\u002F01-image-button-states.cdd29dd60c.640.jpg 640w, \u002F_img\u002F01-image-button-states.cdd29dd60c.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>:hover\u003C\u002Fcode> ظاهرِ یک عنصر را وقتی ماوس رویش است عوض کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>:active\u003C\u002Fcode> لحظهٔ فشرده‌شدن را نشان بدهی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>:focus-visible\u003C\u002Fcode> به کسی که با صفحه‌کلید کار می‌کند بازخوردِ برابر بدهی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>:disabled\u003C\u002Fcode> یک دکمهٔ غیرفعال را درست استایل کنی\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><button>\u003C\u002Fcode> — دکمه‌ها را با همین می‌سازیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۴ (فصل ناوبری):\u003C\u002Fstrong> \u003Ccode>outline\u003C\u002Fcode> و \u003Ccode>cursor\u003C\u002Fcode> — قابِ focus و نشانگرِ ماوس.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲:\u003C\u002Fstrong> \u003Ccode>background-color\u003C\u002Fcode> و \u003Ccode>color\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-01-states",{"kind":22,"heading":34,"html":35},"۱. pseudo-class چیست؟ اولین حالت: :hover","\u003Ch2 id=\"۱-pseudo-class-چیست-اولین-حالت-hover\">۱. pseudo-class چیست؟ اولین حالت: \u003Ccode>:hover\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B1-pseudo-class-%DA%86%DB%8C%D8%B3%D8%AA-%D8%A7%D9%88%D9%84%DB%8C%D9%86-%D8%AD%D8%A7%D9%84%D8%AA-hover\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا هر selector یی که نوشتی به یک عنصر می‌خورد، بی‌توجه به اینکه کاربر همان لحظه دارد چه می‌کند. ولی یک دکمه فقط «یک دکمه» نیست؛ حالت‌های مختلف دارد: عادی، زیرِ ماوس، در حالِ فشرده‌شدن، غیرفعال. برای هدف‌گرفتنِ این حالت‌ها یک ابزار تازه داریم: \u003Cstrong>pseudo-class\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cp>یک \u003Ccode>pseudo-class\u003C\u002Fcode> یک کلمهٔ کوتاه است که با یک \u003Ccode>:\u003C\u002Fcode> به تهِ selector می‌چسبد و می‌گوید «فقط وقتی عنصر در این حالتِ خاص است». پرکاربردترینش \u003Ccode>:hover\u003C\u002Fcode> است، یعنی «وقتی ماوس روی این عنصر است». در آزمایشگاه اول سه دکمه را استایلِ پایه بده، بعد یک قاعدهٔ \u003Ccode>:hover\u003C\u002Fcode> اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn {\n  font: inherit;\n  margin-inline-end: 8px;\n  padding: 10px 20px;\n  border: 1px solid #2a6b93;\n  border-radius: 8px;\n  background-color: #ffffff;\n  color: #2a6b93;\n  cursor: pointer;\n}\n\n.btn:hover {\n  background-color: #2a6b93;\n  color: #ffffff;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> ماوس را روی «ذخیره» ببر — پس‌زمینه‌اش آبیِ توپُر و متنش سفید می‌شود. ماوس را که برداری، همان لحظه به حالت اول برمی‌گردد. تو فقط گفتی «در حالتِ hover این‌طور باش»؛ رفتنِ ماوس روی دکمه و برگشتنش را مرورگر خودش دنبال می‌کند.\u003C\u002Fp>\n",{"kind":22,"heading":37,"html":38},"۲. :active: لحظهٔ فشردن","\u003Ch2 id=\"۲-active-لحظهٔ-فشردن\">۲. \u003Ccode>:active\u003C\u002Fcode>: لحظهٔ فشردن\u003Ca class=\"head-anchor\" href=\"#%DB%B2-active-%D9%84%D8%AD%D8%B8%D9%87%D9%94-%D9%81%D8%B4%D8%B1%D8%AF%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>:active\u003C\u002Fcode> یعنی «همان لحظه‌ای که داری روی عنصر کلیک می‌کنی» — یعنی دکمهٔ ماوس پایین است و هنوز ولش نکرده‌ای. با یک رنگِ کمی تیره‌تر، یک بازخوردِ لمسیِ کوچک بده تا کاربر حس کند دکمه واقعاً فشرده شد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn:active {\n  background-color: #1f4f6e;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی یک دکمه بزن و نگه‌دار — رنگش یک پله تیره‌تر می‌شود؛ تا انگشتت را برداری، دوباره به آبیِ hover برمی‌گردد.\u003C\u002Fp>\n\u003Cp>Checkpoint — قبل از ادامه، جواب بده: اگر یک دکمه هم \u003Ccode>:hover\u003C\u002Fcode> و هم \u003Ccode>:active\u003C\u002Fcode> داشته باشد، وقتی ماوس رویش است ولی هنوز کلیک نکرده‌ای کدام دیده می‌شود؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> \u003Ccode>:hover\u003C\u002Fcode>. تا وقتی فقط روی دکمه‌ای، در حالتِ hover هستی؛ به‌محضِ اینکه بفشاری، \u003Ccode>:active\u003C\u002Fcode> هم اضافه می‌شود و چون بعد از \u003Ccode>:hover\u003C\u002Fcode> نوشته شده، رنگِ تیره‌ترش را می‌بینی.\u003C\u002Fp>\n",{"kind":22,"heading":40,"html":41},"۳. مشکلِ صفحه‌کلید","\u003Ch2 id=\"۳-مشکلِ-صفحه‌کلید\">۳. مشکلِ صفحه‌کلید\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D9%85%D8%B4%DA%A9%D9%84%D9%90-%D8%B5%D9%81%D8%AD%D9%87%E2%80%8C%DA%A9%D9%84%DB%8C%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>خیلی‌ها اصلاً از ماوس استفاده نمی‌کنند — با کلیدِ Tab بینِ دکمه‌ها و لینک‌ها می‌پرند. حالا یک لحظه فکر کن: تا اینجا تنها بازخوردِ «زنده بودنِ» دکمه، آن رنگِ \u003Ccode>:hover\u003C\u002Fcode> است. و \u003Ccode>:hover\u003C\u002Fcode> به ماوس نیاز دارد. پس این کاربر چه می‌بیند؟\u003C\u002Fp>\n\u003Cp>دستت را از ماوس بردار و در آزمایشگاه Tab بزن تا focus به یک دکمه برسد. پس‌زمینه \u003Cstrong>عوض نمی‌شود\u003C\u002Fstrong> — چون ماوسی رویش نیست. تنها نشانه، یک خطِ نازکِ پیش‌فرضِ مرورگر است که در هر مرورگر شکلِ فرق دارد و راحت گم می‌شود. یعنی کاربرِ ماوس یک دکمهٔ آبیِ پررنگ می‌بیند، و کاربرِ صفحه‌کلید یک خطِ خاکستریِ کم‌رنگ. این نابرابری همان خطاست.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> اینجا چیزی «به‌هم نریخته»؛ خرابی این است که کاربرِ صفحه‌کلید بازخوردِ برابر نمی‌گیرد. راهِ حل این است که برای این کاربر هم یک حالت بسازی: \u003Ccode>:focus-visible\u003C\u002Fcode>، یعنی «وقتی عنصر با صفحه‌کلید انتخاب شده». یک قابِ پررنگ و یکدست برایش بگذار:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn:focus-visible {\n  outline: 3px solid #a36207;\n  outline-offset: 2px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> دوباره با Tab بین دکمه‌ها حرکت کن — حالا دورِ دکمه‌ای که رویش هستی یک قابِ زرشکیِ پررنگ و یکدست ظاهر می‌شود، در هر مرورگری یک‌شکل. حالا کاربرِ صفحه‌کلید هم دقیقاً می‌داند کجاست.\u003C\u002Fp>\n",{"kind":22,"heading":43,"html":44},"۴. :focus-visible در برابر :focus","\u003Ch2 id=\"۴-focus-visible-در-برابر-focus\">۴. \u003Ccode>:focus-visible\u003C\u002Fcode> در برابر \u003Ccode>:focus\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B4-focus-visible-%D8%AF%D8%B1-%D8%A8%D8%B1%D8%A7%D8%A8%D8%B1-focus\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک pseudo-class دیگر هم هست به اسمِ \u003Ccode>:focus\u003C\u002Fcode>، و فرقشان مهم است. \u003Ccode>:focus\u003C\u002Fcode> \u003Cstrong>هر بار\u003C\u002Fstrong> که عنصر انتخاب می‌شود فعال می‌شود — حتی وقتی با ماوس رویش کلیک می‌کنی. نتیجه این است که بعد از یک کلیکِ ماوس، آن قاب روی دکمه می‌ماند و بیشترِ وقت‌ها زیادی و زشت به‌نظر می‌رسد.\u003C\u002Fp>\n\u003Cp>\u003Ccode>:focus-visible\u003C\u002Fcode> هوشمندتر است: قاب را فقط وقتی نشان می‌دهد که مرورگر تشخیص بدهد کاربر واقعاً به آن نیاز دارد — یعنی وقتی با صفحه‌کلید آمده، نه وقتی با ماوس کلیک کرده. برای همین \u003Ccode>:focus-visible\u003C\u002Fcode> انتخابِ بهترِ همان قابی است که ساختیم: دقیقاً به کسی که لازمش دارد نشانش می‌دهد و کاربرِ ماوس را با یک قابِ اضافه اذیت نمی‌کند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> آن قابِ focus را هیچ‌وقت با \u003Ccode>outline: none\u003C\u002Fcode> بی‌جایگزین حذف نکن (از فصل ناوبری یادت هست). اگر ظاهرِ پیش‌فرضش را نمی‌پسندی، با \u003Ccode>:focus-visible\u003C\u002Fcode> عوضش کن — حذف‌کردنش یعنی کورکردنِ کاربرِ صفحه‌کلید.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":22,"heading":46,"html":47},"۵. :disabled: دکمهٔ خاموش","\u003Ch2 id=\"۵-disabled-دکمهٔ-خاموش\">۵. \u003Ccode>:disabled\u003C\u002Fcode>: دکمهٔ خاموش\u003Ca class=\"head-anchor\" href=\"#%DB%B5-disabled-%D8%AF%DA%A9%D9%85%D9%87%D9%94-%D8%AE%D8%A7%D9%85%D9%88%D8%B4\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>دکمهٔ سوم در HTML صفت \u003Ccode>disabled\u003C\u002Fcode> دارد. مرورگر خودش نمی‌گذارد کلیک شود، ولی به‌طورِ پیش‌فرض هنوز مثلِ دکمه‌های فعال دیده می‌شود — و این گول‌زننده است. با \u003Ccode>:disabled\u003C\u002Fcode> ظاهرش را هم خاموش کن تا کاربر ببیند این دکمه الان کار نمی‌کند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn:disabled {\n  border-color: #d8ccae;\n  background-color: #efe6d0;\n  color: #a89b7d;\n  cursor: not-allowed;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> دکمهٔ «حذف» حالا کم‌رنگ و خاموش است. ماوس را رویش ببر — نشانگر به شکلِ «ممنوع» درمی‌آید و رنگش هم عوض نمی‌شود.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> چرا رنگِ hover روی دکمهٔ غیرفعال اثر نکرد؟ چون قاعدهٔ \u003Ccode>:disabled\u003C\u002Fcode> را \u003Cstrong>بعد از\u003C\u002Fstrong> \u003Ccode>:hover\u003C\u002Fcode> نوشتیم. هر دو specificity برابر دارند، پس در cascade آنکه بعد آمده برنده است (از ترم ۲ یادت هست). ترتیب اهمیت دارد: حالت‌های «خاموش» را آخر بنویس.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":22,"heading":49,"html":50},"کد کاملِ این فصل","\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="page">\n      <h1>حالت‌های یک دکمه<\u002Fh1>\n      <p>ماوس را روی دکمه‌ها ببر و رویشان بزن. بعد دستت را از ماوس بردار و فقط با کلید Tab بین دکمه‌ها حرکت کن.<\u002Fp>\n      <button class="btn">ذخیره<\u002Fbutton>\n      <button class="btn">ارسال<\u002Fbutton>\n      <button class="btn" disabled>حذف<\u002Fbutton>\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.page {\n  padding: 32px 24px;\n}\n\n.btn {\n  font: inherit;\n  margin-inline-end: 8px;\n  padding: 10px 20px;\n  border: 1px solid #2a6b93;\n  border-radius: 8px;\n  background-color: #ffffff;\n  color: #2a6b93;\n  cursor: pointer;\n}\n\n\u002F* :hover = vaghti mous rooye dokme ast *\u002F\n.btn:hover {\n  background-color: #2a6b93;\n  color: #ffffff;\n}\n\n\u002F* :active = lahze-ye feshordan *\u002F\n.btn:active {\n  background-color: #1f4f6e;\n}\n\n\u002F* :focus-visible = vaghti ba safhe-kelid be dokme miresi *\u002F\n.btn:focus-visible {\n  outline: 3px solid #a36207;\n  outline-offset: 2px;\n}\n\n\u002F* :disabled = dokme-ye gheyr-e faal; akhar minevisim ta rooye hover ghalabe konad *\u002F\n.btn:disabled {\n  border-color: #d8ccae;\n  background-color: #efe6d0;\n  color: #a89b7d;\n  cursor: not-allowed;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-mouse-vs-keyboard.4136f4e3b5.160.webp 160w, \u002F_img\u002F02-image-mouse-vs-keyboard.4136f4e3b5.320.webp 320w, \u002F_img\u002F02-image-mouse-vs-keyboard.4136f4e3b5.640.webp 640w, \u002F_img\u002F02-image-mouse-vs-keyboard.4136f4e3b5.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-mouse-vs-keyboard.4136f4e3b5.1280.jpg\" srcset=\"\u002F_img\u002F02-image-mouse-vs-keyboard.4136f4e3b5.160.jpg 160w, \u002F_img\u002F02-image-mouse-vs-keyboard.4136f4e3b5.320.jpg 320w, \u002F_img\u002F02-image-mouse-vs-keyboard.4136f4e3b5.640.jpg 640w, \u002F_img\u002F02-image-mouse-vs-keyboard.4136f4e3b5.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو مسیر که به یک دکمهٔ یکسان می‌رسند: از یک سمت یک نشانگرِ ماوس که با رسیدنش دکمه پس‌زمینهٔ رنگی می‌گیرد، از سمتِ دیگر یک کلیدِ Tab که با رسیدنش یک قابِ پررنگ دورِ دکمه روشن می‌شود\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیارِ AI ات بپرس «فرقِ \u003Ccode>:focus\u003C\u002Fcode> و \u003Ccode>:focus-visible\u003C\u002Fcode> چیست و کِی کدام را به‌کار ببرم؟». جوابش را با چیزی که همین الان خودت در آزمایشگاه دیدی بسنج: با ماوس روی دکمه کلیک کن و ببین \u003Ccode>:focus-visible\u003C\u002Fcode> قاب را نشان \u003Cstrong>نمی‌دهد\u003C\u002Fstrong> ولی با Tab نشان می‌دهد. اول خودت ببین، بعد توضیحِ AI را قبول کن — دربارهٔ همین جزئیات گاهی با اعتمادبه‌نفس اشتباه می‌گوید.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":22,"heading":52,"html":53},"واژه‌های تازهٔ این فصل","\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>pseudo-class\u003C\u002Ftd>\n\u003Ctd>سودو-کلاس\u003C\u002Ftd>\n\u003Ctd>کلمه‌ای با \u003Ccode>:\u003C\u002Fcode> که یک \u003Cstrong>حالتِ\u003C\u002Fstrong> خاصِ عنصر را هدف می‌گیرد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:hover\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>هاوِر\u003C\u002Ftd>\n\u003Ctd>وقتی ماوس روی عنصر است\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:active\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اکتیو\u003C\u002Ftd>\n\u003Ctd>همان لحظهٔ فشرده‌شدن (دکمهٔ ماوس پایین)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:focus\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>فوکِس\u003C\u002Ftd>\n\u003Ctd>هر بار که عنصر انتخاب می‌شود، با ماوس یا صفحه‌کلید\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:focus-visible\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>فوکِس-ویزیبل\u003C\u002Ftd>\n\u003Ctd>فقط وقتی focus با صفحه‌کلید است و قاب به کار می‌آید\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:disabled\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>دیس‌ایبلد\u003C\u002Ftd>\n\u003Ctd>وقتی عنصر صفت \u003Ccode>disabled\u003C\u002Fcode> دارد و کار نمی‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":55,"heading":56,"html":57},"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>:focus-visible\u003C\u002Fcode> را به‌جای \u003Ccode>:hover\u003C\u002Fcode> گذاشتیم؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک لینکِ ساده (\u003Ccode><a href="#">\u003C\u002Fcode>) بردار و همان چهار حالت را برایش بساز: در \u003Ccode>:hover\u003C\u002Fcode> رنگش عوض شود، در \u003Ccode>:active\u003C\u002Fcode> تیره‌تر، و در \u003Ccode>:focus-visible\u003C\u002Fcode> یک قاب بگیرد. بعد یک‌بار کلِ کار را فقط با صفحه‌کلید امتحان کن و مطمئن شو قابِ focus را واضح می‌بینی.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> دو دکمه بساز و به یکی \u003Ccode>:focus\u003C\u002Fcode> و به دیگری \u003Ccode>:focus-visible\u003C\u002Fcode> بده (با یک رنگِ قابِ متفاوت تا فرقشان پیدا باشد). حالا یک‌بار هر دو را با ماوس کلیک کن و یک‌بار با Tab به هرکدام برس. با یک جمله بنویس در کدام حالت قابِ اضافه‌ای می‌بینی که دوستش نداری، و چرا \u003Ccode>:focus-visible\u003C\u002Fcode> تمیزتر است.\u003C\u002Fp>\n",{"kind":22,"heading":59,"html":60},"در فصل بعد","\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>حالتشان\u003C\u002Fstrong> استایل بدهی. فصل بعد سراغِ استایل‌دادن بر اساسِ \u003Cstrong>جایگاهشان\u003C\u002Fstrong> می‌رویم: با selector های ساختاری مثلِ \u003Ccode>:nth-child\u003C\u002Fcode> و \u003Ccode>:first-child\u003C\u002Fcode> می‌توانی بگویی «دومین آیتمِ این فهرست» یا «آخرین کارت» بدونِ اینکه به هیچ‌کدام class بدهی، و با combinator های \u003Ccode>>\u003C\u002Fcode>، \u003Ccode>+\u003C\u002Fcode> و \u003Ccode>~\u003C\u002Fcode> رابطهٔ بینِ عنصرها را هدف بگیری.\u003C\u002Fp>\n",{"course":62,"entitled":70,"lessons":71,"payments_enabled":70,"terms":255,"live":5},{"active_window":63,"effective_price_toman":64,"free":5,"lesson_count":65,"price_toman":66,"slug":67,"summary_fa":68,"title_fa":69},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[72,75,78,82,85,88,92,96,99,103,107,110,113,116,119,122,125,128,131,134,137,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,196,197,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252],{"free_preview":5,"order":6,"slug":73,"source":8,"term":6,"title_fa":74},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":17,"slug":76,"source":8,"term":6,"title_fa":77},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":79,"slug":80,"source":8,"term":6,"title_fa":81},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":14,"slug":83,"source":8,"term":6,"title_fa":84},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":9,"slug":86,"source":8,"term":6,"title_fa":87},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":89,"slug":90,"source":8,"term":6,"title_fa":91},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":93,"slug":94,"source":8,"term":6,"title_fa":95},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":12,"slug":97,"source":8,"term":6,"title_fa":98},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":100,"slug":101,"source":8,"term":6,"title_fa":102},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":6,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":6,"slug":108,"source":8,"term":17,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":17,"slug":111,"source":8,"term":17,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":79,"slug":114,"source":8,"term":17,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":14,"slug":117,"source":8,"term":17,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":9,"slug":120,"source":8,"term":17,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":89,"slug":123,"source":8,"term":17,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":93,"slug":126,"source":8,"term":17,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":12,"slug":129,"source":8,"term":17,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":100,"slug":132,"source":8,"term":17,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":17,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":17,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":6,"slug":142,"source":8,"term":79,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":17,"slug":145,"source":8,"term":79,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":79,"slug":148,"source":8,"term":79,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":14,"slug":151,"source":8,"term":79,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":9,"slug":154,"source":8,"term":79,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":89,"slug":157,"source":8,"term":79,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":93,"slug":160,"source":8,"term":79,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":12,"slug":163,"source":8,"term":79,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":100,"slug":166,"source":8,"term":79,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":169,"source":8,"term":79,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":172,"source":8,"term":79,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":6,"slug":175,"source":8,"term":14,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":17,"slug":178,"source":8,"term":14,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":79,"slug":181,"source":8,"term":14,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":14,"slug":184,"source":8,"term":14,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":9,"slug":187,"source":8,"term":14,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":89,"slug":190,"source":8,"term":14,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":93,"slug":193,"source":8,"term":14,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":12,"slug":13,"source":8,"term":14,"title_fa":15},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":17,"slug":18,"source":8,"term":9,"title_fa":19},{"free_preview":5,"order":79,"slug":199,"source":8,"term":9,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":14,"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":89,"slug":208,"source":8,"term":9,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":93,"slug":211,"source":8,"term":9,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":12,"slug":214,"source":8,"term":9,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":217,"source":8,"term":9,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":220,"source":8,"term":9,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":6,"slug":223,"source":8,"term":89,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":17,"slug":226,"source":8,"term":89,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":79,"slug":229,"source":8,"term":89,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":14,"slug":232,"source":8,"term":89,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":9,"slug":235,"source":8,"term":89,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":89,"slug":238,"source":8,"term":89,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":93,"slug":241,"source":8,"term":89,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":12,"slug":244,"source":8,"term":89,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":247,"source":8,"term":89,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":89,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":89,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105207]