حيلة CSS

الموسوعة الحرة

تُعدّ حيل CSS تقنية برمجية تُستخدم لإخفاء أو إظهار ترميز CSS بناءً على المتصفح ، ورقم الإصدار، والإمكانيات المتاحة. تختلف المتصفحات في تفسيرها لسلوك CSS، وفي مستويات دعمها لمعايير W3C . تُستخدم حيل CSS أحيانًا لتحقيق مظهر متناسق للتصميم في متصفحات متعددة لا تدعم العرض المتوافق. لا تعمل معظم هذه الحيل في الإصدارات الحديثة من المتصفحات، ولذا أصبحت تقنيات أخرى، مثل اكتشاف دعم الميزات، أكثر شيوعًا.

أنواع الاختراقات

CSS غير صالح أو غير متوافق

بسبب اختلاف تفسير CSS بين المتصفحات المختلفة، تعتمد معظم حيل CSS على كتابة قواعد CSS غير صالحة تُفسَّر فقط بواسطة متصفحات محددة، أو على استغلال ثغرات في متصفحات معينة. مثال على ذلك هو إضافة شرطة سفلية قبل القواعد (كما في المثال التالي _width) لاستهداف Internet Explorer 6، حيث تتجاهل المتصفحات الأخرى هذا السطر، مما يسمح باستخدامه لكتابة تعليمات برمجية خاصة بهذا المتصفح .

تتضمن حيل CSS المماثلة إحداث أخطاء في بناء الجملة مثل علامات النجمة، والمسافات البيضاء المفقودة، وتعليقات CSS حول أسماء الخصائص. بالإضافة إلى ذلك، في متصفحي إنترنت إكسبلورر 6 و7، !importantيتم التعرف على التصريح على هذا النحو مع أي سلسلة نصية بعد علامة التعجب، على سبيل المثال !ie. [ 1 ]

CSS غير مدعوم

على الرغم من أن قواعد CSS الأحدث صحيحة وفقًا للمعايير الحالية، إلا أن المتصفحات القديمة تتجاهلها باعتبارها "غير صالحة". من خلال كتابة القواعد القديمة متبوعةً بقواعد أحدث تلغي أو تعدل القواعد القديمة، يُمكن تفعيل قواعد معينة فقط على المتصفحات القديمة.

التعليقات المشروطة

قبل الإصدار العاشر، كان متصفح إنترنت إكسبلورر يدعم صيغة تعليقات خاصة تسمح بقراءة أجزاء من كود HTML فقط بواسطة إصدارات محددة من المتصفح. تُستخدم هذه التعليقات في الغالب لتوفير حلول بديلة خاصة بـ CSS وJavaScript للإصدارات القديمة من المتصفح. لم تكن أي متصفحات أخرى تفسر هذه التعليقات أو تقدم وظائف مماثلة.

فيما يلي أمثلة على الصيغة المختلفة لهذه التعليقات.

<head> <title> اختبار </ title > < link href = "all_browsers.css" rel = "stylesheet" type = " text / css" > < !--[if IE]><link href="ie_only.css " rel="stylesheet" type="text/css"><![endif]--> <!--[if lt IE 7]><link href="ie_6_and_below.css" rel="stylesheet" type="text/css"><![endif]--> <!--[if !lt IE 7]><![IGNORE[--> <![IGNORE[]]> < link href = "recent.css" rel = "stylesheet" type = "text/css" > <!--<![endif]--> < link href = "not_ie.css" rel = "stylesheet" type =" "text/css" > <!--<![endif]--> </ head >

النقاد

غالباً ما يؤدي إخفاء التعليمات البرمجية باستخدام حيل برمجية إلى عرض الصفحات بشكل غير صحيح عند تحديث المتصفحات. وقد تتسبب هذه الحيل في سلوك غير متوقع في المتصفحات الحديثة التي قد تفسرها بشكل مختلف عن المتصفحات السابقة. ومع توقف استخدام متصفحي إنترنت إكسبلورر 6 و7، تراجعت أيضاً حيل CSS. أما الطرق الحديثة لاستهداف الميزات فهي أقل عرضة للأخطاء وأكثر أماناً.

البدائل

بادئات المتصفح

لكل محرك من محركات عرض المتصفحات الأكثر شيوعًا بادئة خاصة به للخصائص التجريبية. ومع ذلك، ونظرًا لانتشار هذه الخصائص في التعليمات البرمجية الفعلية، بدأ مُصنّعو المتصفحات بالتخلي عن هذه الممارسة لصالح استخدام علامات الميزات. [ 2 ]

قائمة البادئات

فيما يلي قائمة بالبادئات من محركات التخطيط المختلفة:

بادئة البائعقيد الاستخداممحرك التخطيطتم إنشاؤه بواسطةمستخدمة بواسطة
-ah-نعممُنسِّقبيت الهوائيتنسيق منزل الهوائي
-apple-نعمWebKitشركة آبلApple Safari 2.0 ، وOpera Widgets، والمتصفحات المستندة إلى WebKit (كبادئة قديمة)
-atsc-معايير لجنة أنظمة التلفزيون المتقدمة
-epub-نعمWebKitمجموعة عمل EPUBكروميوم / جوجل كروم ، متصفحات مبنية على WebKit
-fx-نعمشركة صن مايكروسيستمز (التي استحوذت عليها الآن شركة أوراكل )تطبيقات JavaFX
-hp-هيوليت-باكارد (الآن HP Inc. وهيوليت باكارد إنتربرايز )
-khtml-نعمKHTML / WebKitKDEKDE Konqueror / Apple Safari 1.1 حتى Safari 2.0، متصفحات WebKit-Based (كبادئة قديمة)
-moz-نعمأبو بريصمؤسسة موزيلامتصفحات مبنية على جيكو[؟]، موزيلا فايرفوكس
-ms-نعمترايدنت / MSHTMLشركة مايكروسوفتمايكروسوفت إنترنت إكسبلورر
mso-مكتبشركة مايكروسوفتمايكروسوفت أوفيس[?]
-o-نعمبريستوبرنامج أوبرامتصفح أوبرا لسطح المكتب حتى الإصدار 12.16 ، وأوبرا ميني ، وأوبرا موبايل حتى الإصدار 12.1 ، ومتصفح نينتندو دي إس ونينتندو دي إس آي ، وقناة الإنترنت الخاصة بنينتندو وي
-prince-نعمالأميريس لوجيكيس لوجيك برينس
-rim-WebKitشركة بلاك بيري المحدودةمتصفح بلاك بيري من ريم
-ro-نعممارثاRealObjectsRealObjects PDFreactor
-tc-المكونات الطويلةالمكونات الطويلة
-wap-نعمبريستومنتدى WAPمتصفح أوبرا لسطح المكتب وأوبرا للهواتف المحمولة، منتدى WAP
-webkit-نعمWebKit/Blinkشركة آبل ( WebKit ) / شركة جوجل ( Blink )Apple Safari & Safari for iOS (WebKit)، Chromium / Google Chrome سطح المكتب والجوال (Blink)، Opera سطح المكتب والجوال من الإصدار 14 (Blink)، متصفح Android (Blink)، Nokia MeeGo Browser 8.5، Nokia Symbian Browser 7.0 والإصدارات الأحدث (WebKit)، Blackberry Browser 6.0 والإصدارات الأحدث (WebKit).
-xv-لابريستوبرنامج أوبرامتصفح أوبرا لسطح المكتب لنظامي التشغيل ويندوز 2000/إكس بي

مثال

/* تدرج خطي متوافق مع جميع المتصفحات باستخدام CSS3 */ .linear -gradient {/* متصفح جيكو (فايرفوكس) */ background-image : -moz- linear-gradient ( top , #D7D 0 % , #068 100 % );/* Opera */ background-image : -o- linear-gradient ( top , #D7D 0 % , #068 100 % );/* صيغة Webkit القديمة */ background-image : -webkit- gradient ( linear , left top , left bottom , color -stop ( 0 , #D7D ), color-stop ( 1 , #068 ));/* Webkit (Safari, Chrome, iOS, Android) */ background-image : -webkit- linear-gradient ( top , #D7D 0 % , #068 100 % );/* W3C */ background-image : linear-gradient ( to bottom , #D7D 0 % , #068 100 % );}

القيود

صُممت بادئات الموردين للميزات التي كانت قيد التطوير، ما يعني أن صيغتها قد لا تكون نهائية. كما أن إضافة قاعدة لكل تطبيق لوظيفة معينة في المتصفح لا يُعدّ حلاً عملياً عند الرغبة في دعم العديد من المتصفحات. ونتيجةً لذلك، يتجه مُصنّعو المتصفحات الرئيسيون إلى التخلي عن بادئات الموردين لصالح أساليب أخرى مثل استعلامات الميزات.@supports

حذف الميزة

اكتشاف ميزات جافا سكريبت

توجد العديد من مكتبات جافا سكريبت التي تكشف عن الميزات المتوفرة في متصفح معين، مما يسمح بكتابة قواعد CSS تستهدفها. تضيف مكتبات مثل Modernizr فئات إلى العنصر html، مما يتيح استخدام قواعد CSS مثل ..cssgradients.header

استعلامات الميزات

أُضيفت ميزة جديدة تُعرف باسم استعلامات الميزات في CSS3 ، تسمح بالكشف عن وظائف محددة داخل CSS (دون الحاجة إلى استخدام مكتبة JavaScript للكشف عن الميزات ). يمكن استخدام هذا التوجيه الجديد للتحقق من دعم أو عدم دعم ميزة معينة، ويمكن دمج عمليات التحقق مع andو orو و not. من البديهي أن القواعد ستعمل فقط على المتصفحات التي تدعم .@supports@supports

header { display : block ; }@supports ( display : flex ) { header { display : flex ; } }​

مكتبات برمجية مساعدة

على الرغم من أن اكتشاف ميزات جافا سكريبت وقواعدها قد يساعد في استهداف المتصفحات التي تتطلب وظائف احتياطية، إلا أنها لا تعالج الأخطاء في متصفحات محددة ولا تُفعّل تلك الوظائف المتقدمة. يمكن استخدام "بولي فيلز" ، وهي نصوص برمجية تُوحّد السلوك عبر جميع المتصفحات، لإضافة دعم لقواعد CSS الجديدة (مثل استعلامات الوسائط في إنترنت إكسبلورر 8) بالإضافة إلى إصلاح الأخطاء في متصفحات محددة. ولأن "بولي فيلز" تُضيف أو تُصلح وظائف في متصفحات لا تدعمها، فإنها تخدم غرضًا مختلفًا عن استعلامات الميزات، ولكن يمكن استخدامها بالتزامن معها.@supports

مراجع

  1. ↑ بول آيرش (15 أبريل 2009). "حيل CSS للمتصفح" . www.paulirish.com . تم الاطلاع عليه بتاريخ 8 يونيو 2022 .
  2. ↑ "بادئة البائع" . شبكة مطوري موزيلا . تم الاسترجاع في 12 أكتوبر 2016 .
  • غرائب ​​المتصفحات – اختراقات واختبارات CSS المباشرة لجيف كلايتون لتصفية المتصفحات الشائعة، بما في ذلك اختراقات CSS الوحيدة المعروفة لمتصفحي Safari 7 و8
  • browserhacks.com – طرق واختبارات متعددة لتصفية المتصفحات (هوغو جيروديل، جوشوا هيبرت، تيم بيتروسكي، فابريس واينبرغ، جيف كلايتون)
  • مرشحات بادئة Safari/Webkit (webkit) مرشحات الإصلاح]
  • مرشحات البادئة Mozilla (moz)
  • مرشحات بادئة Opera (wap) - تحتوي هذه الصفحة على جميع محددات CSS الخاصة بـ Opera.
  • مرشحات CSS - جدول كامل إلى حد ما لحيل CSS التي تُظهر وتخفي القواعد من متصفحات محددة.
  • الفلاتر والتداخل – فلاتر CSS. أخطاء التحليل مُعلّمة باللون الأحمر.
  • – أداة تحديد المتصفح CSS – تسمح بدمج CSS الخاص بالمتصفح في ورقة أنماط واحدة (باستخدام JavaScript).
  • – #IEroot – استهداف متصفح إنترنت إكسبلورر باستخدام ورقة أنماط واحدة تحتوي على جميع عناصر CSS (بدون استخدام جافا سكريبت، ولكن باستخدام التعليقات الشرطية لتعيين علامة خاصة بالمتصفح إلى جذر المحتوى العشوائي )<div>
  • كيفية استهداف متصفح إنترنت إكسبلورر فقط (أي إصدار) ضمن ملف أنماط CSS؟ – نقاش على موقع StackOverflow
  • تطبيق النمط فقط على متصفح إنترنت إكسبلورر – نقاش على موقع ستاك أوفر فلو
  • التعليقات في CSS - كيفية إضافة التعليقات في CSS