I want to debug some CSS style which is referenced in the html markup via code
<link href="css/z-lp.webflow.css?v=1.0.6" rel="stylesheet" type="text/css">
Note presence of ?v=1.0.6 in the href.
I've added a folder to my workspace, which contains z-lp.webflow.css file.
Now I'm trying to map this file via "Map to filesystem resource" and it does not work since file can not be found.
If I map z-lp.webflow.css omitting ?v=1.0.6 part, then Chrome does not reflect changes in local file.
Is it possible to map hrefs with query URI in Chrome?
Related
My frontend app is running at port http://localhost:3000.
I have an endpoint that returns the css file for specific id(i.e. 88871) as following:
http://localhost:8080/api/getCssFile/88871
I need to add this css file dynamically to head of the index.html file as follows:
let cssUrl = "http://localhost:8080/api/getCssFile/" + id;
let link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', cssUrl);
document.head.appendChild(link);
This will add following code to head of the index.html file.
<link rel="stylesheet" type="text/css" href="http://localhost:8080/api/getCssFile/88871" />
All looks good. However, Css is not being reflected in the webpage. Css file will be downloaded when this link is clicked instead.
http://localhost:8080/api/getCssFile/88871
Am I missing anything here?
I tried loading css from the api however, the css is not being reflected in the webpage.
The reason your approach is not working is that you are loading the CSS file through JavaScript which runs after your document has already been loaded, so the document does not know about the link as it has already been "painted" by the browser.
I'm not sure why you've chosen the path of having a backend service return a CSS file, but my advice would be to avoid that. If you want shared styling that updates periodically consider creating a NPM library that exposes the stylesheet and consume that within your app.
In the app I just started I'm having trouble getting my CSS stylesheet to load. I'm used to using the asset pipeline with rails, but I'm trying to use angular for the front end, which has taken everything out of the asset pipeline.
I have the css file in public/app/styles/style.css and am referencing it in my index.html with:
<link rel="stylesheet" href="app/styles/style.css">
I have images linked successfully with src=app/assets/images/... and if I look in the sources tab on the developer console the file does show up, it just appears to be empty.
Can anyone see where the disconnect is?
From what I can see with the code, your tag could use a 'type' attribute, but that wouldn't stop it from working.
The URL in the link is 'app/styles/style.css', I assume your index.html file is in the 'public' folder?
I'd reality check the URL to ensure it's pointing right to the style.css file, and update the to use the full HTML5 format, which is:
<link rel="stylesheet" type="text/css" href="app/styles/style.css">
I'm building a website locally using Apache, MySQL and PHP. I have different subfolders and I'm trying to give one absolute reference to my css file from my main header.php includes file.
Inside of header.php I have:
<link href="/Users/nicolauria/Sites/sd/css/style.css" type="text/css" rel="stylesheet" />
The css file does not load correctly. Developer tools gives me this message "The requested URL /sd/css/style.css was not found on this server."
Any help is greatly appreciated!
Nico
You're loading this via HTTP? Then you're bound to use only "http-space" paths, which means you can NOT include the site's document root in urls. e.g.
your site's files are physically on the server in /home/sites/example.com/html, which is defined as the document root of the site. When you visit the site and request a file, e.g. http://example.com/foo/bar.html, the web browser will send over:
GET /foo/bar.html
and the webserver will tack on the document root, producing
/home/sites/example.com/html/foo.bar.html
But note that this path applies ONLY within the webserver itself. It will never be accesssible to you in this form. You can only specify directories/files within the site's document root. That means if you requested something like example.com/home/sites/example.com/other/file.html, you'd force the server to produce /home/sites/example.com/html/home/sites/example.com/other/file.html, etc...
If you want to provide an absolute URI then you must:
Include the scheme (file://)
Accept that many browsers will refuse to load file: data onto a page loaded via http:/https: for security reasons
Accept that users on other computers won't have access to your filesystem
It is far, far better to host all the resources you need on the webserver.
In Which location your header.php file is located? I mean If you have your header.php file in sd folder than use your code like this <link type="text/css" rel="stylesheet" href="css/style.css" />
Maybe this link will help you alot
http://www.htmlhelp.com/reference/css/style-html.html
I am using ibm websphere and creating a Dynamic web project. All of my JSP files are in my WEB-INF folder and i use servlet mapping in my web.xml file to make them accessible. This has worked fine so far. however i have problem with my CSS. as always, my CSS file is located in WebContent in a folder named css. heres my link for my jsp
<link rel="stylesheet" href = "css/styles.css">
I'm having no luck getting my css to show...
what am i missing?
The relative URLs in the generated HTML output are by the browser interpreted relative to the request URL (as you see in browser's address bar), not to their physical location in the server's disk file system. It's namely the webbrowser who has got to download them by a HTTP request, it's not the webserver who has got to include them from disk somehow.
One of the ways is to use a domain-relative path for those resources, i.e. start with /. You can use ${pageContext.request.contextPath} to dynamically inline the current webapp's context path.
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
This will end up in the generated HTML output as follows:
<link rel="stylesheet" href="/yourContextPath/css/styles.css">
This way the browser will be able to download them properly.
See also:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
I think you need to see it from the browser's perspective, how it is the URL of the page, the context path and the current path.
If your app context path is for example "myApp" then you can do something like this to make it work:
<link rel="stylesheet" href = "/myApp/css/styles.css">
If you want to make it relative so it does not depend on the context path, then if your url looks like http://localhost:8080/myApp/myservlet/file.jsp
Then your link tag would be
<link rel="stylesheet" href = "../css/styles.css">
Firebug or the chrome console may be really helpful to understand what the browser is trying to fetch.
Hope this helps!
I'm currently working on updating a "legacy" website to xhtml/css, so that I can go ahead and proceed on a re-design. All of the pages have the header included via PHP. The issue is is that if I reference the style sheet from the header as "style.css" it looks in the current directory for the style sheet where of course there is no style sheet. Do I need to use an absolute path, or is there a better way to do this?
The line below should work in any HTML/PHP file in any directory, included/required or not, as long as the directory "assets" is in your home directory. I think i'm right in saying this is true for all "href" attributes (i.e. in anchors).
<link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
If you're including a CSS file with a PHP inluclude, you must know the relative path from every file in which you are running the include function - no absolute URLs are allowed.
The path to the CSS file is relative to the URL which you used to request the main PHP page (the one in browser address bar), not to the local disk file system path where the PHP page is located in the server machine. CSS files are namely loaded by the webbrowser, not by webserver.
So to figure the relative style sheet path which you'd like to use in <link href> in the HTML head, you need to know the absolute URL of both the PHP page and the CSS file so that you can extract the relative CSS path from it.