fuelphp-casset icon indicating copy to clipboard operation
fuelphp-casset copied to clipboard

Conditional Stylesheets

Open benswinburne opened this issue 12 years ago • 3 comments

I was wondering if Casset supported conditional stylesheets? For example I need to output certain stylesheets depending on the browser being used.

It seemed a bit counter intuitive to use Casset for all of my stylesheets except for the odd

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

I had a dig through the docs and code and didn't spot anything which looks like it does this so I'm assuming it doesn't. If this is indeed the case, is this something you're planning for the future?

benswinburne avatar May 10 '13 11:05 benswinburne

There's nothing built-in which specifically targets this scenario. However, groups can provide a solution. Something like (untested):

// config.php
'groups' => array(
    'css' => array(
        'my_group' => array(
            'files' => array(
                'stylesheet_for_all_browsers.css',
            ),
            'enabled' => false,
            'deps' => array('my_group_ie6'),
        ),
       'my_group_ie6' => array(
            'files' => array(
                'stylesheet_for_ie6.css',
            ),
            'enabled' => false,
        ),
    ),
),

When you Casset::enable_css('my_group'), the ie6-only group will also be enabled. If my_group is enabled to start with, you might not want to bother with the dependency stuff..

<!-- Your template -->

<!-- Render the ie6-specific group first, then it won't be rendered when you do the rest -->

<!-- [if IE6] -->
<?php echo Casset::render_css('my_group_ie6'); ?>
<![endif]-->

<?php echo Casset::render_css(); ?>

A better solution would be to add a magic value to the 'attr' property for a group (for example, 'attr' => array('ieif' => 'lt IE6'), then remove it around line 894, and add the corresponding conditional comments on lines 913, 921, 935, and 944. You'd still have to have two groups (doing this at a sub-group level is a nightmare, due to the complexity of combining ie6-only and all-browser stylesheets), but at least the conditional comments would be automatic. Of course there's a potential gotcha if the person has gen_tags disabled.... Pull requests gladly accepted :)

canton7 avatar May 10 '13 11:05 canton7

Another thought - we'd need to support both downlevel-hidden and downlevel-revealed comments. They could have different keys in $attr, but then someone could specify both... hrm...

canton7 avatar May 12 '13 10:05 canton7

you dont need to do this anyway, use the brilliant Agent class built into fuel

if (Agent::browser() == 'IE' and Agent::version() < 9){
   //addyour assets here
}

leemason avatar Sep 27 '13 15:09 leemason