مرجع ميزات CSS

تعرَّف على مهام سير العمل الجديدة من خلال هذا المرجع الشامل لميزات "أدوات مطوري البرامج في Chrome" ذات الصلة عرض CSS وتغييرها.

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

اختيار عنصر

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

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

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

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

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

عرض CSS

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

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

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

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

في ما يلي بعض الأمثلة المميّزة:

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

عرض التلميحات مع وثائق CSS والخصوصية وقيم الخصائص المخصصة

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

الاطّلاع على مستندات CSS

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

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

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

لإعادة تشغيلها، تحقق من الإعدادات > الإعدادات المفضّلة > العناصر > عرض تلميح مستندات خدمة مقارنة الأسعار (CSS)

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

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

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

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

الاطّلاع على بيانات CSS غير الصالحة والملغاة وغير النشطة وغيرها من خدمات مقارنة الأسعار

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

راجِع المقالة فهم CSS في علامة التبويب "الأنماط".

عرض CSS المطبّق على أحد العناصر فقط

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

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

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

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

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

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

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

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

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

عرض قواعد CSS

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

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

عرض @property في القواعد

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

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

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

عرض @supports في القواعد

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

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

عرض @scope في القواعد

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

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

عرض القاعدة @scope في المعاينة التالية:

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

في هذا المثال، تلغي القاعدة @scope تعريف background-color CSS العام لجميع عناصر <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

العناصر > تساعد الأنماط في تحديد ما يلي والربط به:

• قيم السمة 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 محاكاة صفحة مركَّز عليها وتأكّد من اختيار عنصر الإدخال. يمكنك الآن فحص العنصر الموجود أسفله.

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

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

لتبديل فئة زائفة، مثل :active أو :focus أو :focus-within أو :target أو :hover أو :visited أو focus-visible:

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

في إطار العرض، ستلاحظ أنّ "أدوات مطوري البرامج" تطبّق تعريف background-color على العنصر، حتى إذا لم يتم تمرير مؤشر الماوس فوق العنصر.

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

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

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

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

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

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

   لقد اكتسبتُ نمط العنصر الزائف البارز لدى أحد والدَيّ. اختَرني.

2. حدد جزءًا من النص أعلاه.

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

عرض طبقات التدريج

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

لعرض طبقات الشلال، فحص العنصر التالي وافتح Elements > الأنماط:

في علامة التبويب الأنماط، اطّلِع على الطبقات الثلاث التدريجية وأنماطها: 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 إلى عنصر

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

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

يعمل التقليل أيضًا. ما عليك سوى استبدال كل مثيل من Up المذكور سابقًا بـ أسفل.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تبديل صف

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

محاذاة عناصر الشبكة ومحتواها مع Grid Editor (محرر الشبكة)

راجِع القسم المقابل في "فحص شبكة CSS".

تغيير الألوان باستخدام "Color Picker" (منتقي الألوان)

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

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

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

لفتح ساعة الزوايا:

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

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

   

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

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

   

4. يمكنك تغيير قيمة الزاوية من خلال النقر على دائرة ساعة الزوايا أو تمرير الماوس إلى لزيادة / تقليل قيمة الزاوية بمقدار 1.

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

تغيير المربّع وتظليل النص باستخدام "محرِّر الظل"

يوفّر محرِّر الظل واجهة مستخدم تصويرية (GUI) لتغيير بيانات 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. في محرّر تغيير السرعة، لضبط قيمة كلمة رئيسية، انقر على أحد أزرار أداة الاختيار:
   • خطي
   • إراحة للداخل
   • إراحة
   • إراحة

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

   • الإعدادات المسبقة الخطية: elastic أو bounce أو emphasized
   • الإعدادات المسبقة لـ Cubic Bezier:

الكلمة الرئيسية بالتوقيت	الإعدادات المسبقة	بيزيه المكعّب
إرخاء إلى الداخل والخارج	إلى الخارج، جيب الزاوية	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 باللون الأخضر.

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

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

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