Redirection to load a CSS file

Redirection to load a CSS file - If a page has internal and external outgoing links to redirecting URLs, it’s returning 3xx (301, 302, etc.) HTTP status codes standing for redirection. This issue means that the page does not exist on a permanent or temporary basis. It appears on most of the popular web browsers, usually caused by a misconfigured website. However, there are some steps you can take to ensure the issue isn’t on your side. You can find more details about redirecting URLs by reading the Google Search Central overview. In this article, we’ll go over how you can fix the Redirection to load a CSS file error on your web browser. Problem :

I have in a remote server with this index.html that I can not modify:

<link rel="stylesheet" type="text/css" href="styles.css" /> 

But my styles.css file is not at the web root, that is /styles.css but at /css/styles.css, is possible through an .htaccess file load that file?

I have tried with:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /css/
</IfModule>

but it styles.css is not loaded yet.

NOTE: of course this is a minimal example, I would like to find a rule to load more than a CSS, not just one.

Solution :

Although the browser should cache permanent redirects, I think an internal rewrite would be preferable. This avoids the browser having to make an additional HTTP request:

RewriteEngine On
RewriteRule ^([a-z]+.css)$ /css/$1 [L]

You could just redirect /styles.css to /css/styles.css. In the .htaccess in the web root:

RedirectMatch permanent /([a-z]+.css)$ http://example.com/css/$1

(Replacing example.com with your real domain name.)

Just as an alternative to the .htaccess rules, you could include a styles.css file in the root, and just put @import statements in there that load the actual css files. Something like this:

/styles.css

@import 'css/styles1.css';
@import 'css/styles2.css';
...

I know it is an extra request and definitely not best practice, but it should be cached, and is a flexible and easy solution.

We hope that this article has helped you resolve the htaccess, redirects, css error in your web browsers. Enjoy browsing the internet uninterrupted!