الكشف عن دعم المتصفحات لحركات CSS
تتيح لنا حركات CSS animation) CSS) إنشاء رسوم متحركة بمحتوى إبداعي، باستخدام شيفرة CSS فقط، ومع ذلك من المحتمل أن تكون هناك أوقات لا تتوفر فيها هذه الميزة، وقد نرغب في معالجة هذه المشكلة باستخدام شيفرة JavaScript لمحاكاة تأثير حركات مماثل. توضح هذه المقالة، المستندة إلى هذا المنشور لِلكاتب Chris Heilmann، أسلوبًا للقيام بذلك.
اختبار دعم حركات CSS
تتحقق الشيفرة التالية ما إن كان دعم حركات CSS متاحًا من المتصفح أم لا:
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;
}
}
}
عرّفنا بعض المتغيرات، وافترضنا أن حركات CSS غير مدعومة بتعيين قيمة المتغير animation إلى false، ونُعين قيمة المتغير animationstring إلى animation وستكون لاحقًا عبارة عن نصٍ بالقيمة الكاملة لخاصية animation، ونقوم بإنشاء مصفوفة من بادئات المتصفحات كناتج للمتغير demoPrefixes ثم نسند قيمة نصًا فارغًا للمتغير pfx، وننشئ عنصر حاوية (div) كقيمة للمتغير elem.
نتحقق ما إن تم تعيين خاصية اسم الحركة animation-name للمتغير elem؛ فهذا يعني أن المتصفح يدعم حركات CSS دون أي بادئات (أسماء تشير لمتصفحات محددة توضع قبل اسم بعض خاصيات CSS الجديدة ليتعرف عليها المتصفح المعِني)، إذا كان المتصفح لا يدعم الحركات بدون بادئات (prefixes) أي أن الخاصية animation لا تزال على قيمتها الافتراضية false؛ فنقوم بالدوران حول مصفوفة البادئات المتاحة، ونضيف قيمها كَبادئات لخاصيات الحركات الغير مدعومة بدون بادئات؛ إذ أن أسماء أشهر المتصفحات تكون كَبادئات لقيْمة هذه الخاصية.
بمجرد انتهاء عمل الشيفرة السابقة، ستكون قيمة المتغير animation هي false إن لم يكن دعم حركات CSS متاحًا، أو ستكون true؛ إذا كانت قيمة المتغير animation هي true؛ فسيكون كل من خاصية اسم الحركة وبادئة الإطار المفتاحي (keyframe) من نفس النوع. لذلك إذا كنت تستخدم أحدث إصدار من Firefox، فسيكون اسم الخاصية MozAnimation وبادئة الإطار المفتاحي -moz-، ومع Chrome، ستكون WebkitAnimation و -webkit-. لاحظ أن المتصفحات لا تراعي قاعدة سنام الجمل (camelCase) ولا استخدام الواصلة (-) بالشكل المعتاد؛ فقِيمة خاصية اسم الحركة تبدأ بحرف كبير على خلاف قاعدة سنام الجمل، وفي بادئة الإطار المفتاحي يبدأ الاسم هنا شرطة على خلاف خاصيات CSS المعتادة التي تكون الواصلة فيها بالمنتصف للربط بين الكلمات.
الحركات باستخدام الصياغة الصحيحة لجميع المتصفحات
الآن بعد أن عرفت ما إذا كانت حركات CSS مدعومة أم لا، يمكنك إجراء التحريك.
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 );
}
}
تفحص هذه الشيفرة قيمة الخاصية animation فإذا كانت معينة على القيمة false، فهذا يعنني أننا نحتاج للرجوع لشيفرة JavaScript السابقة، أما إذا كانت الخاصية animation معينة على القيمة true، فيمكننا استخدام JavaScript لإنشاء تأثيرات حركات CSS المطلوبة.
من السهل ضبط خاصية animation، إذ يمكنك تغيير قيمتها داخل مجموعة أنماط CSS ببساطة. إضافة إطارات مفتاحية يعد أكثر تعقيدًا، لأنها غير معرفة باستخدام البناء التقليدي (syntax) لشيفرة CSS (ربما يجعلها هذا أكثر مرونةً، ولكن يصعب على النص البرمجي تعرُفها).
لِتحديد الإطارات المفتاحية لدينا باستخدام JavaScript، نحتاج إلى كتابتهم كَسلسلة CSS. كل ما سنفعله هو إعداد متغير keyframes، يسبق كل خاصية عند تركيبها، يحتوي هذا المتغير بعد انْهاء بنائه على وصف كامل لجميع الإطارات المفتاحية التي يحتاجها تسلسل الحركات لدينا.
المهمة التالية هي إضافة الإطارات المفتاحية إلى شيفرة CSS الخاصة بالصفحة. أول شيء يجب فعله هو البحث لمعرفة ما إذا كانت هناك بالفعل ورقة أنماط CSS في المستند؛ إن كان كذلك فإنه يمكننا ببساطة إدراج نوع الإطار المفتاحي في ورقة الأنماط هذه؛ يتم ذلك في السطور 13-15.
إذا لم يكن هناك ورقة أنماط، فيمكن إنشاء عنصر <style> جديد تضبط محتواه على قيمة الإطارات المفتاحية. ثم تُدرج عنصر <style> الجديد في عنصر <head> للمستند، هذا يماثل تمامًا إضافة ورقة أنماط جديدة إلى المستند.
الاطلاع على التجربة الحية في JSFiddle.