CSS وواجهة المستخدم
استكشِف الأدوات والتقنيات من Chrome لتحسين لغة CSS وتصميم واجهة المستخدم على موقعك الإلكتروني.
تحسين مهاراتك في تطوير واجهة المستخدم
أنماط شريط التمرير
يمكنك استخدام السمتَين
scrollbar-width وscrollbar-color لاختيار نمط أشرطة التمرير.
توازن التفاف النص في CSS
ظهرت لغة CSS في نمط الخط الكلاسيكي لكتابة فواصل الأسطر يدويًا للكتل النصية المتوازنة.
دليل ألوان CSS عالي الدقة
يوفر CSS Color 4 أدوات وإمكانات ألوان واسعة على الويب: المزيد من الألوان ووظائف المعالجة وتدرجات أفضل.
نموذج الكائن المكتوبة في CSS
يجلب نموذج الكائن القابل للترميز CSS (OM-Typed OM) الأنواع والطرق ونموذج الكائن المرن إلى العمل باستخدام قيم CSS.
بدء استخدام طلبات البحث عن الأنماط
يمكنك إجراء طلب بحث عن قيم نمط عنصر رئيسي باستخدام القاعدة @container.
تداخل خدمة مقارنة الأسعار (CSS)
تم دمج إحدى ميزات المعالجات التمهيدية لـ CSS المفضلة الآن في اللغة: قواعد الأنماط المتداخلة.
CSS @scope
تعرَّف على كيفية إنشاء أنماط ذات نطاق محدّد تختار العناصر فقط داخل شجرة فرعية من نموذج العناصر في المستند (DOM).
CSS color-mix()
يمكنك مزج الألوان في أي من مساحات الألوان المتوافقة من CSS مباشرةً.
مزيد من التحكم في تحديدات nth-child()
فلترة مجموعة من العناصر الفرعية مسبقًا قبل تطبيق منطق An+B عليها
أكورديون مفرط
يمكنك إنشاء قائمة أكورديون حصرية تحتوي على عناصر
<details> متعدّدة تتضمّن سمة name نفسها.
مقدمة عن inert
سمة inert هي سمة HTML عامّة تبسّط طريقة إزالة واستعادة أحداث إدخال المستخدم لأحد العناصر، بما في ذلك أحداث التركيز والأحداث من التكنولوجيا المساعِدة.
التفاف النص في CSS بتنسيق جميل
يمكنك تفعيل ميزة التفاف النص المحسَّن لزيادة جمال السرعة.
شبكة CSS في "أدوات مطوري البرامج"
طريقتنا في تصميم وتنفيذ دعم أدوات شبكة CSS في "أدوات مطوري البرامج".
إتاحة CSS-in-JS في "أدوات مطوري البرامج"
كيفية توافقنا مع CSS-in-JS في "أدوات مطوري البرامج" ومدى اختلافه عن CSS العادي
التنسيق
كيفية استخدام calc()
يمكنك تحديد الأحجام في CSS باستخدام مزيج من وحدات الحجم.
حدث لتثبيت موضع CSS
تسجيل الرسائل وتشغيل JavaScript.
إتاحة الوصول إلى المحتوى المصغَّر
من خلال مَعلمة discovery=until-found، يمكن لقيمة سمة ضمان إمكانية العثور على المحتوى وربطه ببعضها ضمن أقسام أكورديون.
الصور المتحركة على الويب
واجهة برمجة تطبيقات Web Animations
توفر واجهة برمجة تطبيقات Web Animations عناصر أساسية قوية لوصف الرسوم المتحركة الضرورية من JavaScript.
تأثيرات الصور المتحركة المتعددة
تتيح خاصية تركيب الصورة المتحركة التحكم في ما يجب أن يحدث عندما تؤثر حركات متعددة على نفس الخاصية في وقت واحد.
منحنيات الرسوم المتحركة المعقدة ذات الدالة line()
line() هي دالة إرخاء في CSS تتماشى خطيًا بين نقاطها، ما يسمح لك بإعادة إنشاء تأثيرات الارتداد والربيع.
الرسوم المتحركة المستندة إلى التمرير
يمكنك استخدام "المخططات الزمنية للتمرير" و"عرض المخططات الزمنية" لإنشاء صور متحركة يتم تمريرها تلقائيًا بطريقة توضيحية.
دورة تدريبية
تعلم التصميم سريع الاستجابة
اقرأ تاريخ التصميم سريع الاستجابة وألقِ نظرة على أساسيات التخطيطات سريعة الاستجابة. ستتعرّف على الصور سريعة الاستجابة وأسلوب الخط وإمكانية الوصول والمزيد.
دورة تدريبية
تعلُّم لغة CSS
ستتعلّم أساسيات CSS، مثل نموذج الصندوق، والتتالي والخصوصية، وflexbox، والشبكة، وz-index. وستتعرف على الدوال والخصائص المنطقية وغيرها لتقريب مهاراتك في مطور الواجهة الأمامية.