مرجع نشان ها

صوفیا املیانووا
Sofia Emelianova
GitHub

با استفاده از این مرجع جامع از نشان‌ها در پنل عناصر ، می‌توانید پوشش‌های مختلف را تغییر دهید و پیمایش درخت DOM را سرعت بخشید.

نمایش یا پنهان کردن نشان‌ها

برای نمایش یا پنهان کردن نشان‌های خاص:

  1. ابزار توسعه (DevTools) را باز کنید .
  2. روی یک عنصر در درخت DOM کلیک راست کنید و یک یا چند نشان را در زیرمنوی تنظیمات نشان (Badge settings ) علامت بزنید.

منوی «تنظیمات نشان».

پنل عناصر ، نشان‌های انتخاب‌شده را در کنار عناصر مناسب در درخت DOM نشان می‌دهد. بخش‌های بعدی هر نشان را توضیح می‌دهند.

منبع نمایش

نشان view-source در کنار تگ <html> در ریشه صفحه HTML قرار دارد. برای مشاهده منبع صفحه خود در پنل Sources ، روی آن کلیک کنید.

نشان «مشاهده منبع».

این نشان، یک گردش کار جایگزین برای گزینه «مشاهده منبع صفحه» در منوی زمینه صفحه (کلیک راست) کروم ارائه می‌دهد:

  1. در کروم، کلیک راست کنید > Inspect a page را انتخاب کنید.
  2. در پنل عناصر ، روی نشان view-source کنار برچسب <html> کلیک کنید.
  3. منبع صفحه را در پنل منابع بررسی کنید.

شبکه

یک عنصر HTML در صورتی یک ظرف شبکه‌ای است که ویژگی display CSS آن روی grid یا inline-grid تنظیم شده باشد. چنین عناصری دارای نشان‌های grid در کنار خود هستند که پوشش‌های مربوطه را تغییر می‌دهند.

روی پیش‌نمایش زیر، حالت پوشش را تغییر دهید:

  1. عنصر را در پیش‌نمایش بررسی کنید .
  2. در درخت DOM، روی نشان grid کنار عنصر کلیک کنید و همپوشانی را مشاهده کنید.

پوشش شبکه‌ای.

این لایه، ستون‌ها، ردیف‌ها، تعداد آنها و فواصل بین آنها را نشان می‌دهد.

برای یادگیری نحوه اشکال‌زدایی طرح‌بندی شبکه‌ای، به Inspect CSS grid مراجعه کنید.

زیرشبکه

یک زیرشبکه (subgrid) یک شبکه تودرتو است که از همان مسیرهای شبکه والد خود استفاده می‌کند. یک عنصر در صورتی یک ظرف زیرشبکه محسوب می‌شود که یک یا هر دو ویژگی grid-template-columns و grid-template-rows آن روی subgrid تنظیم شده باشند. چنین عناصری دارای نشان‌های subgrid در کنار خود هستند که پوشش‌های مربوطه را تغییر می‌دهند.

روی پیش‌نمایش زیر، حالت پوشش را تغییر دهید:

  1. عنصر را در پیش‌نمایش بررسی کنید .
  2. در درخت DOM، روی نشان subgrid کنار عنصر کلیک کنید و پوشش را مشاهده کنید.

پوشش زیرشبکه.

این لایه، ستون‌ها، ردیف‌ها، تعداد آنها و فواصل یک زیرشبکه را نشان می‌دهد.

فلکس

یک عنصر HTML در صورتی یک ظرف flex است که ویژگی display آن در CSS روی flex یا inline-flex تنظیم شده باشد. چنین عناصری دارای نشان‌های flex در کنار خود هستند که پوشش‌های مربوطه را تغییر می‌دهند.

روی پیش‌نمایش زیر، حالت پوشش را تغییر دهید:

  1. عنصر را در پیش‌نمایش بررسی کنید .
  2. در درخت DOM، روی نشان flex کنار عنصر کلیک کنید و پوشش را مشاهده کنید.

روکش فلکس.

این لایه، موقعیت عناصر فرزند را نشان می‌دهد.

برای یادگیری نحوه اشکال‌زدایی طرح‌بندی‌های flex، به بخش «بازرسی و اشکال‌زدایی CSS flexbox» مراجعه کنید.

DevTools می‌تواند برخی از فریم‌های تبلیغاتی را شناسایی کرده و آنها را برچسب‌گذاری کند . چنین فریم‌هایی دارای نشان‌های ad در کنار خود هستند.

یک تبلیغ را در پیش‌نمایش زیر کشف کنید:

  1. عنصر را در پیش‌نمایش بررسی کنید .
  2. در درخت DOM، عنصری را پیدا کنید که نشان ad در کنار آن قرار دارد.

نشان تبلیغاتی.

نشان ad قابل کلیک نیست، اما می‌توانید از تب Rendering برای برجسته کردن فریم‌های تبلیغ با رنگ قرمز استفاده کنید.

اسکرول

یک عنصر HTML در صورتی یک ظرف پیمایش است که ویژگی overflow CSS آن روی scroll تنظیم شده باشد، یا در صورتی که محتوای کافی برای ایجاد سرریز وجود داشته باشد، auto تنظیم شود. چنین عناصری دارای نشان‌های scroll در کنار خود هستند.

نشان پیمایش روی یک گره درخت DOM.

اسکرول-اسنپ

کانتینرهای اسکرول می‌توانند دارای ویژگی‌های CSS باشند که نقاط ضربه محکم و ناگهانی را پیکربندی می‌کنند . چنین عناصری دارای نشان‌های scroll-snap در کنار خود هستند که پوشش‌های مربوطه را تغییر می‌دهند.

روی پیش‌نمایش زیر، حالت پوشش را تغییر دهید:

  1. عنصر را در پیش‌نمایش بررسی کنید .
  2. در درخت DOM، روی نشان scroll-snap کنار عنصر کلیک کنید.
  3. سعی کنید عنصر را به سمت راست پیمایش کنید و همپوشانی را مشاهده کنید.

روکش اسکرول-اسنپ.

این لایه، موقعیت المان‌ها و نقاط اتصال را نشان می‌دهد.

کانتینر

یک عنصر HTML در صورتی یک ظرف (container) است که دارای ویژگی CSS container-type باشد. چنین عناصری دارای نشان‌های container badges) در کنار خود هستند که پوشش‌های مربوطه را تغییر می‌دهند.

روی پیش‌نمایش زیر، حالت پوشش را تغییر دهید:

  1. عنصر را در پیش‌نمایش بررسی کنید .
  2. در درخت DOM، روی نشان container کنار عنصر کلیک کنید.
  3. با کشیدن گوشه پایین سمت راست عنصر، اندازه آن را تغییر دهید و تغییر طرح و همپوشانی را مشاهده کنید.

روکش کانتینر.

این لایه، موقعیت عناصر فرزند را نشان می‌دهد.

برای یادگیری نحوه اشکال‌زدایی از کوئری‌های کانتینر، به بخش «بازرسی و اشکال‌زدایی از کوئری‌های کانتینر CSS» مراجعه کنید.

اسلات

عنصر <slot> در HTML یک حفره یا سوراخ است که می‌توانید آن را با محتوای خودتان پر کنید. عنصر <template> به همراه عنصر <slot> به شما امکان می‌دهد درخت‌های DOM جداگانه ایجاد کنید و آنها را با هم ارائه دهید. عناصر محتوای Slot در کنار خود دارای نشان‌های slot هستند که به عنوان لینک به اسلات‌های مربوطه عمل می‌کنند.

نشان slot را در پیش‌نمایش زیر کشف کنید:

  1. عنصر را در پیش‌نمایش بررسی کنید .
  2. در درخت DOM، روی نشان slot کنار عنصر کلیک کنید تا اسلات مربوطه را پیدا کنید. نشان‌ها را شکاف داده و آشکار کنید.
  3. با کلیک روی نشان reveal به محتوای اسلات برگردید.

لایه بالایی

این نشان به شما کمک می‌کند تا مفهوم لایه بالایی را درک کرده و آن را تجسم کنید. لایه بالایی، صرف نظر از z-index ، محتوا را روی تمام لایه‌های دیگر رندر می‌کند. وقتی یک عنصر <dialog> را با استفاده از متد .showModal() باز می‌کنید، مرورگر آن را در لایه بالایی قرار می‌دهد.

برای کمک به شما در تجسم عناصر لایه بالایی، پنل Elements یک کانتینر #top-layer به درخت DOM بعد از تگ بسته </html> اضافه می‌کند.

عناصر لایه بالایی در کنار خود نشان‌های top-layer (N) با علامت دارند که در آن N شماره اندیس عنصر است. این نشان‌ها لینک‌هایی به عناصر مربوطه در کانتینر #top-layer هستند.

نشان top-layer (N) را در پیش‌نمایش زیر کشف کنید:

  1. در پیش‌نمایش، روی «باز کردن کادر محاوره‌ای» کلیک کنید.
  2. کادر محاوره‌ای را بررسی کنید .
  3. در درخت DOM، روی نشان top-layer (1) در کنار عنصر <dialog> کلیک کنید. پنل Elements شما را به عنصر مربوطه در کانتینر #top-layer پس از تگ بسته </html> می‌برد. ظرف و نشان لایه بالایی.
  4. با کلیک روی نشان reveal در کنار عنصر یا ::backdrop آن، به عنصر <dialog> برگردید.

رسانه

نشان media به طور پیش‌فرض غیرفعال است. وقتی روشن باشد ، در کنار عناصر <audio> و <video> ظاهر می‌شود. برای باز کردن پنل رسانه و اشکال‌زدایی رسانه خود، روی این نشان کلیک کنید.

نشان رسانه در تنظیمات نشان فعال شده و در کنار عنصر ویدیو نمایش داده می‌شود.

برای اطلاعات بیشتر، به بخش اشکال‌زدایی پخش‌کننده‌های رسانه با پنل رسانه مراجعه کنید.

پاپ‌اوور

یک popover هر عنصری است که دارای ویژگی popover باشد و برای طیف گسترده‌ای از الگوهای تعاملی، از جمله tooltipها، هشدارها، toastها و موارد دیگر مفید است. چنین عناصری دارای نشان‌های popover در کنار خود هستند.

این نشان، یک نشان top-layer در کنار خود را فعال یا غیرفعال می‌کند که به عناصر مربوطه در کانتینر #top-layer پیوند دارد.

نشان popover را در پیش‌نمایش زیر کشف کنید:

  1. در پیش‌نمایش، روی «تغییر نمایش» کلیک کنید.
  2. پنجره‌ی بازشو (popover) ظاهر شده را بررسی کنید .

  3. در درخت DOM، روی نشان popover کنار عنصر <div popover> کلیک کنید. پنل Elements نشان top-layer را به شما نشان می‌دهد.

    نشان popover در کنار عنصری که ویژگی popover دارد.

  4. مراحل بخش «لایه بالایی» را دنبال کنید.

برای کسب اطلاعات بیشتر، به https://web.dev/learn/css/popover-and-dialog نیز مراجعه کنید.

سبک شروع

قانون @starting-style ‎ سبک‌های اولیه را برای یک عنصر قبل از رندر شدن در صفحه تعریف می‌کند. این قانون برای عناصری که از display: none انیمیشن می‌گیرند ، الزامی است، زیرا به وضعیتی نیاز دارند که از آن به بعد انیمیشن شروع شود. چنین عناصری دارای نشان‌های starting-style در کنار خود هستند.

این نشان، استایل‌ها را در قانون @starting-style ‎ تغییر می‌دهد، بنابراین می‌توانید انیمیشن را در عمل مشاهده کنید.

نشان starting-style را در پیش‌نمایش زیر کشف کنید:

  1. در پیش‌نمایش، روی «باز کردن پاپ‌اور» کلیک کنید.
  2. پنجره‌ی بازشو (popover) ظاهر شده را بررسی کنید .

  3. در درخت DOM، نشان starting-style کنار عنصر <div popover> را فعال یا غیرفعال کنید.

    نشان سبک شروع در کنار عنصری که قانون سبک شروع @ را دارد.

  4. انیمیشن را در عمل و سبک‌های اعمال شده در تب Elements > Styles مشاهده کنید.

برای کسب اطلاعات بیشتر، به بخش متحرک‌سازی پاپ‌اوورها نیز مراجعه کنید.