css prefixes : طريقة تفعيل التوافق مع صفحات الويب

css prefixes هي إمكانية توافق كود CSS مع جميع المتصفحات التي نستخدم فيها صفحات الموقع، كما يتيح إمكانية حماية وعدم تعطيل كود css لصفحاتنا عندما يتم إجراء تحديثات على المتصفحات بواسطة Google أو Mozilla أو غيرهما.

 

تعريف

csstag
{
  -prefixes "-your parameters"
}

 

أنواع css prefixes

يتم فحص هذه المعرفات بواسطة المتصفحات على الفور ، حيث يضمن المستعرض الخاص بك التحقق من وجودها قبل تشغيل صفحة الويب ، ولكل متصفح صيغة مختلفة مرفقة بكود css بجوار المتغير الذي نقوم بتعديله ، وهنا أنواعها:

  • -webkit-: الذي يدعم التوافق مع متصفحات جوجل كروم.
  • -moz-: الذي يدعم التوافق مع متصفحات Firefox.
  • -o-: الذي يدعم التوافق مع متصفحات Opera.
  • -ms-: الذي يدعم التوافق مع متصفحات Internet Explorer.

 

مثال

من فضلك ، لفهم بادئات البائع جيدًا ، انسخ الكود التالي في ملف نصي ولا تنس تغيير امتداده إلى .html ثم قم بتشغيله في متصفحك.

<html>

<head>

<style>

div
{

    border:1px solid #CCC;
    width:30%;
    padding:50px;
    height:100px;
    margin:120px auto;
    background:#EEE;

    box-shadow:Horizontal Shadow | Vertical Shadow | blur | Spread | color | inset , outset;  /*This is Comment*/

    -moz-box-shadow:5px 5px 10px 10px #DDD;
    -webkit-box-shadow:5px 5px 10px 10px #DDD; /*inset;*/ ;/*inset puts the shadow inside the box */

    -o-box-shadow:5px 5px 10px 10px #DDD;
    box-shadow:5px 5px 10px 10px #DDD;
}

</style>


</head>

<body>

<div>Welcome To CSS3</div>
</body>

</html>

 

 

 

هل أعجبك المقال؟

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.

 - 
Arabic
 - 
ar
Bengali
 - 
bn
German
 - 
de
English
 - 
en
French
 - 
fr
Hindi
 - 
hi
Indonesian
 - 
id
Portuguese
 - 
pt
Russian
 - 
ru
Spanish
 - 
es