css @import to <link>

[PinkMilk]

when storing style sheets to file vBulletin uses @import:

@import url("clientscript/vbulletin_css/style-xxxx-xxx.css");

this has a negative impact on web page performance, is it some how possible to change this to link?

<link rel="stylesheet" type="text/css" href="style-xxxx-xxx.css" />

--- Update ---


I have found this in includes/adminfunctions_template.php which looks to be the code I need to edit:

PHP Code:

if (write_css_file($cssfilename, $css))
                {
                    $css = "@import url(\"$cssfilename\");";
                } 


BUT

there is also this function that deletes the older css files:

PHP Code:

function delete_css_file($styleid, $csscontents)
{
    if (preg_match('#@import url\("(clientscript/vbulletin_css/style-\w{8}-0*' . $styleid . '\.css)"\);#siU', $csscontents, $match))
    {
        // attempt to delete old css file
        @unlink("./$match[1]");
    }
} 


so would need to change the preg_match regex for it to work with <link>, bit of an ask but can somebody be kind enough to rewrite the function?

[Zachery]

Uh, that is php code, not css code. I'm nearly positive vBulletin doesn't use an @import in the actual css rules. It uses a standard <link> tag, in the head.

[PinkMilk]

Originally Posted by Zachery

Uh, that is php code, not css code. I'm nearly positive vBulletin doesn't use an @import in the actual css rules. It uses a standard <link> tag, in the head.

Under the vbulletin options > Style & Language Settings there is an option:
"Store CSS Stylesheets as Files?", if you check yes instead of the full css loading in page (see this sites source for example) you get something like this:

<style type="text/css" id="vbulletin_css">
/**
* vBulletin 3.8.5 CSS
* Style: 'foobar'; Style ID: 5
*/
@import url("clientscript/vbulletin_css/style-436ba35e-0005.css");
</style>

as you can see it uses @import, this is not the best option it is better to use <link> as explained in op.

The first php code snippet is what helps create this , each time you update your style a new css file is created and the function in op deletes the older stored css file.

[kh99]

Try replacing the preg line with:

if (preg_match('#<link rel="stylesheet" type="text/css" href="style-\w{8}-0*' . $styleid . '\.css" />#siU', $csscontents, $match))

Originally Posted by Zachery

Uh, that is php code, not css code. I'm nearly positive vBulletin doesn't use an @import in the actual css rules. It uses a standard <link> tag, in the head.

I thought the same thing, but it turns out it is something that browsers recognize. http://stackoverflow.com/questions/1...why-use-import

[PinkMilk]

Originally Posted by kh99

Try replacing the preg line with:

if (preg_match('#<link rel="stylesheet" type="text/css" href="style-\w{8}-0*' . $styleid . '\.css" />#siU', $csscontents, $match))

I thought the same thing, but it turns out it is something that browsers recognize. http://stackoverflow.com/questions/1...why-use-import

Thanks but didn't work, I have the <link> format working great its just the deleting of the older stylesheet, guess I will have to just remember to clean that folder out from time to time.

[kh99]

Originally Posted by PinkMilk

Thanks but didn't work, I have the <link> format working great its just the deleting of the older stylesheet, guess I will have to just remember to clean that folder out from time to time.

Oh right - I got the pattern to match but forgot that it needs parens around the matched part to use in the unlink call. If you want to try again, you could try this:

PHP Code:

function delete_css_file($styleid, $csscontents)
{
if (preg_match('#<link rel="stylesheet" type="text/css" href="(style-\w{8}-0*' . $styleid . '\.css)" />#siU', $csscontents, $match))
    {
        // attempt to delete old css file
        @unlink("./clientscript/vbulletin_css/{$match[1]}");
    }
} 


[PinkMilk]

Also didn't work but I moved clientscript/vbulletin_css/ from unlink into preg match and is now.

[kh99]

I was just wondering if your <link> tag had the path in the file name or not. I guess it does.