JS and CSS Rendering Issues After .htaccess File URL Rewrite Rule
The "problem" is that you appear to be using relative URL-paths to your static resources (CSS, JS and images). So this is a client-side URL resolution issue. You should be using root-relative (starting with a slash) or absolute (with scheme + hostname) URLs to your assets so they can be located regardless of URL-path depth. (Note that any requests that your JS makes, eg. AJAX, should also be root-relative or absolute.)
The problem is not so much with .htaccess
, but when you change the URL from /post.php?page=page_slug
to /post/page_slug
then any client-side relative URLs are going to resolve relative to /post/
, not /
(the document root) as before.
The request for the JS (and CSS) files result in a 404, so the 404 HTML error document is most probably being parsed as JS and failing (ie. "Uncaught SyntaxError: Unexpected token: '<'" - due to a <!DOCTYPE html>
or opening <html>
tag).
A possible workaround (to avoid changing your URLs) is to use a base
HTML element in the head
section to indicate what any relative URLs should be resolved relative to, overriding the URL of the current document. However, this has some additional caveats if you are using in-page anchors of the form href="#element"
- since they will now be resolved relative to the document stated in the base
element and not the current document.
See also my answer to the following question on the Webmasters stack that goes into more detail on this:
- https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css
URL rewriting : css, js, and images not loading
Don't be lazy and change your relative URIs in your resources to root directory absolute pathing like /css/style.css
. This is the best.
You can get clever and use regex and replace all the files you need which would be like a few one liners and you're done. How many places could there be to change? And you should be using a template.
This should work but I wouldn't go this way.
RewriteRule ^detail/(css|js|img)/(.*)?$ /$1/$2 [L,QSA,R=301]
how to rewrite the htaccess rules to redirect to css files
You can have these rules in your site root .htaccess:
RewriteEngine On
# rewrite css files to their actual path
RewriteRule ^css/(.+\.css)$ resources/styles/$1 [L,NC]
# rewrite js files to their actual path
RewriteRule ^js/(.+\.js)$ resources/js/$1 [L,NC]
# write root to public/
RewriteRule ^$ public/ [L]
RewriteRule ^(?!resources/).* public/$0 [L,NC]
CSS not loading when using .htaccess
You need to add in a rule to exclude rewriting of assets
#Checks to see if the user is attempting to access a valid file,
#such as an image or css document, if this isn't true it sends the
#request to index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|images|robots\.txt|css)
.htaccess RewriteRule also rewriting my css, js and images files. how to ignore these?
You can use that:
RewriteEngine on
# not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|jpe?g|gif|png)$ [NC]
RewriteRule ^abc/(.+)/(.+)/ abc.php?id=$1&name=$2 [L]
# rewrite css, js and images, from root
RewriteRule ^abc/[^/]+/[^/]+/(.+)$ $1 [L]
If your final css (or js) directory is not at root, you can add the path before the last $1
. Now it's: /css/style.css
with /abc/xxx/yyy
/css/style.css
.htaccess rewrite rule breaks css and javascript when non existant sub directory or trailing slash is in url
It appears that you use relative links for including your javascript or css files.
So, all you have to do is make your file addresses absolute, like /js/search.js
.
Your rewrite rule is correct and it won't forward the actual files to your index.php file. But when you say src='js/search.js'
, it means index.php/js/search.js for the browser, and that is not an actual file address.
URL rewrite in htaccess results is missing CSS and images
RewriteRule index.php?url=$1 [QSA, L]
I think you have a couple of glaring typos(?) in your question that make this directive completely invalid... you are missing a RewriteRule
pattern, so this won't actually match anything and the erroneous space in the flags argument is syntactically invalid, resulting in a 500 Internal Server Error response?!
The RewriteRule
directive should be written like:
RewriteRule ^([\w/-]+)$ index.php?url=$1 [QSA,L]
^([\w/-]+)$
matches a URL-path containing any of the characters: a-z
, A-Z
, 0-9
, _
(underscore), /
(slash) and -
(hyphen). I've excluded the dot, which is naturally part of real filenames.
You should also ensure that MultiViews is disabled, so that mod_negotiation doesn't rewrite the request before mod_rwrite
- since your "extensionless" requests appear to map directly to filenames. eg. /user
maps to /user.php
. Place the following at the top of your .htaccess
file:
Options -MultiViews
But when I was given a slash to my URL it stops showing CSS or other IMG directories.
This isn't a problem with .htaccess
, but is caused by using relative client-side URLs to your static resources. When you request the URL /user/anonymous
then the browser will resolve any relative URLs relative to /user/anonymous
(not the document root - which is probably what you are expecting). If you have a relative URL to css/styles.css
then the browser is naturally going to resolve this to /user/css/styles.css
- which probably doesn't exist (and is likely getting rewritten to index.php
- but that isn't the issue - the fact that it doesn't exist is the issue).
If you look at the network traffic (HTTP requests) in the browser, it should give you a clue as to what's going on.
You need to change your client-side URLs to use either root-relative (starting with a slash) or absolute (scheme + hostname) URLs to fix this issue.
See my answer to the following question on the Webmasters stack that explains this further:
- https://webmasters.stackexchange.com/questions/86450/htaccess-rewrite-url-leads-to-missing-css
can not load css and js after htaccess redirect url in php
As you know, the default bahavior of base is to replace the url(adress) before the relative adress.
example:
<base href="http://www.mywebsite.com/images/" target="_blank">
The browser will look for the image "html5.png" at "http://www.mywebsite.com/images/html5.gif".
Hope it help you !
.htaccess rewrite url remove CSS,JS,AND IMAGES Whatever i do its not working
Because you are rewriting rules, you need also to rewrite base href HTML, or just add the full url to your styles,js and images.
Example base href:
<head>
<base href="https://www.yourwebsite.com/">
</head>
Related Topics
Draw Distorted Image on HTML5's Canvas
Bootstrap 4 Order Masonry-Like Column Cards Horizontal Instead of Vertical
CSS: Align Two Element, to The Left and Right in The Same Line Whithout Floats
Context.Getimagedata() Operation Is Insecure
How to Horizontally Center an Absolute Positioned Element Inside a 100% Width Div
Server Side Includes Alternative
HTML Tab Interface Using Only CSS
How to Specify Maxlength in CSS
How to Correctly Use "Section" Tag in HTML5
Reset Particular Input Element in a HTML Form
How to Center Image in a Div Horizontally and Vertically
HTML to Nsattributedstring and Nsattributedstring to HTML
CSS Grid Layout in Chrome Seems Not to Work Properly with More Than 1000 Rows
Ipad Layout Scales Up When Rotating from Portrait to Landscape
Setting Hidden Datalist Option Values
How to Anti-Alias Clip() Edges in HTML5 Canvas Under Chrome Windows