مرجع ميزات CSS

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

اختيار عنصر

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

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

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

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

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

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

عرض CSS

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

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

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

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

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

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

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

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

عرض مستندات CSS

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

تلميح يتضمن مستندات حول خاصية CSS

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

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

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

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

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

تلميح يعرض وزن النوعية لمحدّد مطابق

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

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

قيمة خاصيّة مخصّصة في نصائح توضيحية

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

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

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

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

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

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

علامة التبويب "الأنماط التي تم احتسابها"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اطّلِع على قواعد at-rules التي تتضمّن العلامة @supports.

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

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

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

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

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

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

القاعدة @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.

قاعدة @font-palette-values

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

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

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

تتيح لك قاعدة 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 والعنصر الذي يتضمّن سمة استهداف النافذة المنبثقة

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

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

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

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

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

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

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

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

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

فلترة السمات المكتسَبة في علامة التبويب &quot;البيانات التي تم احتسابها&quot;

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

تجميع الخصائص التي تمت تصفيتها.

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

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

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

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

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

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

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

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

لتفعيل فئة زائفة أو إيقافها:

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

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

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

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

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

قسم &quot;فرض حالة عنصر محدّد&quot; في عنصر &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. نسخ القائمة المنسدلة لصفحات 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 إلى عنصر

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

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

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

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

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

  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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • ‫prefers-color-scheme: light يشير إلى أن المستخدم يفضل المظهر الفاتح.
    • 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.

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

اطّلِع على القسم المقابل في شبكة فحص 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. رمز &quot;أداة تعديل معدلات الاستبدال&quot;
  3. انقر على الرمز لفتح أداة تعديل معدلات الاستجابة: محرِّر التخفيف

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

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

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

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

    • الإعدادات المُسبَقة للمحتوى المباشر غير القابل للتقديم أو الإيقاف: elastic أو bounce أو emphasized
    • الإعدادات المسبقة لـ Cubic Bezier:
الكلمة الرئيسية المتعلّقة بالتوقيت الإعدادات المسبقة منحنيات 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)
In Out, Back 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، اسحب إحدى نقاط التحكّم.

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

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

(تجريبي) نسخ تغييرات CSS

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

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

انسخ تغييرًا في تعريف CSS.

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

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

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