Re: @media in style attribute

Ernest Cline wrote:

>Bert Bos <bert@w3.org> scribed:
>  
>
>>Philip Hoyt wrote:
>>
>>    
>>
>>>I've been trying to find a way to specify media type for a css rule
>>>in the style attribute of xhtml. Something like
>>><img src="printLogo.gif" style="@media print {display: block}
>>>@media screen {display:none}" /> but this doesn't seem to be
>>>part of any specification, and at least that syntax doesn't work in
>>>any modern browsers. Seems like it might be useful functionality.
>>>      
>>>
>>This is indeed not part of any specification, neither for HTML nor
>>for CSS. There is a draft that describes it[1] (not the same syntax,
>>but it allows that functionality), but the use cases are so rare, that
>>nothing has happened with it since and there is currently no sign
>>that anything will.
>>
>>If you want the style rule inside the document, you can use the
>>MEDIA attribute of the STYLE element, or put the @media inside
>>the STYLE element. If that is not enough, than there is a good
>>chance that your architecture isn't optimal.
>>
>>[1] http://www.w3.org/TR/2002/WD-css-style-attr-20020515
>>    
>>
>
>This would mostly be useful to ease the styling of transclusions
>in my opinion.  Until transclusions become useful, there is little
>benefit to the two more expansive profiles given by the draft.
>
>The description in the draft and the grammar given in the draft
>don't match.  Going by the description, using @media directly
>doesn't work, but going by the grammar given in section 3,
>it does.  I think the rule:
>
>inline-stylesheet
> : S* [declarations|declarations-block|inline-ruleset*|stylesheet]
> ;
>
>was possibly intended to have been:
>
>inline-stylesheet
> : S* [declarations|declarations-block|inline-ruleset*|import]
> ;
>
>so as to match the description and the apparent intent of the draft.
>
>It would be possible to handle media at the pseudo-rules profile
>level by adding a :media() pseudoclass.  That would make the
>example given above be:
>
><img src="printLogo.gif" style=":media(print) {display: block}
>:media(screen) {display:none}" />
>
>
>
>
>  
>
just add a simple thing.

<link rel="stylesheet" media="screen" href="screen.css"/>
<link rel="stylesheet" media="print" href="print.css"/>

=========================
screen.css
-----------------
.print_only { display: none !important; }

==========================
print.css
------------------
.screen_only { display: none !important; }

=======================================
This all will allow you to style the display correctly for those 
elements (block etc;) in normal stylesheets/style attribs, and the 
print.css and screen.css will over-ride them on a normal use. just add 
the class in there, along with any other classes you need, will save 
alot of UA download.

As well as prevent UA's from /needing/ to impliment a pseudo class for 
something that we allready support via an @ rule.

Thanks,
~Justin Wood

Received on Thursday, 20 May 2004 23:08:31 UTC