تعلم كيفية استخدام تقنيات CSS الجديدة عند الاقتضاء

يتخلف دعم المتصفح لـ CSS عن تطوير CSS Internet Explorer، الذي يتمتع بحصة سوقية مطلقة، وقد أكمل الدعم الكامل لـ CSS 2.1 حتى إصداره الثامن الذي تم إصداره منذ وقت ليس ببعيد. آخر تقدم في CSS هو تطوير CSS 3 لقد تم بالفعل إنجاز أكثر من نصف المواصفات. لكن هذا لا يمنعنا من استخدام التقنيات الجديدة في CSS. على الرغم من أننا لا نستطيع تطبيقها كما نحب باستخدام التقنيات العامة في CSS، إلا أنه يمكننا تحقيق تأثيرات أكثر وضوحًا في متصفحات معينة. إن استخدام هذه التقنيات الجديدة في الأماكن المناسبة لن يسمح لك فقط بالوقوف في طليعة تكنولوجيا CSS، بل سيجعل أعمالك تشعر بالانتعاش أيضًا.

تقنية CSS الجديدة: لا تتوقع أن تكون مدعومة من قبل جميع المتصفحات
أعلنت Microsoft عن دعم CSS في إصدارات المتصفح المختلفة من Internet Explorer 5.5 إلى 8.0. وفي هذه القائمة، يمكننا أن نرى أن الدعم الكامل لـ CSS 2.1 لم يكتمل حتى Internet Explorer 8.0، ولا يمكن استخدامه إلا في Internet Explorer 7.0. محددات السمات في CSS 2.1، على الرغم من أن تقنية CSS هذه مفيدة جدًا. وهذا يعني أنه يتعين عليك التوقف عن استخدام هذه التقنية مراعاةً لمستخدمي Internet Explorer 6.x الذين ما زالوا يمثلون أكثر من 40% من السوق. على سبيل المثال:
[القيمة] {الارتفاع: 25 بكسل}
[href=http://www.dudo.org/] {color:red;}

في السطر 1، يمكننا ضبط ارتفاع جميع النماذج ذات سمات القيمة على 25 بكسل؛ والسماح بعرض الروابط إلى مواقع ويب محددة بنص أحمر. لكن القيام بذلك في Internet Explorer 6 ليس له أي تأثير على الإطلاق، لأن "تقنية CSS الجديدة" هذه غير مدعومة.
في CSS 3، تتمتع محددات السمات بوظائف أكثر قوة، بالإضافة إلى ذلك، يضيف CSS 3 أيضًا تأثيرات مثل الزوايا الدائرية وظلال النص والحدود ثلاثية الأبعاد، ويمكن القول أن تقنيات CSS الجديدة هذه تسببت في المشكلات المعقدة الأصلية في CSS 2 الأمر بسيط للغاية، على سبيل المثال، في CSS 3، تحتاج فقط إلى الكود التالي للحصول على مظهر مستدير:
<div style="radiu:5px">هذه زاوية مستديرة</div>

ومع ذلك، هذه التقنية الجديدة غير مدعومة حتى في Internet Explorer 8. وهي مدعومة حاليًا فقط في Firefox وSafari وChrome، وهذا الدعم متاح غير مكتمل، استخدم -moz-radius في Firefox، و-wekit-radius في Safari وChrome.
هذه تقنية جديدة في CSS لا يبدو أنها يمكن تفسيرها بالكامل بواسطة جميع المتصفحات في نفس الوقت.
تقنية CSS الجديدة ليست اختراقًا لـ CSS
ما هو هاك CSS؟ CSS Hack هي طريقة تستخدم أوجه قصور معينة في استخدام CSS في المتصفح لتنفيذ قواعد CSS مختلفة. على سبيل المثال، يمكن استخدام _property للتمييز بين IE7 و8 والإصدارات الأخرى من IE، ويمكن استخدام الخاصية * لتمييز IE عن المتصفحات غير التابعة لـ IE، وما إلى ذلك. ومع ذلك، ما نشير إليه هنا هو أن جميع اختراقات CSS هذه هي مواصفات CSS غير قياسية، ولا يمكنها اجتياز التحقق من W3C، بمعنى آخر، جميعها قواعد CSS غير صحيحة. لكن تقنيات CSS الجديدة مختلفة، فهي مواصفات CSS قياسية، لكنها غير مدعومة من قبل بعض المتصفحات.
بالإضافة إلى ذلك، لا يمكن حل تقنيات CSS الجديدة عن طريق القرصنة. بالنسبة للتناقضات في تفسير نموذج الصندوق في المتصفحات المختلفة، يمكننا تصحيحه من خلال CSS Hack. ومع ذلك، لا يمكن حل مشكلة عدم دعم Internet Explorer للمستطيلات المستديرة باستخدام أي تقنية CSS Hack صور الخلفية.
لذلك، فإن تقنية CSS الجديدة ليست نوعًا من CSS Hack، بل هي مواصفات CSS تقليدية.
الاستخدام المناسب لتقنيات CSS الجديدة
على الرغم من أننا ذكرنا سابقًا أن تقنية CSS الجديدة لا يمكن أن تدعمها جميع المتصفحات، كما أنها لا تستطيع تحقيق نفس التأثير في المتصفحات المختلفة مثل استخدام تقنية CSS Hack. لكن هذا لا يمنعنا من استخدامها. تخيل فقط، إذا كان من الممكن إضافة صفحة عادية مع سهولة استخدام إضافية في المتصفح دون التأثير على استخدامها، ألن يكون ذلك أكثر جاذبية؟ وقد حققنا هذا التأثير دون إضافة قواعد CSS غير منتظمة مثل CSS Hack. لذلك، فإن استخدام تقنية CSS بشكل مناسب وفي الوقت المناسب يمكن أن يحقق تأثيرًا رائعًا ويجعل استخدام صفحة الويب الخاصة بك أسهل.