مرجع ميزات CSS

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

استكشِف سير عمل جديدًا في هذا المرجع الشامل لميزات "أدوات مطوّري البرامج في 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، مرِّر مؤشر الماوس فوق اسم السمة في علامة التبويب الأنماط.

تلميح يتضمّن مستندات حول إحدى سمات 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>.

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

عرض قواعد CSS @

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

عرض قواعد @property

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

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

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

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

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

عرض قواعد ‎ @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. تعرض علامة التبويب العناصر > الأنماط هذه القاعدة في قسم مخصّص.

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

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

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

عرض توضيحي باستخدام أداة الربط مع 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 واستخدام ميزة "إكمال الرمز".

استخدام ميزة الإكمال التلقائي للرموز لإضافة سمة CSS

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

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

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

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

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

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

  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.

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

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

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

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

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

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

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

تبديل صف

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

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

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

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

  1. اختَر عنصرًا.
  2. انقر على قاعدة نمط جديدة قاعدة أنماط جديدة. تُدرج &quot;أدوات مطوّري البرامج&quot; قاعدة جديدة أسفل قاعدة 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. هناك المزيد من اختصارات لوحة المفاتيح لتغيير قيمة الزاوية. يمكنك الاطّلاع على مزيد من المعلومات في اختصارات لوحة المفاتيح في لوحة &quot;الأنماط&quot;.

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

يوفّر محرّر الظل واجهة مستخدم رسومية لتغيير تعريفات 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. انقر على الرمز لفتح محرِّر التخفيف: &quot;محرِّر التخفيف&quot; (Easing Editor)

استخدام الإعدادات المسبقة لضبط التوقيت

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

  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، اسحب إحدى نقاط التحكّم.

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

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

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

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

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

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

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

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

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