مرجع ویژگی های CSS

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

در این مرجع جامع از ویژگی‌های Chrome DevTools مربوط به مشاهده و تغییر CSS، گردش‌های کاری جدید را کشف کنید.

برای یادگیری اصول اولیه، مشاهده و تغییر CSS را ببینید.

یک عنصر را انتخاب کنید

پنل Elements DevTools به شما امکان می دهد CSS یک عنصر را در یک زمان مشاهده یا تغییر دهید.

در تصویر، عنصر h1 که در درخت DOM به رنگ آبی مشخص شده است، عنصر انتخاب شده است. در سمت راست، سبک های عنصر در تب Styles نشان داده شده است. در سمت چپ، عنصر در پنجره نمای برجسته شده است، اما فقط به این دلیل که ماوس روی آن در درخت DOM قرار دارد.

برای آموزش مشاهده CSS یک عنصر را ببینید.

راه های زیادی برای انتخاب یک عنصر وجود دارد:

• در نمای خود، روی عنصر کلیک راست کرده و Inspect را انتخاب کنید.
• در DevTools، روی Select an element کلیک کنید یا Command + Shift + C (Mac) یا Control + Shift + C (ویندوز، لینوکس) را فشار دهید، و سپس روی عنصر در viewport کلیک کنید.
• در DevTools، روی عنصر موجود در درخت DOM کلیک کنید.
• در DevTools، یک کوئری مانند document.querySelector('p') در کنسول اجرا کنید، روی نتیجه کلیک راست کرده و سپس Reveal in Elements panel را انتخاب کنید.

مشاهده CSS

از تب Elements > Styles و Computed برای مشاهده قوانین CSS و تشخیص مشکلات CSS استفاده کنید.

با پیوندها پیمایش کنید

تب Styles پیوندها را در مکان‌های مختلف به مکان‌های مختلف دیگر نشان می‌دهد، از جمله اما نه محدود به:

• در کنار قوانین CSS، به شیوه نامه ها و منابع CSS. چنین پیوندهایی پانل منابع را باز می کنند. اگر شیوه نامه کوچک شده است، به ایجاد یک فایل کوچک شده قابل خواندن مراجعه کنید.
• در بخش های Inherited from ... به عناصر والد.
• در فراخوانی های var() به اعلان های دارایی سفارشی .
• در ویژگی‌های کوتاه‌نویسی animation ، به @keyframes .
• پیوندهای بیشتری را در راهنمای ابزار اسناد بیاموزید .
• و بیشتر.

در اینجا برخی از آنها برجسته شده است:

پیوندها ممکن است سبک متفاوتی داشته باشند. اگر مطمئن نیستید که چیزی یک پیوند است، سعی کنید روی آن کلیک کنید تا متوجه شوید.

نکات ابزار را با اسناد CSS، ویژگی‌ها و مقادیر ویژگی سفارشی مشاهده کنید

Elements > Styles هنگامی که ماوس را روی عناصر خاصی می‌چرخانید، نکات ابزار را با اطلاعات مفید نشان می‌دهد.

مشاهده مستندات CSS

برای دیدن یک راهنمای ابزار با توضیح کوتاه CSS، ماوس را روی نام ویژگی در تب Styles نگه دارید.

برای رفتن به یک مرجع MDN CSS در این ویژگی، روی Learn more کلیک کنید.

برای خاموش کردن راهنمای ابزار، بررسی کنید نشون نده

برای روشن کردن مجدد آنها، بررسی کنید تنظیمات > تنظیمات > عناصر > نمایش راهنمای ابزار مستندات CSS .

مشخصات انتخابگر را مشاهده کنید

ماوس را روی یک انتخابگر نگه دارید تا نکته ابزار را با وزن مخصوص آن ببینید.

مشاهده مقادیر ویژگی های سفارشی

ماوس را روی یک --custom-property ببرید تا ارزش آن را در یک راهنمای ابزار ببینید.

مشاهده نامعتبر، لغو، غیرفعال و سایر CSSها

تب Styles انواع بسیاری از مسائل CSS را تشخیص می دهد و آنها را به روش های مختلف برجسته می کند.

به درک CSS در تب Styles مراجعه کنید.

فقط CSS را مشاهده کنید که در واقع روی یک عنصر اعمال شده است

تب Styles همه قوانینی را که برای یک عنصر اعمال می‌شود، از جمله اعلان‌هایی که لغو شده‌اند، به شما نشان می‌دهد. وقتی علاقه ای به اعلان های لغو شده ندارید، از تب Computed استفاده کنید تا فقط CSS هایی را که واقعاً روی یک عنصر اعمال می شود، مشاهده کنید.

1. یک عنصر را انتخاب کنید .
2. به تب Computed در پنل Elements بروید.

چک باکس نمایش همه را علامت بزنید تا همه ویژگی ها را ببینید.

به درک CSS در تب Computed مراجعه کنید.

مشخصات CSS را به ترتیب حروف الفبا مشاهده کنید

از تب Computed استفاده کنید. مشاهده فقط CSSهایی که واقعاً روی یک عنصر اعمال شده است را ببینید.

ویژگی های CSS ارثی را مشاهده کنید

چک باکس Show All را در تب Computed علامت بزنید. مشاهده فقط CSSهایی که واقعاً روی یک عنصر اعمال شده است را ببینید.

همچنین، برگه Styles را اسکرول کنید و بخش‌هایی با نام‌های Inherited from <element_name> پیدا کنید.

مشاهده قوانین CSS

At-rules عبارت‌های CSS هستند که به شما اجازه می‌دهند رفتار CSS را کنترل کنید. Elements > Styles قوانین زیر را در بخش‌های اختصاصی نشان می‌دهد:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

مشاهده @property at-rules

@property CSS at-rule به شما این امکان را می دهد که خصوصیات سفارشی CSS را به صراحت تعریف کنید و بدون اجرای جاوا اسکریپت آنها را در یک شیوه نامه ثبت کنید.

ماوس را روی نام چنین ویژگی‌هایی در تب Styles نگه دارید تا راهنمای ابزاری با مقدار ویژگی، توصیف‌گرها و پیوندی به ثبت آن در بخش تاشو @property در پایین برگه Styles ببینید.

برای ویرایش یک قانون @property ، روی نام یا مقدار آن دوبار کلیک کنید .

مشاهده @supports at-rules

تب Styles به شما نشان می‌دهد که قوانین زیر از CSS @supports اگر روی یک عنصر اعمال شوند. به عنوان مثال، عنصر زیر را بررسی کنید:

اگر مرورگر شما از تابع lab() پشتیبانی می کند، عنصر سبز است، در غیر این صورت بنفش است.

مشاهده @scope at-rules

تب Styles اگر روی یک عنصر اعمال شوند، CSS @scope at-rules را به شما نشان می دهد.

@scope at-rules جدید بخشی از مشخصات CSS Cascading و Inheritance Level 6 هستند. این قوانین به شما این امکان را می‌دهد که سبک‌های CSS را محدوده‌بندی کنید، به عبارت دیگر، به‌صراحت استایل‌ها را برای عناصر خاص اعمال کنید.

قانون @scope را در پیش نمایش زیر مشاهده کنید:

1. متن روی کارت را در پیش نمایش بررسی کنید .
2. در تب Styles ، قانون @scope را پیدا کنید.

در این مثال، قانون @scope اعلان جهانی background-color CSS را برای همه عناصر <p> درون عناصر با کلاس card لغو می‌کند.

برای ویرایش قانون @scope ، روی آن دوبار کلیک کنید.

مشاهده @font-palette-values ​​at-rules

@font-palette-values ​​CSS at-rule به شما امکان می دهد مقادیر پیش فرض ویژگی font-palette را سفارشی کنید. Elements > Styles این قانون را در یک بخش اختصاصی نشان می دهد.

بخش @font-palette-values در پیش‌نمایش بعدی مشاهده کنید:

1. خط دوم متن را در پیش نمایش بررسی کنید .
2. در Styles ، بخش @font-palette-values پیدا کنید.

در این مثال، مقادیر پالت فونت --New مقادیر پیش فرض فونت رنگی را لغو می کند.

برای ویرایش مقادیر سفارشی خود، روی آنها دوبار کلیک کنید.

مشاهده @position-try at-rules

قانون @position-try CSS همراه با ویژگی position-try-options به شما امکان می دهد موقعیت های لنگر جایگزین را برای عناصر تعریف کنید. برای کسب اطلاعات بیشتر، به معرفی CSS Anchor positioning API مراجعه کنید.

Elements > Styles موارد زیر را حل کرده و پیوند می دهد:

• مقادیر ویژگی position-try-options در یک بخش @position-try --name اختصاص داده شده است.
• مقادیر ویژگی position-anchor و آرگومان‌های anchor() به عناصر مربوطه با ویژگی‌های popovertarget .

در پیش‌نمایش بعدی، مقادیر position-try-options و بخش‌های @position-try را بررسی کنید:

1. در پیش‌نمایش، زیر منو را باز کنید، یعنی بر روی YOUR ACCOUNT و سپس STOREFRONT کلیک کنید.
2. عنصر را با id="submenu" در پیش نمایش بررسی کنید .
3. در Styles ، ویژگی position-try-options را پیدا کنید و روی مقدار --bottom آن کلیک کنید. تب Styles شما را به بخش @position-try مربوطه می برد.
4. روی پیوند مقدار position-anchor یا همان آرگومان‌های anchor() کلیک کنید. پانل Elements عنصری را با ویژگی popovertarget مربوطه انتخاب می کند و تب Styles CSS عنصر را نشان می دهد.

برای ویرایش مقادیر، روی آنها دوبار کلیک کنید.

مشاهده مدل جعبه یک عنصر

برای مشاهده مدل جعبه یک عنصر، به تب Styles بروید و روی آن کلیک کنید نمایش دکمه نوار کناری در نوار اقدام.

برای تغییر یک مقدار، روی آن دوبار کلیک کنید.

CSS یک عنصر را جستجو و فیلتر کنید

از کادر فیلتر در زبانه‌های Styles و Computed برای جستجوی خواص یا مقادیر خاص CSS استفاده کنید.

همچنین برای جستجوی خصوصیات ارثی در تب Computed ، چک باکس Show All را علامت بزنید.