استكشِف الأدوات والتقنيات من Chrome لتحسين لغة CSS وتصميم واجهة المستخدم على موقعك الإلكتروني.

تحسين مهاراتك في تطوير واجهة المستخدم

يمكنك استخدام السمتَين scrollbar-width وscrollbar-color لاختيار نمط أشرطة التمرير.
ظهرت لغة CSS في نمط الخط الكلاسيكي لكتابة فواصل الأسطر يدويًا للكتل النصية المتوازنة.
يوفر CSS Color 4 أدوات وإمكانات ألوان واسعة على الويب: المزيد من الألوان ووظائف المعالجة وتدرجات أفضل.
يجلب نموذج الكائن القابل للترميز CSS (OM-Typed OM) الأنواع والطرق ونموذج الكائن المرن إلى العمل باستخدام قيم CSS.
يمكنك إجراء طلب بحث عن قيم نمط عنصر رئيسي باستخدام القاعدة @container.
تم دمج إحدى ميزات المعالجات التمهيدية لـ CSS المفضلة الآن في اللغة: قواعد الأنماط المتداخلة.
تعرَّف على كيفية إنشاء أنماط ذات نطاق محدّد تختار العناصر فقط داخل شجرة فرعية من نموذج العناصر في المستند (DOM).
يمكنك مزج الألوان في أي من مساحات الألوان المتوافقة من CSS مباشرةً.
فلترة مجموعة من العناصر الفرعية مسبقًا قبل تطبيق منطق An+B عليها
يمكنك إنشاء قائمة أكورديون حصرية تحتوي على عناصر <details> متعدّدة تتضمّن سمة name نفسها.
سمة inert هي سمة HTML عامّة تبسّط طريقة إزالة واستعادة أحداث إدخال المستخدم لأحد العناصر، بما في ذلك أحداث التركيز والأحداث من التكنولوجيا المساعِدة.
يمكنك تفعيل ميزة التفاف النص المحسَّن لزيادة جمال السرعة.
طريقتنا في تصميم وتنفيذ دعم أدوات شبكة CSS في "أدوات مطوري البرامج".
كيفية توافقنا مع CSS-in-JS في "أدوات مطوري البرامج" ومدى اختلافه عن CSS العادي

Shadow DOM

طريقة جديدة لتنفيذ Shadow DOM واستخدامه مباشرةً بتنسيق HTML.
حالة إمكانية التشغيل التفاعلي الحالية للأسماء التي حدّدها المؤلف وshadow DOM.

التنسيق

يمكنك تحديد الأحجام في CSS باستخدام مزيج من وحدات الحجم.
تسجيل الرسائل وتشغيل JavaScript.
من خلال مَعلمة discovery=until-found، يمكن لقيمة سمة ضمان إمكانية العثور على المحتوى وربطه ببعضها ضمن أقسام أكورديون.

دراسات حالة حول صفحات CSS وواجهة المستخدم

ما هي إمكانات واجهة مستخدم الويب بالضبط وكيف يمكنها تحسين مسار الإحالات الناجحة؟ ما هي فوائد استخدام هذه الميزات.
اكتشِف مزايا الصور المتحركة التي تعتمد على التمرير في Policybazaar وredBus وTokopedia.
تستخدم كل من RedBus و Policybazaar وTokopedia واجهة برمجة التطبيقات View Transitions API وتستفيد من أداء أفضل وواجهة مستخدم سلسة.
تستخدم Tokopedia واجهة برمجة التطبيقات Popover API لتقليل عدد الرموز البرمجية في تطبيقها.

الصور المتحركة على الويب

توفر واجهة برمجة تطبيقات Web Animations عناصر أساسية قوية لوصف الرسوم المتحركة الضرورية من JavaScript.
تتيح خاصية تركيب الصورة المتحركة التحكم في ما يجب أن يحدث عندما تؤثر حركات متعددة على نفس الخاصية في وقت واحد.
line() هي دالة إرخاء في CSS تتماشى خطيًا بين نقاطها، ما يسمح لك بإعادة إنشاء تأثيرات الارتداد والربيع.
يمكنك استخدام "المخططات الزمنية للتمرير" و"عرض المخططات الزمنية" لإنشاء صور متحركة يتم تمريرها تلقائيًا بطريقة توضيحية.
دورة تدريبية
اقرأ تاريخ التصميم سريع الاستجابة وألقِ نظرة على أساسيات التخطيطات سريعة الاستجابة. ستتعرّف على الصور سريعة الاستجابة وأسلوب الخط وإمكانية الوصول والمزيد.
دورة تدريبية
ستتعلّم أساسيات CSS، مثل نموذج الصندوق، والتتالي والخصوصية، وflexbox، والشبكة، وz-index. وستتعرف على الدوال والخصائص المنطقية وغيرها لتقريب مهاراتك في مطور الواجهة الأمامية.