يعد CSS Hack علاجًا يتم استخدامه عندما لا يكون CSS القياسي متوافقًا مع تأثيرات العرض للمتصفحات المختلفة، وحتى تتوصل الشركات المصنعة للمتصفح إلى اتفاق حول كيفية تحليل CSS، لا يمكننا استخدام هذه الطريقة إلا لإكمال هذه المهام. قد تتمكن من البحث عن الكثير من أدوات CSS Hacks على الإنترنت، لكن قد لا تفهم كل ما قمت بإصداره اليوم، لأن هذه هي CSS Hacks التي تستهدف متصفحًا واحدًا فقط.
ولإظهار نجاح هذه الحيل في CSS، قمت بإنشاء ست علامات P جديدة وأعطيت كل علامة P معرفًا فريدًا. سيُظهر لك هذا CSS Hack أثناء العمل.
| <p id="opera">أنا من Opera 7.2 - 9.5</p> <p id="safari">أنا السفاري السحري</p> <p id="firefox">أنا من Firefox</p> <p id="firefox12">أنا أحد مستخدمي Firefox 1 - 2 في FF </p> <p id="ie7">أنا 囧IE7</p> <p id="ie6">أنا معطل في IE 6</p> |
ثم أترك علامات P هذه لا تظهر بشكل افتراضي
| <نمط النوع = "نص/CSS"> الجسم ع {العرض: لا شيء؛} </نمط> |
استخدم التعليقات الشرطية لـ IE CSS لتمييز متصفحات IE
أسهل طريقة للتمييز بين متصفحات IE هي بطبيعة الحال استخدام تعليقاتها الشرطية. لقد أنشأت Microsoft بناء جملة قويًا يسمح لنا بتحقيق هذه الوظيفة. لا أريد تقديم تعليقات IE الشرطية بالتفصيل، وأعتقد أنه يمكنك البحث في عشرات الآلاف من مصطلحات البحث في محرك البحث، فأنا بحاجة إلى هذين الاثنين فقط هنا:
| <!--[إذا كان IE 7]> <نمط النوع = "نص/CSS"> </نمط> <![endif]--> <!--[إذا كان IE 6]> <نمط النوع = "نص/CSS"> </نمط> <![endif]--> |
استخدم Hacks parser CSS لتمييز IE
على الرغم من أن التعليقات الشرطية في IE بسيطة جدًا وسهلة الاستخدام، إلا أنه إذا كنت تريد وضع كل ملفات CSS في ملف واحد، فيجب عليك استخدام طرق أخرى. لاحظ أن IE 7 Hack هنا لن يعمل إلا على IE7، لأن IE6 لا يعرف المحدد> على الإطلاق. وفي الوقت نفسه، عليك ملاحظة أن المحدد > غير صالح أيضًا للمتصفحات الأخرى.
| /* آي إي 7 */ أتش تي أم أل > الجسم # ie7 {*العرض: كتلة؛} /* آي إي 6 */ الجسم رقم 6 {_العرض: كتلة؛} |
CSS Hack للتمييز بين Firefox
الأول يستخدم body:empty للتمييز بين Firefox 1 و 2. يستخدم الاختراق الثاني امتدادًا خاصًا لجميع متصفحات Firefox - moz. -moz صالح فقط لمتصفح Firefox، ولا داعي للقلق بشأن تأثير المتصفحات الأخرى عند استخدام هذا الاختراق.
| /* فايرفوكس 1 - 2 */ الجسم: فارغ #firefox12 {العرض: كتلة؛} /* فايرفوكس */ @-moz-document url-prefix() {#فايرفوكس { العرض: كتلة }} |
CSS Hack يميز Safari
يبدو اختراق CSS الخاص بـ Safari مشابهًا جدًا لاختراق Firefox، فهو يستخدم الامتداد الخاص بمتصفح Safari - webkit وهو فعال فقط لمتصفح Safari.
| /* سفاري */ شاشة الوسائط و(-webkit-min-device-pixel-ratio:0) {#سفاري {عرض: كتلة }} |
CSS Hack يميز Opera
| /* الأوبرا */ @media الكل و (-webkit-min-device-pixel-ratio: 10000)، وليس الكل و (-webkit-min-device-pixel-ratio: 0) {head~body #opera { العرض: كتلة }} |
ثم اجمع كل ذلك معًا ويصبح
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html لانج="ar"> <الرأس> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>اختراقات متصفح CSS</title> <نمط النوع = "نص/CSS"> الجسم ص { العرض: لا شيء؛ } /* الأوبرا */ html:الطفل الأول #opera { عرض: كتلة؛ } /* آي إي 7 */ أتش تي أم أل > الجسم # ie7 { * العرض: كتلة؛ } /* آي إي 6 */ الجسم رقم 6 { _العرض: كتلة؛ } /* فايرفوكس 1 - 2 */ الجسم: فارغ #firefox12 { عرض: كتلة؛ } /* فايرفوكس */ @-moz-document url-prefix() { #فايرفوكس { العرض: كتلة } } /* سفاري */ شاشة الوسائط و(-webkit-min-device-pixel-ratio:0) { #safari { العرض: كتلة } } /* الأوبرا */ @media الكل و (-webkit-min-device-pixel-ratio: 10000)، وليس الكل و (-webkit-min-device-pixel-ratio: 0) { الرأس~الجسم #opera { العرض: كتلة } } </نمط> </الرأس> <الجسم> <p id="opera">أنا من Opera 7.2 - 9.5</p> <p id="safari">أنا السفاري السحري</p> <p id="firefox">أنا من Firefox</p> <p id="firefox12">أنا أحد مستخدمي Firefox 1 - 2 في FF </p> <p id="ie7">أنا 囧IE7</p> <p id="ie6">أنا معطل في IE 6</p></body> </html> |
على الرغم من أن CSS Hack جيد ومتوافق بشكل ملائم مع العديد من المتصفحات، إلا أنه لا يمكنه اجتياز التحقق من W3C، لذا عليك أن تفكر فيما إذا كان من الضروري استخدامه.