Jump to:

5513 Posts in 1732 Topics by 1218 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Modify Requirements function to place CSS files before closing body tag

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 389 Views
  • _Matt
    Avatar
    Community Member
    24 Posts

    Modify Requirements function to place CSS files before closing body tag Link to this post

    I'm wondering if anyone can help me modify the Requirements function to allow the placement of CSS files before the closing body tag. I know there's an option to do this for Javascript files, so I'm hoping extending this to CSS files shouldn't be too tricky.

    "Why", you might ask? Well if you're interested here's why: https://www.youtube.com/watch?v=YV1nKLWoARQ

    Suffice to say it's for performance reasons - you should only load CRITICAL assets in the head (preferably inline to reduce HTTP requests). All other assets should be loaded asynchronously or at the foot of the page.

  • _Matt
    Avatar
    Community Member
    24 Posts

    Re: Modify Requirements function to place CSS files before closing body tag Link to this post

    So for now I've written a little function to do what I wanted, which I'll put below. It would still be good to know if the Requirements function can be modified though - optimising sites for mobile is hugely important, so being able to load CSS before the closing body tag is absolutely crucial.

    In Page.php:

    class Page_Controller extends ContentController
    {
    /**
    * addUniqueQueryString() Adds a unique query string to a file name based on its modification date
    * @param string $filePath Path to file relative to base URL
    * @return string File name with unique query string appended, eg. `myfile.css?m=0123456789`
    */
    function addUniqueQueryString($filePath)
    {
    $fileLastModDate = filemtime(Director::baseFolder().'/'.$filePath);
    $webSiteBaseURL = Director::BaseUrl();
    return $webSiteBaseURL . $filePath . "?m=" . $fileLastModDate;
    }
    }

    Then in Page.ss:

    /* Site content... */
    <link rel="stylesheet" href="$addUniqueQueryString('themes/mytheme/styles/myfile.css')">
    </body>

    389 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.