[chrisford]

Hello -

Just a trivial question I was thinking about. I visit the MacNN forums reasonably frequently and I'm always increasing the font size in Safari to make the text a little more readable. Is it possible to create a style-sheet that is only used when I visit MacNN? Something like a font-size: 125%; type-thing?

Oh - this is Safari 1.2.2 on OsX 10.3.3

{Edit!} I just thought - I could set the "Never use fonts smaller than..." option in Safari preferences, but that tends to make things like page footers and copyright notices unpleasantly large!

Like I said, nothing major but it would be interesting to know whether it were possible...

Thanks!

c

[cpac]

I don't think so. But you could try OW 5.0 (release candidate 1 is the latest). It allows you to set per-site preferences w/r/t text size (along with ad blocking, cookies, etc.)

[Sage]

Actually, you can. The trick is to find a special attribute in a site that couldn't possibly be on any other site. In the MacNN forum's case, it's the body's background attribute. I use the following selector for MacNN's forums...

Code:
body[background="http://forums.macnn.com/images/ribbed2.gif"]

Of course, if every site had CSS signatures, that'd make things easier, but the only sites I ever see with them are blogs.

[edit]: If you wanted it to last through future forum revisions, you could even do the following:

Code:
body[background^="http://forums.macnn.com/"]

But that might be a little over the top.

[chrisford]

Thanks to you both for your help!

Sage - so if I created a mini-style sheet with the following contents:

body[background="http://forums.macnn.com/images/ribbed2.gif"]
{
font-size: 250%;
}

That should do the job? (I've used 250% so I can be sure of seeing the change...!)

Thanks again.

c

[Sage]

Not necessarily... it totally depends on what in particular you want to have enlarged. For example, if you just want the text within a post to be larger, you'd use:

Code:
body[background="http://forums.macnn.com/images/ribbed2.gif"] p {
	font-size: 250% !important;
}

If you want almost everything to be larger, you'd use something like:

Code:
body[background="http://forums.macnn.com/images/ribbed2.gif"] td {
	font-size: 250% !important;
}

The latter really messes up the layout though. If neither of those are what you're looking for, I'll be more than happy to help with what you want.

[chrisford]

Hi Sage -

Thanks for your help. It's very possible I'm being stupid, but that didn't seem to work for me? I saved the file as macnn.css and pointed Safari at it.

Also - does the line that references the ribbed.gif act as a conditional? That is, does it result in a "Apply this style sheet if this tag is discovered?"? I've not seen that before..!

c

[Sage]

Originally posted by chrisford:
Thanks for your help. It's very possible I'm being stupid, but that didn't seem to work for me? I saved the file as macnn.css and pointed Safari at it.

Hrm... did you try quitting and restarting Safari? For me, I always have to do that after making any changes to my personal style sheet (even a shift+refresh doesn't seem to work).

Also - does the line that references the ribbed.gif act as a conditional? That is, does it result in a "Apply this style sheet if this tag is discovered?"? I've not seen that before..!

Yes – It's called an "attribute selector", and basically says, "If a body tag is found, and has an attribute of background equal to [blah blah]ribbed.gif, then apply this style". You can read more about CSS 3 selectors here. (Safari doesn't support all of them though, since CSS 3 is still in draft form.)

[edit]: Whoops, attribute selectors are actually part of the CSS 2 spec... but nonetheless, some of the CSS 3 specs are supported (like E[foo^="bar"]), so, yeah.