اكتشِف مهام سير العمل الجديدة في هذا المرجع الشامل لميزات "أدوات مطوري البرامج في 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 التي تمّ تطبيقها على أحد العناصر.
- اختيار عنصر
- انتقِل إلى علامة التبويب العناصر المحسوبة في لوحة العناصر.
ضع علامة في مربّع الاختيار عرض الكل للاطّلاع على جميع المواقع.
يمكنك الاطّلاع على مقالة فهم لغة CSS في علامة التبويب "محسوبة".
عرض خصائص CSS بترتيب أبجدي
استخدِم علامة التبويب الحساب. راجِع عرض CSS المطبَّقة على عنصر فقط.
عرض مواقع CSS المُكتسَبة
ضَع علامة في مربّع الاختيار عرض الكل في علامة التبويب المحسوبة. راجِع عرض CSS المطبَّقة على عنصر فقط.
بدلاً من ذلك، يمكنك الانتقال إلى علامة التبويب الأنماط والعثور على الأقسام المسماة Inherited from <element_name>
.
عرض قواعد خدمة مقارنة الأسعار (CSS)
القواعد هي عبارات CSS تتيح لك التحكم في سلوك CSS. العناصر > الأنماط تعرض القواعد التالية في الأقسام المخصّصة:
الاطّلاع على @property
قواعد ضمن القواعد
تتيح لك @property
CSS في القاعدة تحديد خصائص CSS المخصصة بشكل صريح وتسجيلها في ورقة أنماط بدون تشغيل أي JavaScript.
مرِّر مؤشر الماوس فوق اسم هذه الخاصية في علامة التبويب الأنماط للاطّلاع على تلميح يتضمّن قيمة الموقع وأدوات الوصف ورابطًا إلى تسجيله في قسم @property
القابل للتصغير في أسفل علامة التبويب الأنماط.
لتعديل قاعدة @property
، انقر مرّتين على اسمها أو قيمتها.
الاطّلاع على @supports
قواعد ضمن القواعد
تعرض علامة التبويب الأنماط قواعد CSS لـ @supports
إذا تم تطبيقها على عنصر. على سبيل المثال، افحص العنصر التالي:
إذا كان المتصفّح يتيح استخدام الوظيفة lab()
، سيظهر العنصر باللون الأخضر، وسيصبح لونه أرجوانيًا.
الاطّلاع على @scope
قواعد ضمن القواعد
تعرض علامة التبويب الأنماط قواعد CSS @scope
إذا تم تطبيقها على عنصر.
تشكل قواعد @scope
الجديدة جزءًا من مواصفات المستوى 6 من التوريث والتسلسل التتالي في CSS. تتيح لك هذه القواعد تحديد نطاق أنماط CSS، أي تطبيق الأنماط بشكل صريح على عناصر معيّنة.
يمكنك الاطّلاع على قاعدة @scope
في المعاينة التالية:
- افحص النص الظاهر على البطاقة في المعاينة.
- في علامة التبويب الأنماط، ابحث عن القاعدة
@scope
.
في هذا المثال، تلغي القاعدة @scope
إعلان CSS background-color
العام لجميع عناصر <p>
داخل العناصر التي تحتوي على فئة card
.
لتعديل قاعدة @scope
، انقر عليها مرّتين.
الاطّلاع على @font-palette-values
قواعد ضمن القواعد
تتيح لك @font-palette-values
CSS في القاعدة تخصيص القيم التلقائية للسمة font-palette
. العناصر > الأنماط تعرض هذه القاعدة في قسم مخصص.
عرض القسم "@font-palette-values
" في المعاينة التالية:
- افحص السطر الثاني من النص في المعاينة.
- في الأنماط، ابحث عن قسم
@font-palette-values
.
في هذا المثال، تلغي قيم لوحة الخطوط --New
القيم التلقائية للخط الملوّن.
لتعديل القيم المخصّصة، انقر عليها مرّتين.
الاطّلاع على @position-try
قواعد ضمن القواعد
تتيح لك قاعدة @position-try
في CSS وسمة position-try-options
تحديد مواضع ارتساء بديلة للعناصر. لمزيد من المعلومات، يمكنك الاطّلاع على مقالة مقدمة حول واجهة برمجة تطبيقات تحديد مواضع الإعلانات الثابتة في CSS.
العناصر > الأنماط تحمِل قيم position-try-options
وتربط كل خيار بقسم @position-try --name
مخصص.
افحص قيم position-try-options
وأقسام @position-try
في المعاينة التالية:
- في المعاينة، افتح القائمة الفرعية، وهي انقر على حسابك ثم المتجر.
- افحص العنصر باستخدام السمة
id="submenu"
في المعاينة. - في الأنماط، ابحث عن السمة
position-try-options
وانقر على قيمتها--bottom
. تنقلك علامة التبويب الأنماط إلى قسم@position-try
المقابل.
لتعديل القيم في القسم، انقر مرّتين عليها.
عرض نموذج المربّع لعنصر
لعرض نموذج المربع لعنصر، انتقل إلى علامة التبويب الأنماط وانقر على الزر إظهار الشريط الجانبي في شريط الإجراءات.
لتغيير قيمة، انقر مرّتين عليها.
البحث في CSS لعنصر وفلترته
استخدِم المربّع فلتر في علامتَي التبويب الأنماط والحساب المحسوب للبحث عن خصائص أو قيم CSS معيّنة.
للبحث أيضًا في الخصائص المكتسَبة في علامة التبويب المحسوبة، ضَع علامة في مربّع الاختيار عرض الكل.
للانتقال إلى علامة التبويب البيانات المحسوبة، اجمع السمات التي تمت فلترتها في فئات قابلة للتصغير عن طريق وضع علامة في المربّع مجموعة.
محاكاة صفحة مركّزة
في حال بدّلت التركيز من الصفحة إلى "أدوات مطوري البرامج"، تختفي بعض عناصر التراكب تلقائيًا إذا تم تشغيلها بواسطة التركيز. على سبيل المثال، القوائم المنسدلة أو القوائم أو أدوات اختيار التاريخ ويتيح لك الخيار check_box محاكاة صفحة مركّزة تصحيح أخطاء هذا العنصر كما لو كان محل التركيز.
جرِّب محاكاة صفحة مركّزة على صفحة العرض التوضيحي هذه:
- التركيز على عنصر الإدخال يظهر عنصر آخر تحتها.
- افتح "أدوات مطوري البرامج". أصبح قسم "أدوات مطوري البرامج" محلّ التركيز الآن بدلاً من الصفحة، وبالتالي يختفي العنصر من جديد.
- في العناصر > الأنماط، انقر على :hov، وضَع علامة في مربّع check_box محاكاة صفحة مركزة وتأكَّد من أنّ العنصر محدّد. يمكنك الآن فحص العنصر الموجود أسفله.
يمكنك أيضًا العثور على الخيار نفسه في لوحة العرض.
إيقاف/تفعيل الفئة الزائفة
لإيقاف فئة زائفة، مثل :active
أو :focus
أو :focus-within
أو :target
أو :hover
أو :visited
أو focus-visible
:
- اختيار عنصر
- في لوحة العناصر، انتقِل إلى علامة التبويب الأنماط.
- انقر على :hov.
- تحقَّق من الفئة الزائفة التي تريد تفعيلها.
في إطار العرض، يظهر أنّ "أدوات مطوري البرامج" تطبّق تعريف background-color
على العنصر، مع أنّ هذا العنصر لم يتم تمريره فوقه.
يمكنك الاطّلاع على مقالة إضافة حالة زائفة إلى صف دراسي للحصول على دليل توجيهي تفاعلي.
عرض العناصر المميزة الزائفة والمكتسَبة
العناصر الزائفة تتيح لك تصميم أجزاء معيّنة من العناصر. تمييز العناصر الزائفة هي أجزاء من المستند بالحالة "مختارة"، ويتم تمييزها كعناصر "مميزة" للإشارة إلى هذه الحالة للمستخدم. على سبيل المثال، هذه العناصر الزائفة هي ::selection
و::spelling-error
و::grammar-error
و::highlight
.
كما هو مذكور في المواصفات، عندما تتعارض أنماط متعددة، يحدد التتالي النمط الفائز.
لفهم بشكل أفضل الاكتساب وأولوية القواعد، يمكنك الاطّلاع على العناصر الزائفة الموروثة:
-
اكتسبتُ نمط العنصر الصوري المميّز لدى أحد والدَيّ. اختَرني.
اختَر جزءًا من النص أعلاه.
في علامة التبويب الأنماط، مرِّر لأسفل للعثور على القسم
Inherited from ::selection pseudo of...
.
عرض الطبقات المتتالية
تتيح طبقات التتالي تحكمًا أكثر وضوحًا في ملفات CSS لمنع تعارضات الأنماط. ويكون هذا مفيدًا في قواعد الرموز الكبيرة وأنظمة التصميم وعند إدارة أنماط الجهات الخارجية في التطبيقات.
لعرض طبقات التتالي، inspect العنصر التالي وافتح العناصر > الأنماط.
في علامة التبويب Styles (الأنماط)، يمكنك الاطّلاع على الطبقات الثلاث المتتالية وأنماطها: page
وcomponent
وbase
.
لعرض ترتيب الطبقات، انقر على اسم الطبقة أو على الزر تبديل عرض طبقات CSS.
تتمتع طبقة page
بأعلى خصوصية، وبالتالي تكون خلفية العنصر خضراء.
عرض صفحة في وضع الطباعة
لعرض صفحة في وضع الطباعة:
- افتح قائمة الطلبات.
- ابدأ كتابة
Rendering
واخترShow Rendering
. - بالنسبة إلى القائمة المنسدلة محاكاة وسائط CSS، اختَر طباعة.
الاطّلاع على خدمات مقارنة الأسعار (CSS) المستخدمة وغير المستخدَمة في علامة التبويب "التغطية"
تعرض علامة التبويب "التغطية" خدمات CSS التي تستخدمها الصفحة.
- اضغط على Command+Shift+P (نظام التشغيل Mac) أو Control+Shift+P (في أنظمة التشغيل Windows وLinux وChromeOS) بينما يكون التركيز على "أدوات مطوّري البرامج" لفتح قائمة الأوامر.
ابدأ الكتابة باللغة
coverage
.انقر على عرض التغطية. ستظهر علامة التبويب "التغطية".
انقر على إعادة التحميل. وتوفّر عمليات إعادة تحميل الصفحة وعلامة التبويب التغطية نظرة عامة على مقدار محتوى CSS (وJavaScript) الذي يتم استخدامه من كل ملف يحمِّله المتصفح.
ويمثل اللون الأخضر CSS المستخدمة. ويمثّل اللون الأحمر لغة CSS غير المستخدَمة.
انقر على ملف CSS للاطّلاع على تفاصيل خدمة CSS التي يستخدمها في المعاينة أعلاه سطرًا بسطر.
في لقطة الشاشة، لا يتم استخدام الأسطر من 55 إلى 57 ومن 65 إلى 67 من
devsite-google-blue.css
، في حين يتم استخدام الأسطر من 59 إلى 63.
فرض وضع معاينة الطباعة
يُرجى الاطّلاع على المقالة فرض تفعيل "وضع معاينة الطباعة" على أدوات مطوّري البرامج.
نسخ CSS
من قائمة منسدلة واحدة في علامة التبويب الأنماط، يمكنك نسخ قواعد وإعلانات وخصائص وقيم CSS منفصلة.
بالإضافة إلى ذلك، يمكنك نسخ خصائص CSS في بنية JavaScript. ويكون هذا الخيار مفيدًا إذا كنت تستخدم مكتبات CSS-in-JS.
لنسخ CSS:
- اختيار عنصر
- في علامة التبويب العناصر > الأنماط، انقر بزر الماوس الأيمن على إحدى سمات CSS.
حدد أحد الخيارات التالية من القائمة المنسدلة:
- نسخ البيان لنسخ السمة وقيمتها في بنية CSS:
css property: value;
- نسخ الموقع. يتم نسخ اسم
property
فقط. - نسخ القيمة: سيتم نسخ
value
فقط. - نسخ القاعدة سيتم نسخ قاعدة CSS بالكامل:
css selector[, selector] { property: value; property: value; ... }
- انسخ التعريف بتنسيق JavaScript. لنسخ السمة وقيمتها في بنية JavaScript:
js propertyInCamelCase: 'value'
- يُرجى نسخ كل البيانات. تنسخ جميع السمات وقيمها في قاعدة CSS:
css property: value; property: value; ...
انسخ جميع التعريفات بتنسيق JavaScript. نسخ جميع الخصائص وقيمها في بنية JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
نسخ كل تغييرات خدمة مقارنة الأسعار (CSS) نسخ التغييرات التي تجريها في علامة التبويب الأنماط في جميع التعريفات
عرض القيمة المحسوبة ينقلك إلى علامة التبويب الحسابية.
- نسخ البيان لنسخ السمة وقيمتها في بنية CSS:
تغيير CSS
يسرد هذا القسم جميع الطرق التي يمكنك من خلالها تغيير CSS في العناصر > الأنماط.
بالإضافة إلى ذلك، يمكنك إجراء ما يلي:
إضافة تعريف CSS إلى عنصر
ونظرًا لأن ترتيب التعريفات يؤثر في كيفية تصميم العنصر، يمكنك إضافة تعريفات بطرق مختلفة:
- إضافة بيان مضمّن: تعادل إضافة سمة
style
إلى HTML للعنصر. - إضافة تعريف إلى قاعدة نمط
ما سير العمل الذي يجب أن تستخدمه؟ بالنسبة إلى معظم السيناريوهات، ربما تريد استخدام سير عمل البيان المضمّن. التعريفات المضمّنة لها خصوصية أعلى من الخارجية، لذا فإن سير العمل المضمّن يضمن أن تدخل التغييرات حيز التنفيذ في العنصر كما تتوقع. راجِع أنواع أدوات الاختيار لمزيد من المعلومات عن الدقة.
إذا كنت تصحح أخطاء أنماط عنصر ما وتحتاج إلى اختبار ما يحدث على وجه التحديد عند تحديد تعريف في أماكن مختلفة، استخدِم سير العمل الآخر.
إضافة تعريف مضمّن
لإضافة تعريف مضمّن:
- اختيار عنصر
- في علامة التبويب Styles (الأنماط)، انقر بين قوسَي القسم element.style. يركز المؤشر، مما يسمح لك بإدخال نص.
- أدخِل اسم الموقع واضغط على Enter.
أدخِل قيمة صالحة لهذه السمة واضغط على Enter. في شجرة DOM، يمكنك التأكد من إضافة السمة
style
إلى العنصر.في لقطة الشاشة، تم تطبيق السمتَين
margin-top
وbackground-color
على العنصر الذي تم اختياره. في شجرة نموذج العناصر في المستند (DOM)، يمكنك الاطّلاع على التعريفات التي تظهر في السمةstyle
الخاصة بالعنصر.
إضافة تعريف إلى قاعدة نمط
لإضافة تعريف إلى قاعدة نمط حالية:
- اختيار عنصر
- في علامة التبويب الأنماط، انقر بين قوسي قاعدة النمط التي تريد إضافة التعريف إليها. يركز المؤشر، مما يسمح لك بإدخال نص.
- أدخِل اسم الموقع واضغط على Enter.
- أدخِل قيمة صالحة لهذه السمة واضغط على 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 مذكور سابقًا بالزر أسفل.
تغيير قيم الطول
يمكنك استخدام المؤشر لتغيير أي خاصية بطولها، مثل العرض أو الارتفاع أو المساحة المتروكة أو الهامش أو الحد.
لتغيير وحدة الطول:
- مرِّر مؤشر الماوس فوق اسم الوحدة، ولاحظ أنه تحتها خط.
انقر على اسم الوحدة لاختيار وحدة من القائمة المنسدلة.
لتغيير قيمة الطول:
- مرر مؤشر الماوس فوق قيمة الوحدة ولاحظ أن المؤشر يتغير إلى سهم أفقي برأسين.
اسحب أفقيًا لزيادة القيمة أو خفضها.
لضبط القيمة بمقدار 10، اضغط مع الاستمرار على Shift عند السحب.
إضافة فئة إلى عنصر
لإضافة فئة إلى عنصر:
- اختَر العنصر في شجرة DOM.
- انقر على .cls.
- أدخِل اسم الصف في المربّع إضافة صف جديد.
- اضغط على Enter.
يمكنك محاكاة الإعدادات المفضّلة للمظهر الفاتح والداكن وتفعيل الوضع الداكن التلقائي.
لتفعيل الوضع الداكن التلقائي أو محاكاة المظاهر الفاتحة أو الداكنة التي يفضّلها المستخدم، يُرجى اتّباع الخطوات التالية:
- في علامة التبويب العناصر > الأنماط، انقر على التبديل بين محاكاة العرض الشائعة.
اختَر واحدًا مما يلي من القائمة المنسدلة:
- ppris-color-scheme: light تشير هذه السمة إلى أنّ المستخدم يفضّل المظهر الفاتح.
- prefs-color-scheme: داكن. تشير هذه السمة إلى أنّ المستخدم يفضّل المظهر الداكن.
- الوضع الداكن التلقائي: يؤدي هذا الخيار إلى عرض صفحتك في الوضع الداكن حتى إذا لم تنفّذها. بالإضافة إلى ذلك، يتم ضبط
prefers-color-scheme
علىdark
تلقائيًا.
هذه القائمة المنسدلة هي اختصار لخيارَي محاكاة ميزة وسائط CSS prefers-color-scheme
وتفعيل الوضع الداكن التلقائي في علامة التبويب العرض.
إيقاف صف أو إيقافه
لتفعيل فئة في أحد العناصر أو إيقافها:
- اختَر العنصر في شجرة DOM.
- افتح القسم فئات العناصر. راجِع إضافة فئة إلى عنصر. توجد أسفل المربع إضافة صف جديد جميع الفئات التي يتم تطبيقها على هذا العنصر.
- ضَع علامة في مربّع الاختيار بجانب الصف الدراسي الذي تريد تفعيله أو إيقافه.
إضافة قاعدة نمط
لإضافة قاعدة نمط جديدة:
- اختيار عنصر
- انقر على قاعدة أنماط جديدة . تُدرج "أدوات مطوري البرامج" قاعدة جديدة أسفل القاعدة element.style.
في لقطة الشاشة، تضيف أدوات مطوّري البرامج قاعدة النمط h1.devsite-page-title
بعد النقر على قاعدة أنماط جديدة.
اختيار ورقة الأنماط التي تريد إضافة قاعدة إليها
عند إضافة قاعدة نمط جديدة، انقر مع الاستمرار على قاعدة أنماط جديدة لاختيار ورقة الأنماط التي تريد إضافة قاعدة النمط إليها.
إيقاف/تفعيل بيان
لتفعيل بيان واحد أو إيقافه، اتّبِع الخطوات التالية:
- اختيار عنصر
- في علامة التبويب الأنماط، مرِّر مؤشر الماوس فوق القاعدة التي تعرِّف البيان. تظهر مربعات الاختيار بجانب كل تصريح.
- ضَع علامة في مربّع الاختيار بجانب البيان أو أزِل العلامة من المربّع. عند محو بيان، تشطبه "أدوات مطوري البرامج" للإشارة إلى أنه لم يعد نشطًا.
في لقطة الشاشة، إنّ السمة color
للعنصر المحدّد حاليًا غير مفعّلة.
تعديل العناصر الزائفة في ::view-transition
أثناء الصورة المتحركة
راجِع القسم المقابل في الصور المتحركة.
للحصول على مزيد من المعلومات، يُرجى الاطّلاع على عمليات نقل سلسة وبسيطة باستخدام واجهة برمجة تطبيقات View Transitions API.
محاذاة عناصر الشبكة ومحتواها مع Grid Editor (محرر الشبكة)
اطّلِع على القسم المقابل في شبكة فحص CSS.
تغيير الألوان باستخدام "Color Picker" (منتقي الألوان)
راجِع فحص وتصحيح الأخطاء في الألوان العالية الدقة وغير العالية الدقة باستخدام "أداة اختيار الألوان".
تغيير قيمة الزاوية باستخدام الساعة بزاوية
توفّر ساعة الزاوية واجهة مستخدم رسومية لتغيير <angle>
في قيم خصائص CSS.
لفتح الساعة التي تعمل مع الزاوية:
- اختيار عنصر يتضمن تعريف الزاوية
في علامة التبويب الأنماط، ابحث عن تعريف
transform
أوbackground
الذي تريد تغييره. انقر على المربّع معاينة الزاوية بجانب قيمة الزاوية.الساعات الصغيرة على يسار
-5deg
و0.25turn
هي معاينات الزاوية.انقر على المعاينة لفتح الساعة بزاوية.
يمكنك تغيير قيمة الزاوية من خلال النقر على دائرة زاوية الساعة أو تمرير الماوس لزيادة أو خفض قيمة الزاوية بمقدار 1.
هناك المزيد من اختصارات لوحة المفاتيح لتغيير قيمة الزاوية. تعرّف على المزيد في اختصارات لوحة المفاتيح للوحة "الأنماط".
تغيير المربعات وتظليل النصوص باستخدام "محرِّر التظليل"
يوفّر محرِّر الظل واجهة مستخدم رسومية لتغيير بيانات مقارنة الأسعار text-shadow
وbox-shadow
.
لتغيير الظلال باستخدام أداة تعديل الظل:
اختيار عنصر باستخدام بيان الظل على سبيل المثال، حدد العنصر التالي.
في علامة التبويب الأنماط، ابحث عن رمز الظل بجانب بيان
text-shadow
أوbox-shadow
.انقر على رمز الظل لفتح محرِّر الظل.
تغيير خصائص الظل:
- النوع (فقط لـ
box-shadow
). اختر خارجية أو قائمة داخلية. - إزاحة X وY. اسحب النقطة الزرقاء أو حدِّد قيمًا.
- التمويه: اسحب شريط التمرير أو حدِّد قيمة.
- نطاق (للنطاق
box-shadow
فقط). اسحب شريط التمرير أو حدِّد قيمة.
- النوع (فقط لـ
لاحِظ التغييرات التي يتم تطبيقها على العنصر.
تعديل توقيتات الرسوم المتحركة والانتقالات باستخدام "محرِّر تعديل السرعة"
توفِّر محرّرة السرعة واجهة مستخدم تصويرية لتغيير قيمتَي transition-timing-function
وanimation-timing-function
.
لفتح محرّر تعديل السرعة:
- اختَر عنصرًا يتضمّن تعريف دالة التوقيت، مثل العنصر
<body>
على هذه الصفحة. - في علامة التبويب الأنماط، ابحث عن رمز باللون الأرجواني بجانب نماذج
transition-timing-function
أو نماذجanimation-timing-function
أو السمة المختصرةtransition
. - انقر على الرمز لفتح محرِّر التخفيف:
استخدام الإعدادات المسبقة لضبط التوقيتات
لتعديل التوقيتات بنقرة واحدة، استخدِم الإعدادات المسبقة في محرّر تعديل السرعة:
- في محرّر تعديل السرعة، لضبط قيمة الكلمة الرئيسية، انقر على أحد أزرار أداة الاختيار:
- الخطية
- إراحة للداخل والخارج
- إراحة
- إراحة
في مبدِّل الإعدادات المسبقة، انقر على الزر أو لاختيار أحد الإعدادات المسبقة التالية:
- الإعدادات المسبقة للمساواة بين نقاط الاتصال:
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) |
|
داخلي، مكعّب | 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.
بالإضافة إلى ذلك، يمكنك تتبُّع التغييرات التي تجريها باستخدام علامة التبويب التغييرات.