stylesheets now linked, not inlined

[slug]

we just made a change to how your browser fetches a stylesheet which should speed up page loading somewhat.

previously, a custom stylesheet was inlined into the document source.
this meant that every time a page was loaded, the entire stylesheet had to be sent out again.
for someone connecting with a 56kbps modem, this could mean an entire extra second for a page to load. often stylesheets are as much as 4 or 5kbytes.

now stylesheets are linked to which means most browsers will fetch the stylesheet once and cache it locally. from then on, the browser won't need to download the stylesheet every time.

this change will be mostly transparent except to those who are used to looking at stylesheet code by Viewing Source.
now if you View Source, you'll see a link to something like http://css.pbase.com/styles/243.css
if you copy/paste that URL into a browser, it will display the stylesheet
(and conveniently nothing but the stylesheet)

at the moment this only affects image pages. will update the gallery pages too as soon as i'm sure this system is working as expected.
this has been tested on various browsers, so i don't expect any trouble.

this is just one step towards more useful changes to the stylesheet system which should include a new version of the html engineered for stylesheets.
the current html has evolved and been hacked and is very ugly.
-slug

[vernonsnider]

Slug, does this mean that now a person only needs to enter the style sheet name once for all of his/her galleries? If not, is there a way so that the style sheet a person wants to use need to be entered one time only?

Thanks.

[matiasasun]

Slug, does this mean that now a person only needs to enter the style sheet name once for all of his/her galleries?

Seems like not, but I think is a pretty good idea. Maybe the creation of a different style sheet for the images than the gallery would also be a good idea.
Matias, Chile

[ilanphoto]

Cool

[srijith]

Nice improvement slug. Would indeed decrease the download time, especially for some of those 'huge' CSS sheet I have seen around here

[lenightowl]

Hi there!
I don't know whether this is related to the change, but my style sheet is behaving very strangely!
I haven't modified it, and yet I noticed problems in the thumbnails display.
I started "fixing" things and it only made things worse.... so I put back my initial coding.
Am I the only one to experiment this?

Here is the original coding.
So far I had no problem with the title alignment, but now it's not aligned properly.
In addition to this, the gradient in the hover does not display the right colour!

/*======== THUMBNAILS DISPLAY =========*/

a.thumbnail,
a.thumbnail:link,
a.thumbnail:visited,
a.thumbnail:active

{
border: 1px black solid;
margin-bottom: -35px;
padding: 10px;
display: block;
color: white;
font-weight: bold;
background: white;
width: 180px;
height: 180px;
}

a.thumbnail:hover
{
border: 1px white solid;
margin-bottom: -35px;
padding: 10px;
display: block;
color: white;
font-weight: bold;
background: white;
FILTER: progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=white,endColorStr= #8080ff);
width: 180px;
height: 180px;
}

[slug]

just realized another benefit of having the stylesheets linked

you can now use a CSS validator service such as the one at
http://jigsaw.w3.org/css-validator/validator-uri.html more easily by entering the url of your css.
for example http://css.pbase.com/styles/42351.css

this should help clean up/debug stylesheets.

--slug

[lenightowl]

just realized another benefit of having the stylesheets linked

you can now use a CSS validator service such as the one at
http://jigsaw.w3.org/css-validator/validator-uri.html more easily by entering the url of your css.
for example http://css.pbase.com/styles/42351.css

this should help clean up/debug stylesheets.

--slug

Thanks a lot, Slug, I'll test it righ away!

[alangrant]

Good work - apart from the performance benefits this is a much tidier approach.

It also works better with the Firefox Web Developer utility I mentioned in this thread. By clicking on "Edit CSS" you get your stylesheet displayed in a panel beside your gallery; as you make changes to the CSS the effect of changes appear in "real time" as you type - no need to even refresh the page.

Note that if you do this you are editing a temporary copy of your stylesheet. Once you are happy with your CSS, copy it and paste it into the usual PBase Edit Stylesheet screen.

[skitz]

I've had the same problem with my stylesheet not working as they were before.....i did the check and still no luck.

Anyone know what's wrong?

[lord_of_the_badgers]

I've had the same problem with my stylesheet not working as they were before.....i did the check and still no luck.

Anyone know what's wrong?

Yep me too

Slug, what've you done mate? My main gallery page - http://www.pbase.com/lord_of_the_badgers - is knackered (and after all the nice comments i'd had, it's a bit annoying!) .. I can't fix the position of the captions at all now.. i spent ages trying to get this right.

it was all ok till this change.

now if i try & change the position of the thumb pics so that the text can be seen, no matter what i do nothing changes i've tried changing all the normal variables like MARGIN etc.. to no avail.

please help! it looks awful.

[lenightowl]

I've done a few changes to my style sheet recently, and more precisely since the change implemented 2 days ago.
Until then, when I made changes, I could see the result immediately in my galleries.
Now I don't see it right away, which makes it rather difficult to make rapid changes and corrections if needed.
Is this only temporary? (I hope so!)

[slug]

the problem of not seeing changes to your stylesheets immediately is because now your browser is caching the stylesheets.

so i have just changed the css url to include .....243.css?t=1091903221
so that the url is different everytime and your browser will fetch your updated stylesheet everytime.
this only happens if it's your own gallery or image.

this means you won't get the benefit of caching while viewing your own galleries, but it will solve the testing stylesheets problem.

as for the look of things changing. i'm unsure why the change from inlined to linked stylesheets would have changed their behavior.

lord_of_the_badgers - when i look at your galleries, things look good to me (nice stylesheet) but i'm not sure what they looked like before.
i'm seeing the captions all the way to the left. is that what you wanted?

-slug

[lord_of_the_badgers]

lord_of_the_badgers - when i look at your galleries, things look good to me (nice stylesheet) but i'm not sure what they looked like before.
i'm seeing the captions all the way to the left. is that what you wanted?

-slug

all the way to the left?! what browser you running? I'm on ie6. The captions should appear below the thumbs ( this on the main page only ) and the thumb pics should be centered horizontally in the blocks. they aren't now, and the captions appear OVER the images.

heck i'm damned if i can fix it yet...

thanks for (nice comment!) and replying. mail me if you want to discuss..

Rob

[lord_of_the_badgers]

lord_of_the_badgers - when i look at your galleries, things look good to me (nice stylesheet) but i'm not sure what they looked like before.
i'm seeing the captions all the way to the left. is that what you wanted?

-slug

all the way to the left?! what browser you running? I'm on ie6. The captions should appear below the thumbs ( this on the main page only ) and the thumb pics should be centered horizontally in the blocks. they aren't now, and the captions appear OVER the images.

heck i'm damned if i can fix it yet...

thanks for (nice comment!) and replying. mail me if you want to discuss..

Rob

well. actually thanks to your further change regarding caching, it now works...!!! Sorry Slug!

Had to tweak to get back to how i wanted it to look, but all's well now.

Slug, I don't have other browsers, tell me how it looks (or post screen shot!) would ya (that's if captions are to the left)?! thanks.