2

I think I look everywhere, but no success. I am learning Symfony2 so it is possible that I overlooked something.

Here is how I load my css (it works fine):

{% stylesheets filter='cssrewrite'
 '@MyHomeBundle/Resources/public/css/*.css'
 '@MyAuthBundle/Resources/public/css/*.css'
 '@MyUserBundle/Resources/public/css/*.css'
  <link rel="stylesheet" media="screen" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}

The question is how do I distinguish media: handheld, print, screen?

Found that on old Symfony versions, there was file view.yml in which it was possible to mark that "mobile.css" will be loaded only for small devices etc. By then I found discussion http://www.mail-archive.com/symfony-devs@googlegroups.com/msg07718.html that new approach in Symfony2 is much greater and removing this view.yml was good step. Nevertheless it left me with no solution to my problem.

So the question is: how do I specify media="handheld" for lets say mobile.css or media="print" for printable version, to be picked up from my bundles?

I am guessing that this may be some condition, testing name in twig, and depending on name, for example home_mobile.css or home_print.css will load media="handheld" or media="print" accordingly, and by default media="screen" - but if this is correct direction and how to achieve it?

Thanks for your help

Pifon
  • 346
  • 3
  • 16

2 Answers2

2

I couldn't find an official answer either but using two sets of stylesheet tags works.

{% stylesheets filter='less,cssembed,cssrewrite,?yui_css' output='css/screen.css'
    'bundles/wolproject/css/main.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
{% endstylesheets %}

{% stylesheets filter='less,cssembed,cssrewrite,?yui_css' output='css/print.css'
    'bundles/wolproject/css/print.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="print" />
{% endstylesheets %}
Kate Lanyon
  • 21
  • 2
0

Not really an answer, but an alternative solution.

Depending on the scale of your site I would probably keep them all in a single CSS file for quicker page load times, with media queries for print and device. You can then change your code above to media="all".

Link related - http://css-tricks.com/one-two-three/

ConorLuddy
  • 2,217
  • 2
  • 19
  • 18
  • Thank you for tip. The thing is that as I wrote - I am learning Symfony now, so would like to avoid tricks and would really understand the proper way of doing that. Additionally, as you see - I am loading multiple stylesheets each responsible for very specific part of page (Auth for instance covers only login form, home contains style for homepage, I have omitted main layout style). Nevertheless, thanks again. I am deeply surprised, that this question hangs here so long and nobody actually have the clear and straight forward solution. Maybe, oddly, its not implemented? – Pifon May 16 '13 at 08:15
  • No problem, it might have been a work around if you were stuck. Unfortunately I have no experience with Symphony. Possible answer here: http://trac.symfony-project.org/ticket/3237 [code] stylesheets: - screen.css - print.css: { media: print } - mobile.css: { media: 'handheld,screen' } - ie7.css: { condition: IE 7 } - ie6.css: { condition: IE 6 } – ConorLuddy May 16 '13 at 08:58