Andrew Pollack's Blog

Technology, Family, Entertainment, Politics, and Random Noise

File this under "Damn, I should have known that" -- CSS and Relative Paths

By Andrew Pollack on 03/18/2010 at 07:33 AM EDT

I was whining about a feature being missing in Designer 8.5.x yesterday in a closed forum for "Design Partners" when I learned something I wished I'd known a long time ago. I'm writing this to share it with you, so you can be saved the work I've been doing.

The feature I wanted (and still want) is for file resources that use the new editors (e.g. CSS, HTML, JAVASCRIPT) to allow "<computed text>" values or at least some form of tokenization to allow you to include things like "@webdbname" and profile document values in your CSS or Javascript files Without such a feature I've had to create "page" elements instead without the snazzy editors.

I was describing the problem in context of CSS pages and paths to image resources stored in the same database, when Nathan made a comment that it just seems to work fine for him. So, of course first I declared that I was more than 99% sure that was impossible, but then (giving the man his due) I decided to research it. Of course, I learned something I should have known.

If you look at the CSS Spec ( http://www.w3.org/TR/REC-CSS1/ ) section 6.4 clearly states

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:.
.
So, what that means in a Domino database is that if you have a file resource, it is always accessed relative to the top of the NSF (e.g. ../../mydatabase.nsf/myImage.jpg ) and your CSS file is the same (e.g. ../../mydatabase.nsf/mystyle.css ). Even if the document you're loading the css from is in a different database, or in a view or document buried down somewhere inside that database, as long as the images referenced in the css URL() statements are in the same database as the CSS file itself, they'll be seen and loaded correctly without having to specify the full path to the images.

In other words, if you have mystyle.css as a file resource in mydatabase.nsf, and it contains this statement:

div.myFancyDiv { background-image:url(mybackground.jpg) ; }

It will work even if you are calling to /mydatabase.nsf/mystyle.css from another database, another server, a view nested deeper in the same database, or anywhere else.

When I think of how many wasted hours I've spent.....ugh.

There are  - loading -  comments....

re: File this under "Damn, I should have known that" -- CSS and Relative PathsBy Nathan T. Freeman on 03/18/2010 at 08:25 AM EDT
As much as I'd love to sit here and gloat, the truth is that I read your
question and though "wait, I know Tim doesn't do that when skinning our
applications." Since he's 15 feet away, I just asked him, and he replied that
he simply never needed to use any path information when the image resource was
local. But I couldn't have told you with a gun to my head whether that was
because Xpages, Domino or the CSS spec had a rule about how relative paths
worked.

One potentially useful thing I can tell you is that Xpages has some automatic
translation of paths for anything coming from Dojo. And if you drop later
versions of Dojo into a sibling path to the default dojo1.3.2 folder on your
server, it will use those instead. That's how we were able to include some
1.4.1 stuff in recent projects.

Anyway, I'm glad to have introduced anything that will save you work. Sorry
we didn't have this conversation 5 years ago. :-)
re: File this under "Damn, I should have known that" -- CSS and Relative PathsBy Charles Robinson on 03/18/2010 at 10:02 AM EDT
When I played around with Domino web apps a few years ago (6.x) I stumbled
across this functionality. I read the CSS spec and just assumed everyone else
already knew about it, and I didn't because I was a newbie. :-)
re: File this under "Damn, I should have known that" -- CSS and Relative PathsBy Bruce Lill on 03/18/2010 at 11:30 AM EDT
It's relative to the last "/" which may or may not be the filename. If you set
an xpage to the launched at start-up it will point to the path not the nsf >>
web/home.nsf has h.xsp as start-up page will have a relative path of web/ but
web/home.nsf/h.xsp will work.

I see this when developers also put the css in the HTML of the form/page
instead of as a CSS file.

Always test in a sub-folder.
re: File this under "Damn, I should have known that" -- CSS and Relative PathsBy Andrew Pollack on 03/18/2010 at 11:49 AM EDT
that depends. If the xpage calls out to an external css file, then it's the
last / (the realm) that the CSS file resides in, not the xpage -- at that
point, the xpage's location has no relationship to the relative path of the
objects referenced in the external css file.


Other Recent Stories...

  1. 05/05/2016Is the growing social-sourced economy the modern back door into socialism?Is the growing social-sourced economy the modern back door into socialism? I read a really insightful post a couple of days ago that suggested the use of social network funding sites like “Go Fund Me” and “Kickstarter” have come about and gained popularity in part because the existing economy in no longer serving its purpose for anyone who isn’t already wealthy. Have the traditional ways to get new ventures funded become closed to all but a few who aren’t already connected to them and so onerous as to make ...... 
  2. 04/20/2016Want to be whitelisted? Here are some sensible rules for web site advertisingAn increasing number of websites are now detecting when users have ad-blocking enabled, and refuse to show content unless you "whitelist" their site (disable your ad-blocking for them). I think that is a fair decision on their part, it's how they pay for the site. However, if you want me (and many others) to white list your site, there are some rules you should follow. If you violate these rules, I won't whitelist your site, I'll just find content elsewhere. 1. The total space taken up by advertisements ...... 
  3. 12/30/2015Fantastic new series on Syfy called “The Expanse” – for people who love traditional science fiction[] “The Expanse” is a new science fiction series being broadcast onthe Syfy channelthis winter. It’s closely based on a series of books by author James S. A. Corey beginning with “Leviathan Wakes”. There are 5 books in the “Expanse” series so far. If you’re a fan of the novels you’ll appreciate how closely the books are followed.TIP: The first five episodes are already available on Syfy.com. If you’re having trouble getting into the characters and plot, use those to get up to speed.The worlds created for ...... 
  4. 10/20/2015My suggestion is to stay away from PayAnywhere(dot)com  
  5. 08/07/2015Here is one for you VMWARE gurus - particularly if you run ESXi without fancy drive arrays 
  6. 08/06/2015The Killer of Orphans (Orphan Documents) 
  7. 06/02/2015Homeopathic Marketing: Traveler on my Android is now calling itself VERSE. Allow me to translate that for the IBM Notes community... 
  8. 03/17/2015A review of British Airways Premium Economy Service – How to destroy customer goodwill all at once 
  9. 02/26/2015There's a bug in how @TextToTime() and @ToTime() process date strings related to international standards and browser settings. 
  10. 01/21/2015Delivering two new presentations at Developer Camp (EntwicklerCamp) 2015 in Germany 
Click here for more articles.....


pen icon Comment Entry
Subject
Your Name
Homepage
*Your Email
* Your email address is required, but not displayed.
 
Your thoughts....
 
Remember Me  

Please wait while your document is saved.