Previously in this blog we talked about LESS and how it can help working with extended features in CSS. But some basic things with configuring CSS in symfony are commonly unknown.

Expanded notation
Stylesheets can be defined using Yaml format in view.yml. The Definitive guide to Symfony explains how to include external stylesheets in your pages:

stylesheets: [main, my]

Note that you don’t need to specify the extension .css. symfony will add it for you. There is another way to define these, which may help when dealing with many external files or extra configuration:

stylesheets:
                  - main.css
                  - my.css

Multiple media
If you require to specify the media to which the stylesheet applies, it is described to do it like this:

stylesheets:
                  - screen.css
                  - print.css: { media: print }

What if you want to use the stylesheet for multiple media. It is not very clear and people tend to have issues defining it. Here is how:

stylesheets:
                  - screen.css
                  - print.css: { media: print }
                  - mobile.css: { media: 'handheld,screen' }

Conditional includes
Did you know you can include a stylesheet only for a specific browser? Are you thinking of IE by any chance? Here is how:

stylesheets:
                  - ie7.css: { condition: IE 7 }
                  - ie6.css: { condition: IE 6 }

If you have any more tips that you want to share, feel free to post a comment and share it with the community.