RE: [wsrp] Fwd: Re: [wsrp-markup] Contextual Selectors

[Andre Kramer <andre.kramer@eu.citrix.com>]

Title: RE: [wsrp] Fwd: Re: [wsrp-markup] Contextual Selectors

A cool idea.  I note we seem to have grown a "." on the selectors in the example.

.navigation h1 {color:#00ff00;}
.portlet h1 {color:#0000ff;}

should start with only one ".".

regards,
Andre

-----Original Message-----
From: Rex Brooks [mailto:rexb@starbourne.com]
Sent: 07 August 2003 04:38
To: wsrp@lists.oasis-open.org
Subject: [wsrp] Fwd: Re: [wsrp-markup] Contextual Selectors

Date: Wed, 6 Aug 2003 20:37:29 -0700
To: noah.guyot@vignette.com
From: Rex Brooks <rexb@starbourne.com>
Subject: Re: [wsrp-markup] Contextual Selectors
Cc: wsrp-markup@lists.oasis-open.org
Bcc:
X-Attachments:

Thanks, Noah,

This is very helpful. I am copying my reply to the TC list so that when I mention it tomorrow, it can be referenced.

As a heads-up, TC folks, if you have css classes and stylesheets for your portal building apps, I will ask that you review this with your staffs to determine if such a recommendation would work for you. Also, I will ask again if you have css classes that you will be creating and implementing beyond what we have in v1.0, which is a fairly low threshold, and if so, would you pass these along to the markup sc so we can include them in the survey we will do to see if it looks like we need to recommend further classes for v1.1 and/or 2.0.

Thanks,
Rex

At 12:18 AM +0000 8/7/03, noah.guyot@vignette.com wrote:
all
--

Here is a write up on the contextual selectors idea per our conference call this morning.

One way to prevent stylesheet clashes bewteen different stylesheets is to use contextual selectors (also known as descendants).

Here's how they work:
----

Suppose we need to make text inside all <h1> tags to be red.
The class would look like this:

h1 {color:#ff0000;}

and the html would look like this:

<h1>Red Text</h1>

The resulting text inside the <h1> tag would look red in a browser.

Now suppose we want most of the <h1> tags to be red but the navigation area should be green.
The style sheet would look like this:

h1 {color:#ff0000;}

..navigation h1 {color:#00ff00;}

and the html would look like this:

<h1>Red Text</h1>

<div class="navigation">
<h1>Green Text>
<h1>More Green Text</h1>
</div>

That's contextual selectors in a nutshell.

Application to Portlets
----

The way we could use this for portlets is a follows. We could wrap the entire portlet markup in a <div class="portlet"> </div> and make all of the portlets classes contextual. That could help prevent stylesheet clashes.

Example:
----
stylesheet:

..portlet h1 {color:#0000ff;}

HTML:

<h1>normal text</h1>

<div class="portlet">
<h1>Blue text in portlet</h1>
</div>

--
noah

You may leave a Technical Committee at any time by visiting http://www.oasis-open.org/apps/org/workgroup/wsrp-markup/members/leave_workgroup.php

--

Rex Brooks
GeoAddress: 1361-A Addison, Berkeley, CA, 94702 USA, Earth
W3Address: http://www.starbourne.com
Email: rexb@starbourne.com
Tel: 510-849-2309
Fax: By Request

--

Rex Brooks
GeoAddress: 1361-A Addison, Berkeley, CA, 94702 USA, Earth
W3Address: http://www.starbourne.com
Email: rexb@starbourne.com
Tel: 510-849-2309
Fax: By Request