استخدام CSS
راجع حجم CSS المستخدم أثناء الفحص ونسبته لكل صفحة وملف أنماط. قد تحتاج الأنماط غير المستخدمة في هذا الفحص بعد تفاعل المستخدم أو في صفحة أخرى.
تدقيق CSS عبر الإنترنت
اعرف حجم CSS الذي تحمّله الصفحة والأنماط المستخدمة أثناء الفحص والقواعد المتكررة. راجع الألوان والخطوط والطبقات والأخطاء في تقرير واحد.
تنسيق النتيجة
يعرض التقرير مصادر CSS والمقاييس والإشارات
ابدأ بحجم CSS واستخدامه، ثم راجع الألوان والخطوط والطبقات وأخطاء التحقق.
بيانات توضيحية لشرح التقرير. تظهر نتائج صفحتك بعد الفحص.
خريطة مصادر أوراق الأنماط
قارن ملفات الأنماط الخارجية بالأنماط المضمّنة في الصفحة. يتضمن كل مصدر حجمه وحجم الكود المستخدم وغير المستخدم أثناء الفحص.
| المصدر | النوع | الاستخدام | غير مستخدم |
|---|---|---|---|
| app.css | خارجي | 48 KiB / 72 KiB | 72 KiB · 60% |
| components.css | خارجي | 32 KiB / 8 KiB | 8 KiB · 20% |
| الأنماط المضمّنة | مضمّن | 6 KiB / 2 KiB | 2 KiB · 25% |
- المصدر
- app.css
- النوع
- خارجي
- الاستخدام
- 48 KiB / 72 KiB
- غير مستخدم
- 72 KiB · 60%
- المصدر
- components.css
- النوع
- خارجي
- الاستخدام
- 32 KiB / 8 KiB
- غير مستخدم
- 8 KiB · 20%
- المصدر
- الأنماط المضمّنة
- النوع
- مضمّن
- الاستخدام
- 6 KiB / 2 KiB
- غير مستخدم
- 2 KiB · 25%
ابدأ بمصدر ملف الأنماط وتعريف متكرر. تحقق مما إذا كانت التكرارات تخص المكون نفسه والحالة نفسها. عدّل المصدر، ثم قارن تقريرًا جديدًا.
ما نفحصه
جرد كامل لـ CSS بدلاً من نصائح عامة
يجمع التقرير مصادر الأنماط وأحجامها واستخدام الكود وأولوية المحددات والتصريحات المتكررة وقيم التصميم وأخطاء التحقق.
الحجم والمصادر
نجمع الحجم الإجمالي لـ CSS وعدد مصادر أوراق الأنماط وأعداداً منفصلة لأوراق الأنماط المضمّنة والخارجية.
خصوصية المحددات
قارن الحد الأدنى والمتوسط والأقصى لخصوصية المحددات التي تساعد في تحديد أولوية القواعد. راجع المحددات الأكثر تعقيدًا بشكل منفصل.
التصريحات المتكررة و!important
راجع عدد القواعد والمحددات والتصريحات وأزواج الخاصية والقيمة المتكررة وأمثلة استخدام !important.
استعلامات الوسائط والبادئات
نعرض استعلامات الوسائط الأكثر تكراراً ونحصي خصائص CSS ذات بادئات البائعين: -webkit- و-moz- و-ms- و-o-.
الألوان والخطوط وz-index والأخطاء
يُخرج التقرير قيم الألوان الفريدة وقيم font-family المكتشفة وقيم z-index الرقمية وأمثلة على أخطاء التحقق من CSS.
كيف يعمل
من عنوان URL إلى ملخص CSS كامل للصفحة
أدخل رابط الصفحة. تفتحها Milten في المتصفح وتجمع ملفات الأنماط وتُعد التقرير. لا يلزم دمج الأداة في عملية البناء.
حمّل الصفحة واجمع CSS
يعرض التقرير عنوان URL المفحوص والتاريخ ومصادر الأنماط. ويفصل الأنماط المضمّنة في الصفحة عن ملفات الأنماط الخارجية.
قياس استخدام CSS وأولوية المحددات
راجع مقدار CSS المستخدم وعدد القواعد والتصريحات والمحددات ذات الخصوصية الأعلى.
إنشاء جداول لمراجعة CSS
راجع التصريحات المتكررة و!important واستعلامات الوسائط وبادئات المتصفحات والألوان والخطوط والطبقات وأخطاء CSS.
الأسئلة الشائعة
الأسئلة الشائعة حول تدقيق CSS
إجابات عن استخدام CSS وأولوية المحددات و!important ومحتوى التقرير ومدة الفحص.
كيف تؤثر CSS غير المستخدمة على السرعة؟
يقوم المتصفح بتنزيل CSS وتحليلها وتطبيقها قبل عرض الصفحة. كلما زادت القواعد غير الضرورية، زاد خطر تأخر العرض الأول وصعوبة صيانة الواجهة.
لماذا مراجعة تخصيص المحددات؟
تساعد الخصوصية في تحديد أولوية المحدد عند تعارض قواعد CSS. تزيد المحددات عالية الخصوصية صعوبة التعديل لاحقًا، إذ يتطلب تجاوزها قواعد أقوى.
هل يجب حذف كل تعريف يحتوي على !important؟
لا. يغيّر !important أولوية التعريف وقد يكون مقصودًا. يوضح التقرير المواضع التي تستحق البحث. راجع تدرّج الأنماط وحالات المكون قبل استبداله.
ما البيانات التي ستظهر في التقرير؟
يتضمن التقرير الرابط والتاريخ ومصادر الأنماط وأحجامها واستخدام الكود والمحددات وخصوصيتها والتصريحات المتكررة و!important واستعلامات الوسائط وبادئات المتصفحات والألوان والخطوط والطبقات وأخطاء CSS.
كم يستغرق فحص الصفحة؟
عادةً ما يستغرق فحص صفحة واحدة أقل من دقيقة. تعتمد المدة على عدد الموارد وظروف الشبكة والوقت الذي تستغرقه الصفحة للاستقرار بعد التحميل.
خدمات ذات صلة
ما يجب فحصه بعد هذه الخدمة
فحص JavaScript
تحقق من ملفات JavaScript وأخطاء التحميل والكود غير المستخدم أثناء التحميل. حدد البرامج النصية التي تحتاج إلى مراجعة إضافية.
فتحفحص HTML
اعثر على أخطاء HTML وبنية الصفحة المعقدة أكثر من اللازم. يحدد التقرير العناصر المتأثرة.
فتحقيم التصميم
اجمع ألوان الصفحة وخطوطها وأحجامها ومسافاتها. احصل على قائمة قيم للعمل على التصميم.
فتحإمكانية الوصول
اعثر على مشكلات إمكانية الوصول بفحص آلي واحصل على توصيات. يتطلب التقييم الكامل لإمكانية الوصول فحوصات يدوية أيضًا.
فتح