مرجع ميزات CSS

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

اختيار عنصر

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

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

اطّلِع على عرض ملف CSS الخاص بعنصر للحصول على دليل تعليمي.

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

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

عرض CSS

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

التنقّل باستخدام الروابط

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

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

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

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

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

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

عرض مستندات CSS

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

ملاحظة: تُستخرج أدوات المطوّرين أوصاف التلميح من البيانات المخصّصة في VS Code.

انقر على مزيد من المعلومات للانتقال إلى مرجع CSS في MDN حول هذا الموقع الإلكتروني.

لإيقاف نصائح التلميح، ضَع علامة في المربّع بجانب عدم العرض.

لإعادة تفعيلها، انتقِل إلى الإعدادات > الإعدادات المفضّلة > العناصر > عرض التلميح في مستندات CSS.

عرض مدى دقة أداة الاختيار

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

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

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

عرض أوراق أنماط CSS غير الصالحة والملغاة وغير النشطة وغيرها

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

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

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

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

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

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

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

عرض خصائص CSS أبجديًا

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

عرض خصائص CSS المُكتسَبة

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

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

عرض قواعد at-rules في CSS

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

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

عرض @property قاعدة at-rule

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

مرِّر مؤشر الماوس فوق اسم هذا الموقع في علامة التبويب الأنماط، للاطّلاع على نصائح تشير إلى قيمة الموقع ووصفاته ورابط لتسجيله في قسم @property القابل للطي في أسفل علامة التبويب الأنماط.

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

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

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

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

ملاحظة: في وقت كتابة هذه المقالة، كان متصفّح Safari فقط يتوافق مع مساحة ألوان CIELAB.

عرض @scope قاعدة at-rule

تعرض علامة التبويب الأنماط قواعد at-rules الخاصة بخدمة @scope CSS في حال تطبيقها على عنصر.

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

ملاحظة: ميزة @scope at-rule هي ميزة تجريبية. لاختبارها، فعِّل علامة ميزات قاعدة الويب التجريبية في chrome://flags/#enable-experimental-web-platform-features. وبخلاف ذلك، لن تعمل المعاينة التالية.

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

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

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

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

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

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

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

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

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

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

عرض @position-try قاعدة at-rule

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

العناصر > الأنماط: تؤدي هذه الخطوة إلى ربط ما يلي وحلّه:

• قيم سمة 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 الخاص بالعنصر.

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

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

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

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

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

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

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

للتنقّل في علامة التبويب محسوبة، يمكنك تجميع المواقع التي تمّت فلترتها في فئات قابلة للطي من خلال وضع علامة في المربّع مجموعة.

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

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

تحذير: عند تفعيل هذا الخيار، يتم ضبط document.visibilityState على visible ولا يتم تشغيل الحدث visibilitychange. لمزيد من المعلومات، يُرجى الاطّلاع على Page Visibility API.

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

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

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

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

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

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

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

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

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

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

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

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

عرض العناصر الزائفة للتمييز المُكتسَبة

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

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

ملاحظة: لتفعيل هذه الميزة، شغِّل Chrome مع العلامة --enable-blink-features=HighlightInheritance.

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

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

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

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

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

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

تتيح طبقات التسلسل التحكّم بشكل أكثر وضوحًا في ملفات 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) عندما يكون DevTools محدّدًا لفتح قائمة الأوامر.

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

   

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

   

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

   

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

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

   

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

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

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

نسخ ملف CSS

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

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

لنسخ ملف CSS:

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

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 إلى عنصر

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

• أضِف بيانًا مضمّنًا. يعادل ذلك إضافة سمة style إلى ملف HTML الخاص بالعنصر.
• إضافة بيان إلى قاعدة نمط

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

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

إضافة بيان مضمّن

لإضافة بيان مضمّن:

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

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

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

ميزة متوقّفة نهائيًا: تم إيقاف هذه الميزة نهائيًا في الإصدار 123 من Chrome. لإعادة تفعيلها مؤقتًا مرة أخرى، أزِل العلامة من المربّع بجانب الإعدادات الإعدادات > التجارب > مربّع الاختيار إيقاف أداة إنشاء CSS <length> نهائيًا في علامة التبويب "الأنماط". يُرجى إرسال ملاحظاتك في crbug/1522657.

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

لتغيير وحدة الطول:

1. مرِّر مؤشر الماوس فوق اسم الوحدة ولاحظ أنّه يظهر مخطَّطًا.

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

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

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

2. اسحب شريط التمرير أفقيًا لزيادة القيمة أو تقليلها.

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

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

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

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

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

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

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

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

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

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

تبديل صف

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

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

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

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

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

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

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

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

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

لتفعيل بيان واحد أو إيقافه:

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

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

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

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

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

محاذاة عناصر الشبكة ومحتوى العناصر باستخدام "أداة تعديل الشبكة"

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

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

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

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

توفّر Angle Clock واجهة مستخدم لتغيير <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 فقط): اختَر خارجي أو مضمّن.
   • إزاحات X وY اسحب النقطة الزرقاء أو حدِّد القيم.
   • تمويه اسحب شريط التمرير أو حدِّد قيمة.
   • الانتشار (لـ box-shadow فقط): اسحب شريط التمرير أو حدِّد قيمة.

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

تعديل أوقات ظهور الحركات والانتقالات باستخدام "أداة تعديل السرعة"

يقدّم أداة تعديل التأثير واجهة مستخدم رسومية لتغيير قيم transition-timing-function وanimation-timing-function.

لفتح أداة تعديل التأثيرات:

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

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

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

1. في أداة تعديل التأثير، لضبط قيمة الكلمة الرئيسية، انقر على أحد أزرار أداة الاختيار:
   • خطي
   • ease-in-out
   • ease-in
   • ease-out

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

   • الإعدادات المُسبَقة للمحتوى المباشر غير القابل للتقديم أو الإيقاف: elastic أو bounce أو emphasized
   • الإعدادات المُسبَقة لخطوط Cubic Bezier:

الكلمة الرئيسية المتعلّقة بالتوقيت	الإعدادات المسبقة	منحنيات 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)
	In Out, Cubic	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، اسحب إحدى نقاط التحكّم.

  

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

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

ملاحظة: لتفعيل هذه الميزة التجريبية، ضَع علامة في المربّع بجانب مزامنة تغييرات CSS في علامة التبويب "الأنماط" ضمن الإعدادات > التجارب وأعِد تحميل DevTools.

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

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

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

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