Whats the correct way to implement browser specific CSS using TVs?

33 Posts

Sitethief Reply #1, 16 years, 7 months ago

I started using TVs to get my CSS files where I want them. This way I keep as much coding as possible in MODx its self. But what would be a correct way of implementing browser specific CSS using TVs? (mainly for IE).

I used to have a TV named ’customCSS’ which made it possible to use a number of CSS files that I had created. But when I want to use more then one CSS file for each resource I have to create more then one TV aswell, which kind of makes the advantage of using TV’s for my CSS files obsolute.

What is a good way to implement this in MODx?

33 Posts

Sitethief Reply #2, 16 years, 7 months ago

For example:

        <!-- Stylesheet for IE browsers -->
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="./assets/gfx/css/ie.css" >
        <![endif]-->

        <!-- Stylesheet for non-IE browsers -->
        <![if !IE]>

        <link rel="stylesheet" type="text/css" href="[(site_url)][~[*customCSS*]~]">
        <![endif]>

And thats with only two browser specific CSS stylesheets.....

884 Posts

sinbad Reply #3, 16 years, 7 months ago

pardon the ignorance but why don’t you just add your IE css to the template headers?
also you don’t need the if !IE for non-IE browsers, just add your IE specific css files after your main css file and let the Cascading do its job overwriting the rules.

something like this:

<title>[*pagetitle*] - [(site_name)]</title>
<base href="[(site_url)]"></base> 
<link href="style.css" rel="stylesheet" media="screen" type="text/css" />
<link href="typography.css" rel="stylesheet" media="screen" type="text/css" />
<!--[if IE]> <link href="assets/templates/blackgold/ssc-style-ie.css" rel="stylesheet" media="screen" type="text/css" /> <![endif]-->	
<!--[if IE 6]> <link href="assets/css/style_ie6.css" rel="stylesheet" media="screen" type="text/css" /> <![endif]-->
[*include_CSS*]

IMHO most of the IE rules are usually just to fix design that IE don’t render properly so anyway they needed on all/most pages.
then if you need the flexibility to use other CSS files on certain page you can use the [*include_CSS*] to add them. that will also let you set several files at once instead of creating separate TV for each css file you got.

33 Posts

Sitethief Reply #4, 16 years, 7 months ago

I have my CSS mostly in MODx, therefore I can’t really link to external files. And it is in the template header.