Re: CSS Content Property Page

I just read your message again Rishabh.  It should be supported by current browsers, but I also experienced a problem with an example I created. I assumed I was doing something wrong.

I added a link to an article on CSS Tricks and will add more as I find them. 

If I learn anything new about the browser support, I will let you know.  

On Aug 8, 2013, at 1:26 AM, Rishabh Rao wrote:

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!

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

Regards,
Rishabh
@rishabhsrao






-------- 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>
>> Date: Monday, August 5, 2013 9:47 PM
>> To: WebPlatform Public List <public-webplatform@w3.org>
>> Subject: CSS Content Property Page
>> Resent-From: WebPlatform Public List <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 if you are interested in joining us. 
>> 
>> Wendy 
>