على الرغم من أن الناس يتوقعون بعض التغييرات على الشاشة، إلا أن CSS و HTML لا يمكن أن يفعلوا سوى القليل جدًا للتفاعل في الصفحة، ولا يزال يتعين تنفيذ هذه التغييرات في التعليمات البرمجية.
على سبيل المثال، يكون الرابط إما بهذا اللون أو بهذا اللون؛ وتكون منطقة النص بهذا الحجم أو بهذا الحجم؛ وتكون الصورة إما شفافة أو معتمة؛ وتتغير مباشرة من حالة إلى أخرى - ؛
يؤدي هذا إلى أن تكون معظم صفحات الويب جامدة إلى حد ما، حيث أن العناصر تتغير أو تتغير بشكل صارم فقط.
نعم، يمكنك المبالغة في ذلك باستخدام DHTML أو jQuery أو كتابة JS الخاصة بك، ولكن هذا يتطلب المزيد من التعليمات البرمجية لتنفيذ ما ينبغي أن يكون وظيفة بسيطة للغاية.
ما نحتاجه هو طريقة سريعة وسهلة لإضافة تأثيرات انتقالية بسيطة إلى الصفحة. ستجد في هذه المقالة معلومات مفيدة حول انتقالات CSS وكيفية استخدامها.
قبل بضعة أشهر، اقترحت أن يبدأ المصممون في استخدام تقنيات CSS 3 الجديدة لتحقيق بعض الوظائف الأساسية التي كانوا يتوقون إليها لفترة طويلة - وكانت المشكلة الوحيدة هي عدم توفر أي من هذه التقنيات في IE، بما في ذلك IE8.
إن الرأي القائل بأن بعض القراء يعتقدون أن هذه التقنيات ستكون غير مرئية لـ 75٪ من المستخدمين لا يمكن الاعتماد عليه.
لهؤلاء القراء، أريد أن أقول، "انتظروا جيدًا،" لأنني على وشك أن أقدم لكم خاصية CSS جديدة أخرى تسمح لك بإضافة تأثيرات تحويل رائعة إلى أي عنصر باستخدام بضعة أسطر فقط من التعليمات البرمجية.
تم تقديم تحويلات CSS للتو في CSS 3، ولكن تمت إضافتها كملحق webkit. أي أنه لا يمكن الآن استخدامها إلا في المتصفحات المستندة إلى webkit، بما في ذلك Apple Safari وGoogle Chrome. ومع ذلك، انطلاقًا من إصدار Opera 10.5 ما قبل ألفا، ستدعم Opera تحويلات CSS 3 في الإصدار 10.5 التالي. لذا ، لرؤية التأثيرات الفعلية المذكورة في هذه المقالة، يوصى بشدة باستخدام Chrome أو Safari 4 لعرض هذه المقالة .
من أين تأتي تحويلات CSS؟
كانت التحويلات مجرد جزء من Webkit، والأساس لبعض الأشياء الرائعة التي يمكن لـ Safari UI القيام بها والتي لا تستطيع المتصفحات الأخرى القيام بها.
ومع ذلك، رفضت مجموعة عمل W3C CSS إضافة تحويلات إلى ميزاتها الرسمية، مع إصرار بعض الأعضاء على أن التحويلات ليست خصائص CSS وسيتم التعامل معها بشكل أفضل من خلال البرامج النصية. (أنا واثق تمامًا. كان لدي وجهة نظر مماثلة في الفقرة السابقة وناقشتها مع جاو جاو. أعتقد أن الرسوم المتحركة لـ CSS تقع خارج نطاق الأداء. يجب تنفيذ الأشياء التفاعلية باستخدام البرامج النصية. ولكن لاحقًا، في ظل بتوجيه من الأخ غوي، بدأت بفهم جديد - شين فاي)
لكن العديد من المصممين والمطورين، وأنا منهم، يصرون على أن هذه الأنماط هي بالفعل أنماط ديناميكية فقط، وليست الأنماط الثابتة التقليدية التي نستخدمها كل يوم.
ولحسن الحظ، فإن الجدل حول التصميم الديناميكي أصبح شيئاً من الماضي. في شهر مارس الماضي، بدأ ممثلو Apple وMozilla في إضافة وحدات تحويل CSS إلى ميزات CSS 3، وهي قريبة جدًا مما أضافته Apple بالفعل إلى WebKit.
مقدمة موجزة لتحسينات التصميم
قبل أن نواصل، اسمحوا لي أن أؤكد على هذا: لا تجعل وظيفة موقع الويب أبدًا تعتمد على النمط إذا لم يكن النمط عامًا للمتصفح (أي مدعومًا من قبل جميع المتصفحات شائعة الاستخدام).
وأؤكد مرة أخرى لمن فاتته: لا تدع وظيفة موقع الويب تعتمد أبدًا على الأسلوب، إذا لم يكن النمط عالميًا عبر المتصفحات .
وهذا يعني أنه يمكنك استخدام الأنماط، مثل الانتقالات، كتحسينات في التصميم لتحسين تجربة المستخدم - دون التضحية بسهولة الاستخدام للمستخدمين الذين لا يمكنهم رؤيتها. إذا كان يعمل بدون تحويلات CSS ولا يزال بإمكان المستخدمين إكمال مهامهم، فلا بأس ويمكنك استخدام تحويلات CSS.
مترجم من: انتقالات CSS 101
الصينية: البدء في تحويلات CSS3 المؤلف الأصلي: جيسون كرانفورد تيج
المترجم: Shenfei يرجى احترام حقوق الطبع والنشر والإشارة إلى المصدر عند إعادة الطباعة. شكرًا لك!