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

کیس باسک
Kayce Basques
X GitHub
جسلین یین
صوفیا املیانووا
Sofia Emelianova
GitHub

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

برای یادگیری اصول اولیه، به بخش «مشاهده و تغییر CSS» مراجعه کنید.

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

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

نمونه‌ای از یک عنصر انتخاب شده

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

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

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

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

مشاهده سی‌اس‌اس

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

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

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

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

لینک‌های مختلف برجسته شده‌اند.

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

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

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

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

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

راهنمای ابزار به همراه مستندات مربوط به یک ویژگی CSS.

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

برای خاموش کردن tooltips، تیک بزنید کادر انتخاب. نشان نده .

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

مشاهده‌ی ویژگی انتخابگر

برای مشاهده‌ی یک tooltip به همراه وزن ویژگی آن، نشانگر ماوس را روی یک انتخابگر نگه دارید.

راهنمای ابزار با وزن ویژگی یک انتخابگر منطبق.

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

برای مشاهده مقدار یک --custom-property در یک tooltip، نشانگر ماوس را روی آن نگه دارید.

مقدار یک ویژگی سفارشی در یک tooltip.

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

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

به بخش «درک CSS» در برگه «سبک‌ها» مراجعه کنید.

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

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

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

برگه محاسبه شده.

برای مشاهده همه ویژگی‌ها، گزینه « نمایش همه» را علامت بزنید.

به بخش «درک CSS» در برگه «محاسبات» مراجعه کنید.

نمایش ویژگی‌های CSS به ترتیب حروف الفبا

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

مشاهده ویژگی‌های CSS ارث‌بری‌شده

در تب Computed، گزینه‌ی Show All را تیک بزنید. برای مشاهده‌ی CSSهایی که واقعاً روی یک عنصر اعمال شده‌اند، به گزینه‌ی View only مراجعه کنید.

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

بخش «به ارث رسیده از...» را از تب «سبک‌ها» مشاهده کنید.

مشاهده‌ی قوانین at در CSS

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

مشاهده @property at-rules

دستور @property در CSS به شما امکان می‌دهد ویژگی‌های سفارشی CSS را به صراحت تعریف کنید و بدون اجرای هیچ جاوا اسکریپتی، آنها را در یک فایل استایل ثبت کنید.

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

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

مشاهده @supports at-rules

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

به @supports at-rules مراجعه کنید.

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

مشاهده قوانین @scope

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

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

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

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

قانون @scope.

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

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

مشاهده @font-palette-values ​​در قوانین

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

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

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

قانون @font-palette-values.

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

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

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

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

عناصر > سبک‌ها موارد زیر را حل و پیوند می‌دهند:

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

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

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

ویژگی position-try-options، بخش @position-try و عنصری که دارای ویژگی popover target است.

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

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

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

نمودار مدل جعبه‌ای.

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

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

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

فیلتر کردن تب Styles.

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

فیلتر کردن ویژگی‌های ارثی در تب Computed.

برای پیمایش در برگه Computed ، با علامت زدن Group ، ویژگی‌های فیلتر شده را در دسته‌های قابل دسته‌بندی گروه‌بندی کنید.

گروه‌بندی ویژگی‌های فیلتر شده

یک صفحه متمرکز را شبیه‌سازی کنید

اگر فوکوس را از صفحه به DevTools تغییر دهید، برخی از عناصر پوششی در صورت فعال شدن فوکوس، به طور خودکار پنهان می‌شوند. به عنوان مثال، لیست‌های کشویی، منوها یا انتخابگرهای تاریخ. گزینه « یک صفحه متمرکز» به شما امکان می‌دهد چنین عنصری را طوری اشکال‌زدایی کنید که انگار در فوکوس است.

سعی کنید یک صفحه متمرکز را در این صفحه آزمایشی شبیه‌سازی کنید:

  1. عنصر ورودی را فوکوس کنید. عنصر دیگری در زیر آن ظاهر می‌شود.
  2. DevTools را باز کنید . پنجره DevTools اکنون به جای صفحه در فوکوس است، بنابراین عنصر دوباره ناپدید می‌شود.
  3. در Elements > Styles ، روی :hov کلیک کنید، مربوط به Emulate a focus page را تیک بزنید و مطمئن شوید که عنصر ورودی انتخاب شده است . اکنون می‌توانید عنصر زیر آن را بررسی کنید.

قبل و بعد از فعال کردن گزینه «شبیه‌سازی یک صفحه متمرکز».

همچنین می‌توانید همین گزینه را در پنل رندرینگ (Rendering ) پیدا کنید.

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

تغییر وضعیت یک شبه کلاس

برای تغییر وضعیت یک شبه کلاس:

  1. یک عنصر را انتخاب کنید .
  2. در پنل عناصر ، به برگه سبک‌ها (Styles) بروید.
  3. کلیک کنید :hov .
  4. شبه کلاسی که می‌خواهید فعال کنید را علامت بزنید.

تغییر وضعیت شبه حالت شناور روی یک عنصر.

در این مثال، می‌توانید ببینید که DevTools اعلان background-color را روی عنصر اعمال می‌کند، حتی اگر واقعاً ماوس روی عنصر قرار نگرفته باشد.

تب Styles شبه کلاس‌های زیر را برای همه عناصر نشان می‌دهد:

علاوه بر این، برخی از عناصر ممکن است کلاس‌های کاذب مخصوص به خود را داشته باشند. وقتی چنین عنصری را انتخاب می‌کنید، تب Styles بخشی با عنوان Force specific element state را نشان می‌دهد که می‌توانید آن را گسترش داده و کلاس‌های کاذب مخصوص آن عنصر را فعال کنید.

بخش «وضعیت خاص عنصر نیرو» از یک عنصر «ناحیه متنی».

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

مشاهده شبه عناصر برجسته ارثی

شبه‌عناصر به شما امکان می‌دهند بخش‌های خاصی از عناصر را استایل‌دهی کنید. شبه‌عناصرهای برجسته، بخش‌هایی از سند با وضعیت "انتخاب‌شده" هستند و برای نشان دادن این وضعیت به کاربر، به صورت "برجسته" استایل‌دهی می‌شوند. برای مثال، چنین شبه‌عناصرهایی عبارتند از ::selection ، ::spelling-error ، ::grammar-error و ::highlight .

همانطور که در مشخصات ذکر شد، وقتی چندین سبک با هم تداخل دارند، آبشار سبک برنده را تعیین می‌کند.

برای درک بهتر وراثت و اولویت قوانین، می‌توانید شبه عناصر برجسته ارثی را مشاهده کنید:

  1. متن زیر را بررسی کنید .

    من سبک شبه عنصر هایلایت والد خود را به ارث برده‌ام. من را انتخاب کن!

  2. قسمتی از متن بالا را انتخاب کنید.

  3. در تب Styles ، به پایین اسکرول کنید تا بخش Inherited from ::selection pseudo of... را پیدا کنید.

بخش «به ارث رسیده‌ها» (Inherited) از تب «سبک‌ها» (Styles) را مشاهده کنید.

مشاهده لایه‌های آبشاری

لایه‌های آبشاری امکان کنترل صریح‌تر فایل‌های CSS شما را برای جلوگیری از تداخل سبک‌ها فراهم می‌کنند. این ویژگی برای پایگاه‌های کد بزرگ، سیستم‌های طراحی و هنگام مدیریت سبک‌های شخص ثالث در برنامه‌ها مفید است.

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

در تب Styles ، سه لایه آبشاری و استایل‌های آنها را مشاهده کنید: page ، component و base .

لایه‌های آبشاری.

برای مشاهده ترتیب لایه‌ها، روی نام لایه یا ... کلیک کنید. لایه‌ها را تغییر وضعیت دهید. دکمه نمایش لایه‌های CSS را فعال یا غیرفعال کنید .

لایه page بالاترین ویژگی را دارد، بنابراین پس‌زمینه عنصر سبز است.

برای مشاهده صفحه در حالت چاپ:

  1. منوی فرمان را باز کنید.
  2. شروع به تایپ Rendering کنید و گزینه Show Rendering انتخاب کنید.
  3. برای منوی کشویی Emulate CSS Media ، گزینه print را انتخاب کنید.

مشاهده CSS استفاده شده و استفاده نشده با تب Coverage

تب Coverage به شما نشان می‌دهد که یک صفحه واقعاً از چه CSS استفاده می‌کند.

  1. برای باز کردن منوی Command، در حالی که DevTools در حالت فوکوس است، کلیدهای Command + Shift + P (مک) یا Control + Shift + P (ویندوز، لینوکس، ChromeOS) را فشار دهید.

  2. شروع به تایپ coverage .

    باز کردن برگه پوشش از منوی فرمان.

  3. گزینه «نمایش پوشش» را انتخاب کنید. برگه «پوشش» ظاهر می‌شود.

    برگه پوشش.

  4. کلیک پوشش ابزار دقیق را شروع کنید و صفحه را دوباره بارگذاری کنید. بارگذاری مجدد . صفحه بارگذاری مجدد می‌شود و تب Coverage نمای کلی از میزان استفاده از CSS (و جاوا اسکریپت) از هر فایلی که مرورگر بارگذاری می‌کند را ارائه می‌دهد.

    مروری بر میزان استفاده و عدم استفاده از CSS (و جاوا اسکریپت)

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

  5. برای مشاهده‌ی جزئیات خط به خط CSS مورد استفاده در پیش‌نمایش بالا، روی یک فایل CSS کلیک کنید.

    تفکیک خط به خط CSS های استفاده شده و استفاده نشده.

    در تصویر، خطوط ۵۵ تا ۵۷ و ۶۵ تا ۶۷ از devsite-google-blue.css استفاده نشده‌اند، در حالی که خطوط ۵۹ تا ۶۳ استفاده شده‌اند.

حالت پیش‌نمایش چاپ را فعال کنید

به اجبار کردن DevTools به حالت پیش‌نمایش چاپ مراجعه کنید.

کپی کردن CSS

از یک منوی کشویی در تب Styles ، می‌توانید قوانین، اعلان‌ها، ویژگی‌ها و مقادیر CSS را به صورت جداگانه کپی کنید.

علاوه بر این، می‌توانید ویژگی‌های CSS را در سینتکس جاوا اسکریپت کپی کنید. این گزینه در صورتی که از کتابخانه‌های CSS-in-JS استفاده می‌کنید، مفید است.

برای کپی کردن CSS:

  1. یک عنصر را انتخاب کنید .
  2. در تب Elements > Styles ، روی یک ویژگی CSS کلیک راست کنید. منوی کشویی CSS را کپی کنید.

  3. از منوی کشویی یکی از گزینه‌های زیر را انتخاب کنید:

    • کپی کردن اعلان . ویژگی و مقدار آن را در قالب CSS کپی می‌کند: css property: value;
    • کپی کردن ویژگی . فقط نام property کپی می‌کند.
    • کپی کردن مقدار . فقط value را کپی می‌کند.
    • کپی کردن قانون . کل قانون CSS را کپی می‌کند: css selector[, selector] { property: value; property: value; ... }
    • کپی کردن اعلان به صورت JS . ویژگی و مقدار آن را در قالب جاوا اسکریپت کپی می‌کند: js propertyInCamelCase: 'value'
    • تمام اعلان‌ها را کپی می‌کند . تمام ویژگی‌ها و مقادیر آنها را در دستور CSS کپی می‌کند: css property: value; property: value; ...

    • تمام تعریف‌ها را به صورت JS کپی می‌کند . تمام ویژگی‌ها و مقادیر آنها را در قالب جاوا اسکریپت کپی می‌کند: ``js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • کپی کردن تمام تغییرات CSS . تغییراتی که در تب Styles ایجاد می‌کنید را در تمام اعلان‌ها کپی می‌کند.

    • مشاهده مقدار محاسبه‌شده . شما را به برگه محاسبه‌شده می‌برد.

تغییر سی‌اس‌اس

این بخش تمام روش‌هایی را که می‌توانید CSS را در Elements > Styles تغییر دهید، فهرست می‌کند.

علاوه بر این، می‌توانید:

تغییر CSS با تکمیل کد

برای آزمایش ترکیب‌های پیچیده‌تر ویژگی‌های CSS، مانند گرادیان‌ها یا سایه‌های جعبه، بدون به خاطر سپردن سینتکس دقیق آنها، یا برای ساخت سریع طرح‌بندی‌های grid- و flex-، با تکیه بر چندین ویژگی مرتبط، می‌توانید شروع به تایپ یک ویژگی CSS کنید و از تکمیل کد استفاده کنید.

استفاده از تکمیل کد برای اضافه کردن یک ویژگی CSS.

اضافه کردن یک اعلان CSS به یک عنصر

از آنجایی که ترتیب تعریف‌ها بر نحوه‌ی استایل‌دهی یک عنصر تأثیر می‌گذارد، می‌توانید تعریف‌ها را به روش‌های مختلفی اضافه کنید:

از چه گردش کاری باید استفاده کنید؟ برای اکثر سناریوها، احتمالاً می‌خواهید از گردش کار اعلان درون‌خطی استفاده کنید. اعلان‌های درون‌خطی نسبت به اعلان‌های خارجی، از سطح اختصاصی بالاتری برخوردارند، بنابراین گردش کار درون‌خطی تضمین می‌کند که تغییرات همانطور که انتظار دارید در عنصر اعمال شوند. برای اطلاعات بیشتر در مورد سطح اختصاصی بودن، به بخش انواع انتخابگر مراجعه کنید.

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

یک اعلان درون‌خطی اضافه کنید

برای اضافه کردن یک اعلان درون خطی:

  1. یک عنصر را انتخاب کنید .
  2. در تب Styles ، بین براکت‌های بخش element.style کلیک کنید. مکان‌نما متمرکز می‌شود و به شما امکان می‌دهد متن را وارد کنید.
  3. نام ویژگی را وارد کنید و Enter را فشار دهید.

  4. یک مقدار معتبر برای آن ویژگی وارد کنید و Enter را فشار دهید. در درخت DOM ، می‌توانید ببینید که یک ویژگی style به عنصر اضافه شده است.

    افزودن اعلان‌های درون‌خطی

    در تصویر، ویژگی‌های margin-top و background-color به عنصر انتخاب شده اعمال شده‌اند. در درخت DOM می‌توانید تعریف‌هایی را که در ویژگی style عنصر منعکس شده‌اند، مشاهده کنید.

اضافه کردن یک اعلان به یک قانون سبک

برای افزودن یک اعلان به یک قانون سبک موجود:

  1. یک عنصر را انتخاب کنید .
  2. در تب Styles ، بین براکت‌های قانون سبکی که می‌خواهید تعریف را به آن اضافه کنید، کلیک کنید. مکان‌نما متمرکز می‌شود و به شما امکان می‌دهد متن را وارد کنید.
  3. نام ویژگی را وارد کنید و Enter را فشار دهید.
  4. یک مقدار معتبر برای آن ویژگی وارد کنید و Enter را فشار دهید.

تغییر مقدار یک اعلان.

در تصویر، یک قانون سبک، عبارت جدید border-bottom-style:groove را دریافت می‌کند.

تغییر نام یا مقدار یک اعلان

برای تغییر نام یا مقدار یک اعلان، روی آن دوبار کلیک کنید. برای میانبرهایی جهت افزایش یا کاهش سریع یک مقدار به میزان 0.1، 1، 10 یا 100 واحد، به بخش «تغییر مقادیر قابل شمارش با میانبرهای صفحه کلید» مراجعه کنید.

تغییر مقادیر قابل شمارش با میانبرهای صفحه کلید

هنگام ویرایش یک مقدار قابل شمارش از یک تعریف، برای مثال، font-size ، می‌توانید از میانبرهای صفحه کلید زیر برای افزایش مقدار به میزان ثابت استفاده کنید:

  • برای افزایش ۰.۱ واحدی، کلیدهای Option + Up (مک) یا Alt + Up (ویندوز، لینوکس) را فشار دهید.
  • برای تغییر مقدار به اندازه ۱ یا اگر مقدار فعلی بین ۱- و ۱ باشد، به اندازه ۰.۱، به بالا حرکت کنید .
  • Shift + Up برای افزایش 10 تایی.
  • Shift + Command + Up (مک) یا Control + Shift + Page Up (ویندوز، لینوکس) برای افزایش ۱۰۰ واحدی مقدار.

کاهش نیز کار می‌کند. فقط هر نمونه از Up که قبلاً ذکر شد را با Down جایگزین کنید.

تغییر مقادیر طول

شما می‌توانید از اشاره‌گر خود برای تغییر هر ویژگی با طول، مانند عرض، ارتفاع، فاصله‌گذاری، حاشیه یا مرز استفاده کنید.

برای تغییر واحد طول:

  1. ماوس را روی نام واحد نگه دارید و توجه کنید که زیر آن خط کشیده شده است.

  2. برای انتخاب واحد از منوی کشویی، روی نام واحد کلیک کنید.

برای تغییر مقدار طول:

  1. ماوس را روی مقدار واحد نگه دارید و متوجه خواهید شد که نشانگر شما به یک فلش افقی دو طرفه تبدیل می‌شود.

  2. برای افزایش یا کاهش مقدار، آن را به صورت افقی بکشید.

برای تنظیم مقدار به اندازه ۱۰، هنگام کشیدن، Shift را نگه دارید.

اضافه کردن کلاس به یک عنصر

برای اضافه کردن یک کلاس به یک عنصر:

  1. عنصر را در درخت DOM انتخاب کنید.
  2. روی .cls کلیک کنید.
  3. نام کلاس را در کادر افزودن کلاس جدید وارد کنید.
  4. اینتر را فشار دهید.

بخش کلاس‌های عناصر.

تنظیمات تم روشن و تاریک را شبیه‌سازی کنید و حالت تاریک خودکار را فعال کنید

برای فعال کردن خودکار حالت تاریک یا شبیه‌سازی ترجیح کاربر بین تم‌های روشن یا تیره :

  1. در برگه عناصر > سبک‌ها ، کلیک کنید شبیه‌سازی‌های رندر رایج را تغییر دهید. شبیه‌سازی‌های رندر رایج را تغییر دهید . شبیه‌سازی‌های رندر رایج را تغییر دهید.

  2. یکی از موارد زیر را از لیست کشویی انتخاب کنید:

    • prefers-color-scheme: light . نشان می‌دهد که کاربر تم روشن را ترجیح می‌دهد.
    • prefers-color-scheme: dark . نشان می‌دهد که کاربر تم تیره را ترجیح می‌دهد.
    • حالت تاریک خودکار . صفحه شما را در حالت تاریک نمایش می‌دهد، حتی اگر آن را پیاده‌سازی نکرده باشید. علاوه بر این، prefers-color-scheme به طور خودکار روی dark تنظیم می‌کند.

این منوی کشویی میانبری برای گزینه‌های «شبیه‌سازی ویژگی‌های رسانه‌ای CSS» (Emulate CSS media feature prefers-color-scheme و «فعال کردن حالت تاریک خودکار» (Enable automatic dark mode) از تب «رندرینگ» (Rendering) است.

تغییر وضعیت یک کلاس

برای فعال یا غیرفعال کردن یک کلاس روی یک عنصر:

  1. عنصر را در درخت DOM انتخاب کنید.
  2. بخش کلاس‌های عنصر را باز کنید. به بخش «افزودن یک کلاس به یک عنصر» مراجعه کنید. در زیر کادر «افزودن کلاس جدید» ، تمام کلاس‌هایی که به این عنصر اعمال می‌شوند، قرار دارند.
  3. کادر انتخاب کنار کلاسی که می‌خواهید فعال یا غیرفعال کنید را علامت بزنید.

یک قانون سبک اضافه کنید

برای افزودن یک قانون سبک جدید:

  1. یک عنصر را انتخاب کنید .
  2. روی قانون سبک جدید کلیک کنید قانون سبک جدید. DevTools یک قانون جدید زیر قانون element.style درج می‌کند.

اضافه کردن یک قانون سبک جدید.

در تصویر، DevTools پس از کلیک روی «New Style Rule» ، قانون سبک h1.devsite-page-title را اضافه می‌کند.

انتخاب کنید که به کدام برگه سبک، یک قانون اضافه شود.

هنگام افزودن یک قانون سبک جدید ، روی «قانون سبک جدید» کلیک کرده و نگه دارید. قانون سبک جدید. برای انتخاب اینکه قانون استایل به کدام برگه استایل اضافه شود.

انتخاب یک برگه سبک.

تغییر وضعیت یک اعلان

برای فعال یا غیرفعال کردن یک اعلان واحد:

  1. یک عنصر را انتخاب کنید .
  2. در تب Styles ، نشانگر ماوس را روی قانونی که تعریف‌کننده‌ی تعریف است، نگه دارید. کادرهای انتخاب در کنار هر تعریف ظاهر می‌شوند.
  3. کادر کنار اعلان را علامت بزنید یا علامت آن را بردارید. وقتی علامتی را پاک می‌کنید، DevTools آن را خط می‌زند تا نشان دهد که دیگر فعال نیست.

تغییر وضعیت یک اظهارنامه.

در تصویر، ویژگی color برای عنصر انتخاب شده فعلی غیرفعال است.

شبه عناصر ::view-transition در طول یک انیمیشن ویرایش کنید

به بخش مربوطه در انیمیشن‌ها مراجعه کنید.

برای اطلاعات بیشتر، به بخش «انتقال‌های روان و ساده با استفاده از View Transitions API» مراجعه کنید.

ترازبندی آیتم‌های شبکه و محتوای آنها با ویرایشگر شبکه

به بخش مربوطه در Inspect CSS grid مراجعه کنید.

تغییر رنگ‌ها با انتخابگر رنگ

به بخش «بازرسی و اشکال‌زدایی رنگ‌های HD و غیر HD با انتخابگر رنگ» مراجعه کنید.

تغییر مقدار زاویه با استفاده از ساعت زاویه

ساعت زاویه‌ای یک رابط کاربری گرافیکی (GUI) برای تغییر <angle> ها در مقادیر ویژگی‌های CSS ارائه می‌دهد.

برای باز کردن ساعت زاویه :

  1. یک عنصر با تعریف زاویه انتخاب کنید .

  2. در تب Styles ، عبارت transform یا background را که می‌خواهید تغییر دهید پیدا کنید. روی کادر Angle Preview در کنار مقدار زاویه کلیک کنید.

    پیش نمایش زاویه

    ساعت‌های کوچک سمت چپِ -5deg و 0.25turn پیش‌نمایش زاویه هستند.

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

    ساعت زاویه دار.

  4. با کلیک روی دایره ساعت زاویه، مقدار زاویه را تغییر دهید یا با اسکرول کردن ماوس، مقدار زاویه را ۱ واحد افزایش/کاهش دهید.

  5. میانبرهای صفحه‌کلید بیشتری برای تغییر مقدار زاویه وجود دارد. برای اطلاعات بیشتر به میانبرهای صفحه‌کلید پنل Styles مراجعه کنید.

سایه‌های کادر و متن را با ویرایشگر سایه تغییر دهید

ویرایشگر سایه (Shadow Editor) یک رابط کاربری گرافیکی (GUI) برای تغییر اعلان‌های CSS text-shadow و box-shadow ارائه می‌دهد.

برای تغییر سایه‌ها با Shadow Editor :

  1. یک عنصر با اعلان سایه را انتخاب کنید . برای مثال، عنصر بعدی را انتخاب کنید.

  2. در تب Styles ، یک سایه پیدا کنید سایه. آیکون کنار اعلان text-shadow یا box-shadow .

    آیکون‌های سایه‌دار

  3. برای باز کردن ویرایشگر سایه، روی نماد سایه کلیک کنید.

    ویرایشگر سایه.

  4. تغییر ویژگی‌های سایه:

    • نوع (فقط برای box-shadow ). انتخاب کنید شروع (Outset) یا شروع (Inset) .
    • جابجایی‌های X و Y. نقطه آبی را بکشید یا مقادیر را مشخص کنید.
    • محو کردن . نوار لغزنده را بکشید یا یک مقدار مشخص کنید.
    • پخش (فقط برای box-shadow ). نوار لغزنده را بکشید یا یک مقدار مشخص کنید.

  5. تغییرات اعمال شده روی عنصر را مشاهده کنید.

ویرایش زمان‌بندی انیمیشن و انتقال با ویرایشگر Easing

ویرایشگر Easing یک رابط کاربری گرافیکی (GUI) برای تغییر مقادیر transition-timing-function و animation-timing-function ارائه می‌دهد.

برای باز کردن ویرایشگر Easing :

  1. یک عنصر با تعریف تابع زمان‌بندی، مانند عنصر <body> در این صفحه، انتخاب کنید.
  2. در تب Styles ، رنگ بنفش را پیدا کنید آسودگی. آیکون کنار اعلان‌های transition-timing-function ، animation-timing-function یا ویژگی مختصر transition . آیکون ویرایشگر تسهیل‌کننده.
  3. برای باز کردن ویرایشگر Easing ، روی آیکون کلیک کنید: ویرایشگر تسهیل‌کننده.

استفاده از تنظیمات از پیش تعیین‌شده برای تنظیم زمان‌بندی

برای تنظیم زمان‌بندی‌ها با یک کلیک، از تنظیمات از پیش تعیین‌شده در Easing Editor استفاده کنید:

  1. در ویرایشگر Easing ، برای تنظیم مقدار یک کلمه کلیدی ، روی یکی از دکمه‌های انتخاب کلیک کنید:
    • خطی دکمه خطی.
    • سهولت ورود و خروج دکمه‌ی ورود و خروج آسان.
    • سهولت در دکمه‌ی ورود آسان.
    • سهولت دکمه‌ی خروج آسان.

  2. در سوئیچر تنظیمات از پیش تعیین‌شده ، کلیک کنید سمت چپ. یا درست است. دکمه‌ها برای انتخاب یکی از تنظیمات از پیش تعیین‌شده‌ی زیر:

    • پیش‌تنظیم‌های خطی: elastic ، bounce یا emphasized .
    • پیش تنظیمات مکعبی بزیر :
کلمه کلیدی زمان بندی از پیش تعیین شده بزیر مکعبی
سهولت ورود و خروج ورودی، خروجی، سینوسی cubic-bezier(0.45, 0.05, 0.55, 0.95)
ورودی خروجی، درجه دوم cubic-bezier(0.46, 0.03, 0.52, 0.96)
ورودی، خروجی، مکعبی cubic-bezier(0.65, 0.05, 0.36, 1)
سریع خارج، آهسته وارد cubic-bezier(0.4, 0, 0.2, 1)
داخل، خارج، عقب cubic-bezier(0.68, -0.55, 0.27, 1.55)
سهولت در در، سینوس cubic-bezier(0.47, 0, 0.75, 0.72)
در، درجه دوم cubic-bezier(0.55, 0.09, 0.68, 0.53)
در، مکعبی cubic-bezier(0.55, 0.06, 0.68, 0.19)
داخل، عقب cubic-bezier(0.6, -0.28, 0.74, 0.05)
خروج سریع، ورود خطی cubic-bezier(0.4, 0, 1, 1)
سهولت خروجی، سینوسی cubic-bezier(0.39, 0.58, 0.57, 1)
خروجی، درجه دوم cubic-bezier(0.25, 0.46, 0.45, 0.94)
بیرون، مکعبی cubic-bezier(0.22, 0.61, 0.36, 1)
خروجی خطی، ورودی آهسته cubic-bezier(0, 0, 0.2, 1)
بیرون، عقب cubic-bezier(0.18, 0.89, 0.32, 1.28)

پیکربندی زمان‌بندی‌های سفارشی

برای تنظیم مقادیر سفارشی برای توابع زمان‌بندی، از نقاط کنترل روی خطوط استفاده کنید:

  • برای توابع خطی، روی هر نقطه‌ای از خط کلیک کنید تا یک نقطه کنترل اضافه شود و آن را بکشید. برای حذف نقطه، دوبار کلیک کنید.

    کشیدن یک نقطه کنترل از یک تابع خطی.

  • برای توابع Cubic Bezier، یکی از نقاط کنترل را بکشید.

    کشیدن نقاط کنترل یک تابع Cubic Bezier.

هر تغییری باعث ایجاد یک انیمیشن توپ در پیش‌نمایش در بالای ویرایشگر می‌شود.

(آزمایشی) کپی کردن تغییرات CSS

با فعال کردن این آزمایش، تب Styles تغییرات CSS شما را با رنگ سبز هایلایت می‌کند.

برای کپی کردن یک تغییر در تعریف CSS، نشانگر ماوس را روی تعریف برجسته شده نگه دارید و روی ... کلیک کنید. کپی کنید. دکمه کپی .

کپی کردن یک تغییر در اعلان CSS.

برای کپی کردن همه تغییرات CSS در سراسر تعریف‌ها به طور همزمان، روی هر تعریف کلیک راست کرده و گزینه کپی کردن همه تغییرات CSS را انتخاب کنید.

تمام تغییرات CSS را کپی کنید.

علاوه بر این، می‌توانید تغییراتی را که ایجاد می‌کنید با برگه تغییرات پیگیری کنید.