HighDots Forums  

Opposite of display:none ?

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Opposite of display:none ? in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #11  
Old   
rf
 
Posts: n/a

Default Re: Opposite of display:none ? - 07-21-2009 , 08:17 AM






Stan Brown wrote:
Quote:
Tue, 21 Jul 2009 09:22:30 GMT from rf <rf@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='';

Quote:
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.

Reply With Quote
  #12  
Old   
Andy Dingley
 
Posts: n/a

Default Re: Opposite of display:none ? - 07-21-2009 , 10:52 AM






On 21 July, 03:09, Stan Brown <the_stan_br... (AT) fastmail (DOT) fm> wrote:

Quote:
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;
}

}

Reply With Quote
  #13  
Old   
C A Upsdell
 
Posts: n/a

Default Re: Opposite of display:none ? - 07-21-2009 , 10:59 AM



Stan Brown wrote:
Quote:
Tue, 21 Jul 2009 00:15:44 -0400 from C A Upsdell
cupsdell (AT) nospam (DOT) 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?

Reply With Quote
  #14  
Old   
C A Upsdell
 
Posts: n/a

Default Re: Opposite of display:none ? - 07-21-2009 , 11:03 AM



Andy Dingley wrote:
Quote:
On 21 July, 03:09, Stan Brown <the_stan_br... (AT) fastmail (DOT) 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?

Reply With Quote
  #15  
Old   
Adrienne Boswell
 
Posts: n/a

Default Re: Opposite of display:none ? - 07-21-2009 , 01:10 PM



Gazing into my crystal ball I observed Stan Brown
<the_stan_brown (AT) fastmail (DOT) fm> writing in news:MPG.24cf741130ba96f998bb78
@news.individual.net:

Quote:
Tue, 21 Jul 2009 02:43:25 +0000 (UTC) from Adrienne Boswell
arbpen (AT) yahoo (DOT) com>:

Gazing into my crystal ball I observed Stan Brown
the_stan_brown (AT) fastmail (DOT) 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]

Quote:
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

Quote:
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]

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Reply With Quote
  #16  
Old   
Stan Brown
 
Posts: n/a

Default Re: Opposite of display:none ? - 07-22-2009 , 12:18 AM



Tue, 21 Jul 2009 04:45:28 -0700 (PDT) from Helpful person
<rrllff (AT) yahoo (DOT) com>:
Quote:
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.

--
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

Reply With Quote
  #17  
Old   
Stan Brown
 
Posts: n/a

Default Re: Opposite of display:none ? - 07-22-2009 , 12:20 AM



Tue, 21 Jul 2009 07:52:46 -0700 (PDT) from Andy Dingley
<dingbat (AT) codesmiths (DOT) com>:
Quote:
On 21 July, 03:09, Stan Brown <the_stan_br... (AT) fastmail (DOT) 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.

--
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

Reply With Quote
  #18  
Old   
Harlan Messinger
 
Posts: n/a

Default Re: Opposite of display:none ? - 07-22-2009 , 10:17 AM



Stan Brown wrote:
Quote:
Tue, 21 Jul 2009 04:45:28 -0700 (PDT) from Helpful person
rrllff (AT) yahoo (DOT) 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.

How about

@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; }
}

Reply With Quote
  #19  
Old   
Adrienne Boswell
 
Posts: n/a

Default Re: Opposite of display:none ? - 07-22-2009 , 12:53 PM



Gazing into my crystal ball I observed Stan Brown
<the_stan_brown (AT) fastmail (DOT) fm> writing in
news:MPG.24d05da195f2b33598bb7d (AT) news (DOT) individual.net:

Quote:
Tue, 21 Jul 2009 07:52:46 -0700 (PDT) from Andy Dingley
dingbat (AT) codesmiths (DOT) com>:
On 21 July, 03:09, Stan Brown <the_stan_br... (AT) fastmail (DOT) 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.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Reply With Quote
  #20  
Old   
dorayme
 
Posts: n/a

Default Re: Opposite of display:none ? - 07-22-2009 , 07:33 PM



In article <Xns9C506495DD8CCarbpenyahoocom (AT) 85 (DOT) 214.113.135>,
Adrienne Boswell <arbpen (AT) yahoo (DOT) com> wrote:

Quote:
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

Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.