كيف تجعل كود CSS او CSS3 يعمل على جميع المتصفحات

• 

  Custom Title with Subtitle and Lock Content

  Apr 07 2014 - Rafat
• 

  Sample Post with Pagination and Slide Featured Content

  Apr 06 2014 - Rafat
• 

  تعلم تحميل موقع بالكامل وتصفحه دون اتصال بالانترنت

  Apr 05 2014 - Rafat
• 

  MacBook charging peacefully beside my PC desktop

  Mar 18 2014 - Rafat
• 

  Night city and bridge best photography

  Mar 15 2014 - Rafat
• 

  Doubt can eat away at the best of competitors

  Mar 10 2014 - Rafat
• 

  BMW New Hybrid Supercar Is Thrilling

  Mar 09 2014 - Rafat

بسم الله , الحمد لله

معلومة بسيطة قبل ان نخوض في درسنا اليوم.

ليس كل اكواد 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%);

 وبهذا ينتهي موضوعنا بحمد الله وتوفيقه