symfony2 + assetic：使用{％javascripts％}时如何将CSS限制为打印

Question

In my symfony 2 application, I have :

<link href="{{ asset('stylesheets/backend/plugins/fullcalendar/fullcalendar.print.css') }}" rel='stylesheet' media='print'>

I also have a vendor css file which modifies it and needs to be placed after. This one is included in my {% stylesheets %} block :

{% stylesheets
    'stylesheets/backend/style.css'

    filter='?yui_css, cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Now the thing is if I put the css for print in the stylesheets block, I lose the media=print argument and things get messed.

How can I include a css into a stylesheets block and restric its usage to a print media query ?

Thanks a lot

Answer 1

There are a couple of ways to approach this:

1) You could separate your print-specific stylesheet into a new stylesheets block (you can have as many of these as you need), and simply add the media='print' attribute to the <link> element.

It would look something like this:

{% stylesheets
    'foo.css'
    'bar.css'

    filter='?yui_css, cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

{% stylesheets
    'vendor_stylesheet_with_print_styles.css'

    filter='?yui_css, cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" media="print" />
{% endstylesheets %}

2) If you don't need to support IE8 , you can use a media query inside the CSS file that needs to modify it:

@media print {
    ... styles go here ...
}