Как переписать инструкцию CSS @import

Question

У меня есть код css в моем приложении, и мне нужно переписать его с помощью импорта.

Я понимаю, что он сначала проверяет, является ли IE версией 6, если да, он импортирует определенный CSS, если не просто пустую строку.

Импорт действительно необходим здесь? Я предполагаю, что если я просто напишу это в конце всех файлов css, это станет приоритетом.

@import "javascript:(/msie 6/gi.test(navigator.userAgent)) ? 'table.menu tr.highlight td.icon img { filter: none !important; margin-left: 1px !important; margin-right: 3px !important; margin-top: 1px !important; margin-bottom: 3px !important;)' : ''"; 

Answer 1

В вашем .css-файле вы можете «взломать» область видимости ie6 только путем добавления (* html) перед объявлением.

IE-6 ТОЛЬКО

* html .selector { 
    /* this will apply to ie6 only */ 
} 

Вы можете также использовать хак с подчеркиванием, но это вызовет ошибки проверки в файле CSS. Для справки, вот пример:

.selector { 
    margin:0; 
    _margin-left:5px; /* only IE6 */ 
} 

Таким образом, вы можете попробовать:

* html table.menu tr.highlight td.icon img { 
    filter: none !important; 
    margin-left: 1px !important; 
    margin-right: 3px !important; 
    margin-top: 1px !important; 
    margin-bottom: 3px !important; 
} 

Если вам нужна более подробная информация о .css взламывает целевой IE, вы можете прочитать some examples here.

IE-6 ONLY 
* html #div { 
    height: 300px; 
} 

IE-7 ONLY 
*+html #div { 
    height: 300px; 
} 

IE-8 ONLY 
#div { 
    height: 300px\0/; 
} 

IE-7 & IE-8 
#div { 
    height: 300px\9; 
} 

NON IE-7 ONLY: 
#div { 
    _height: 300px; 
} 

Hide from IE 6 and LOWER: 
#div { 
    height/**/: 300px; 
} 

html > body #div { 
     height: 300px; 
} 

Если вы хотите, чтобы «заменить» на @import с условной техникой, то пользователь PeterVR ответ больше к точке с использованием Microsoft условного комментария в части заголовка вашего документа HTML.

Answer 2

Используйте условные комментарии в элементе head вместо импорта в CSS. Это изолирует для IE только 6:

<!--[if IE 6]> 
    <style type="text/css"> 
     table.menu tr.highlight td.icon img { 
      filter: none !important; 
      margin-left: 1px !important; 
      margin-right: 3px !important; 
      margin-top: 1px !important; 
      margin-bottom: 3px !important; 
     } 
    </style> 
<![endif]--> 

В этой ситуации, однако, это, вероятно, лучше, чтобы создать специальный IE6 стилей и добавить, что в любом случае будет работать..

Answer 3

Лично я бы поставил стили IE6 в отдельную таблицу стилей, а также и использовать условные комментарии в голове моей HTML, чтобы включить его:

<!--[if IE 6]> 
    <link rel="stylesheet" type="text/css" href="ie6.css" /> 
<![endif]--> 

методика очень хорошо объяснено здесь: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Как вы заметите, этот метод работает и для большинства других версий IE. Я предпочитаю эту технику встроенным хакам, как описано в @Milkywayspatterns, потому что он сохраняет ваш код намного чище, читабельнее и проще в обслуживании. Также он предотвращает загрузку IE только css реальными браузерами. Они проигнорируют код (как и должны, это комментарии в конце концов), и только пользователям IE придется ждать загрузки дополнительных байтов ...

И я не завидую вам, что все еще нужно поддерживать IE6!