Przełącznik CSS zależny od przeglądarki z JSF

Question

Potrzebuję niektórych CSS specyficznych dla przeglądarki w mojej aplikacji JSF2 (Mojarra 2.1, Tomcat 7).

Próbowałem dodanie do mojego szablonu:

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

ale komentarze nie są renderowane, ponieważ ja również użyć:

<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> 

mój problem ... kiedy wyłączyć `javax.faces.FACELETS_SKIP_COMMENTS Dostaję masę innych problemów. Nie sądzę też, że moje komentarze kodu źródłowego należą do wygenerowanych stron.

Próbowałem też umieścić przełącznik w CDATA jak:

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

ale wewnętrzna < są renderowane jako podmioty html ..: - /, więc jej nie działa.

Pytanie: Czy istnieje inne rozwiązanie? Czy istnieje jakikolwiek znacznik JSF2, aby obsłużyć to? Zewnętrzne biblioteki znaczników?

Dzięki z góry, Steve

Answer 1

Jedynym sposobem jest użycie <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" /> 

Tak, to jest linia brzydoty. Ale nie ma innej standardowej metody.

---

Aktualizacja: JSF narzędzie biblioteka OmniFaces oferuje <o:conditionalComment> dokładnie w tym celu, tak aby nie trzeba brzydkie <h:outputText escape="false"> już: odpowiedź

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

Answer 2

Możesz być w stanie pracować rozwiązanie przy użyciu składni integracyjnego dla komentarzy warunkowych. Zamiast pisać <!--[if IE 8]> ... <![endif]-->, napiszesz: <![if !IE 8]> ... <![endif]>.

Innymi słowy, bez kreski, które sprawiają, że komentarz.

To jest poprawna składnia. Intencją tej składni jest to, że część warunkowa jest odczytywana przez przeglądarki inne niż IE, podczas gdy w przypadku składni z myślnikami inne przeglądarki będą ją ignorować.

Oczywiście ma to oczywiste implikacje dla twoich arkuszy stylów - CSS zawarty w bloku warunkowym będzie musiał być dla wszystkich przeglądarek innych niż IE8 (zauważysz, że wykrzyknik dodany powyżej sprawił, że nie jest to IE8 "); elementy specyficzne dla IE8 będą musiały być zawarte w twoim standardowym arkuszu stylów, aby zostały nadpisane przez style w bloku warunkowym.

Innymi słowy, jest to odwrócenie funkcjonalności w porównaniu z tym, co obecnie próbujesz zrobić.

Ważne jest dla ciebie, aby robiąc to w ten sposób blok warunkowy nie był komentarzem, a zatem nie powinien zostać usunięty przez twój analizator składni.

Być może trzeba będzie przerobić kilka rzeczy, ale powinno działać.

Inną opcją, oczywiście, jest znalezienie haka CSS specyficznego dla IE8. Te istnieją, ale sugerowałbym ich unikanie, jeśli to możliwe, ponieważ spowodujesz, że Twój CSS będzie nieważny i zawsze istnieje niebezpieczeństwo, że zostanie on uszkodzony w przyszłości.

Ale jeśli chcesz iść tą drogą, tu jest link, który daje odpowiedź: http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

Ale nie używać, chyba masz do. :-)

Nadzieję, że pomaga.

Answer 3

BalusC jest poprawna odpowiedź na moje pytanie. Nadal chcę udostępnić rozwiązanie oparte na JavaScript + CSS, które znalazłem: The CSS Browser Selector.

Wkładanie this minified line of JavaScript umożliwia korzystanie z Ja- i przeglądarki specyficzne selektorów CSS, np .:

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

Jeśli specyficzna stylistyka przeglądarka jest wciąż na początku, to może być wyraźniejszy rozwiązanie w porównaniu z tym wiele .css plików.