مرجع ميزات CSS

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

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

اختيار عنصر

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

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

يمكنك الاطّلاع على عرض CSS لعنصر للحصول على دليل تعليمي.

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

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

عرض CSS

استخدِم علامات التبويب Elements (العناصر) > Styles (الأنماط) وComputed (المحسوبة) للاطّلاع على قواعد CSS وتشخيص مشاكل CSS.

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

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

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

في ما يلي بعض الميزات التي تم تسليط الضوء عليها:

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

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

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

عرض مستندات CSS

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

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

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

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

عرض خصوصية أداة الاختيار

مرِّر مؤشر الماوس فوق أداة اختيار في علامة التبويب الأنماط، بما في ذلك أدوات اختيار العناصر الرئيسية في قواعد CSS المتداخلة والقواعد المتداخلة الموروثة وقواعد @nested-declarations، للاطّلاع على تلميح أدوات يعرض وزن التحديد وتمييز العناصر المطابقة في إطار العرض.

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

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

عرض CSS غير الصالحة والتي تم إلغاؤها وغير النشطة وغيرها

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

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

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

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

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

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

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

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

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

عرض سمات CSS المكتسَبة

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

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

عرض قواعد CSS @

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

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

عرض قواعد @property

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

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

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

عرض قواعد @ البالغ عددها @supports

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

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

عرض قواعد @scope

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

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

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

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

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

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

عرض قواعد @ البالغ عددها @font-palette-values

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

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

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

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

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

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

تتيح لك قاعدة 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 في المعاينة التالية:

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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) عندما تكون أدوات المطوّرين في وضع التركيز لفتح "قائمة الأوامر".

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 المعدَّل في المصادر المحلية في مساحة عمل

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تبديل صف

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

توفّر أداة 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 فقط): اختَر Outset أو Inset.
   • إزاحتا 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:

كلمة رئيسية متعلقة بالتوقيت	الإعدادات المسبقة	منحنى بيزييه التكعيبي
إرخاء إلى الداخل والخارج	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)
إرخاء إلى الداخل	In, 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)
	Fast Out, Linear In	cubic-bezier(0.4, 0, 1, 1)
إرخاء إلى الخارج	Out, Sine	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 باللون الأخضر.

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

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

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