Браузер-зависимый переключатель CSS с JSF

Мне нужно CSS для браузера в моем приложении JSF2 (Mojarra 2.1, Tomcat 7).

Я попытался добавить к моему шаблону:

    <!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE8}" />
    <![endif]-->

но комментарии не отображаются, поскольку я также использую:

<context-param>
    <!-- Removes any comments from the rendered HTML pages. -->
    <param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
    <param-value>true</param-value>
</context-param>

моя проблема... когда я отключу `javax.faces.FACELETS_SKIP_COMMENTS, я получаю кучу других проблем. Также я не думаю, что мои комментарии к исходному коду принадлежат к сгенерированным страницам.

Я также попытался поставить переключатель в CDATA следующим образом:

<![CDATA[
 <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE7}" />
 <![endif]-->
]]>

но внутренний < отображаются как html-объекты..: -/, поэтому он не работает.

Вопрос: Есть ли другое решение? Существует ли какой-либо JSF2-тег для обработки этого? Библиотеки внешних тегов?

Спасибо заранее, Стив

Ответы

Ответ 1

Единственный способ - использовать <h:outputText escape="false">.

<h:outputText value="&lt;!--[if IE 8]&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;#{cfgs.externalCssUrlIE8}&quot; /&gt;&lt;![endif]--&gt;" escape="false" />

Да, это линия уродства. Но нет другого стандартного способа.

Обновить: библиотека утилиты JSF OmniFaces предлагает <o:conditionalComment> для этой цели, так что вам больше не нужно уродливое <h:outputText escape="false">:

<o:conditionalComment if="IE 8">
    <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE8}" />
</o:conditionalComment>

Ответ 2

Возможно, вы сможете работать с использованием синтаксиса inclusive для условных комментариев. Вместо записи <!--[if IE 8]> ... <![endif]--> вы должны написать <![if !IE 8]> ... <![endif]>.

Другими словами, без тире, которые делают его комментарием.

Это законный синтаксис. Цель этого синтаксиса состоит в том, что условная часть считывается не-IE-браузерами, тогда как с синтаксисом с тире, другие браузеры будут игнорировать его.

Конечно, это имеет очевидные последствия для ваших таблиц стилей - CSS, включенный внутри условного блока, должен быть для всех браузеров, отличных от IE8 (вы заметите, что восклицательный знак, который я добавил выше, делает его "не IE8", ); специфический для IE8 материал должен быть включен в вашу стандартную таблицу стилей, которая будет переопределена стилями в условном блоке.

Другими словами, это изменение функциональности по сравнению с тем, что вы в настоящее время пытаетесь сделать.

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

Возможно, вам придется переделать несколько вещей, но это должно сработать.

Другим вариантом, конечно же, является поиск CSS-хакера, специфичного для IE8. Они существуют, но я бы предложил избегать их, если это возможно, так как вы сделаете свой CSS недействительным, и всегда существует опасность его взлома в какой-то будущей версии браузера.

Но если вы хотите спуститься по этому маршруту, вот ссылка, которая дает вам ответ: http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

Но не используйте это, если не нужно.: -)

Надеюсь, что это поможет.

Ответ 3

Ответ BalusC - правильный ответ на мой вопрос. Тем не менее я хочу поделиться решением на основе JavaScript + CSS, которое я нашел: Селектор браузера CSS.

Вставка эта сокращенная строка JavaScript позволяет использовать селекторы CSS для ОС и браузера, например:

  • html.gecko div # header {margin: 1em; }
  • .opera #header {margin: 1.2em; }
  • .ie.mylink {font-weight: bold; }
  • .mac.ie.mylink {font-weight: bold; }
  • . [os]. [browser].mylink {font-weight: bold; }

Если стиль вашего браузера по-прежнему находится в начале, это может быть более четкое решение по сравнению со многими файлами .css.