I want to have a css file which is in fact a jsp-page. One of the reasons is that I would like to use c:url tags to make the path to images context-independent.
So far I only found a possibility to set this up in server.xml. But I need it for my webapp only, and not server-wide.
Update: Setting the content-type to text/css of course works. But it still leaves me with a style.jsp whereas I want the file to be named style.css. One of the reasons would be that Eclipse's syntax-highlighting and autocompletion do then work.
The file extension is in fact irrelevant. The key is the HTTP Content-Type header. The browser uses this information to treat the response in an appropriate manner.
Put this in top of your to-be-CSS JSP file:
<%# page contentType="text/css" %>
That's it.
If you leave the manual setting of the HTTP Content-Type header away, then the job of setting the Content-Type header will be taken over by the servletcontainer/webserver. This part is then sniffing the file extension to set the appropriate header.
Update: as per your update, you want to use the .css extension anyway to take benefit of IDE's highlighting and autocompletion. Then there's another way: map the CSS file on the servlet-name of the JspServlet as it is definied in the particular servletcontainer. In case of Tomcat, it's usually jsp.
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>/style.css</url-pattern>
</servlet-mapping>
You should however take into account that the behaviour of your webapp will now be dependent of the servletcontainer in question. There may exist servletcontainers which doesn't use jsp as servlet-name.
Have you tried using a jsp extension on the file and its reference. You will have to change th mime type in the jsp.
Related
I've found this line of code to embed custom css in my custom BE module extension.
<f:asset.css identifier="myextcss" href="EXT:myExt/Resources/Public/Css/myext.css" />
This works fine. But the browser caches this file - how do I prevent it from this? I know, that pages can be set non-cache in FE. But in BE I want only this file prevented from caching, not the whole module.
after some trying I found a workaround.
I add these lines to my controller
$mytoken = substr (str_shuffle($_GET['token']),0,8);
$this->view->assign('mytoken', $mytoken);
And this to my fluid:
<f:asset.css identifier="myextcss" href="EXT:myExt/Resources/Public/Css/myext.css?{mytoken}" />
So the browser find always a "new" file request and reload it.
There are times when multiple URLs point to the same HTML file.
For example, the classic use of the base tag
For example the main page can be in:
https://dom.com/schops/
but the following URLs also direct to that file:
https://dom.com/shops/mark1
https://dom.com/shops/mark1/products
https://dom.com/shops/mark3
My question is, is there a HTTP cache header or a way to mark that a URL actually has another source URL?
How do you usually solve this problem?
Anyway I am creating my implementation in Cache Storge API, but I would like its behavior to be similar to the standard using the necessary headers when appropriate.
I noticed some websites put the version numbers (especially) in the CSS file path. For example:
<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />
What is the main purpose to put the version number? If the purpose is to remember when the CSS file was updated last time, shouldn't the version number added as a comment inside the CSS file?
From HTML5 ★ Boilerplate Docs:
What is ?v=1" '?v=1' is the JavaScript/CSS Version Control with
Cachebusting
Why do you need to cache JavaScript CSS? Web page designs are getting
richer and richer, which means more scripts and stylesheets in the
page. A first-time visitor to your page may have to make several HTTP
requests, but by using the Expires header you make those components
cacheable. This avoids unnecessary HTTP requests on subsequent page
views. Expires headers are most often used with images, but they
should be used on all components including scripts, stylesheets etc.
How does HTML5 Boilerplate handle JavaScript CSS cache? HTML5
Boilerplate comes with server configuration files: .htacess,
web.config and nginx.conf. These files tell the server to add
JavaScript CSS cache control.
When do you need to use version control with cachebusting?
Traditionally, if you use a far future Expires header you have to
change the component's filename whenever the component changes.
How to use cachebusting? If you update your JavaScript or CSS, just
update the "?v=1" to "?v=2", "?v=3" ... This will trick the browser
think you are trying to load a new file, therefore, solve the cache
problem.
It's there to make sure that you have the current version. If you change your website and leave the name as before, browser may not notice the change and use old CSS from its cache. If you add version, the browser will download the new stylesheet.
If you set caches to expire far in the future adding ?v=2 will let the server know this is a new file but you won't need to give it a unique name (saving you a global search and replace)
HTM5 boilerplate also includes it in their project.
Check this video also: HTML5 Boilerplate Walkthrough.
One of the reason could be to bypass file caching. Same name CSS files can be cached by the servers and may result in bad display if new version has has layout changes.
This is to optimise browser-caching. You can set the header for CSS files to never expire so the browser will always get it from its cache.
But if you do this, you'll get problems when changing the CSS file because some browsers might not notice the change. By adding/changing the version-parameter it's "another" request and so it won't be taken from the cache (but after the new version is cached, it's taken from there in the future to save bandwidth/number of requests until the version changes again).
A detailed explanation can be found at html5boilerplate.com.
My knowledge is pretty much out of date regarding websites, but the variable stored in the 'href' argument is received by the browser through HTTP. Using the usual tricks in URL-rewriting you could actually have an arbitrary script that produces CSS-output when called. That output can differ, depending on the argument.
Hey,
Since Google Fonts came out, I have had this question in mind. First see this below:
<link href='http://fonts.googleapis.com/css?family=Cantarell&subset=latin' rel='stylesheet' type='text/css'>
Here Google is linking to an external CSS file that doesn't have a file extension (.css)! Then Google also has another feature that if you want to inlude another font to this then just add the "|" sign and type the font name. How do you do this? Using Javascript, PHP or something?
Help is appreciated!
Thanks :)
The extension of a file does not have to mean anything at all about the contents of said file. It is merely a convention (one that Windows, for instance, uses to the point of making it seem like a requirement).
Any dynamic 'file' on a web site can return what ever kind of content it wants, any time it wants. The extension means nothing - aside from expected convention.
That URL could be a directory named css with a default 'document' that is a script, which handles the parameters to decide what content to give. Or, it could be a literal file named css which does the same thing. Or, it could not be a file or folder at all, instead merely part of a routing mechanism, which calls a controller based on the URL, and passes the parameters in.
Web servers return information in the response indicating what the MIME Type of the return value is, and the browser determines what to do with it based on that - not based on the extension of the file.
Yes, they have to be doing some sort of server-side processing when this URL is requested
http://fonts.googleapis.com/css
The querystring is parsed, and a text stream is returned with the CSS output. Allowing the user to add additional font families to the CSS is pretty trivial, as the server is just spitting back what you append to the query string.
You could do this in PHP or ASP.Net (and many others), but there is no indication of the underlying technology from Google's URL.
The easiest way to do this yourself would be to create a folder on your web server called "css", and then have a default script in there that does the processing. The URL could basically be almost identical to the Google url.
Whats Different between
<!--#include virtual="JS.htm" --> //note that in this method all JS files imported like below in JS.htm
and
<script src="myjavascript.js" type="text/javascript"></script>
The <!--#include virtual="JS.htm" --> is server side include, won't work without certain configurations and is included by the server there and then already whereas javascript's way is loaded into the page.
Server Side Includes (SSI) is a simple interpreted server-side scripting language used almost exclusively for the web.
The most frequent use of SSI is to
include the contents of one or more
files into a web page on a web server.
For example, a web page containing a
daily quote could include the quote by
placing the following code into the
file of the web page:
With one change of the quote.txt file,
all pages including the file will
display the latest daily quote. The
inclusion is not limited to files. In
this very example, on a server that
can run fortune, the output of it, a
randomly selected quote, can also be
included.
Server Side Includes are useful for
including a common piece of code
throughout a site, such as a page
header, a page footer and a navigation
menu. Conditional navigation menus can
be conditionally included using
control directives.
Source: WikePedia
In the first case the javascript file is included on the server side so it is included inline. In the second example the browser downloads the html file and then sends another request to the server for the javascript file.
First off the #include is used only in classic ASP and has no meaning in ASP.NET so you should retag your question. So when you include something it actually takes the contents of this file and puts it at the place where it should be included, so you end up with a single file downloaded to the client.
When you include a javascript file, the contents of the file are not placed inside the main script but the browser sends a separate request to fetch it. This is the prefered way of including javascript.
The include (SSI -- server side include) puts whatever's in js.htm inline while the script tag references an exterior file without putting it inline.
While the include saves load time up front, it doesn't allow the javascript to be cached by the browser, meaning it can actually be slower in the long run.
Generally, I'd suggest using the script tag referring to an exterior file.