يقدم هذا الدليل مرجعًا شاملاً لدعم CSS عبر جميع المتصفحات، مما يساعد المطورين على التخطيط لتوافق أنماطهم عبر المتصفحات بكفاءة. يغطي الدليل كل شيء من الخصائص الأساسية لـ CSS إلى الميزات الحديثة مثل Grid وFlexbox وPseudo-classes من CSS4، مع توفير أرقام الإصدارات العملية للمتصفحات الرئيسية مثل Chrome وFirefox وSafari وEdge وInternet Explorer وiOS Safari وAndroid. باستخدام هذا المرجع، يمكن للمطورين تحديد الخصائص التي تحتاج إلى نسخ احتياطية أو بادئات أو حلول بديلة بسهولة. تم تنظيم الدليل حسب فئات الميزات لتمكين البحث السريع، مما يضمن تصميمات متجاوبة ومتوافقة مع جميع الأجهزة.
📊 Basic CSS Properties Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| color |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
دعم شامل |
| background-color |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
دعم شامل |
| font-family |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
دعم شامل |
| margin |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
دعم شامل |
| padding |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
دعم شامل |
| border |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
دعم شامل |
| width |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
دعم شامل |
| height |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
دعم شامل |
| display |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
دعم شامل |
| position |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 2 |
دعم شامل |
| float |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
دعم شامل |
📊 CSS3 Properties Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| border-radius |
5 |
4 |
5 |
12 |
9 |
4 |
2.1 |
CSS3 |
يتطلب بادئة -webkit- للإصدارات القديمة |
| box-shadow |
10 |
4 |
5.1 |
12 |
9 |
5 |
4 |
CSS3 |
يتطلب بادئة -webkit- للإصدارات القديمة |
| text-shadow |
2 |
3.5 |
4 |
12 |
10 |
4 |
2.1 |
CSS3 |
لا يحتاج بادئة |
| opacity |
1 |
1 |
2 |
12 |
9 |
2 |
1 |
CSS3 |
استخدام filter: alpha() للنسخ القديمة من IE8 |
| rgba() |
1 |
3 |
3.1 |
12 |
9 |
3.2 |
2.1 |
CSS3 |
استخدام hex كنسخة احتياطية للمتصفحات القديمة |
| transform |
36 |
16 |
9 |
12 |
9 |
9 |
3 |
CSS3 |
يتطلب بادئة -webkit- للإصدارات القديمة |
| transition |
26 |
16 |
9 |
12 |
10 |
9 |
4 |
CSS3 |
يتطلب بادئة -webkit- للإصدارات القديمة |
| linear-gradient |
26 |
16 |
7 |
12 |
10 |
7 |
4.4 |
CSS3 |
متطلبات بادئة واسعة |
📊 Flexbox Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| display: flex |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE10-11 تستخدم -ms-flex |
| flex-direction |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE يستخدم صياغة مختلفة |
| flex-wrap |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE11+ فقط |
| justify-content |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE يستخدم -ms-flex-pack |
| align-items |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE يستخدم -ms-flex-align |
| flex-grow |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE يستخدم -ms-flex-positive |
| flex-shrink |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE يستخدم -ms-flex-negative |
| order |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE يستخدم -ms-flex-order |
📊 CSS Grid Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| display: grid |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE10-11 تستخدم صياغة قديمة مع -ms- |
| grid-template-columns |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE يستخدم -ms-grid-columns |
| grid-template-rows |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE يستخدم -ms-grid-rows |
| grid-gap |
57 |
52 |
10.1 |
16 |
No |
10.3 |
57 |
CSS3 |
استخدام gap للصياغة الحديثة |
| grid-column |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE يستخدم -ms-grid-column |
| grid-row |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE يستخدم -ms-grid-row |
| justify-items |
57 |
52 |
10.1 |
16 |
11 |
10.3 |
57 |
CSS3 |
دعم محدود في IE |
📊 Modern CSS Features Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| custom properties |
49 |
31 |
9.1 |
16 |
No |
9.3 |
49 |
CSS3 |
غير مدعومة في IE |
| calc() |
26 |
16 |
7 |
12 |
9 |
7 |
4.4 |
CSS3 |
دعم محدود للنسخ القديمة |
| clamp() |
79 |
75 |
13.1 |
79 |
No |
13.4 |
79 |
CSS4 |
مدعومة في المتصفحات الحديثة فقط |
| filter |
53 |
35 |
9.1 |
12 |
No |
9.3 |
53 |
CSS3 |
دعم محدود في IE باستخدام -ms-filter |
| clip-path |
55 |
3.5 |
13.1 |
12 |
No |
13.1 |
55 |
CSS3 |
يتطلب بادئة -webkit- |
| object-fit |
32 |
36 |
10 |
16 |
No |
10 |
32 |
CSS3 |
غير مدعومة في IE |
| aspect-ratio |
88 |
89 |
15 |
88 |
No |
15 |
88 |
CSS4 |
مدعومة في المتصفحات الحديثة فقط |
📊 Pseudo-class Support
| Selector |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| :hover |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS1 |
دعم شامل |
| :focus |
1 |
1 |
1 |
12 |
8 |
1 |
1 |
CSS2 |
دعم شامل |
| :first-child |
1 |
1 |
3 |
12 |
7 |
1 |
1 |
CSS2 |
دعم شامل |
| :last-child |
1 |
1 |
3 |
12 |
9 |
1 |
1 |
CSS3 |
IE9+ فقط |
| :nth-child() |
1 |
3.5 |
3 |
12 |
9 |
3.2 |
1 |
CSS3 |
IE9+ فقط |
| :not() |
1 |
1 |
3.2 |
12 |
9 |
3.2 |
1 |
CSS3 |
دعم محدود في IE9+ |
| :focus-visible |
86 |
85 |
15.4 |
86 |
No |
15.4 |
86 |
CSS4 |
مدعومة في المتصفحات الحديثة |
| :has() |
105 |
121 |
15.4 |
105 |
No |
15.4 |
105 |
CSS4 |
مدعومة في المتصفحات الحديثة جداً |
/* إعادة ضبط CSS عبر المتصفحات */
* {
box-sizing: border-box;
}
/* Flexbox مع النسخ الاحتياطية */
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Grid مع النسخ الاحتياطية لـ IE */
.grid {
display: -ms-grid;
display: grid;
}
لتأمين أقصى توافق عبر المتصفحات، يجب دائمًا توفير نسخ احتياطية للخصائص الحديثة واستخدام نهج التحسين التدريجي. من الضروري اختبار التصميم على المتصفحات المستهدفة، خاصة Safari على الأجهزة المحمولة وIE. استخدم معالجات CSS أو أدوات Autoprefixer لتطبيق البادئات تلقائيًا للمتصفحات القديمة. استخدم قاعدة @supports لتطبيق الميزات الحديثة مثل Grid وFlexbox بشكل مشروط دون التأثير على النسخ القديمة. تابع إحصائيات استخدام المتصفحات لجمهورك وفكر في حلول بديلة خفيفة عند الحاجة. أدوات مثل “Can I Use” تساعد على تتبع دعم المتصفحات، ويضمن الجمع بين هذه الممارسات أسلوب تصميم مستقبلي وموثوق.
