Fogli CSS in linea solo per dispositivi handheld

[panta1978]

Avrei intenzione di creare un css del tipo:

<p class="medskip" style="display:none">

Però vorrei che l'attributo display:none fosse usato solo dai dispositivi handheld.

Qualora non lo fosse pazienza, dovrei riuscire a risolvere in altro modo, anche se aumenterebbero le dimensioni dei miei fogli di stile...

[pierofix]

Credo non ti convenga a prescindere utilizzare l'attributo style. Un peso leggermente superiore dei fogli di stile non credo sia un problema: avresti comunque tutta la situazione sempre sottocontrollo, senza doverti perdere nei cavilli di ogni singolo documento.

Ah, un'altra cosa: a che scopo utilizzare 'display:none'? Ti ricordo che con esso, alcuni lettori di schermo e motori di ricerca potrebbero saltare quelle informazioni a piè pari. Se devi semplicemente 'nascodere' l'elemento dallo schermo, allora credo convenga usare questo:

#elemento
{
   position:absolute; top:-100px;
   width:1px; height:1px;
   overflow:hidden;
}

P.S. Adesso che mi viene in mente... non ho mai provato e adesso non ne ho modo ma... chissà se questo funzia:

<p class="medskip" style="@media handheld { display:none }">

Dubito fortemente, visto che comunque, a livello logico, non avrebbe molto senso.

[panta1978]

Originariamente inviato da pierofix
Credo non ti convenga a prescindere utilizzare l'attributo style. Un peso leggermente superiore dei fogli di stile non credo sia un problema: avresti comunque tutta la situazione sempre sottocontrollo, senza doverti perdere nei cavilli di ogni singolo documento.

Ah, un'altra cosa: a che scopo utilizzare 'display:none'? Ti ricordo che con esso, alcuni lettori di schermo e motori di ricerca potrebbero saltare quelle informazioni a piè pari. Se devi semplicemente 'nascodere' l'elemento dallo schermo, allora credo convenga usare questo:

#elemento
{
   position:absolute; top:-100px;
   width:1px; height:1px;
   overflow:hidden;
}

P.S. Adesso che mi viene in mente... non ho mai provato e adesso non ne ho modo ma... chissà se questo funzia:

<p class="medskip" style="@media handheld { display:none }">

Dubito fortemente, visto che comunque, a livello logico, non avrebbe molto senso.

OK, ottima dritta, provo a formulare il problema in maniera un pò più precisa...
in sostanza il mio documento è fatto così (premessa: la classe noskip genera uno spazio piccolo, la classe medskip uno spazio medio e la classe bigskip uno spazio grande).

<div id="navigation2">
....
<p class="medskip">
[img]immagini/valid-xhtml11.png[/img]
</p>

<p class="bigskip">
[img]immagini/vcss.png[/img]
</p>

<p class="noskip">
<a rel="license" href="http://creativecommons.org/licenses/by-nc/2.5/">
[img]immagini/somerights20.png[/img]</a>
<!-- <rdf:RDF....
</p>

</div>

Le immagini del W3C e della Creative Commons Licence secondo me non ci stanno bene nella versione sito dedicata ai palmari... quindi avevo pensato di eliminarle, e di inserire al loro posto delle semplici scritte (Valid XHTML - Valid CSS - Some rights reserved), inserite in un secondo blocco, visibile solo ai palmari.

Mi sa che espando un pò i fogli di stile...