W3C home > Mailing lists > Public > public-webplatform@w3.org > August 2013

Re: CSS Content Property Page

From: Rishabh Rao <rishabhsrao@yahoo.com>
Date: Thu, 08 Aug 2013 13:56:57 +0530
Message-ID: <52035651.2090301@yahoo.com>
To: Julee Burdekin <jburdeki@adobe.com>
CC: Wen M <wendymoltrup@gmail.com>, "Webplatform.org" <public-webplatform@w3.org>
Hi Julee and Wendy,

I just created a very simple example [1] for the "content" property. In 
a HTML form, it uses the content property to insert a colon after the 
label. It also uses content to insert the typical mandatory red asterisk 
mark before the label to indicate that the field is required. I tried to 
use the adjacent sibling selector/combinator along with specifying the 
subject (! symbol) of the selector:

    !label:before + input[required] { ... }

But it appears not be supported by current browsers [2].

Kindly let me know if this is the right approach. If yes, then we can 
use it as an example on the content page [3].

Thank you!

[1] http://code.webplatform.org/gist/6182273
[2] http://dev.w3.org/csswg/selectors4/#subject
[3] http://docs.webplatform.org/wiki/css/properties/content


-------- Original Message --------
Subject: 	Re: CSS Content Property Page
Date: 	Wed, 7 Aug 2013 13:52:23 -0400
From: 	Mike Sierra <letmespellitoutforyou@gmail.com>
To: 	Julee Burdekin <jburdeki@adobe.com>
CC: 	Rishabh Rao <rishabhsrao@yahoo.com>, Wen M 
<wendymoltrup@gmail.com>, "Webplatform.org" <public-webplatform@w3.org>

One trick I'd pass along is an alternative to inserting graphic content 
directly, which displays in-line by default. If you set the dimensions 
of the ::before/::after area and activate it with some non-displaying 
text, you can implement a background image instead, which offers more 
control. In this case, display:block overrides the default in-line, and 
makes the image stack:

div::before {
     height: 4em;
     width: 12em;
     display: block;
     content: ' ';
     background-image: url(http://www.yubnub.org/images/yubnub.png);
     background-size: contain;
     background-repeat: no-repeat;

On 08/08/2013 12:27 PM, Rishabh Rao wrote:
> Hi Julee,
> Yes, sure, I'd be happy to help with the "content" property. I'll be 
> able to help with the examples part.
> Thanks,
> Rishabh
> @rishabhsrao
> On 08/07/2013 10:35 PM, Julee Burdekin wrote:
>> Hi, Rishabh:
>> Do you maybe have some time to help Wendy out with the examples for 
>> the content property?
>> Thanks.
>> Julee
>> ----------------------------
>> julee@adobe.com
>> @adobejulee
>> From: Wen M <wendymoltrup@gmail.com <mailto:wendymoltrup@gmail.com>>
>> Date: Monday, August 5, 2013 9:47 PM
>> To: WebPlatform Public List <public-webplatform@w3.org 
>> <mailto:public-webplatform@w3.org>>
>> Subject: CSS Content Property Page
>> Resent-From: WebPlatform Public List <public-webplatform@w3.org 
>> <mailto:public-webplatform@w3.org>>
>> Resent-Date: Monday, August 5, 2013 9:48 PM
>> I am adding to the CSS content property page. I found a some useful 
>> examples online, but if anyone has an example to share, that would be 
>> helpful.
>> Also, if anyone on the mailing list lives in the Los Angeles area, I 
>> am the Education Coordinator of a new Meetup group in Burbank. We are 
>> just getting started, but working together on webplatform pages will 
>> be (hopefully) one of our projects.
>> Just e-mail me at wjinca@gmail.com <mailto:wjinca@gmail.com> if you 
>> are interested in joining us.
>> Wendy
Received on Thursday, 8 August 2013 08:27:29 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:13:52 UTC