من الأدوات التي لا يستغني عنها المصممون و المطورون في عصر لابد و أن تختفي فيه التقنيات القديمة, فاستخدام CSS و jQuery في تصميم و تطوير المواقع شىء لا بد منه . و لكن أحياناً CSS لا تكفي وحدها لتحسين و إضافة مميزات في شكل موقعك فأحياناً ما تخدعك المتصفحات الأخرى مثل Internet Explorer بمشاكله على عكس متصفحات أخرى .

في هذا المقال نتحدث عن كيفية تحسين أداء CSS باستخدام مميزات jQuery الهائلة .

1- مشكلة Overflow مع Internet Explorer

يقوم Internet Explorer بتكوين عنصر overflow بقيمتين فقط و هما auto و scroll و أحياناً ما يظهر الشريط المتحرك في حالة لا يجب أن يظهر فيها كما في المتصفحات الأخرى . يمكن حل تلك المشكلة بواسطة تعديلات بسيطة في CSS أو jQuery  يمكن قراءتها في هذه التدوينة .

2- الشفافية Opacity

من الخواص الهامة التي أتت بها CSS هي خاصية الشفافية Opacity و التي أصبحت بشكل كبير مدعومة في أغلب المتصفحات و لكن لكل متصفح طريقة في التعبير عن عملية الشفافية . بينما يمكن بسهولة استخدام خاصية الشفافية بمساعدة jQuery حيث ستظهر بشكل موحد و بطريقة أفضل مما تقدمها CSS و ذلك باستخدام كود jQuery التالي :

1

$("selector").css("opacity", 0.5);

3- ظل النصوص Text Shadow

مع ظهور CSS 3 بدأ دعم خاصية ظل النصوص Text Shadow بشكل أكبر فأصبحت في المتصفحات الشهيرة ما عدا في Internet Explorer . و بمساعدة jQuery يمكن القيام بعمل ظل النصوص في Internet Explorer بسهولة باستخدام إضافة jQuery لظل النصوص بواسطة Kilian Valkhof .

4- الحواف الدائرية Rounded Corners

أيضاً كما هو الحال مع ظل النصوص , فهو نفس الحال مع الحواف الدائرية , فهي مدعومة في أغلب المتصفحات و لم يتم دعمها في Internet Explorer أو Opera . و يوجد العديد من الإضافات التي تمكن من عمل الحواف الدائرية باستخدام jQuery و لكن jQuery Curvy Corners تعتبر الأسهل و تقدم تأثيرها بشكل أقضل .

5- توضيح الحقول الحالية Highlighting

من الإضافات التي تزيد من جماليات الموقع و هي عملية توضيح الحقول الحالية التي يتم الكتابة فيها Highlighting و يمكن بسهولة عمل التأثير المطلوب باستخدام خاصية focus في CSS و لكنها ليست بالفعالة , لذلك تساعد jQuery في عمل مزيد من التأثير لتوضيح الحقول الحالية في الصفحات و ذلك بواسطة توضيح الرقعة label التي يوجد بها الحقل باستخدام jQuery .

تابعونا لاحقاً في الجزء الثاني من طرق تحسين أداء CSS بواسطة jQuery .