So check it out. Take a bland, normal looking web page (first 
attachment), and then go mental with CSS (second attachment). Makes 
quite a difference, eh?

Yeah, I know, there's hardly anything ground-breaking in here. But if 
you look at my old website, it's all very HTML 2.0. I used CSS to make 
the background green instead of white, but that's about it. All the 
other formatting is just the browser's defaults. But with a little 
imagination, it seems you can make a page look significantly more 
interesting.

(I got bored before I got as far as styling the body text and so forth...)

Post a reply to this message

Attachments:
Download 'css0.png' (6 KB) Download 'css1.png' (38 KB)

Preview of image 'css0.png'

Preview of image 'css1.png'

On 21/09/2010 01:50 PM, Invisible wrote:

> Yeah, I know, there's hardly anything ground-breaking in here.

I'm particularly pleased with how I managed to insert chevrons *between* 
the links, but not before or after them. That look some figuring out.

(The trick is to do :before {content: " > ";} and then do 
:first-child:before {content: "Navigation: ";}. You can even put 
additional styling in there; I've put "Navigation" in bold, for example.)

Irritatingly, what you *cannot* do is content: " → ". This is 
extremely frustrating, and currently I cannot find any way around this flaw.

> But if
> you look at my old website, it's all very HTML 2.0. I used CSS to make
> the background green instead of white, but that's about it.

http://www.orphi.me.uk/

Amusingly, if you click on the validator icons, the CSS validator has 
moved to another URL so it doesn't work, and the HTML validator no 
longer accepts my pages (which validated perfectly when I tested it a 
few years ago). Nice how what were perfectly valid pages a year or two 
ago are now no longer considered valid, eh? :-P

Post a reply to this message

And lo On Tue, 21 Sep 2010 13:57:13 +0100, Invisible <voi### [at] devnull> did  
spake thusly:

> On 21/09/2010 01:50 PM, Invisible wrote:
>
>> Yeah, I know, there's hardly anything ground-breaking in here.
>
> I'm particularly pleased with how I managed to insert chevrons *between*  
> the links, but not before or after them. That look some figuring out.
>
> (The trick is to do :before {content: " > ";} and then do  
> :first-child:before {content: "Navigation: ";}. You can even put  
> additional styling in there; I've put "Navigation" in bold, for example.)
>
> Irritatingly, what you *cannot* do is content: " → ". This is  
> extremely frustrating, and currently I cannot find any way around this  
> flaw.

content: "\2192" use the escaped hex value.

-- 
Phil Cook

--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com

Post a reply to this message

>> Irritatingly, what you *cannot* do is content: " → ". This is
>> extremely frustrating, and currently I cannot find any way around this
>> flaw.
>
> content: "\2192"

Oh God, you *are* kidding me, right?? o_O

Post a reply to this message

Le 21/09/2010 16:19, Invisible a écrit :
>>> Irritatingly, what you *cannot* do is content: " → ". This is
>>> extremely frustrating, and currently I cannot find any way around this
>>> flaw.
>>
>> content: "\2192"
> 
> Oh God, you *are* kidding me, right?? o_O

content: is not reparsed by the engine, so no entities would be
substituted, but that should not stop you to encode the right char.

Give it a try.
(U+2192 is unicode for → )
Of course, your font must support it...

Post a reply to this message

>>> content: "\2192"
>>
>> Oh God, you *are* kidding me, right?? o_O
>
> content: is not reparsed by the engine, so no entities would be
> substituted, but that should not stop you to encode the right char.

Yeah. I already discovered that you can't use it to insert any new tags 
either. (I guess if you could, it would be a macro expansion engine...)

> Give it a try. (U+2192 is unicode for→ )

Cool. So now I have to memorise character codes. Yay. :-(

> Of course, your font must support it...

Yeah, well, that's always entertaining. ;-)

(The again, I've installed a pack of MathML fonts, so it's usually OK.)

Post a reply to this message

OK, wanna see something weird?

   line-height: 100%;

You'd think this sets the line height to its default value. You'd be 
wrong. As best as I can tell, the default hight (for Firefox) is 120%. 
And, as far as I can tell from the W3C spec, this default value is 
allowed to vary arbitrarily for each browser.

Yay, that's useful! :-/

Post a reply to this message

Invisible escreveu:
> On 21/09/2010 01:50 PM, Invisible wrote:
> 
>> Yeah, I know, there's hardly anything ground-breaking in here.
> 
> I'm particularly pleased with how I managed to insert chevrons *between* 
> the links, but not before or after them. That look some figuring out.
> 
> (The trick is to do :before {content: " > ";} and then do 
> :first-child:before {content: "Navigation: ";}. You can even put 
> additional styling in there; I've put "Navigation" in bold, for example.)

I was thinking about how you managed that one.
Guess I'm missing latest CSS goodies, cause I've not heard of "content:" 
before...

-- 
a game sig: http://tinyurl.com/d3rxz9

Post a reply to this message

>> I'm particularly pleased with how I managed to insert chevrons
>> *between* the links, but not before or after them. That look some
>> figuring out.
>
> I was thinking about how you managed that one.

I was beginning to think it wouldn't be possible. I could put one in 
front of *every* link, or after *every* link, but not *between* links 
only. It took some tweaking to get it to work. (There is a :first-child 
selector, but no :last-child selector, crucially enough...)

> Guess I'm missing latest CSS goodies, cause I've not heard of "content:"
> before...

I read about the "content:" property way, waaaaaay back in 1998 or so. 
The idea is that, in combination with the ":before" and ":after" 
psuedo-element selectors and the automatic counters, you're supposed to 
be able to do things like automatically number section headings, like 
TeX does.

Of course, reading about this, I was very excited, and immediately went 
to try it out. But, as it turns out, neither Netscape nor IE took any 
notice of these properties at all. I promptly forgot all about them, 
since they don't work.

(In a similar vein, it's supposed to be possible to add drop shadows to 
text and so on. That didn't work either.)

Fast forward 10 years, and it seems these funky features are actually 
*implemented* now. (I didn't bother to check whether IE supports it - 
mainly since I don't give a damn.)

I have no idea whether the drop shadows work now. I don't even remember 
the property names...

-- 
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*

Post a reply to this message

Le 21/09/2010 21:21, Orchid XP v8 nous fit lire :

> I have no idea whether the drop shadows work now. I don't even remember
> the property names...
> 
It does... for some browsers.
And round corners too... also for some.

Post a reply to this message

>> I have no idea whether the drop shadows work now. I don't even remember
>> the property names...
>>
> It does... for some browsers.
> And round corners too... also for some.

Woo! Yay for standards and cross-platform interoperability. :-S

-- 
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*

Post a reply to this message

Orchid XP v8 escreveu:
>>> I'm particularly pleased with how I managed to insert chevrons
>>> *between* the links, but not before or after them. That look some
>>> figuring out.
>>
>> I was thinking about how you managed that one.
> 
>> Guess I'm missing latest CSS goodies, cause I've not heard of "content:"
>> before...
> 
> I read about the "content:" property way, waaaaaay back in 1998 or so. 

damn, I'm truly behind the times... :p

ok, I'm just unaware of the complete spec... I've got the box model 
pretty worked out though... :)

> Of course, reading about this, I was very excited, and immediately went 
> to try it out. But, as it turns out, neither Netscape nor IE took any 
> notice of these properties at all. I promptly forgot all about them, 
> since they don't work.
> 
> (In a similar vein, it's supposed to be possible to add drop shadows to 
> text and so on. That didn't work either.)

weirdly enough, I'm aware of latest CSS goodies like drop shadows, 
transitions, gradients, border-radius and so on.  Since they are still 
experimental, web browsers tend to have them available only via prefixes 
such as -moz-border-radius or -webkit-border-radius... won't cause any 
problem to browsers unaware of them because html-related techs were 
build around the idea to simply ignore tags and properties they don't 
understand.

Imagine if they used a static type system like in haskell:  "This page 
can't be shown:  a type mismatch has occurred!" :)

> Fast forward 10 years, and it seems these funky features are actually 
> *implemented* now. (I didn't bother to check whether IE supports it - 
> mainly since I don't give a damn.)

yeah, what percentage of your 2 blog readers would possibly be using IE?...

-- 
a game sig: http://tinyurl.com/d3rxz9

Post a reply to this message

>> I read about the "content:" property way, waaaaaay back in 1998 or so.
>
> damn, I'm truly behind the times... :p
>
> ok, I'm just unaware of the complete spec... I've got the box model
> pretty worked out though... :)

When I was at uni, I'd sit and read the spec from cover to cover. (Even 
though most of it doesn't actually make sense.) I learned loads of cool 
stuff... and then discovered that most of it has no relationship to reality.

>> (In a similar vein, it's supposed to be possible to add drop shadows
>> to text and so on. That didn't work either.)
>
> weirdly enough, I'm aware of latest CSS goodies like drop shadows,
> transitions, gradients, border-radius and so on. Since they are still
> experimental, web browsers tend to have them available only via prefixes
> such as -moz-border-radius or -webkit-border-radius... won't cause any
> problem to browsers unaware of them because html-related techs were
> build around the idea to simply ignore tags and properties they don't
> understand.

So some of these actually work now?

> Imagine if they used a static type system like in haskell: "This page
> can't be shown: a type mismatch has occurred!" :)

Yeah, whatever. It's perfectly possible to avoid this in Haskell (or 
just about any other Turing-complete language). It isn't even especially 
difficult. :-P

>> Fast forward 10 years, and it seems these funky features are actually
>> *implemented* now. (I didn't bother to check whether IE supports it -
>> mainly since I don't give a damn.)
>
> yeah, what percentage of your 2 blog readers would possibly be using IE?...

Maybe if enough web pages are broken in IE, people will start asking why 
MS produces such a defective product. (But I doubt it...)

Post a reply to this message

And lo On Wed, 22 Sep 2010 09:03:40 +0100, Invisible <voi### [at] devnull> did  
spake thusly:

>> yeah, what percentage of your 2 blog readers would possibly be using  
>> IE?...

Ow!

> Maybe if enough web pages are broken in IE, people will start asking why  
> MS produces such a defective product. (But I doubt it...)

Nah they'd just wonder why you can't write a proper web site like everyone  
else.

-- 
Phil Cook

--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com

Post a reply to this message

And lo On Tue, 21 Sep 2010 17:18:09 +0100, nemesis  
<nam### [at] gmailcom> did spake thusly:

> Invisible escreveu:
>> On 21/09/2010 01:50 PM, Invisible wrote:
>>
>>> Yeah, I know, there's hardly anything ground-breaking in here.
>>  I'm particularly pleased with how I managed to insert chevrons  
>> *between* the links, but not before or after them. That look some  
>> figuring out.
>>  (The trick is to do :before {content: " > ";} and then do  
>> :first-child:before {content: "Navigation: ";}. You can even put  
>> additional styling in there; I've put "Navigation" in bold, for  
>> example.)
>
> I was thinking about how you managed that one.
> Guess I'm missing latest CSS goodies, cause I've not heard of "content:"  
> before...

As Invisible says it's one of those old ones that never got used because  
certain well-used browsers never implemented it. It also takes an attr()  
so you can pull an attribute from the element and present it. So you could  
have every <acronym> element end with the title attribute for instance. It  
gets even better with CSS3 as that allows styling by type of link so you  
can do things like:

a[href$='.pdf']:after { content: " (PDF)"; }

and every pdf link will add that content to the end of the link  
automatically.

I mean it's only taken, what, 12+ years to get to this level :-)

-- 
Phil Cook

--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com

Post a reply to this message

On 22/09/2010 10:12 AM, Phil Cook v2 wrote:

> As Invisible says it's one of those old ones that never got used because
> certain well-used browsers never implemented it.

Or rather, "no browsers on Earth actually implemented it at all".

> I mean it's only taken, what, 12+ years to get to this level :-)

I'm still waiting for the day when you can take an ordinary <table> 
element with no special markup, and style is so that each row as an 
alternating background colour. :-P

(Currently the only way to do this is to assign different style classes 
to each row.)

Post a reply to this message

And lo On Wed, 22 Sep 2010 10:37:00 +0100, Invisible <voi### [at] devnull> did  
spake thusly:

> On 22/09/2010 10:12 AM, Phil Cook v2 wrote:
>
>> As Invisible says it's one of those old ones that never got used because
>> certain well-used browsers never implemented it.
>
> Or rather, "no browsers on Earth actually implemented it at all".
>
>> I mean it's only taken, what, 12+ years to get to this level :-)
>
> I'm still waiting for the day when you can take an ordinary <table>  
> element with no special markup, and style is so that each row as an  
> alternating background colour. :-P
>
> (Currently the only way to do this is to assign different style classes  
> to each row.)

Off the top of my head I don't know which browsers support :nth-child(),  
but I'm betting the latest releases of IE don't. Tum te tum oh yes what a  
surprise it doesn't; the latest versions of Firefox do though so you can  
use it if you want.

-- 
Phil Cook

--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com

Post a reply to this message

>> I'm still waiting for the day when you can take an ordinary <table>
>> element with no special markup, and style is so that each row as an
>> alternating background colour. :-P
>>
>> (Currently the only way to do this is to assign different style
>> classes to each row.)
>
> Off the top of my head I don't know which browsers support :nth-child(),
> but I'm betting the latest releases of IE don't. Tum te tum oh yes what
> a surprise it doesn't; the latest versions of Firefox do though so you
> can use it if you want.

I hadn't even heard about :nth-child. (What, still no :last-child yet?) 
That still doesn't help me style a table with some arbitrary number of 
rows, where I want the odd rows blue and the even rows yellow.

Post a reply to this message

And lo On Wed, 22 Sep 2010 11:00:07 +0100, Invisible <voi### [at] devnull> did  
spake thusly:

>>> I'm still waiting for the day when you can take an ordinary <table>
>>> element with no special markup, and style is so that each row as an
>>> alternating background colour. :-P
>>>
>>> (Currently the only way to do this is to assign different style
>>> classes to each row.)
>>
>> Off the top of my head I don't know which browsers support :nth-child(),
>> but I'm betting the latest releases of IE don't. Tum te tum oh yes what
>> a surprise it doesn't; the latest versions of Firefox do though so you
>> can use it if you want.
>
> I hadn't even heard about :nth-child. (What, still no :last-child yet?)  
> That still doesn't help me style a table with some arbitrary number of  
> rows, where I want the odd rows blue and the even rows yellow.

We're cross-threading here so I'll just repeat tr:nth-child(odd){} Oh and  
nth-last-child() will select elements backwards, but besides there is a  
:last-child. All hail CSS3.

-- 
Phil Cook

--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com

Post a reply to this message

>> I hadn't even heard about :nth-child. (What, still no :last-child
>> yet?) That still doesn't help me style a table with some arbitrary
>> number of rows, where I want the odd rows blue and the even rows yellow.
>
> We're cross-threading here so I'll just repeat tr:nth-child(odd){} Oh
> and nth-last-child() will select elements backwards, but besides there
> is a :last-child. All hail CSS3.

And, uh, how many years will it be before any browser anywhere starts to 
implement CSS3?

Post a reply to this message

On 21/09/2010 03:27 PM, Le_Forgeron wrote:
> Le 21/09/2010 16:19, Invisible a écrit :
>>>> Irritatingly, what you *cannot* do is content: "→ ". This is
>>>> extremely frustrating, and currently I cannot find any way around this
>>>> flaw.
>>>
>>> content: "\2192"
>>
>> Oh God, you *are* kidding me, right?? o_O
>
> content: is not reparsed by the engine, so no entities would be
> substituted, but that should not stop you to encode the right char.

It's even weirder than that: If the CSS is a seperate file (like it 
normally is), this doesn't work. But if it's inline inside the HTML 
file, then it *does* work. (!)

Presumably because the character stream inside the <style> element in 
the document head has entities expanded during parsing.

Post a reply to this message

Invisible escreveu:
>>> I hadn't even heard about :nth-child. (What, still no :last-child
>>> yet?) That still doesn't help me style a table with some arbitrary
>>> number of rows, where I want the odd rows blue and the even rows yellow.
>>
>> We're cross-threading here so I'll just repeat tr:nth-child(odd){} Oh
>> and nth-last-child() will select elements backwards, but besides there
>> is a :last-child. All hail CSS3.
> 
> And, uh, how many years will it be before any browser anywhere starts to 
> implement CSS3?

meanwhile, I'd output <tr class="odd"> and style that with ".odd {}"

-- 
a game sig: http://tinyurl.com/d3rxz9

Post a reply to this message

And lo On Wed, 22 Sep 2010 11:37:21 +0100, Invisible <voi### [at] devnull> did  
spake thusly:

>>> I hadn't even heard about :nth-child. (What, still no :last-child
>>> yet?) That still doesn't help me style a table with some arbitrary
>>> number of rows, where I want the odd rows blue and the even rows  
>>> yellow.
>>
>> We're cross-threading here so I'll just repeat tr:nth-child(odd){} Oh
>> and nth-last-child() will select elements backwards, but besides there
>> is a :last-child. All hail CSS3.
>
> And, uh, how many years will it be before any browser anywhere starts to  
> implement CSS3?

Works in my copy of FireFox, Opera and Chrome.

-- 
Phil Cook

--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com

Post a reply to this message