Is there a better way to aggregate several css files ( based on what a give page requires ) than including them in a jsp file with c:if tags?
The top of the file (sitting outside of web-inf dir, alongside images files and such)
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
... followed by <%#include file="some.css" %> as needed. It works, it's simple, I'm just wondering if it could be done better.
If you were kind, your CSS request would follow some kind of aggregation pattern.
<link rel="stylesheet" type="text/css" href="core.css?part1&part2&part3">
And then, your result would be kind enough to set the caching headers properly, the ETag, and honor the "If-Modified-Since" header (perhaps based on the latest change date of the files you decide to include).
Is there any reason why you can't just include the CSS pages with normal HTML links, so that they can be cached?
<link rel="stylesheet" href="some.css" type="text/css" media="screen" />
<link rel="stylesheet" href="some2.css" type="text/css" media="screen" />
That way the browser can cache the file, and requests will only be made once for all the pages that use it. Then you could just have each page specify the links that it needs.
How about
<link rel="stylesheet" type="text/css" href="${pageSpecificCssFileName}.css">
wherein you define ${pageSpecificCssFileName} in page controller?
Related
I have a spring controller which does a forward to a static html page index.html
The browser url display :
http://localhost:8080/app/type/static/name
Controller when gets this forwards:
return "forward:/static/pages/index.html";
The index page is located at:
webapp->static->pages->index.html
and the css is located at:
webapp->static->pages->css->style.css
when the url loads, it cant find the css file, looking in debugger
http://localhost:8080/app/type/static/pages/css/style.css
the url needs to be
http://localhost:8080/app/static/pages/css/style.css
I cant hard code this as the port can change? how can i do this?
appending this to href worked
../../
Use in your head
<link href='css/style.css' rel='stylesheet' type='text/css'>
Or maybe :
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/styles.css"/>">
I have an ASP.NET web app hosted in a windows dedicated server.
In my app there are many folders. To simplify my problem let's say I have this scenario:
folder
default.aspx
css
js
I would like to setup default.aspx as my default page, meaning, when a user types domain.com, default.aspx is shown.
In order to do this, I edited my web.config file and it works.
The problem is styles and javascripts.
My default.aspx contains this:
<script type="text/javascript" src="js/xxxx.js"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
So the styles and javascripts aren't found.
I really don't want to remove the folder and put everything in the root, and just moving the default.aspx page is not really an option, as I have a MasterPage.
use resolveUrl or a path from root to resolve locations of js and css
<script src='<%= this.ResolveUrl("~/js/xxxx.js") %>' type="text/javascript"></script>
<link href="~/css/styles.css" rel="stylesheet" type="text/css" />
If you're wanting to link to items, you can use the path from the website root. Just place a slash in front of the path.. like this:
<link rel="stylesheet" href="/css/webedit.css" type="text/css" />
You could use Page.ResolveUrl method to get correct paths:
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/xxxx.js") %>'></script>
<link href='<%= Page.ResolveUrl("~/css/styles.css")' rel="stylesheet" type="text/css" />
For more info see Specifying Paths for Resources.
EDIT: it's mentioned in the comment that this is not working for stylesheets. It's partially true. It won't work for server-side, but will for client-side elements.
It seems your <link> element is located inside a server-side <head> tag, this means ASP.NET treats <link> inside <head> as a server-side controls even if you didn't specify runat="server" attribute there. So you don't need to use a server-side construct in that case:
<link href="~/css/styles.css" rel="stylesheet" type="text/css" />
For ASP.NET WebForms and MVC projects I strongly reccomend moving to Client Dependency framework and let it handle your page dependencies.
For your two dependencies you simply add these declarations to the page:
<CD:CssInclude ID="CssIncludeStyles" runat="server" FilePath="~/css/styles.css" />
<CD:JsInclude ID="JsIncludeXXXX" runat="server" FilePath="~/js/xxx.js" />
This is already cleaner then calling this.ResolveUrl on each dep. declaration.
You can furthermore facilitate the declaration of dependencies by introducing mapped paths in the dependency framework (see documentation for how-to).
An easiest way to start with client dependency is to add it via NuGet to your ASP.NET web site project.
It ensures you never have duplicate dependencies on one page and gives you a control over how dependencies are ordered.
I have a fairly large Drupal 6 site with different modules enabled for different node/page types which is resulting in a different CSS file for each page type after the CSS has been consolidated. I understand the logic of not wanting to load css for every module, but is there a method for loading sitewide css into one file so that we can utilize the caching benefits of CSS?
Homepage:
<link type="text/css" rel="stylesheet" media="all" href="/site-files/example.com/files/css/css_1f2e88da1acf78556ee565984845d7cd.css" /></code>
Article:
<link type="text/css" rel="stylesheet" media="all" href="/site-files/example.com/files/css/css_1786ec41724511f6c0984222b790dca6.css" />
Category:
<link type="text/css" rel="stylesheet" media="all" href="/site-files/example.com/files/css/css_b7f516c6ab4921929598cfd377ce4523.css" />
Video:
<link type="text/css" rel="stylesheet" media="all" href="/site-files/example.com/files/css/css_a702453ef81af3318ad63a194280100e.css" />
There must be some logic in making these all one file when you consider that the difference between them is minimal.
Cheers, Steve
Answering my own question...
As always with Drupal, someone's already been there and done that, and here it is:
http://drupal.org/project/advagg
A little extra research into the benefits of first page load time vs a larger site side cached file, etc. has been very insightful.
In my application I have next problem. I created master page and some content pages, some of which are located in the nested folders. In the master page I added the link to .css file
<link href="default.css" rel="stylesheet" type="text/css" />
But pages are located in the nested folders can't use this .css file. How can I fix this? I want to have one .css file for all pages (:
Thanks!
<link href="~/default.css" rel="stylesheet" type="text/css" />
This problem can be resolved by adding next code in master page
<style type="text/css" runat="server">
#import '<%= ResolveUrl("~/default.css")%>';
</style>
But designer of VS can't process this and you couldn't view your styles in it.
The css shouldnt be relative to the master page but rather it should be relative to the location of the Page instance using the master page. In most cases this will be the same thing but I would always try to use either a fully qualified path or a site relative path
Fully qualified path
<link href="http://some.site.com/mysite/styles/default.css" rel="stylesheet" type="text/css" />
or a relative path (note this might not work if you have a version which can only host one site but many apps such as WinXP)
<link href="/default.css" rel="stylesheet" type="text/css" />
Win xp relative path
<link href="/path/to/application/default.css" rel="stylesheet" type="text/css" />
If you using website under website, change in subfolder masterpage CSS link
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
change with below
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
The way you defined you style sheet means: the style sheet is in the same folder as the page which uses it.
If you want to have one style sheet for all pages you should put in in one place (I prefer /assets/css folder in the application root) and define the path using this folder:
<link href="/assets/css/default.css" rel="stylesheet" type="text/css" />
The other way to archieve this is to use Themes, in this case styles will be added automatically.
So, I thought I'd try my luck on ASP.NET. I didn't get very far before I found my first problem.
I have a folder layout like so:
\
->Admin
-->Admin.Aspx
->CSS
-->Style.css
->Images
-->bg.gif
Default.aspx
Default.master
Both admin.aspx and default.aspx use the default.master page, which contains the line:
<link rel="stylesheet" type="text/css" href="CSS/Style.css" media="screen" />
This works for the default.aspx page, because the path is valid, but for the admin page it's not.
Is there any special character, like ~ for home in Linux, to indicate the root path?
I can't use just a slash, because the website maybe under a sub folder when hosted.
Hopefully I've explained myself so you can understand what I need to do :)
I guess it's more an HTML issue than an ASP issue.
If your <head></head> tag contains runat="server" (which IIRC it does by default) you can simply specify it as:
<link rel="stylesheet" type="text/css" href="~/CSS/Style.css" media="screen" />