Home
 

23

Apr

7

Controlling the order of CSS includes

What it Does

Requirements::insertHeadTags can be used to parse seperate style sheets for IE6/7.

Usually CSS developers are lazy -even more so than php developers! What usually happens is (as you can see in firebug) that styles get redefined by sub CSS files depeding on a parent containing div -so it's important to include these CSS files in the correct order, otherwise they will be overwritten incorrectly and the style wont appear as you wish.

Your probably already using Requirements::themedCSS but there is another function called Requirements::insertHeadTags. This is great for including custom style sheets because you can call it AFTER your usuall CSS. An example would be something like;

This is not very often picked up on as developers use firefox (and firebug) without any real IE6/7 testing, and if you view source on this site you will see that ie6/7 css are being included after standard stylesheets. This means any special styles that overwrite previous styles to create a fix wont work -as they are being called in the wrong order.

Hopefully this helps someone, as Id spent alot of time editing stylesheets and flushing all only to see no change -its useful to note when creating complex design sites.

About the Author

Name: Matt Clegg

Comments (7)

  • @Matt:
    Yes, you have to set the inclusions per file.

    I played with the Requirements::combined_files() method, but as soon as you use that it will only combine the files that are set as combined. You can't run Requirements::combine_files multiple files. See code below:

    http://sspaste.com/paste/show/4bdc3922b8b89

    I see a new extenions here ;)

    Posted by Martijn, 01/05/2010 9:15am (4 months ago)

  • Marjin; But presumably you'd have to include any extra css from modules separately as opposed to letting SS call them as/when it needs them. Would be good if this functionality could be written into the Requirements::css function so it'd work site wide..

    Josh, Yeah its not a great way of doing it -but as its only a small segment wouldn't think it as being too much an issue. I suppose you could do something like;

    Requirements::insertHeadTags(file_get_contents('requirements_css.php'));
    (untested)

    Posted by Matt Clegg, 29/04/2010 9:41am (4 months ago)

  • It keeps you sourcefiles readable for editing and you have to load just one CSS and Javascript file for visitors..

    Posted by Martijn, 28/04/2010 11:01am (4 months ago)

  • Main advantage is that it loads faster for the end user as all the whitespace is cut.

    Nice tutorial...but I wouldn't embed html in a PHP variable!

    - Josh

    Posted by SilverStripe Web Development, 27/04/2010 3:15am (4 months ago)

  • Dan, yes you can do for simple sites & I think there is a note about doing such in the initial Page.php -but when you start using modules that have their own css they are usually called in by Requirements::css and so it makes it simpler if you can control the order in which your 'custom/overriding' css is called.

    And as Marjin has stated you can do some other cool stuff when including via PHP.

    Thats some nice code Martijn, what is the main advantage of compressing css in this way?

    Posted by Matt Clegg, 26/04/2010 5:21am (4 months ago)

  • I agree with Dan. But when using Requirements, you can do something like this:

    if(Director::isDev()){
    Requirements::css("themes/".SSViewer::current_theme()."/css/form.css");
    Requirements::css("themes/".SSViewer::current_theme()."/css/layout.css");
    Requirements::css("themes/".SSViewer::current_theme()."/css/typography.css");
    } else {
    Requirements::css("themes/".SSViewer::current_theme()."/css/css.php");
    }

    So you can combine and compress the seperate css files with:

    <?php
    header('Content-type: text/css');
    ob_start("ob_gzhandler");

    function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);

    return $buffer;
    }

    /* your css files */
    $buf = file_get_contents('./form.css');
    $buf .= file_get_contents('./layout.css');
    $buf .= file_get_contents('./typography.css');

    echo compress($buf);

    ob_end_flush();

    // end code

    This also works for javascript, in combination with the JavascriptPacker ;)

    http://joliclic.free.fr/php/javascript-packer/en/

    Posted by Martijn, 25/04/2010 5:24am (4 months ago)

  • Matt, Would the better way to solve this be to use Template require for your CSS and not PHP Requirements?

    <% require themedCSS(main) %>

    I'm not sure this solves the same issue, but I think it does.

    Posted by Dan Rye, 23/04/2010 9:47am (5 months ago)

RSS feed for comments on this page RSS feed for all comments

Post your comment