Opposite of display:none ?
Stan Brown
course there's a lot of duplication between them. I'd like to
consolidate them into one style sheet for all media, with specific
@media rules for the stuff that is different for print.
One thing has me stumped, though: certain elements should be visible
only on print. So the style sheet specifies class .onlyprint as
display:none. But then how do I override that for print media? I
don't want to list a rule for each element to set them to inline,
block, and so on.
.onlyprint { display: none }
@media print {
.onlyprint { display: ???????? }
}
--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
Adrienne Boswell
<the_sta...@fastmail.fm> writing in news:MPG.24ceed528d4d8ddc98bb75
@news.individual.net:
> Right now I have separate style sheets for screen and print, but of
> course there's a lot of duplication between them. I'd like to
> consolidate them into one style sheet for all media, with specific
> @media rules for the stuff that is different for print.
>
> One thing has me stumped, though: certain elements should be visible
> only on print. So the style sheet specifies class .onlyprint as
> display:none. But then how do I override that for print media? I
> don't want to list a rule for each element to set them to inline,
> block, and so on.
>
> .onlyprint { display: none }
>
> @media print {
> .onlyprint { display: ???????? }
> }
>
Perhaps .onlyprint {display:block;}
AFAIK, the browser will automatically show the element. Here's what I
do:
#content {width:80%;}
@media print
{
#header, #nav, #footer {display:none}
#content {width:100%;}
}
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
BootNic
Stan Brown <the_sta...@fastmail.fm> wrote:
> Right now I have separate style sheets for screen and print, but
> of course there's a lot of duplication between them. I'd like to
> consolidate them into one style sheet for all media, with
> specific @media rules for the stuff that is different for print.
>
> One thing has me stumped, though: certain elements should be
> visible only on print. So the style sheet specifies class
> .onlyprint as display:none. But then how do I override that for
> print media? I don't want to list a rule for each element to set
> them to inline, block, and so on.
>
> .onlyprint { display: none }
>
> @media print {
> .onlyprint { display: ???????? }
> }
If you wish to hide it from every media except print then simply do
that.
<link rel="stylesheet" href="/temo.css" type="text/css"
media="aural,braille,embossed,handheld,projection,screen,tty,tv">
<style type="text/css"
media="aural,braille,embossed,handheld,projection,screen,tty,tv">
.onlyprint {display:none;}
<style>
@import url("/temo.css")
aural,braille,embossed,handheld,projection,screen,tty,tv;
@media aural,braille,embossed,handheld,projection,screen,tty,tv {
.onlyprint{display:none;}
}
--
BootNic Mon Jul 20, 2009 11:43 pm
One must learn by doing the thing, for though you think you know it,
you have no certainty until you try.
*Aristotle*
⁕ 357 days remaining
C A Upsdell
> Right now I have separate style sheets for screen and print, but of
> course there's a lot of duplication between them. I'd like to
> consolidate them into one style sheet for all media, with specific
> @media rules for the stuff that is different for print.
>
> One thing has me stumped, though: certain elements should be visible
> only on print. So the style sheet specifies class .onlyprint as
> display:none. But then how do I override that for print media? I
> don't want to list a rule for each element to set them to inline,
> block, and so on.
Why don't you look at the CSS spec. Or any good CSS book.
(Hint: there is no single opposite to display:block)
rf
> Right now I have separate style sheets for screen and print, but of
> course there's a lot of duplication between them. I'd like to
> consolidate them into one style sheet for all media, with specific
> @media rules for the stuff that is different for print.
>
> One thing has me stumped, though: certain elements should be visible
> only on print. So the style sheet specifies class .onlyprint as
> display:none. But then how do I override that for print media? I
> don't want to list a rule for each element to set them to inline,
> block, and so on.
Do it the other way round.
@media screen {
.onlyprint { display: none }
}
>
@media print {
.onlyprint { /* dont say anything */}
}
Stan Brown
<cups...@nospam.not>:
> Why don't you look at the CSS spec.
Thank you. I did -- which is why I posted my question.
Stan Brown
>
> Stan Brown wrote:
> > One thing has me stumped, though: certain elements should be
> > visible only on print. So the style sheet specifies class
> > .onlyprint as display:none. But then how do I override that for
> > print media? I don't want to list a rule for each element to set
> > them to inline, block, and so on.
>
> Do it the other way round.
>
> @media screen {
> .onlyprint { display: none }
> }
> >
> @media print {
> .onlyprint { /* dont say anything */}
> }
That would work if the only two media were print and screen. But the
spec lists about a dozen, and even worse it says that there may be
others. So how do I say "display:none" for every medium except
print? There must be a way, but I'm not finding it in the spec.
Stan Brown
<arb...@yahoo.com>:
>
> Gazing into my crystal ball I observed Stan Brown
> <the_sta...@fastmail.fm> writing in news:MPG.24ceed528d4d8ddc98bb75
> @news.individual.net:
> > visible only on print. So the style sheet specifies class
> > .onlyprint as display:none. But then how do I override that for
> > print media? I don't want to list a rule for each element to set
> > them to inline, block, and so on.
> >
> > .onlyprint { display: none }
> >
> > @media print {
> > .onlyprint { display: ???????? }
> > }
> >
>
> Perhaps .onlyprint {display:block;}
Thanks, Adrienne. But what happens when I do a <span.onlyprint>? I
don't want to turn inline elements into block elements.
> Here's what I do:
>
> #content {width:80%;}
>
> @media print
> {
> #header, #nav, #footer {display:none}
> #content {width:100%;}
> }
Right, I understand that. My problem is when I want diskpal:none on
all media *except* print. There are too many in the spec to list,
and the spec itself says that there may be other media types.
Or should I just not worry about anything but screen and print and
maybe projection?
Helpful person
> Stan Brown wrote:
>
> Do it the other way round.
>
> @media screen {
> .onlyprint { display: none }}
>
> @media print {
> .onlyprint { /* dont say anything */}
Why does one have to define .onlyprint for print media? If it is
only defined for screen then the class will be ignored for print. Am
I missing something?
Harlan Messinger
You're right. Stan put it there, with the comment, for explanatory purposes.
rf
> Tue, 21 Jul 2009 09:22:30 GMT from rf <r...@z.invalid>:
>>
>> Stan Brown wrote:
>>> One thing has me stumped, though: certain elements should be
>>> visible only on print. So the style sheet specifies class
>>> .onlyprint as display:none. But then how do I override that for
>>> print media? I don't want to list a rule for each element to set
>>> them to inline, block, and so on.
>>
>> Do it the other way round.
>>
>> @media screen {
>> .onlyprint { display: none }
>> }
>>>
>> @media print {
>> .onlyprint { /* dont say anything */}
>> }
>
> That would work if the only two media were print and screen. But the
> spec lists about a dozen, and even worse it says that there may be
> others. So how do I say "display:none" for every medium except
> print?
There isn't AFAIK. Perhaps "display: ; " might be a good thing to have. At
least in Javascript one can say ...style.display='';
> There must be a way, but I'm not finding it in the spec.
Correct and I thought of that, but the OP only mentioned "screen" and
"print". <removes tounge from cheek>
Wonders... how many of the other @media values do browsers take notice of?
Browsers that can actually print that is, ignoring telephones.
Andy Dingley
> One thing has me stumped, though: certain elements should be visible
> only on print.
display: inherit;
but (of course) it doesn't (didn't?) work under IE, so you have to do
it "longhand" and instead expand for each HTML element type and use
either block or inline accordingly.
/*
Print control
Copyright © Codesmiths 2001-2007 http://codesmiths.com
Licensed under the GNU LGPL
http://creativecommons.org/licenses/LGPL/2.1/
*/
.print-only{
display: none;
visibility: hidden;
}
@media print {
/* Simple standards-based way to turn printing on */
.print-only {
display: inherit;
visibility: visible;
}
/* IE hack, because it doesn't support display: inherit; */
*.print-only {
display: block;
}
tt.print-only, i.print-only, b.print-only, big.print-only, small.print-
only,
em.print-only, strong.print-only, dfn.print-only, code.print-only,
samp.print-only, kbd.print-only, var.print-only, cite.print-only,
abbr.print-only, acronym.print-only,
a.print-only, img.print-only, object.print-only, br.print-only,
map.print-only, q.print-only, sub.print-only, sup.print-only,
span.print-only, bdo.print-only,
input.print-only, select.print-only, textarea.print-only, label.print-
only, button.print-only
{ display: inline; }
img.print-only,
button.print-only, textarea.print-only,
input.print-only, select.print-only
{ display: inline-block; }
li.print-only { display: list-item }
table.print-only { display: table; }
tr.print-only { display: table-row; }
thead.print-only { display: table-header-group; }
tbody.print-only { display: table-row-group; }
tfoot.print-only { display: table-footer-group; }
col.print-only { display: table-column; }
colgroup.print-only { display: table-column-group; }
td, th.print-only { display: table-cell; }
caption.print-only { display: table-caption; }
.no-print {
display: none;
visibility: hidden;
}
}
C A Upsdell
> Tue, 21 Jul 2009 00:15:44 -0400 from C A Upsdell
> <cups...@nospam.not>:
>> Why don't you look at the CSS spec.
>
> Thank you. I did -- which is why I posted my question.
Did you perhaps overlook section 9.2.4 of the CSS spec, which answers
your question quite clearly?
C A Upsdell
> On 21 July, 03:09, Stan Brown <the_stan_br...@fastmail.fm> wrote:
>
>> One thing has me stumped, though: certain elements should be visible
>> only on print.
>
> display: inherit;
>
> but (of course) it doesn't (didn't?) work under IE, so you have to do
> it "longhand" and instead expand for each HTML element type and use
> either block or inline accordingly.
display:inherit could not meet the OP's needs anyway. E.g., if you have
a span within a paragraph, doing "span { display:inherit; }" should set
the display property to block, instead of inline, should it not?
Adrienne Boswell
@news.individual.net:
> Tue, 21 Jul 2009 02:43:25 +0000 (UTC) from Adrienne Boswell
><arb...@yahoo.com>:
>>
>> Gazing into my crystal ball I observed Stan Brown
>> <the_sta...@fastmail.fm> writing in
news:MPG.24ceed528d4d8ddc98bb75
>> @news.individual.net:
>> > One thing has me stumped, though: certain elements should be
>> > visible only on print. So the style sheet specifies class
>> > .onlyprint as display:none. But then how do I override that for
>> > print media? I don't want to list a rule for each element to set
>> > them to inline, block, and so on.
>> >
>> > .onlyprint { display: none }
>> >
>> > @media print {
>> > .onlyprint { display: ???????? }
>> > }
>> >
>>
>> Perhaps .onlyprint {display:block;}
>
> Thanks, Adrienne. But what happens when I do a <span.onlyprint>? I
> don't want to turn inline elements into block elements.
Then depending on what the thing is, you would do {display:inline}.
But, you do not have to do that, as the default behavior is to display
the element according to its default renderings.
Here's a test page:
[http://www.cavalcade-of-coding.info/usenet/testprint.html]
>
>> Here's what I do:
>>
>> #content {width:80%;}
>>
>> @media print
>> {
>> #header, #nav, #footer {display:none}
>> #content {width:100%;}
>> }
>
> Right, I understand that. My problem is when I want diskpal:none on
> all media *except* print. There are too many in the spec to list,
> and the spec itself says that there may be other media types.
http://www.w3.org/TR/CSS21/media.html#media-types
>
> Or should I just not worry about anything but screen and print and
> maybe projection?
>
Look my example:
[http://www.cavalcade-of-coding.info/usenet/testprint.html]
Stan Brown
<rrl...@yahoo.com>:
But my problem is, screen and print are not the only media.
I could list braille, embossed, and the rest (all but print), but the
spec specifically says there can be others.
If I ignore all media but screen and print, then it's easy: as you
say, define .onlyprint for screen and don't define it for print. But
I was hoping for a more comprehensive solution.
Stan Brown
<din...@codesmiths.com>:
> On 21 July, 03:09, Stan Brown <the_stan_br...@fastmail.fm> wrote:
>
> > One thing has me stumped, though: certain elements should be visible
> > only on print. �
>
> display: inherit;
>
> but (of course) it doesn't (didn't?) work under IE, so you have to do
> it "longhand" and instead expand for each HTML element type and use
> either block or inline accordingly.
Yes, I feared that was the case. No disrespect intended, but I hate
it! It's ugly and verbose, and goes against what I'm trying to do
which is to achieve an overall reduction in the amount of CSS that
has to be fetched.
Harlan Messinger
> Tue, 21 Jul 2009 04:45:28 -0700 (PDT) from Helpful person
> <rrl...@yahoo.com>:
>> On Jul 21, 5:22 am, "rf" <r...@z.invalid> wrote:
>>> Stan Brown wrote:
>>>
>>> Do it the other way round.
>>>
>>> @media screen {
>>> .onlyprint { display: none }}
>>>
>>> @media print {
>>> .onlyprint { /* dont say anything */}
>> Why does one have to define .onlyprint for print media? If it is
>> only defined for screen then the class will be ignored for print. Am
>> I missing something?
>
> But my problem is, screen and print are not the only media.
>
> I could list braille, embossed, and the rest (all but print), but the
> spec specifically says there can be others.
>
> If I ignore all media but screen and print, then it's easy: as you
> say, define .onlyprint for screen and don't define it for print. But
> I was hoping for a more comprehensive solution.
>
@media print {
.onlyprint { display: block; }
span.onlyprint, a.onlyprint, em.onlyprint, strong.onlyprint [, etc.] {
display: inline ! important; }
Another option: use separate classes for block and inline elements:
.onlyprint, .onlyprintinline { display: none; }
@media print {
.onlyprint { display: block; }
.onlyprintinline { display: inline; }
}
Adrienne Boswell
> Tue, 21 Jul 2009 07:52:46 -0700 (PDT) from Andy Dingley
><din...@codesmiths.com>:
>> On 21 July, 03:09, Stan Brown <the_stan_br...@fastmail.fm> wrote:
>>
>> > One thing has me stumped, though: certain elements should be
visible
>> > only on print. �
>>
>> display: inherit;
>>
>> but (of course) it doesn't (didn't?) work under IE, so you have to do
>> it "longhand" and instead expand for each HTML element type and use
>> either block or inline accordingly.
>
> Yes, I feared that was the case. No disrespect intended, but I hate
> it! It's ugly and verbose, and goes against what I'm trying to do
> which is to achieve an overall reduction in the amount of CSS that
> has to be fetched.
>
Did you have a look at my earlier post? Have a look at
[http://www.cavalcade-of-coding.info/usenet/testprint.html] and see if
that helps.
dorayme
Adrienne Boswell <arb...@yahoo.com> wrote:
> Did you have a look at my earlier post? Have a look at
> [http://www.cavalcade-of-coding.info/usenet/testprint.html] and see if
> that helps.
Your square brackets make it impossible for my newsreader to click on
URLs you quotethis way. Just thought to mention it.
--
dorayme
Jonathan N. Little
IIRC are not "<>" the characters typically used to bound a URL? Does
this work in your newsreader?
<http://www.cavalcade-of-coding.info/usenet/testprint.html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
dorayme
"Jonathan N. Little" <lws...@centralva.net> wrote:
> dorayme wrote:
> > In article <Xns9C506495DD8C...@85.214.113.135>,
> > Adrienne Boswell <arb...@yahoo.com> wrote:
> >
> >> Did you have a look at my earlier post? Have a look at
> >> [http://www.cavalcade-of-coding.info/usenet/testprint.html] and see if
> >> that helps.
> >
> > Your square brackets make it impossible for my newsreader to click on
> > URLs you quotethis way. Just thought to mention it.
> >
>
>
> IIRC are not "<>" the characters typically used to bound a URL? Does
> this work in your newsreader?
>
> <http://www.cavalcade-of-coding.info/usenet/testprint.html>
Yes, that works fine. I use this myself. I have no real *comprehension*
if it is useful or whether most people would be as happy with none of
these end things.
[http://www.cavalcade-of-coding.info/usenet/testprint.html]
means I have to cut and paste and I am wondering how much glue I have
left in my bottle.
--
dorayme
Stan Brown
<arb...@yahoo.com>:
> Did you have a look at my earlier post? Have a look at
> [http://www.cavalcade-of-coding.info/usenet/testprint.html] and see if
> that helps.
Thank you for posting. I did look earlier, but it was similar to
another proposed solution and I didn't want to post too many
responses.
Adrienne Boswell
<dorayme...@optusnet.com.au> writing in news:doraymeRidThis-
5BE26C.093...@news.albasani.net:
> means I have to cut and paste and I am wondering how much glue I have
> left in my bottle.
>
>
My dear, you are the glue that keeps us all together.
Stan Brown
<hmessinger...@comcast.net>:
> Another option: use separate classes for block and inline elements:
>
> .onlyprint, .onlyprintinline { display: none; }
> @media print {
> .onlyprint { display: block; }
> .onlyprintinline { display: inline; }
> }
This is an intriguing idea -- thanks!
Jonathan N. Little
> Wed, 22 Jul 2009 10:17:27 -0400 from Harlan Messinger
> <hmessinger...@comcast.net>:
>> Another option: use separate classes for block and inline elements:
>>
>> .onlyprint, .onlyprintinline { display: none; }
>> @media print {
>> .onlyprint { display: block; }
>> .onlyprintinline { display: inline; }
>> }
>
> This is an intriguing idea -- thanks!
>
The question is are the parts that would be "print-only" ever be inline?
Most times the sections one either wishes to print or not print
usually are are *blocks*
Examples like banners, footers and navbars normally excluded from
printing and you may want boilerplate, copyright, disclaimers,
addresses included in printing. The only inline thing I usually adjust
is remove all underscores and coloring from links in the printed version
(servers no purpose in print and is just distracting)
Harlan Messinger
> Stan Brown wrote:
>> Wed, 22 Jul 2009 10:17:27 -0400 from Harlan Messinger
>> <hmessinger...@comcast.net>:
>>> Another option: use separate classes for block and inline elements:
>>>
>>> .onlyprint, .onlyprintinline { display: none; }
>>> @media print {
>>> .onlyprint { display: block; }
>>> .onlyprintinline { display: inline; }
>>> }
>>
>> This is an intriguing idea -- thanks!
>>
>
> The question is are the parts that would be "print-only" ever be inline?
> Most times the sections one either wishes to print or not print usually
> are are *blocks*
The working assumption is "yes" because Stan implied up front that that
was the problem he was trying to solve!
Stan Brown
<lws...@centralva.net>:
> The question is are the parts that would be "print-only" ever be
> inline? Most times the sections one either wishes to print or not
> print usually are are *blocks*
>
> printing and you may want boilerplate, copyright, disclaimers,
> addresses included in printing. The only inline thing I usually
> adjust is remove all underscores and coloring from links in the
> printed version (servers no purpose in print and is just
> distracting)
Sat, 25 Jul 2009 13:19:55 -0400 from Harlan Messinger
<hmessinger...@comcast.net>:
> The working assumption is "yes" because Stan implied up front that
> that was the problem he was trying to solve!
Thanks to you both. I appreciate the benefit of the doubt :-) but I
think Jonathan may have put his finger on something. I'll check. I've
been assuming I needed to cover both inline and block, but I'll grep
for the relevant class names and see for sure.
This has been a good exercise for me. I suspect I'm not alone: I
created style sheets a few years ago and have modified them as needed
since then. But I never stepped back and took an overall look in all
that time. As I do, I'm finding some classes that are actually no
longer used, some rules that are redundant (because the properties
are inherited from the containing elements), and so forth.
So far I have about 13 KB in one style sheet, replacing 31 K in two.
And there's more yet to do. For instance, a few classes are used
only on the site-map page, so it's kind of silly to have them in the
style sheet that every page loads.
Stan Brown
<the_sta...@fastmail.fm>:
> I've
> been assuming I needed to cover both inline and block, but I'll grep
> for the relevant class names and see for sure.
I've checked, and there are some print-only <span>s and some screen-
only <span>s. Still, it was a good thought.
I've decided just not to be bothered by this. I'll list the devices
that are in the spec, and not worry about any new ones. If and when
an authoritative new list emerges, I'll have to make a change in only
one file.
Thanks again to everyone who participated.