كيف تجعل كود CSS او CSS3 يعمل على جميع المتصفحات
بسم الله , الحمد لله
معلومة بسيطة قبل ان نخوض في درسنا اليوم.
ليس كل اكواد CSS تعمل على جميع المتصفحات , نعم .. فهناك بعض الأكواد التي لا تعمل إلا بأكواد اخرى تضاف لها تخص المتصفح ودعونا نأخذ مثال على ذلك .
وليكن هذا الكود :
transition: all .4s ease-in-out;
ليس مهم عمل الكود ولكن المهم , هل يعمل الكود على كل المتصفحات ؟
طبعاً لا فهو لا يعمل الا بدعم وهذا الدعم مثل الآتي ..
-webkit-transition: all .4s ease-in-out; // google chrome & safari
-moz-transition: all .4s ease-in-out; // firefox
-o-transition: all .4s ease-in-out; //opera
-ms-transition: all .4s ease-in-out; //internet explorer
transition: all .4s ease-in-out;
انظر .. الأحرف الحمراء هي الدعم للعمل على المتصفح فكما ترى وضعت لكل كود منهم اسم المتصفح باللون البني فمثلاً :
-webkit- يجعل الكود يعمل على متصفح جوجل كروم و متصفح سفاري
-moz- يجعل الكود يعمل على متصفح فايرفوكس
-o- يجعل الكود يعمل على متصفح اوبرا
-ms- يجعل الكود يعمل على متصفح انترنت اكسبلورر
سؤال قد يخطر على ذهنك وهو ,, ما هي الأكواد التي لا تعمل إلا بالدعم ؟ هي الآتي :
box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-o-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
transform:rotate(7deg);
-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-ms-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
-ms-transition: width 2s;
transition: width 2s;
border-radius:25px;
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
background-image:linear-gradient(to top,#000 0%,#001530 30%);
background-image:-webkit-linear-gradient(to top,#000 0%,#001530 30%);
background-image:-moz-linear-gradient(to top,#000 0%,#001530 30%);
background-image:-o-linear-gradient(to top,#000 0%,#001530 30%);
background-image:-ms-linear-gradient(to top,#000 0%,#001530 30%);
وبهذا ينتهي موضوعنا بحمد الله وتوفيقه
