مرجع ميزات CSS

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

اكتشف سير عمل جديد في هذا المرجع الشامل لميزات أدوات مطوري البرامج في Chrome المتعلّقة بعرض وتغيير CSS.

اطّلِع على عرض وتغيير CSS لمعرفة الأساسيات.

اختيار عنصر

تتيح لك لوحة العناصر في "أدوات مطوّري البرامج" عرض أو تغيير CSS لعنصر واحد في كل مرة.

مثال على عنصر محدّد

في لقطة الشاشة، العنصر h1 الذي تم تمييزه باللون الأزرق في شجرة DOM هو العنصر المحدّد. على اليسار، تظهر أنماط العنصر في علامة التبويب الأنماط. على اليمين، يتم تمييز العنصر في إطار العرض، ولكن فقط لأنّ الماوس يمر فوقه في شجرة DOM.

راجِع عرض CSS الخاص بأحد العناصر للحصول على دليل تعليمي.

هناك العديد من الطرق لاختيار عنصر:

  • في نافذة العرض، انقر بزر الماوس الأيمن على العنصر واختَر فحص.
  • في "أدوات المطوّرين"، انقر على اختيار عنصر اختيار عنصر أو اضغط على Command+Shift+C (في نظام التشغيل Mac) أو Control+Shift+C (في نظام التشغيل Windows أو Linux)، ثم انقر على العنصر في إطار العرض.
  • في "أدوات مطوّلي البرامج"، انقر على العنصر في شجرة نموذج العناصر في المستند.
  • في "أدوات مطوّري البرامج"، نفِّذ طلب بحث مثل document.querySelector('p') في وحدة التحكّم، ثم انقر بزر الماوس الأيمن على النتيجة، واختَر عرض في لوحة "العناصر".

عرض CSS

استخدِم علامتَي التبويب العناصر > الأنماط ومحسوبة لعرض قواعد CSS وتشخيص مشاكل CSS.

تعرض علامة التبويب الأنماط روابط في مواضع مختلفة إلى مواضع أخرى مختلفة، بما في ذلك على سبيل المثال لا الحصر:

  • بجانب قواعد CSS، لتصميم أوراق الأنماط ومصادر CSS تفتح هذه الروابط لوحة المصادر. إذا تم تصغير ورقة الأنماط، يمكنك الاطّلاع على إتاحة قراءة ملف مصغّر.
  • في أقسام مكتسَبة من ...، إلى العناصر الرئيسية
  • في طلبات var()، إلى إعدادات السمة المخصّصة.
  • في خصائص animation المختزلة، إلى @keyframes
  • روابط مزيد من المعلومات في تلميحات الأدوات الخاصة بالمستندات
  • والمزيد.

في ما يلي بعض هذه الميزات:

تم تمييز روابط مختلفة.

قد يتم تنسيق الروابط بشكل مختلف. إذا لم تكن متأكدًا مما إذا كان المحتوى رابطًا، جرِّب النقر عليه لمعرفة ذلك.

عرض تلميحات الأدوات التي تتضمّن مستندات CSS والخصوصية وقيم السمات المخصّصة

تعرض العناصر > الأنماط تلميحات تتضمّن معلومات مفيدة عند تمرير مؤشر الماوس فوق عناصر معيّنة.

عرض مستندات CSS

للاطّلاع على تلميح يتضمّن وصفًا موجزًا لـ CSS، مرِّر مؤشر الماوس فوق اسم السمة في علامة التبويب الأنماط.

تلميح الأدوات الذي يتضمّن مستندات حول إحدى خصائص CSS

انقر على مزيد من المعلومات للانتقال إلى مرجع CSS على شبكة مطوّري Mozilla حول هذه السمة.

لإيقاف تلميحات الأدوات، ضَع علامة في المربّع مربّع اختيار عدم العرض.

لإعادة تفعيلها، ضَع علامة في المربّع بجانب عرض تلميح الأداة الخاص بمستندات CSS ضمن الإعدادات. الإعدادات > الإعدادات المفضّلة > العناصر > مربّع اختيار.

عرض درجة تحديد أداة الاختيار

مرِّر مؤشر الماوس فوق أداة اختيار للاطّلاع على تلميح أدوات يتضمّن وزن التحديد.

تلميح يحتوي على وزن التحديد لمحدّد مطابق

عرض قيم الخصائص المخصّصة

مرِّر مؤشر الماوس فوق --custom-property للاطّلاع على قيمته في تلميح أداة.

قيمة خاصية مخصّصة في تلميح أداة

عرض CSS غير صالح أو تم تجاهله أو غير نشط أو غير ذلك

تتعرّف علامة التبويب الأنماط على العديد من أنواع مشاكل CSS وتبرزها بطرق مختلفة.

اطّلِع على فهم CSS في علامة التبويب "الأنماط".

عرض CSS الذي يتم تطبيقه فعليًا على عنصر

تعرض علامة التبويب الأنماط جميع القواعد التي تنطبق على أحد العناصر، بما في ذلك التصريحات التي تم تجاهلها. عندما لا تكون مهتمًا بالتعريفات التي تم تجاهلها، استخدِم علامة التبويب محسوبة لعرض CSS الذي يتم تطبيقه فعليًا على أحد العناصر فقط.

  1. اختَر عنصرًا.
  2. انتقِل إلى علامة التبويب محسوبة في لوحة العناصر.

علامة التبويب "القيم المحسوبة"

ضَع علامة في مربّع الاختيار عرض الكلّ للاطّلاع على جميع الخصائص.

اطّلِع على التعرّف على CSS في علامة التبويب "محسوب".

عرض سمات CSS بترتيب أبجدي

استخدِم علامة التبويب محسوبة. اطّلِع على عرض CSS الذي يتم تطبيقه فعليًا على عنصر.

عرض خصائص CSS الموروثة

ضَع علامة في مربّع الاختيار عرض الكل ضمن علامة التبويب محسوبة. عرض CSS الذي يتم تطبيقه فعليًا على عنصر فقط

يمكنك بدلاً من ذلك الانتقال إلى علامة التبويب الأنماط والعثور على أقسام باسم Inherited from <element_name>.

اطّلِع على قسم &quot;موروثة من...&quot; في علامة التبويب &quot;الأنماط&quot;.

عرض قواعد CSS @

قواعد At-rules هي عبارات CSS تتيح لك التحكّم في سلوك CSS. تعرض العناصر > الأنماط قواعد at-rules التالية في أقسام مخصّصة:

عرض قواعد @property

تتيح لك قاعدة @property في CSS تحديد خصائص CSS المخصّصة بشكل صريح وتسجيلها في ورقة أنماط بدون تنفيذ أي JavaScript.

مرِّر مؤشر الماوس فوق اسم هذه السمة في علامة التبويب الأنماط، وسيظهر تلميح أدوات يتضمّن قيمة السمة وأوصافها ورابطًا لتسجيلها في القسم @property القابل للتصغير في أسفل علامة التبويب الأنماط.

لتعديل قاعدة @property، انقر مرّتين على اسمها أو قيمتها.

عرض قواعد @supports

تعرض علامة التبويب الأنماط قواعد @supports CSS @ إذا تم تطبيقها على أحد العناصر. على سبيل المثال، افحص العنصر التالي:

عرض قواعد ‎ @supports at-rules

إذا كان متصفّحك يتيح استخدام الدالة lab()، سيكون العنصر باللون الأخضر، وإلا سيكون باللون الأرجواني.

عرض قواعد @scope

تعرض علامة التبويب الأنماط قواعد CSS @scope @ إذا تم تطبيقها على أحد العناصر.

تشكّل قواعد @scope الجديدة جزءًا من مواصفات CSS Cascading and Inheritance Level 6. تسمح لك هذه القواعد بتحديد نطاق أنماط CSS، أي تطبيق الأنماط بشكل صريح على عناصر معيّنة.

اطّلِع على القاعدة @scope في المعاينة التالية:

  1. افحص النص على البطاقة في المعاينة.
  2. في علامة التبويب الأنماط، ابحث عن القاعدة @scope.

قاعدة ‎ @scope

في هذا المثال، تلغي القاعدة @scope تعريف CSS العام background-color لجميع العناصر <p> داخل العناصر التي تحمل الفئة card.

لتعديل قاعدة @scope، انقر عليها مرّتين.

عرض قواعد @font-palette-values

تتيح لك قاعدة @font-palette-values في CSS تخصيص القيم التلقائية للسمة font-palette. تعرض العناصر > التصاميم قاعدة at-rule هذه في قسم مخصّص.

اطّلِع على القسم @font-palette-values في المعاينة التالية:

  1. افحص السطر الثاني من النص في المعاينة.
  2. في الأنماط، ابحث عن القسم @font-palette-values.

قاعدة ‎ @font-palette-values

في هذا المثال، تحلّ قيم --New لوحة ألوان الخط محل القيم التلقائية للخط الملوّن.

لتعديل القيم المخصّصة، انقر عليها نقرًا مزدوجًا.

عرض قواعد @position-try

تتيح لك قاعدة CSS الخاصة بالسمة @position-try مع السمة position-try-options تحديد مواضع بديلة لعناصر الارتساء. لمزيد من المعلومات، يمكنك الاطّلاع على تقديم واجهة برمجة التطبيقات لتحديد موضع العنصر الثابت في CSS.

يحلّ العناصر > الأنماط المشاكل التالية ويربطها:

  • قيم السمة position-try-options إلى قسم @position-try --name مخصّص.
  • قيم السمة position-anchor ووسيطات anchor() للعناصر المقابلة التي تتضمّن السمة popovertarget

راجِع قيم position-try-options وأقسام @position-try في المعاينة التالية:

عرض توضيحي باستخدام الإعلان الثابت مع popover
  1. في المعاينة، افتح القائمة الفرعية، أي انقر على حسابك ثم على واجهة المتجر.
  2. افحص العنصر باستخدام id="submenu" في المعاينة.
  3. في الأنماط، ابحث عن السمة position-try-options وانقر على قيمتها --bottom. تنقلك علامة التبويب الأنماط إلى قسم @position-try ذي الصلة.
  4. انقر على رابط قيمة position-anchor أو وسيطات anchor() نفسها. تختار لوحة العناصر العنصر الذي يتضمّن السمة popovertarget المقابلة، وتعرض علامة التبويب الأنماط رمز CSS الخاص بالعنصر.

السمة position-try-options والقسم ‎ @position-try والعنصر الذي يتضمّن السمة popover target.

لتعديل القيم، انقر عليها مرّتين.

عرض نموذج المربّع الخاص بعنصر

لعرض نموذج المربّع الخاص بعنصر ما، انتقِل إلى علامة التبويب الأنماط وانقر على الزر إظهار الشريط الجانبي عرض الشريط الجانبي في شريط الإجراءات.

مخطط نموذج المربّع

لتغيير قيمة، انقر عليها مرّتين.

البحث عن CSS الخاص بعنصر وفلترته

استخدِم مربّع الفلتر في علامتَي التبويب الأنماط والمحسوبة للبحث عن قيم أو سمات CSS معيّنة.

فلترة علامة التبويب &quot;الأنماط&quot;

للبحث أيضًا عن السمات الموروثة في علامة التبويب محسوبة، ضَع علامة في مربّع الاختيار عرض الكل.

فلترة الخصائص الموروثة في علامة التبويب &quot;الخصائص التي تم احتسابها&quot;

للتنقّل في علامة التبويب محسوبة، قسِّم الخصائص التي تمّت فلترتها إلى فئات قابلة للتصغير من خلال وضع علامة في المربّع تجميع.

تجميع المواقع التي تمت فلترتها

محاكاة صفحة مركَّز عليها

إذا بدّلت التركيز من الصفحة إلى "أدوات مطوّري البرامج"، سيتم تلقائيًا إخفاء بعض عناصر التراكب إذا تم تشغيلها من خلال التركيز. على سبيل المثال، القوائم المنسدلة أو القوائم أو أدوات اختيار التاريخ. يتيح لك الخيار محاكاة صفحة محل التركيز تصحيح أخطاء عنصر من هذا النوع كما لو كان محل التركيز.

جرِّب محاكاة صفحة مركَّز عليها في صفحة العرض التوضيحي هذه:

  1. ركِّز على عنصر الإدخال. يظهر عنصر آخر أسفله.
  2. افتح "أدوات مطوّري البرامج". أصبحت نافذة "أدوات مطوّري البرامج" الآن محل التركيز بدلاً من الصفحة، لذا يختفي العنصر مرة أخرى.
  3. في العناصر > الأنماط، انقر على :hov، وضَع علامة في المربّع محاكاة صفحة محل التركيز، وتأكَّد من تحديد عنصر الإدخال. يمكنك الآن فحص العنصر أدناه.

قبل تفعيل خيار &quot;محاكاة صفحة مركَّز عليها&quot; وبعد تفعيله

يمكنك أيضًا العثور على الخيار نفسه في لوحة العرض.

لمعرفة المزيد من الطرق لتجميد عنصر، اطّلِع على تجميد الشاشة وفحص العناصر التي تختفي.

تبديل فئة صورية

لتبديل حالة فئة زائفة:

  1. اختَر عنصرًا.
  2. في لوحة العناصر، انتقِل إلى علامة التبويب الأنماط.
  3. انقر على :hov.
  4. ضَع علامة في المربّع بجانب الفئة الزائفة التي تريد تفعيلها.

تبديل حالة العنصر الزائفة عند التمرير فوقه

في هذا المثال، يمكنك ملاحظة أنّ "أدوات مطوّري البرامج" تطبّق تعريف background-color على العنصر، حتى إذا لم يتم التمرير فوقه فعليًا.

تعرض علامة التبويب الأنماط فئات العناصر الزائفة التالية لجميع العناصر:

بالإضافة إلى ذلك، قد تحتوي بعض العناصر على فئات زائفة خاصة بها. عند اختيار عنصر من هذا النوع، ستعرض علامة التبويب الأنماط قسم فرض حالة العنصر المحدّد يمكنك توسيعه وتفعيل الفئات الزائفة الخاصة بالعنصر.

قسم `فرض حالة العنصر المحدّد` في عنصر &quot;textarea&quot;

يمكنك الاطّلاع على إضافة حالة زائفة إلى فئة للحصول على برنامج تعليمي تفاعلي.

عرض العناصر الزائفة المميزة الموروثة

تتيح لك العناصر الزائفة تنسيق أجزاء معيّنة من العناصر. أجزاء المستند المميزة هي أجزاء من المستند تكون حالتها "محدّدة" ويتم تنسيقها على أنّها "مميزة" للإشارة إلى هذه الحالة للمستخدم. على سبيل المثال، تشمل العناصر الزائفة ::selection و::spelling-error و::grammar-error و::highlight.

كما هو موضّح في المواصفات، عندما تتعارض أنماط متعددة، يحدّد التتالي النمط الفائز.

لفهم عملية التوريث وأولوية القواعد بشكل أفضل، يمكنك عرض العناصر الزائفة المميزة الموروثة:

  1. افحص النص أدناه.

    لقد ورثتُ نمط العنصر الزائف الخاص بالتمييز من العنصر الرئيسي. اختَرني.

  2. اختَر جزءًا من النص أعلاه.

  3. في علامة التبويب الأنماط، انتقِل للأسفل للعثور على القسم Inherited from ::selection pseudo of....

اطّلِع على قسم &quot;السمات الموروثة&quot; في علامة التبويب &quot;الأنماط&quot;.

عرض الطبقات المتتالية

تتيح الطبقات المتتالية التحكّم بشكل أكثر وضوحًا في ملفات CSS لمنع تعارضات تحديد الأنماط. ويكون ذلك مفيدًا لقواعد الرموز الكبيرة وأنظمة التصميم وعند إدارة الأنماط التابعة لجهات خارجية في التطبيقات.

لعرض الطبقات المتتالية، افحص العنصر التالي وافتح العناصر > الأنماط.

في علامة التبويب الأنماط، اطّلِع على طبقات التتالي الثلاث وأنماطها: page وcomponent وbase.

طبقات متتالية

لعرض ترتيب الطبقات، انقر على اسم الطبقة أو على الزر تبديل الطبقات تبديل عرض طبقات CSS.

تتمتّع الطبقة page بأعلى مستوى من التحديد، وبالتالي تكون خلفية العنصر خضراء.

لعرض صفحة في وضع الطباعة:

  1. افتح قائمة الأوامر.
  2. ابدأ الكتابة Rendering واختَر Show Rendering.
  3. في القائمة المنسدلة محاكاة وسائط CSS، اختَر طباعة.

عرض CSS المستخدَم وغير المستخدَم باستخدام علامة التبويب "التغطية"

تعرض علامة التبويب "التغطية" رمز CSS الذي تستخدمه الصفحة فعليًا.

  1. اضغط على Command+Shift+P (في نظام التشغيل Mac) أو Control+Shift+P (في نظام التشغيل Windows أو Linux أو ChromeOS) عندما تكون أدوات المطوّرين في وضع التركيز لفتح "قائمة الأوامر".

  2. ابدأ الكتابة coverage.

    فتح علامة التبويب &quot;التغطية&quot; من &quot;قائمة الأوامر&quot;

  3. انقر على عرض نسبة استخدام رموز الصفحة. تظهر علامة التبويب "التغطية".

    علامة التبويب &quot;التغطية&quot;

  4. انقر على بدء تغطية قياس حالة التطبيق وإعادة تحميل الصفحة إعادة التحميل. تتم إعادة تحميل الصفحة، وتقدّم علامة التبويب التغطية نظرة عامة على مقدار محتوى CSS (وJavaScript) المستخدَم من كل ملف يحمّله المتصفّح.

    نظرة عامة على مقدار محتوى CSS (وJavaScript) المستخدَم وغير المستخدَم

    يمثّل اللون الأخضر CSS المستخدَمة. يشير اللون الأحمر إلى محتوى CSS غير المُستخدَم.

  5. انقر على ملف CSS للاطّلاع على تفاصيل كل سطر من CSS المستخدَم في المعاينة أعلاه.

    تفصيل لمحتوى CSS المُستخدَم وغير المُستخدَم سطرًا بسطر

    في لقطة الشاشة، تكون الأسطر من 55 إلى 57 ومن 65 إلى 67 من devsite-google-blue.css غير مستخدَمة، بينما تكون الأسطر من 59 إلى 63 مستخدَمة.

فرض وضع معاينة الطباعة

اطّلِع على فرض وضع "أدوات مطوّري البرامج" في وضع معاينة الطباعة.

نسخ CSS

من قائمة منسدلة واحدة في علامة التبويب الأنماط، يمكنك نسخ قواعد CSS وبياناتها وخصائصها وقيمها المنفصلة.

بالإضافة إلى ذلك، يمكنك نسخ خصائص CSS في بنية JavaScript. يكون هذا الخيار مفيدًا إذا كنت تستخدم مكتبات CSS-in-JS.

لنسخ CSS:

  1. اختَر عنصرًا.
  2. في علامة التبويب العناصر > الأنماط، انقر بزر الماوس الأيمن على إحدى خصائص CSS. القائمة المنسدلة &quot;نسخ CSS&quot;

  3. اختَر أحد الخيارات التالية من القائمة المنسدلة:

    • نسخ التعريف نسخ الخاصية وقيمتها في بنية CSS: css property: value;
    • نسخ خاصية تنسخ هذه السمة اسم property فقط.
    • نسخ القيمة ينسخ هذا الخيار value فقط.
    • نسخ القاعدة نسخ قاعدة CSS بأكملها: css selector[, selector] { property: value; property: value; ... }
    • نسخ التعريف بتنسيق JavaScript ينسخ السمة وقيمتها في بنية JavaScript: js propertyInCamelCase: 'value'
    • نسخ كل التعريفات نسخ جميع الخصائص وقيمها في قاعدة CSS: css property: value; property: value; ...

    • نسخ جميع التعريفات بتنسيق JavaScript نسخ جميع السمات وقيمها بتنسيق JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • نسخ جميع التغييرات من صفحات CSS نسخ التغييرات التي تجريها في علامة التبويب الأنماط على مستوى جميع التصريحات

    • عرض القيمة المحتسَبة ينقلك هذا الإجراء إلى علامة التبويب محسوبة.

تغيير CSS

يسرد هذا القسم جميع الطرق التي يمكنك من خلالها تغيير CSS في العناصر > الأنماط.

بالإضافة إلى ذلك، يمكنك:

تغيير CSS باستخدام ميزة إكمال الرمز

لتجربة تركيبات أكثر تعقيدًا من خصائص CSS، مثل التدرجات أو ظلال المربعات، بدون الحاجة إلى تذكُّر صيغتها الدقيقة، أو لإنشاء تنسيقات شبكية ومرنة بسرعة، بالاعتماد على خصائص متعدّدة ذات صلة، يمكنك البدء بكتابة إحدى خصائص CSS واستخدام ميزة "إكمال الرمز".

استخدام ميزة &quot;إكمال الرمز&quot; لإضافة سمة CSS

إضافة تعريف CSS إلى عنصر

بما أنّ ترتيب التعريفات يؤثر في طريقة تنسيق العنصر، يمكنك إضافة التعريفات بطرق مختلفة:

ما هو سير العمل الذي يجب استخدامه؟ في معظم الحالات، من المحتمل أنّك تريد استخدام سير عمل الإعلان المضمّن. تتمتّع التعريفات المضمّنة بمستوى تحديد أعلى من التعريفات الخارجية، لذا تضمن سير العمل المضمّن أن تسري التغييرات على العنصر كما تتوقّع. يمكنك الاطّلاع على أنواع المحدّدات لمزيد من المعلومات حول التحديد.

إذا كنت بصدد تصحيح أخطاء أنماط أحد العناصر وكنت بحاجة إلى اختبار ما يحدث تحديدًا عند تعريف أحد التصريحات في أماكن مختلفة، استخدِم سير العمل الآخر.

إضافة تعريف مضمّن

لإضافة تعريف مضمّن، اتّبِع الخطوات التالية:

  1. اختَر عنصرًا.
  2. في علامة التبويب الأنماط، انقر بين قوسَي القسم element.style. يركّز المؤشر، ما يتيح لك إدخال النص.
  3. أدخِل اسم الموقع واضغط على Enter.

  4. أدخِل قيمة صالحة لهذه السمة واضغط على Enter. في شجرة DOM، يمكنك ملاحظة أنّه تمت إضافة السمة style إلى العنصر.

    إضافة تعريفات مضمّنة

    في لقطة الشاشة، تم تطبيق السمتَين margin-top وbackground-color على العنصر المحدّد. في شجرة DOM، يمكنك الاطّلاع على التصريحات المعروضة في السمة style للعنصر.

إضافة تعريف إلى قاعدة نمط

لإضافة بيان إلى قاعدة نمط حالية، اتّبِع الخطوات التالية:

  1. اختَر عنصرًا.
  2. في علامة التبويب الأنماط، انقر بين قوسَي قاعدة النمط التي تريد إضافة تعريف إليها. يتم التركيز على المؤشر، ما يتيح لك إدخال النص.
  3. أدخِل اسم الموقع واضغط على Enter.
  4. أدخِل قيمة صالحة لهذه السمة واضغط على Enter.

تغيير قيمة تعريف

في لقطة الشاشة، تتلقّى قاعدة الأنماط الإعلان الجديد border-bottom-style:groove.

تغيير اسم أو قيمة بيان

انقر مرّتين على اسم أو قيمة تعريف لتغييره. راجِع تغيير القيم القابلة للتعداد باستخدام اختصارات لوحة المفاتيح للاطّلاع على الاختصارات التي تتيح زيادة قيمة أو إنقاصها بسرعة بمقدار 0.1 أو 1 أو 10 أو 100 وحدة.

تغيير القيم القابلة للتعداد باستخدام اختصارات لوحة المفاتيح

أثناء تعديل قيمة قابلة للتعداد في تعريف، مثل font-size، يمكنك استخدام اختصارات لوحة المفاتيح التالية لزيادة القيمة بمقدار ثابت:

  • Option+السهم المتّجه للأعلى (Mac) أو Alt+السهم المتّجه للأعلى (Windows وLinux) لزيادة القيمة بمقدار 0.1
  • السهم المتّجه للأعلى لتغيير القيمة بمقدار 1، أو بمقدار 0.1 إذا كانت القيمة الحالية بين -1 و1
  • ‫Shift+السهم المتّجه للأعلى لزيادة القيمة بمقدار 10
  • Shift+Command+السهم للأعلى (في نظام التشغيل Mac) أو Control+Shift+Page Up (في نظام التشغيل Windows أو Linux) لزيادة القيمة بمقدار 100

يمكنك أيضًا استخدام عملية الإنقاص. ما عليك سوى استبدال كل مثيل من Up المذكور سابقًا بـ Down.

تغيير قيم الطول

يمكنك استخدام المؤشر لتغيير أي سمة ذات طول، مثل العرض أو الارتفاع أو المساحة المتروكة أو الهامش أو الحدود.

لتغيير وحدة الطول، اتّبِع الخطوات التالية:

  1. مرِّر المؤشر فوق اسم الوحدة ولاحظ أنّه تم وضع خط تحته.

  2. انقر على اسم الوحدة لاختيار وحدة من القائمة المنسدلة.

لتغيير قيمة الطول، اتّبِع الخطوات التالية:

  1. مرِّر مؤشر الماوس فوق قيمة الوحدة ولاحظ أنّ المؤشر يتغيّر إلى سهم أفقي مزدوج الرأس.

  2. اسحب أفقيًا لزيادة القيمة أو خفضها.

لضبط القيمة بمقدار 10، اضغط مع الاستمرار على Shift أثناء السحب.

إضافة فئة إلى عنصر

لإضافة فئة إلى عنصر، اتّبِع الخطوات التالية:

  1. اختَر العنصر في شجرة DOM.
  2. انقر على .cls.
  3. أدخِل اسم الصف في مربّع إضافة صف جديد.
  4. اضغط على Enter.

قسم &quot;فئات العناصر&quot;

محاكاة إعدادات المظهر الفاتح والداكن وتفعيل الوضع الداكن التلقائي

لتبديل الوضع الداكن التلقائي أو محاكاة خيار المستخدم المفضّل للمظهر الفاتح أو الداكن:

  1. في علامة التبويب العناصر > الأنماط، انقر على التبديل إلى محاكاة العرض الرائجةالتبديل إلى محاكاة العرض الرائجة. التبديل إلى محاكاة العرض الرائجة

  2. اختَر أحد الخيارات التالية من القائمة المنسدلة:

    • ‫prefers-color-scheme: light تشير إلى أنّ المستخدم يفضّل المظهر الفاتح.
    • prefers-color-scheme: dark. تشير إلى أنّ المستخدم يفضّل المظهر الداكن.
    • الوضع الداكن التلقائي تعرض صفحتك في الوضع الداكن حتى إذا لم تنفّذه. بالإضافة إلى ذلك، يتم ضبط prefers-color-scheme على dark تلقائيًا.

هذه القائمة المنسدلة هي اختصار للخيارَين محاكاة ميزة prefers-reduced-motion لوسائط صفحات الأنماط المتتالية (CSS)prefers-color-scheme وتفعيل الوضع الداكن التلقائي في علامة التبويب العرض.

تبديل صف

لتفعيل فئة أو إيقافها في عنصر، اتّبِع الخطوات التالية:

  1. اختَر العنصر في شجرة DOM.
  2. افتح قسم فئات العناصر. اطّلِع على إضافة فئة إلى عنصر. أسفل المربّع إضافة فئة جديدة، تظهر جميع الفئات التي يتم تطبيقها على هذا العنصر.
  3. ضَع علامة في مربّع الاختيار بجانب الصف الذي تريد تفعيله أو إيقافه أو أزِل العلامة.

إضافة قاعدة نمط

لإضافة قاعدة نمط جديدة، اتّبِع الخطوات التالية:

  1. اختَر عنصرًا.
  2. انقر على قاعدة نمط جديدة قاعدة أنماط جديدة. تُدرج &quot;أدوات مطوّري البرامج&quot; قاعدة جديدة أسفل قاعدة element.style.

إضافة قاعدة نمط جديدة

في لقطة الشاشة، تضيف "أدوات مطوّري البرامج" قاعدة النمط h1.devsite-page-title بعد النقر على قاعدة نمط جديدة.

اختيار ورقة الأنماط التي تريد إضافة قاعدة إليها

عند إضافة قاعدة نمط جديدة، انقر مع الاستمرار على قاعدة نمط جديدة قاعدة أنماط جديدة لاختيار ورقة الأنماط التي تريد إضافة قاعدة النمط إليها.

اختيار ورقة أنماط

تفعيل أو إيقاف بيان

لتفعيل إشعار واحد أو إيقافه:

  1. اختَر عنصرًا.
  2. في علامة التبويب الأنماط، مرِّر مؤشر الماوس فوق القاعدة التي تحدّد البيان. تظهر مربّعات الاختيار بجانب كل بيان.
  3. ضَع علامة في مربّع الاختيار بجانب البيان أو أزِل العلامة منه. عند محو تعريف، تشطب أداة DevTools التعريف للإشارة إلى أنّه لم يعُد نشطًا.

تبديل حالة البيان

في لقطة الشاشة، تم إيقاف السمة color للعنصر المحدّد حاليًا.

تعديل عناصر ::view-transition الزائفة أثناء صورة متحركة

اطّلِع على القسم ذي الصلة في الصور المتحركة.

لمزيد من المعلومات، اطّلِع على انتقالات سلسة وبسيطة باستخدام View Transitions API.

محاذاة عناصر الشبكة ومحتواها باستخدام "محرّر الشبكة"

اطّلِع على القسم المقابل في "فحص شبكة CSS".

تغيير الألوان باستخدام "أداة اختيار الألوان"

اطّلِع على فحص ألوان HDR وغير HDR وتصحيح أخطائها باستخدام "علبة الألوان".

تغيير قيمة الزاوية باستخدام "ساعة الزاوية"

توفّر ساعة الزاوية واجهة مستخدم رسومية لتغيير <angle> في قيم خصائص CSS.

لفتح ساعة الزاوية، اتّبِع الخطوات التالية:

  1. اختَر عنصرًا يتضمّن تعريف الزاوية.

  2. في علامة التبويب الأنماط، ابحث عن تعريف transform أو background الذي تريد تغييره. انقر على مربّع معاينة الزاوية بجانب قيمة الزاوية.

    معاينة الزاوية

    الساعات الصغيرة على يمين -5deg و0.25turn هي معاينات الزاوية.

  3. انقر على المعاينة لفتح ساعة الزاوية.

    ساعة ذات زوايا

  4. غيِّر قيمة الزاوية بالنقر على دائرة ساعة الزاوية أو بالتمرير باستخدام الماوس لزيادة قيمة الزاوية أو خفضها بمقدار 1.

  5. تتوفّر المزيد من اختصارات لوحة المفاتيح لتغيير قيمة الزاوية. يمكنك الاطّلاع على مزيد من المعلومات في اختصارات لوحة المفاتيح الخاصة بلوحة "الأنماط".

تغيير ظلال المربّعات والنصوص باستخدام "أداة تعديل خصائص التظليل"

يوفّر محرّر الظل واجهة مستخدم رسومية لتغيير تعريفات CSS الخاصة بالعناصر text-shadow وbox-shadow.

لتغيير الظلال باستخدام أداة تعديل الظلال، اتّبِع الخطوات التالية:

  1. اختَر عنصرًا يتضمّن تعريفًا للظل. على سبيل المثال، اختَر العنصر التالي.

  2. في علامة التبويب الأنماط، ابحث عن رمز الظل الظل بجانب تعريف text-shadow أو box-shadow.

    رموز الظل

  3. انقر على رمز الظل لفتح أداة تعديل خصائص التظليل.

    محرّر الظلال

  4. غيِّر خصائص الظل:

    • النوع (box-shadow فقط): اختَر Outset أو Inset.
    • إزاحات X وY: اسحب النقطة الزرقاء أو حدِّد القيم.
    • تمويه اسحب شريط التمرير أو حدِّد قيمة.
    • الانتشار (box-shadow فقط): اسحب شريط التمرير أو حدِّد قيمة.

  5. راقِب التغييرات التي تم تطبيقها على العنصر.

تعديل توقيتات الصور المتحركة وتأثيرات الانتقال باستخدام "أداة تعديل التباطؤ"

يوفّر محرّر التباطؤ والتسارع واجهة مستخدم رسومية لتغيير قيم transition-timing-function وanimation-timing-function.

لفتح محرِّر التباطؤ والتسارع، اتّبِع الخطوات التالية:

  1. اختَر عنصرًا يتضمّن تعريف دالة توقيت، مثل العنصر <body> في هذه الصفحة.
  2. في علامة التبويب الأنماط، ابحث عن الرمز الأرجواني السهولة: بجانب التصريحات transition-timing-function أو animation-timing-function أو الخاصية المختزلة transition. رمز &quot;محرّر التباطؤ والتسارع&quot;
  3. انقر على الرمز لفتح أداة تعديل التباطؤ والتسارع: محرِّر التخفيف

استخدام الإعدادات المُسبَقة لتعديل التوقيتات

لضبط التوقيتات بنقرة واحدة، استخدِم الإعدادات المُسبقة في أداة تعديل التباطؤ والتسارع:

  1. في محرِّر تغيير السرعة، لضبط قيمة كلمة رئيسية، انقر على أحد أزرار أداة الاختيار:
    • خطي الزر الخطي
    • التسارع والتباطؤ زر التلاشي التدريجي
    • التلاشي التدريجي زر &quot;التسريع التدريجي&quot;
    • ‫ease-out زر التباطؤ

  2. في مبدّل الإعدادات المُسبقة، انقر على الزر نحو اليسار أو نحو اليمين لاختيار أحد الإعدادات المُسبقة التالية:

كلمة رئيسية متعلقة بالتوقيت الإعدادات المسبقة Cubic Bezier
إرخاء إلى الداخل والخارج In Out, Sine 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)
Fast Out, Slow In cubic-bezier(0.4, 0, 0.2, 1)
In Out, Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
إرخاء إلى الداخل فيلم "Sine" 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)
Out, Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
Linear Out, Slow In cubic-bezier(0, 0, 0.2, 1)
خارج، رجوع cubic-bezier(0.18, 0.89, 0.32, 1.28)

ضبط التوقيتات المخصّصة

لضبط قيم مخصّصة لوظائف التوقيت، استخدِم نقاط التحكّم على الخطوط:

  • بالنسبة إلى الدوال الخطية، انقر في أي مكان على الخط لإضافة نقطة تحكّم واسحبها. انقر مرّتين لإزالة النقطة.

    سحب نقطة تحكّم في دالة خطية

  • بالنسبة إلى دوال Cubic Bezier، اسحب إحدى نقاط التحكّم.

    سحب نقاط التحكّم في دالة Cubic Bezier

يؤدي أي تغيير إلى تشغيل حركة كرة في المعاينة في أعلى المحرّر.

(تجريبية) نسخ تغييرات صفحات CSS

عند تفعيل هذه التجربة، ستُبرز علامة التبويب الأنماط تغييرات CSS باللون الأخضر.

لنسخ تغيير واحد في تعريف CSS، مرِّر مؤشر الماوس فوق التعريف المميّز وانقر على الزر نسخ. نسخ.

نسخ تغيير في تعريف CSS

لنسخ جميع التغييرات من صفحات CSS على مستوى التعريفات دفعة واحدة، انقر بزر الماوس الأيمن على أي تعريف واختَر نسخ جميع التغييرات من صفحات CSS.

انسخ جميع التغييرات من صفحات CSS.

بالإضافة إلى ذلك، يمكنك تتبُّع التغييرات التي تجريها باستخدام علامة التبويب التغييرات.