• 10.0.0 - 10.0.26
    541 201 9965 Email Website
  • Contents
    Search:
     

    Home > Development Notes > Inlining CSS

    Inlining CSS

    We've introduced a way to 'Inline your CSS' in version 10.0.2 of AspDotNetStorefront. This is a bit of an experimental feature. You'll need some technical expertise to take advantage of this option because when you move a CSS file into a style tag you need to update the urls referenced from your CSS for things like background images and fonts so that they are now relative to the root of the site rather than relative to the CSS file.

    You should also try to slim down your CSS considerably. (Google doesn't recommend you try to inline large CSS files.)

    The inline option works in concert with .Net Bundling and Minification. Bundling and minification allows you to work with user-friendly individual multi-line) files, and then at runtime the application bundles those separate user-friendly files into one minified file. So to enable CSS inlining you must first enable bundling and minification by setting the EnableBundlingAndMinification key in the /AppSettings.config file to true.

    <add key="EnableBundlingAndMinification" value="true" />
    

    Next you'll need to go find your style bundle(s). They are usually in your /Skins/{SkinName}/Views/Shared/_Head.cshtml file.

    The default style bundle looks something like this:

    @Html.RenderStyleBundle(
        bundlePath: Url.SkinUrl("css/_skin_bundle"),
        filePaths: new[]
        {
            Url.AppRelativeSkinUrl("css/bootstrap.css"),
            Url.AppRelativeSkinUrl("css/font-awesome.css"),
            Url.AppRelativeSkinUrl("css/base.css"),
            Url.AppRelativeSkinUrl("css/fonts.css"),
            Url.AppRelativeSkinUrl("css/style.css"),
        })
    

    To enable inline CSS just add one extra parameter to the end setting inline equal to true like so:

    @Html.RenderStyleBundle(
        bundlePath: Url.SkinUrl("css/_skin_bundle"),
        filePaths: new[]
        {
            Url.AppRelativeSkinUrl("css/bootstrap.css"),
            Url.AppRelativeSkinUrl("css/font-awesome.css"),
            Url.AppRelativeSkinUrl("css/base.css"),
            Url.AppRelativeSkinUrl("css/fonts.css"),
            Url.AppRelativeSkinUrl("css/style.css"),
        },
        inline: true)
    

    Now if you load up the website in a browser you can see that your CSS looks like so:

    <style type="text/css">html{font-family:sans-serif;...</style>
    

    Take a close look around the site though. You will probably notice that your work here is not done. You now need to change all of the url references throughout your CSS from something like this ../images/mailicon.gif to something more like /skins/{SkinName}/images/mailicon.gif. For example this:

    background: url('../images/mailicon.gif') no-repeat scroll left center;
    

    becomes:

    background: url('/skins/default/images/mailicon.gif') no-repeat scroll left center;
    


    Actions
    Print This Article
    Bookmark
    Email This Article
    Previous Article
    Next Article