Forums / Setup & design / use of a CSS according to the navigator

"Please Note:
  • At the specific request of Ibexa we are changing this projects name to "Exponential" or "Exponential (CMS)" effective as of August, 11th 2025.
  • This project is not associated with the original eZ Publish software or its original developer, eZ Systems or Ibexa".

use of a CSS according to the navigator

« 
Previous topic
|
Setup & design
|
Next topic
 »
Author Message

tic 9

Wednesday 07 May 2008 4:21:27 am

hi!
I would like well that for each navigator that I can use a different CSS but my code does not function under eZ.
But the same code functions well apart from eZ.
Here my code javasript:

<script language="JavaScript" type="text/javascript">
var nn = (document.layers) ? true : false;
var ie = (document.all) ? true : false;
var dom = (document.getElementById && !document.all) ? true : false;
var oper= (document.all && (navigator.userAgent.toLowerCase().indexOf("opera") != -1)) ? true : false;
if (oper){
document.write( '@import url({"stylesheets/opera.css"|ezdesign(no)});');
}
else if (ie) {
document.writeln(''@import url({"stylesheets/ie.css"|ezdesign(no)});');
}
else if (dom || nn) {
document.write( '@import url({"stylesheets/nce.css"|ezdesign(no)});');
}
</script>

André R.

Wednesday 07 May 2008 6:34:31 am

You need to escape the bractes ( { & } ) used in you javascript code.
Take a look in the doc, search/look for the 'ldelim', 'rdelim' and 'literal' template functions.

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

tic 9

Wednesday 07 May 2008 7:00:52 am

thank you for your answer but the problem always continues! I still do not manage to apply the CSS for each navigator here my modified code:
{literal}
<script language="JavaScript" type="text/javascript">
var nn = (document.layers) ? true : false;
var ie = (document.all) ? true : false;
var dom = (document.getElementById && !document.all) ? true : false;
var oper= (document.all && (navigator.userAgent.toLowerCase().indexOf("opera") != -1)) ? true : false;
if (oper){
document.write( '@import url({ldelim}"stylesheets/opera.css"|ezdesign{rdelim});');
}
else if (ie) {
document.writeln('@import url({ldelim}"stylesheets/ie.css"|ezdesign{rdelim});');
}
else if (dom || nn) {
document.write( '@import url({ldelim}"stylesheets/nce.css"|ezdesign{rdelim});');
}
</script>
{/literal}

Łukasz Serwatka

Wednesday 07 May 2008 7:12:46 am

Do not use {ldelim} together with {literal}. If you are using {literal} then replace {ldelim} with { and same for {rdelim}, repalce with }.

BTW, Opera, Gecko and Webkit based web browsers support web standards better then IE. In most cases the IE conditional comments are sufficient to fix issues. Do you really need this check?

Personal website -> http://serwatka.net
Blog (about eZ Publish) -> http://serwatka.net/blog

tic 9

Thursday 08 May 2008 2:36:06 am

hi!

I need really this control for the need for my site! For what of IE, I think find a means of resoudre the problem. But the difficulty remains on other navigators. Isn't it possible to make this control with eZ?

André R.

Thursday 08 May 2008 4:28:45 am

Here is how you could do it:

<script language="JavaScript" type="text/javascript">
<!--
if ( window.opera )
    document.write( '<link rel="stylesheet" type="text/css" href={"stylesheets/opera.css"|ezdesign} \/>');
else if ( document.all )
    document.writeln('<link rel="stylesheet" type="text/css" href={"stylesheets/ie.css"|ezdesign} \/>');
else if ( document.getElementById || document.layers )
    document.write( '<link rel="stylesheet" type="text/css" href={"stylesheets/nce.css"|ezdesign} \/>');
//-->
</script>

And here is how you use javascript brackets inside templates:

<script language="JavaScript" type="text/javascript">
<!--
if ( window.opera )
{ldelim}
    document.write( '<link rel="stylesheet" type="text/css" href={"stylesheets/opera.css"|ezdesign} \/>');
{rdelim}
else if ( document.all )
{ldelim}
    document.writeln('<link rel="stylesheet" type="text/css" href={"stylesheets/ie.css"|ezdesign} \/>');
{rdelim}
else if ( document.getElementById || document.layers )
{ldelim}
    document.write( '<link rel="stylesheet" type="text/css" href={"stylesheets/nce.css"|ezdesign} \/>');
{rdelim}
//-->
</script>

But this way of browser sniffing is not very modern, this is how web developer did things 5-10 years ago.
Today most web developers tend to code for new browsers, and have extra css that is added for older browsers, witch is mostly internet explorer..

<!-- first include you standard css, then for ie 6 and lower, then ie 7 -->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href={"stylesheets/ie6.css"|ezdesign} />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href={"stylesheets/ie7.css"|ezdesign} />
<![endif]-->

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom