Включая CSS-файл для браузера, если JavaScript отключен? - PullRequest
Новая
       4

Включая CSS-файл для браузера, если JavaScript отключен?

2 голосов
/ 09 июня 2009

У меня есть 2 CSS-файла для моего сайта, один для всех обычных браузеров и другой для отсталого Internet Explorer. Я включаю любой из файлов CSS в зависимости от JavaScript, который проверяет возможности браузера. Что было бы лучшим вариантом в случае, если пользователь отключил JavaScript! Я должен включить некоторые CSS, без которых все страницы выглядят ... ну ... голыми. Любые комментарии приветствуются.

Ответы [ 6 ]

8 голосов
/ 09 июня 2009

вы имеете в виду 

<!--[if IE 6]>

и 

<![endif]-->

не работает без JavaScript?

Кстати, вот первые два результата поиска Google для "css для браузера":

  1. http://www.webmonkey.com/tutorial/Browser-Specific_CSS_Hacks
  2. http://www.sitepoint.com/article/browser-specific-css-hacks/

ура!

4 голосов
/ 09 июня 2009

То, что вам нужно, это условные операторы CSS. Это специально отформатированные HTML-комментарии, которые распознает только IE, они позволяют вам ориентироваться на разные версии IE с разными CSS-файлами.

Существует простое if statement, которое вставляется в комментарий, который IE запрограммирован на распознавание 

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

Приведенный выше код предназначается для каждой версии IE. Вы можете указать, какая версия, добавив номер версии 

<!--[if IE 5.5]>
<link type="text/css" rel="stylesheet" media="all" href="css/ie.css" />
<![endif]-->

Вы также можете применить его к версиям ниже или равным определенному номеру версии 

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

lte меньше или равно; Вы также можете использовать gte больше или равно.

Использование условных комментариев обычно используется для добавления файлов CSS, но вы также можете добавлять ссылки на файлы JS, которые вам могут понадобиться только для определенных версий IE.

Еще одна вещь, если вы в конечном итоге используете несколько таблиц стилей для разных версий IE, не забудьте назвать файл так, чтобы он включал номер версии, на которую вы нацеливаетесь (например, IE-6.css).

0 голосов
/ 09 июня 2009

<noscript> нельзя использовать внутри <head> Также <noscript> только обнаруживает, отключен ли браузер javascript (может быть заблокирован брандмауэром), поэтому он не может быть гарантированно работать.

Что касается двух ваших CSS-файлов, то лучшей стратегией было бы иметь базовый файл, включающий всегда , а затем CSS-файл, содержащий изменения / хаки, необходимые для IE. Используйте условные комментарии для загрузки, т.е. CSS, когда браузер IE. 

<!--[if IE]>  
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />    
< ![endif]-->
0 голосов
/ 09 июня 2009

Использование Javascript для обнаружения в браузере - очень плохая идея . Там нет надежного способа сделать это. Я предполагаю, что вы используете объект navigator - обратите внимание, что это очень ненадежно, поскольку различные браузеры отправляют «неправильную» информацию или позволяют пользователям настраивать отправляемую ими информацию. Кроме того, как вы заметили, существует проблема с пользователями, не поддерживающими Javascript.

Способ включения CSS, специфичного для браузера, как отмечали все остальные, - через условные комментарии IE.

0 голосов
/ 09 июня 2009 
<noscript>
<link rel="stylesheet" href="/global/mse/en/us/RenderingAssets/stuHome-IE.css"
      type="text/css" media="screen, projection">
</noscript>
0 голосов
/ 09 июня 2009

Попробуйте это взломать: 

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />    
<!--[if IE]>  
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />    
< ![endif]-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...