استخدام أنماط CSS مختلفة لمتصفحات محددة

Question

ما هي أفضل طريقة للحصول على CSS منفصل لـ IE والمتصفحات الأخرى؟أفكر فقط في استهداف مستخدمي IE وFirefox وSafari.خاصة الآن مع دعم CSS3 في معظم المتصفحات باستثناء IE.

الطرق المختلفة للقيام بذلك التي صادفتها هي

1. loading separate stylesheets conditionally using <!--[if IE]>
2. اختراق الشرطة السفلية والعديد من عمليات اختراق IE المضمنة الأخرى

أفضّل (2) لأن (1) عمل إضافي خاصة عند التطوير.لكن (2) لا يبدو أنه يعمل طوال الوقت.ما هي الطريقة الأكثر فعالية؟

Answer 1

سأحصل على ورقة أنماط واحدة يلتقطها كل شيء في الجزء العلوي من المستند.

أسفل هذا ، قم [!-[إذا كان IE]] ورقة نمط مشروطة.

هنا فقط تجاوز الأنماط التي تسبب مشاكل في IE.- النمط الأخير الذي يتم اختياره لفئة معينة هو النمط الذي سيتم اتباعه.

Answer 2

يتعامل فريقنا مع CSS باتباع ثلاث قواعد:

1. تأكد من أن ملفات CSS العامة/المشتركة تعمل كما ينبغي مع جميع المتصفحات في أقرب وقت ممكن.
2. التعامل مع جميع "أخطاء" IE في ملفات منفصلة، ​​والتحكم في تحميل أوراق الأنماط بشروط IE.
3. لا يُسمح بأي اختراقات إلا إذا لم يكن من الممكن تفعيلها باتباع القاعدتين الأوليين.

Answer 3

أوافق على الاحتفاظ بكل CSS الأساسي الخاص بك في ملف واحد.إذا كنت تستخدم ASP.NET، فيمكنك استخدام WebHandler لإدارة CSS الذي سيتم إرساله فعليًا.أنا متأكد من أن اللغات الأخرى لديها حلول مماثلة.يتيح لك هذا إرسال ما تحتاجه فقط والسماح بتخزينه مؤقتًا.والفائدة الأخرى هي أنه يمكنك دمج ملفات CSS متعددة (إذا كانت هذه هي الطريقة التي تفعل بها ذلك) وتقديم ملف واحد فقط.تعد هذه ممارسة جيدة حيث تقوم بتقليل عدد الطلبات المقدمة إلى خادم الويب.

يمكنك بعد ذلك كتابة أشياء مثل هامش [if lt IE 8]:0بكسل;ولن يتم إرساله إلى IE8 أو FF وما إلى ذلك.

إذا كنت تستخدم لغة HTML فقط، فعليك الالتزام بشروط النمط [!--[if IE]] المذكورة أعلاه.

نحن نستخدم WebHandler في مشروعنا الكبير جدًا ولن أفعل ذلك بأي طريقة أخرى.

يرى http://www.conditional-css.com/download.إنه متاح لـ PHP وC# وC

حظ سعيد.

Answer 4

<!--[if !IE]><!--><link rel="stylesheet" href="non-ie.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->

تستخدم هذه الخدعة على نطاق واسع Yandex (المعروف أيضًا باسم "russian google") لتقليل طلبات HTTP. market.yandex.ru باستخدام هذا، على سبيل المثال.

Answer 5

يمكنك استخدام هذه الطريقة أيضًا؛ في بعض الأحيان قد لا تعمل الشروط حيث نحتاج إلى كتابة الأنماط في منتصف الكود.

<?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>  
    <?php if (strstr($browser, "MSIE 6.0")) { ?>  
    <link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />  
    <?php }else{ ?>  
    <link rel="stylesheet" href="default.css" type="text/css" media="screen" />  
    <?php } ?>  

افحص ال $browser مع :

آي إي - "MSIE"

فايرفوكس - "فايرفوكس"

سفاري - "سفاري"

الأوبرا - "الأوبرا"

كروم - "كروم"