عرض مصدر CSS/detecting CSS animation support

<noinclude>{{DISPLAYTITLE:الكشف عن دعم المتصفحات لحركات CSS}}</noinclude>
تتيح لنا حركات CSS animation) CSS) إنشاء رسوم متحركة بمحتوى إبداعي، باستخدام شيفرة CSS فقط، ومع ذلك من المحتمل أن تكون هناك أوقات لا تتوفر فيها هذه الميزة، وقد نرغب في معالجة هذه المشكلة باستخدام شيفرة JavaScript لمحاكاة تأثير حركات مماثل. توضح هذه المقالة، المستندة إلى [https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/ هذا المنشور] لِلكاتب Chris Heilmann، أسلوبًا للقيام بذلك.

== اختبار دعم حركات CSS ==
تتحقق الشيفرة التالية ما إن كان دعم حركات CSS متاحًا من المتصفح أم لا:<syntaxhighlight lang="javascript">
var animation = false,
    animationstring = 'animation',
    keyframeprefix = '',
    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
    pfx  = '',
    elem = document.createElement('div');

if( elem.style.animationName !== undefined ) { animation = true; }    

if( animation === false ) {
  for( var i = 0; i < domPrefixes.length; i++ ) {
    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
      pfx = domPrefixes[ i ];
      animationstring = pfx + 'Animation';
      keyframeprefix = '-' + pfx.toLowerCase() + '-';
      animation = true;
      break;
    }
  }
}
</syntaxhighlight>عرّفنا بعض المتغيرات، وافترضنا أن حركات CSS غير مدعومة بتعيين قيمة المتغير <code>animation</code> إلى <code>false</code>، ونُعين قيمة المتغير <code>animationstring</code> إلى <code>animation</code> وستكون لاحقًا عبارة عن نصٍ بالقيمة الكاملة لخاصية <code>[[CSS/animation|animation]]</code>، ونقوم بإنشاء مصفوفة من بادئات المتصفحات كناتج للمتغير <code>demoPrefixes</code> ثم نسند قيمة نصًا فارغًا للمتغير <code>pfx</code>، وننشئ عنصر حاوية (div) كقيمة للمتغير <code>elem</code>.

نتحقق ما إن تم تعيين خاصية اسم الحركة [[CSS/animation-name|<code>animation-name</code>]] للمتغير <code>elem</code>؛ فهذا يعني أن المتصفح يدعم حركات CSS دون أي بادئات (أسماء تشير لمتصفحات محددة توضع قبل اسم بعض خاصيات CSS الجديدة ليتعرف عليها المتصفح المعِني)، إذا كان المتصفح لا يدعم الحركات بدون بادئات (prefixes) أي أن الخاصية [[CSS/animation|<code>animation</code>]] لا تزال على قيمتها الافتراضية <code>false</code>؛ فنقوم بالدوران حول مصفوفة البادئات المتاحة، ونضيف قيمها كَبادئات لخاصيات الحركات الغير مدعومة بدون بادئات؛ إذ أن أسماء أشهر المتصفحات تكون كَبادئات لقيْمة هذه الخاصية. 

بمجرد انتهاء عمل الشيفرة السابقة، ستكون قيمة المتغير <code>animation</code> هي <code>false</code> إن لم يكن دعم  حركات CSS متاحًا، أو ستكون <code>true</code>؛ إذا كانت قيمة المتغير <code>animation</code> هي <code>true</code>؛ فسيكون كل من خاصية اسم الحركة وبادئة [[CSS/@keyframes|الإطار المفتاحي]] (keyframe) من نفس النوع. لذلك إذا كنت تستخدم أحدث إصدار من Firefox، فسيكون اسم الخاصية <code>MozAnimation</code> وبادئة الإطار المفتاحي <code>-moz-</code>، ومع Chrome، ستكون <code>WebkitAnimation</code> و <code>-webkit-</code>. لاحظ أن المتصفحات لا تراعي قاعدة سنام الجمل (camelCase) ولا استخدام الواصلة (-) بالشكل المعتاد؛ فقِيمة خاصية اسم الحركة تبدأ بحرف كبير على خلاف قاعدة سنام الجمل، وفي بادئة الإطار المفتاحي يبدأ الاسم هنا شرطة على خلاف خاصيات CSS المعتادة التي تكون الواصلة فيها بالمنتصف للربط بين الكلمات.

== الحركات باستخدام الصياغة الصحيحة لجميع المتصفحات ==
الآن بعد أن عرفت ما إذا كانت حركات CSS مدعومة أم لا، يمكنك إجراء التحريك.<syntaxhighlight lang="javascript" line="1">
if( animation === false ) {

  // JavaScript التحريك في

} else {
  elem.style[ animationstring ] = 'rotate 1s linear infinite';

  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
                  '}';

  if( document.styleSheets && document.styleSheets.length ) {

      document.styleSheets[0].insertRule( keyframes, 0 );

  } else {

    var s = document.createElement( 'style' );
    s.innerHTML = keyframes;
    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );

  }
  
}

</syntaxhighlight>تفحص هذه الشيفرة قيمة الخاصية <code>[[CSS/animation|animation]]</code> فإذا كانت معينة على القيمة <code>false</code>، فهذا يعنني أننا نحتاج للرجوع لشيفرة [[JavaScript]] السابقة، أما إذا كانت الخاصية [[CSS/animation|<code>animation</code>]] معينة على القيمة <code>true</code>، فيمكننا استخدام [[JavaScript]] لإنشاء تأثيرات حركات CSS المطلوبة.

من السهل ضبط خاصية <code>animation</code>، إذ يمكنك تغيير قيمتها داخل مجموعة أنماط CSS ببساطة. إضافة إطارات مفتاحية يعد أكثر تعقيدًا، لأنها غير معرفة باستخدام البناء التقليدي (syntax) لشيفرة CSS (ربما يجعلها هذا أكثر مرونةً، ولكن يصعب على النص البرمجي تعرُفها).

لِتحديد الإطارات المفتاحية لدينا باستخدام [[JavaScript]]، نحتاج إلى كتابتهم كَسلسلة CSS. كل ما سنفعله هو إعداد متغير <code>keyframes</code>، يسبق كل خاصية عند تركيبها، يحتوي هذا المتغير بعد انْهاء بنائه على وصف كامل لجميع الإطارات المفتاحية التي يحتاجها تسلسل الحركات لدينا.

المهمة التالية هي إضافة [[CSS/@keyframes|الإطارات المفتاحية]] إلى شيفرة [[CSS/--*|CSS]] الخاصة بالصفحة. أول شيء يجب فعله هو البحث لمعرفة ما إذا كانت هناك بالفعل ورقة أنماط [[CSS]] في المستند؛ إن كان كذلك فإنه يمكننا ببساطة إدراج نوع الإطار المفتاحي في ورقة الأنماط هذه؛ يتم ذلك في السطور 13-15.

إذا لم يكن هناك ورقة أنماط، فيمكن إنشاء عنصر [[HTML/style|<code><style></code>]] جديد تضبط محتواه على قيمة الإطارات المفتاحية. ثم تُدرج عنصر [[HTML/style|<code><style></code>]] الجديد في عنصر [[HTML/head|<code><head></code>]] للمستند، هذا يماثل تمامًا إضافة ورقة أنماط جديدة إلى المستند.

الاطلاع على التجربة الحية في [https://jsfiddle.net/codepo8/ATS2S/8/embedded/result JSFiddle].

== اقرأ أيضًا ==
* [[CSS/using CSS animations|استخدام حركات CSS]]
* [[CSS/CSS animations tips|حركات CSS: نصائح وحيل]]
* الخاصية <code>[[CSS/animation|animation]]</code>

== المصادر ==
* [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support صفحة Detecting CSS animation support من توثيق MDN الرسمي].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Animation|{{SUBPAGENAME}}]]