/    Sign up×
Community /Pin to ProfileBookmark

Style Sheet as a Preload?

Copy linkTweet thisAlerts:
Jul 28.2008

I was thinking about this and was wondering if it’s possible and/or practical.

Have one HTML page. You have the style sheet for the main information like navigation that would be standard across all of the site.

Each new page wouldn’t be an additional HTML page but just use an additional style sheet. For this reason, and I might be wrong here, but wouldn’t all of the images used on the page be preloaded even though they’re not “used” until the style sheet that controls the DIV that has the images is used… if thta makes any sense.

So what I’m wondering is, is it possible to switch between specific style sheets on one page? So you have on that controls navigation and each area of the navation (i.e. “FAQ”, “About Us”, etd.) would be a style sheet instead of additional HTML pages?

I just figured this might be a way to cut down on overhead/bandwidth consumption as well as cutting down on the amount of “real” pages on a site… smaller site that is.

I know an alternative way to do this would be using “hide” kind of like I did [URL=”http://www.mattandpamazon.com/matt_html.htm#”]on this page[/URL] a while back.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisJul 28.2008 — wouldn't all of the images used on the page be preloaded even though they're not "used" until the style sheet that controls the DIV that has the images is used[/QUOTE]No. An image is not loaded until it is actually used in the HTML. So, if you have a url(someimage) statement in your stylesheet, it does *not* get loaded until the object that uses the style is read by the browser.

In order to load all those images without actually having them rendered in HTML, you would have to use a javascript preload script.
Copy linkTweet thisAlerts:
@pathfinder74authorJul 28.2008 — Cool... .that answers the first part of my question. Thank you gil davis

How about the other part?
Copy linkTweet thisAlerts:
@Declan1991Jul 28.2008 — No, it would only increase the initial download size massively, and be totally inaccessible. Imagine if you had a screen reader or a text-only browser. Into the bargain, it would suffer most of the problems frames have (including being unbookmarkable in all but the most modern browsers).

You can only switch stylesheets using JavaScript (more modern browsers have the feature built in but most of your users won't know how to use it, and you can hardly tell them to change the stylesheet to view the next page), so it would be inaccessible.

Also, I think that it would affect your page rank. I'm not sure, but I think that the amount of times a keyword appears on the page compared to the amount of data actually on that page is counted in the ranking.
Copy linkTweet thisAlerts:
@pathfinder74authorJul 29.2008 — ok.... sounds good....

but each child page from the index can have an additional style sheet without causing problems, right?

I was doing smoe work with an ASP site a few weeks ago and they this line of code where it would always reference the header style sheet so you didn't even have to put that line of code into all of the HTML pages.... how do you do this?
Copy linkTweet thisAlerts:
@MioTEKJul 29.2008 — If you're using classic ASP, then you'd simply create your CSS file and typically embed it into your "header.inc" file. On the top of each page, just "include" your "header.inc" file and you're set.

Your header.inc file will (typically) consist of ASP, HTML and probably some JavaScript. Here's a good resource you can check out:

http://www.christopherjason.com/articles/includes-using-asp-classic/
×

Success!

Help @pathfinder74 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...