[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t6-s05-svg-icons":3,"course:taropood":59},{"meta":4,"prev":11,"next":15,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,5,"t6-s05-svg-icons","book",6,"فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},4,"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":9,"slug":16,"source":8,"term":9,"title_fa":17},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",[19,23,26,31,34,37,40,43,46,49,52,56],{"kind":20,"heading":21,"html":22},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا هر تصویری که گذاشتی یک فایلِ \u003Ccode>.jpg\u003C\u002Fcode> یا \u003Ccode>.png\u003C\u002Fcode> بود که از بیرون می‌آمد. در این فصل نوعِ تازه‌ای از تصویر را می‌سازی که \u003Cstrong>خودت داخلِ HTML می‌نویسی‌اش\u003C\u002Fstrong> — یک نقاشیِ برداری که با کد ساخته می‌شود، هرقدر بزرگش کنی تیز و صاف می‌ماند، و مهم‌تر از همه، رنگش را CSS کنترل می‌کند. به این \u003Ccode>SVG\u003C\u002Fcode> می‌گویند. آخرِ فصل یک جفت دکمهٔ «پسند» و «ذخیره» داری که هرکدام یک آیکون دارند، و آیکون‌ها \u003Cstrong>رنگِ متنِ دکمه را به ارث می‌برند\u003C\u002Fstrong> — روی hover که رنگِ دکمه عوض می‌شود، آیکون هم با آن عوض می‌شود.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-icon-buttons.05a33061e1.160.webp 160w, \u002F_img\u002F01-image-icon-buttons.05a33061e1.320.webp 320w, \u002F_img\u002F01-image-icon-buttons.05a33061e1.640.webp 640w, \u002F_img\u002F01-image-icon-buttons.05a33061e1.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-icon-buttons.05a33061e1.1280.jpg\" srcset=\"\u002F_img\u002F01-image-icon-buttons.05a33061e1.160.jpg 160w, \u002F_img\u002F01-image-icon-buttons.05a33061e1.320.jpg 320w, \u002F_img\u002F01-image-icon-buttons.05a33061e1.640.jpg 640w, \u002F_img\u002F01-image-icon-buttons.05a33061e1.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><svg>\u003C\u002Fcode> را مستقیم داخلِ HTML بنویسی و یک شکلِ ساده بکشی\u003C\u002Fli>\n\u003Cli>فرقِ \u003Ccode>fill\u003C\u002Fcode> (رنگِ داخل) و \u003Ccode>stroke\u003C\u002Fcode> (رنگِ خط) را بفهمی و هرکدام را جدا کنترل کنی\u003C\u002Fli>\n\u003Cli>یک آیکونِ واقعی را با یک \u003Ccode><path>\u003C\u002Fcode> به دکمه اضافه کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>currentColor\u003C\u002Fcode> کاری کنی آیکون همیشه همرنگِ متنِ کنارش بماند\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":20,"heading":24,"html":25},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از ترم ۲:\u003C\u002Fstrong> رنگ با کدِ hex و \u003Ccode>color\u003C\u002Fcode> — همان رنگ‌ها را این‌بار به شکل هم می‌دهیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۳ همین ترم:\u003C\u002Fstrong> فکرِ component و کلاسِ modifier مثلِ \u003Ccode>.btn--like\u003C\u002Fcode> — دکمه‌ها را همان‌طور می‌سازیم.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":27,"heading":28,"html":29,"embed":30},"lab","","— دو دکمه می‌بینی که آیکونشان یک مشکل دارد: آیکون سیاه مانده و با رنگِ دکمه جور نیست. کارِ این فصل این است که خط‌به‌خط این آیکون‌ها را بسازی و آخرش کاری کنی رنگِ متنِ دکمه را دنبال کنند","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-6-professional\u002Fsession-05-svg-icons",{"kind":20,"heading":32,"html":33},"۱. بردار در برابر عکس","\u003Ch2 id=\"۱-بردار-در-برابر-عکس\">۱. بردار در برابر عکس\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%A8%D8%B1%D8%AF%D8%A7%D8%B1-%D8%AF%D8%B1-%D8%A8%D8%B1%D8%A7%D8%A8%D8%B1-%D8%B9%DA%A9%D8%B3\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک عکسِ معمولی — \u003Ccode>.jpg\u003C\u002Fcode> یا \u003Ccode>.png\u003C\u002Fcode> — از هزاران نقطهٔ رنگیِ ریز (pixel) ساخته شده. وقتی خیلی بزرگش کنی، همان نقطه‌ها بزرگ می‌شوند و تصویر \u003Cstrong>پله‌پله و تار\u003C\u002Fstrong> می‌شود. برای یک عکسِ کوه این خوب است، ولی برای یک آیکونِ ساده — یک قلب، یک ستاره، یک فلش — افتضاح است.\u003C\u002Fp>\n\u003Cp>\u003Ccode>SVG\u003C\u002Fcode> جورِ دیگری کار می‌کند. به‌جای نقطه‌ها، یک \u003Cstrong>دستورِ هندسی\u003C\u002Fstrong> را نگه می‌دارد: «یک دایره اینجا، به این شعاع». مرورگر هر بار که لازم شود دوباره از روی همان دستور می‌کشدش — پس در هر اندازه‌ای تیز و صاف می‌ماند. برای آیکون‌ها و لوگوها دقیقاً همین را می‌خواهیم.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-vector-vs-raster.249eabd4e3.160.webp 160w, \u002F_img\u002F02-image-vector-vs-raster.249eabd4e3.320.webp 320w, \u002F_img\u002F02-image-vector-vs-raster.249eabd4e3.640.webp 640w, \u002F_img\u002F02-image-vector-vs-raster.249eabd4e3.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-vector-vs-raster.249eabd4e3.1280.jpg\" srcset=\"\u002F_img\u002F02-image-vector-vs-raster.249eabd4e3.160.jpg 160w, \u002F_img\u002F02-image-vector-vs-raster.249eabd4e3.320.jpg 320w, \u002F_img\u002F02-image-vector-vs-raster.249eabd4e3.640.jpg 640w, \u002F_img\u002F02-image-vector-vs-raster.249eabd4e3.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"مقایسهٔ دو کوهِ کنار هم که هر دو بزرگ شده‌اند؛ کوهِ سمتِ راست از مربع‌های رنگیِ درشت و پله‌پله ساخته شده و لبه‌هایش دندانه‌دار است، کوهِ سمتِ چپ یک شکلِ صاف با لبه‌های تیز و تمیز است\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. یک <svg> درون‌خطی و یک شکل","\u003Ch2 id=\"۲-یک-svg-درون‌خطی-و-یک-شکل\">۲. یک \u003Ccode><svg>\u003C\u002Fcode> درون‌خطی و یک شکل\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%DB%8C%DA%A9-svg-%D8%AF%D8%B1%D9%88%D9%86%E2%80%8C%D8%AE%D8%B7%DB%8C-%D9%88-%DB%8C%DA%A9-%D8%B4%DA%A9%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بهترین بخشِ SVG این است که مثلِ یک تصویرِ بیرونی نیست که با \u003Ccode><img>\u003C\u002Fcode> صدایش بزنی؛ می‌توانی خودِ شکل را \u003Cstrong>همین‌جا داخلِ HTML\u003C\u002Fstrong> بنویسی. به این «SVG درون‌خطی» می‌گویند. بیا یک دایرهٔ ساده بکشیم. این را در آزمایشگاه امتحان کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><svg width="48" height="48" viewBox="0 0 24 24">\n  <circle cx="12" cy="12" r="8" fill="#55731b" \u002F>\n<\u002Fsvg>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>یک دایرهٔ سبزِ کوچک می‌بینی. سه چیز اینجا مهم است. \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode> اندازهٔ نمایشِ آیکون روی صفحه است. \u003Ccode>viewBox="0 0 24 24"\u003C\u002Fcode> یک \u003Cstrong>صفحهٔ مختصاتِ\u003C\u002Fstrong> ۲۴ در ۲۴ می‌سازد که همه‌چیز داخلش کشیده می‌شود — عددها مربوط به همین صفحه‌اند، نه به پیکسل. \u003Ccode><circle>\u003C\u002Fcode> هم یک شکل است: مرکزش (\u003Ccode>cx\u003C\u002Fcode>, \u003Ccode>cy\u003C\u002Fcode>) و شعاعش (\u003Ccode>r\u003C\u002Fcode>).\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> چون عددها به \u003Ccode>viewBox\u003C\u002Fcode> وصل‌اند نه به پیکسل، \u003Ccode>width\u003C\u002Fcode> را از \u003Ccode>48\u003C\u002Fcode> به \u003Ccode>120\u003C\u002Fcode> عوض کن: دایره بزرگ می‌شود ولی هیچ‌جایش تار نمی‌شود. همین جادوی بردار است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":38,"html":39},"۳. fill و stroke: داخل و خط","\u003Ch2 id=\"۳-fill-و-stroke-داخل-و-خط\">۳. \u003Ccode>fill\u003C\u002Fcode> و \u003Ccode>stroke\u003C\u002Fcode>: داخل و خط\u003Ca class=\"head-anchor\" href=\"#%DB%B3-fill-%D9%88-stroke-%D8%AF%D8%A7%D8%AE%D9%84-%D9%88-%D8%AE%D8%B7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>هر شکلِ SVG دو رنگِ جدا دارد. \u003Ccode>fill\u003C\u002Fcode> رنگِ \u003Cstrong>داخلِ\u003C\u002Fstrong> شکل است، و \u003Ccode>stroke\u003C\u002Fcode> رنگِ \u003Cstrong>خطِ دورِ\u003C\u002Fstrong> آن. تا حالا فقط \u003Ccode>fill\u003C\u002Fcode> دادیم و یک دایرهٔ توپُر گرفتیم. حالا داخل را خالی کن و فقط خط بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><svg width="48" height="48" viewBox="0 0 24 24">\n  <circle cx="12" cy="12" r="8" fill="none" stroke="#55731b" stroke-width="2" \u002F>\n<\u002Fsvg>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا به‌جای یک دایرهٔ توپُر، یک \u003Cstrong>حلقه\u003C\u002Fstrong> می‌بینی — چون \u003Ccode>fill="none"\u003C\u002Fcode> داخلش را خالی کرد و \u003Ccode>stroke\u003C\u002Fcode> فقط لبه را رنگ کرد. \u003Ccode>stroke-width\u003C\u002Fcode> هم کلفتیِ آن خط است. همین دو تنظیم، تفاوتِ یک آیکونِ توپُر و یک آیکونِ خطی است.\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. آیکونِ واقعی با <path>","\u003Ch2 id=\"۴-آیکونِ-واقعی-با-path\">۴. آیکونِ واقعی با \u003Ccode><path>\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%A2%DB%8C%DA%A9%D9%88%D9%86%D9%90-%D9%88%D8%A7%D9%82%D8%B9%DB%8C-%D8%A8%D8%A7-path\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode><circle>\u003C\u002Fcode> و \u003Ccode><rect>\u003C\u002Fcode> برای شکل‌های ساده خوب‌اند، ولی یک قلب یا یک ستاره را نمی‌شود با آن‌ها کشید. آیکون‌های واقعی تقریباً همیشه با یک تگِ دیگر ساخته می‌شوند: \u003Ccode><path>\u003C\u002Fcode>. آن رشتهٔ طولانیِ حرف و عددِ داخلِ \u003Ccode>d\u003C\u002Fcode> یک مسیرِ نقاشی است — لازم نیست خودت بنویسی‌اش؛ از یک مجموعهٔ آیکونِ آماده کپی‌اش می‌کنی. این یک قلب است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><svg viewBox="0 0 24 24" width="24" height="24">\n  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#bc3e1c" \u002F>\n<\u002Fsvg>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>یک قلبِ قرمزِ آجری. \u003Ccode>fill\u003C\u002Fcode> اینجا هم دقیقاً همان کارِ دایره را می‌کند: رنگِ داخلِ شکل.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> یک آیکونِ ساده که لازم داری — مثلاً یک زنگوله یا یک فلش — از دستیار AI ات بخواه به‌شکلِ یک \u003Ccode><svg>\u003C\u002Fcode> درون‌خطی بدهد، و بپرس «هر تکهٔ این کد چه‌کار می‌کند؟». بعد در آزمایشگاه بچسبانش و \u003Cstrong>با چشمِ خودت ببین\u003C\u002Fstrong> واقعاً همان شکل درمی‌آید یا نه — مدل‌ها گاهی مسیری می‌سازند که شبیهِ چیزِ دیگری است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":44,"html":45},"۵. currentColor: آیکون رنگِ متن را بگیرد","\u003Ch2 id=\"۵-currentcolor-آیکون-رنگِ-متن-را-بگیرد\">۵. \u003Ccode>currentColor\u003C\u002Fcode>: آیکون رنگِ متن را بگیرد\u003Ca class=\"head-anchor\" href=\"#%DB%B5-currentcolor-%D8%A2%DB%8C%DA%A9%D9%88%D9%86-%D8%B1%D9%86%DA%AF%D9%90-%D9%85%D8%AA%D9%86-%D8%B1%D8%A7-%D8%A8%DA%AF%DB%8C%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا بیا آیکون را داخلِ دکمه بگذاریم. فرض کن دکمهٔ «پسند» متنش قرمزِ آجری است، و ما هم قلب را \u003Ccode>fill="#2c2114"\u003C\u002Fcode> (یک قهوه‌ایِ تیره) گذاشته‌ایم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><button class="btn btn--like" type="button">\n  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">\n    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#2c2114" \u002F>\n  <\u002Fsvg>\n  پسند\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>نگاه کن: متنِ «پسند» قرمز است، ولی قلب \u003Cstrong>تیرهٔ سیاه\u003C\u002Fstrong> مانده و با متن جور نیست. بدتر اینکه اگر بعداً رنگِ دکمه را عوض کنی، این قلب همان تیره می‌ماند و باید دستی هم عوضش کنی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> رنگِ آیکون سِفت به یک کدِ رنگ چسبیده (\u003Ccode>fill="#2c2114"\u003C\u002Fcode>)، پس هرچه رنگِ متن باشد، آیکون توجهی نمی‌کند. راهِ حل یک کلمهٔ جادویی است: \u003Ccode>fill\u003C\u002Fcode> را به \u003Ccode>currentColor\u003C\u002Fcode> عوض کن. \u003Ccode>currentColor\u003C\u002Fcode> یعنی «همان رنگی که متنِ اینجا دارد». آیکون از این به بعد رنگِ \u003Ccode>color\u003C\u002Fcode> دکمه را می‌گیرد:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="currentColor" \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا قلب دقیقاً همان قرمزِ متن شد. ماوس را ببر روی دکمه: \u003Ccode>color\u003C\u002Fcode> عوض می‌شود و قلب \u003Cstrong>همراهش\u003C\u002Fstrong> عوض می‌شود، بی‌آنکه یک خطِ اضافه بنویسی. \u003Ccode>currentColor\u003C\u002Fcode> آیکون را به رنگِ متن گره می‌زند — یک تعریف، یک رنگ، همه‌جا هماهنگ.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> آن \u003Ccode>aria-hidden="true"\u003C\u002Fcode> روی \u003Ccode><svg>\u003C\u002Fcode> یعنی «این آیکون فقط تزئینی است، برای screen reader نخوانش» — چون کلمهٔ «پسند» کنارش خودش معنا را می‌رساند. فعلاً همین‌قدر بدان؛ در فصل ۶ (دسترس‌پذیری عمیق) کامل یادش می‌گیریم.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":47,"html":48},"۶. کد کامل","\u003Ch2 id=\"۶-کد-کامل\">۶. کد کامل\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode> با دو دکمه، هرکدام یک آیکونِ \u003Ccode>currentColor\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>SVG و آیکون<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <article class="card">\n      <h1>یک عکس از کوه<\u002Fh1>\n      <p class="desc">این عکس را دوست داشتی؟ نشانش کن تا بعد پیدایش کنی.<\u002Fp>\n      <footer class="actions">\n        <button class="btn btn--like" type="button">\n          <svg class="icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">\n            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="currentColor" \u002F>\n          <\u002Fsvg>\n          پسند\n        <\u002Fbutton>\n        <button class="btn btn--save" type="button">\n          <svg class="icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">\n            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="currentColor" \u002F>\n          <\u002Fsvg>\n          ذخیره\n        <\u002Fbutton>\n      <\u002Ffooter>\n    <\u002Farticle>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode> — دقت کن که رنگِ آیکون هیچ‌جا جدا تعریف نشده؛ فقط \u003Ccode>color\u003C\u002Fcode> دکمه را می‌دهیم و \u003Ccode>currentColor\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  --like: #bc3e1c;\n  --save: #a36207;\n  --line: #d8ccae;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: var(--bg);\n  color: var(--ink);\n  padding: 40px;\n  line-height: 1.9;\n}\n\n.card {\n  max-width: 340px;\n  margin-inline: auto;\n  padding: 24px;\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 16px;\n}\n\n.card h1 {\n  margin: 0 0 6px;\n  font-size: 1.4rem;\n}\n\n.desc {\n  margin: 0 0 18px;\n  color: var(--muted);\n}\n\n.actions {\n  display: flex;\n  gap: 12px;\n  margin: 0;\n}\n\n.icon {\n  \u002F* icon dar khat-e matn balaparin mimanad *\u002F\n  vertical-align: middle;\n}\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border: 1px solid currentColor;\n  border-radius: 10px;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: 1rem;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.btn--like {\n  color: var(--like);\n}\n\n.btn--save {\n  color: var(--save);\n}\n\n.btn:hover {\n  color: var(--ink);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> دو دکمه می‌بینی، هرکدام با آیکونِ همرنگِ متنِ خودش — قلبِ قرمز، ستارهٔ زعفرانی. حتی خطِ دورِ دکمه هم \u003Ccode>currentColor\u003C\u002Fcode> است، پس همه‌چیزِ دکمه یک رنگ دارد. روی هرکدام ماوس ببر: کلِ دکمه، آیکون و خط با هم تیره می‌شوند.\u003C\u002Fp>\n",{"kind":20,"heading":50,"html":51},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>SVG\u003C\u002Ftd>\n\u003Ctd>اِس‌وی‌جی\u003C\u002Ftd>\n\u003Ctd>تصویرِ برداری که با کد ساخته می‌شود و در هر اندازه تیز می‌ماند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>viewBox\u003C\u002Ftd>\n\u003Ctd>ویوباکس\u003C\u002Ftd>\n\u003Ctd>صفحهٔ مختصاتِ داخلِ \u003Ccode><svg>\u003C\u002Fcode> که شکل‌ها روی آن کشیده می‌شوند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>path\u003C\u002Ftd>\n\u003Ctd>پَث\u003C\u002Ftd>\n\u003Ctd>تگی که با یک رشتهٔ مسیر (\u003Ccode>d\u003C\u002Fcode>) شکل‌های پیچیده مثلِ آیکون را می‌کشد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>fill\u003C\u002Ftd>\n\u003Ctd>فیل\u003C\u002Ftd>\n\u003Ctd>رنگِ داخلِ یک شکلِ SVG\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>stroke\u003C\u002Ftd>\n\u003Ctd>اِستروک\u003C\u002Ftd>\n\u003Ctd>رنگِ خطِ دورِ یک شکلِ SVG\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>currentColor\u003C\u002Ftd>\n\u003Ctd>کارِنت‌کالر\u003C\u002Ftd>\n\u003Ctd>کلمه‌ای که یعنی «همان رنگِ متنِ اینجا»؛ آیکون را همرنگِ متن می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":53,"heading":54,"html":55},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: اگر \u003Ccode>fill="currentColor"\u003C\u002Fcode> باشد و \u003Ccode>color\u003C\u002Fcode> دکمه عوض شود، آیکون چه می‌کند؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک دکمهٔ سومِ «هم‌رسانی» بساز با یک آیکونِ دلخواه (یک \u003Ccode><circle>\u003C\u002Fcode> یا یک \u003Ccode><path>\u003C\u002Fcode> که از جایی کپی می‌کنی). رنگِ متنش را با یک کلاسِ modifier مثلِ \u003Ccode>.btn--share\u003C\u002Fcode> روی یک آبی بگذار، و \u003Ccode>fill\u003C\u002Fcode> آیکونش را \u003Ccode>currentColor\u003C\u002Fcode> کن. باید آیکون بدونِ هیچ رنگِ جداگانه‌ای آبی شود.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> آیکونِ قلب را به‌شکلِ خطی (فقط \u003Ccode>stroke\u003C\u002Fcode>، بدونِ \u003Ccode>fill\u003C\u002Fcode>) دربیاور: \u003Ccode>fill="none"\u003C\u002Fcode> بگذار و \u003Ccode>stroke="currentColor"\u003C\u002Fcode> با یک \u003Ccode>stroke-width\u003C\u002Fcode>. حالا یک قلبِ توخالی داری که باز هم رنگِ متن را دنبال می‌کند. از AI بپرس «چطور کاری کنم روی hover قلب توپُر شود؟» و در آزمایشگاه ببین جوابش واقعاً کار می‌کند یا نه.\u003C\u002Fp>\n",{"kind":20,"heading":57,"html":58},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی آیکون بسازی و رنگش را به متن گره بزنی. یک نکتهٔ ریز را هم دیدی که فصلِ بعد کامل می‌شود: روی آیکون‌ها \u003Ccode>aria-hidden="true"\u003C\u002Fcode> گذاشتیم تا screen reader آن‌ها را نخواند. فصل بعد یک فصلِ کاملِ دسترس‌پذیریِ عمیق است: مدیریتِ focus، اینکه ARIA کِی لازم است و کِی به‌جای کمک ضرر می‌زند، خواناییِ رنگ، و تستِ صفحه فقط با صفحه‌کلید.\u003C\u002Fp>\n",{"course":60,"entitled":68,"lessons":69,"payments_enabled":68,"terms":255,"live":5},{"active_window":61,"effective_price_toman":62,"free":5,"lesson_count":63,"price_toman":64,"slug":65,"summary_fa":66,"title_fa":67},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[70,74,78,82,85,88,91,95,99,103,107,110,113,116,119,122,125,128,131,134,137,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,238,239,240,243,246,249,252],{"free_preview":5,"order":71,"slug":72,"source":8,"term":71,"title_fa":73},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":75,"slug":76,"source":8,"term":71,"title_fa":77},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":79,"slug":80,"source":8,"term":71,"title_fa":81},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":12,"slug":83,"source":8,"term":71,"title_fa":84},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":6,"slug":86,"source":8,"term":71,"title_fa":87},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":9,"slug":89,"source":8,"term":71,"title_fa":90},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":92,"slug":93,"source":8,"term":71,"title_fa":94},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":96,"slug":97,"source":8,"term":71,"title_fa":98},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":100,"slug":101,"source":8,"term":71,"title_fa":102},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":71,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":71,"slug":108,"source":8,"term":75,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":75,"slug":111,"source":8,"term":75,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":79,"slug":114,"source":8,"term":75,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":12,"slug":117,"source":8,"term":75,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":6,"slug":120,"source":8,"term":75,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":9,"slug":123,"source":8,"term":75,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":92,"slug":126,"source":8,"term":75,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":96,"slug":129,"source":8,"term":75,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":100,"slug":132,"source":8,"term":75,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":75,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":75,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":71,"slug":142,"source":8,"term":79,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":75,"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":12,"slug":151,"source":8,"term":79,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":6,"slug":154,"source":8,"term":79,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":9,"slug":157,"source":8,"term":79,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":92,"slug":160,"source":8,"term":79,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":96,"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":71,"slug":175,"source":8,"term":12,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":75,"slug":178,"source":8,"term":12,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":79,"slug":181,"source":8,"term":12,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":12,"slug":184,"source":8,"term":12,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":6,"slug":187,"source":8,"term":12,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":9,"slug":190,"source":8,"term":12,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":92,"slug":193,"source":8,"term":12,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":96,"slug":196,"source":8,"term":12,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":71,"slug":199,"source":8,"term":6,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":75,"slug":202,"source":8,"term":6,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":79,"slug":205,"source":8,"term":6,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":12,"slug":208,"source":8,"term":6,"title_fa":209},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":6,"slug":211,"source":8,"term":6,"title_fa":212},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":9,"slug":214,"source":8,"term":6,"title_fa":215},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":92,"slug":217,"source":8,"term":6,"title_fa":218},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":96,"slug":220,"source":8,"term":6,"title_fa":221},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":223,"source":8,"term":6,"title_fa":224},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":226,"source":8,"term":6,"title_fa":227},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":71,"slug":229,"source":8,"term":9,"title_fa":230},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":75,"slug":232,"source":8,"term":9,"title_fa":233},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":79,"slug":235,"source":8,"term":9,"title_fa":236},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"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":9,"slug":16,"source":8,"term":9,"title_fa":17},{"free_preview":5,"order":92,"slug":241,"source":8,"term":9,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":96,"slug":244,"source":8,"term":9,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":247,"source":8,"term":9,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":9,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":9,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105755]