Domanda sulle @rules

**LA VALE** · 12-01-2010, 12:55

stavo guardando la guida presente sul sito riguardo le @rules, e in particolare questa parte:

@media

Lo stesso risultato (un CSS per ogni dispositivo) si può ottenere con la direttiva @media.
Un uso più potente, però, è quello di inserire la direttiva nel codice di un foglio esterno. Immaginate di avere un foglio di stile per formattare le vostre pagine e che vogliate impostare colori diversi per un elemento a seconda che si visualizzi il testo sullo schermo o su carta stampata. Invece di costruire due fogli di stile potete creare in un solo CSS esterno queste regole e diversificare l'aspetto dell'elemento:

@media print {
h1 {
color: black;
}
}
@media screen {
h1 {
color: red;
}
}

quello che vorrei fare io è questo.. impostare una @rules per la stampa, in modo che in fase di stampa della pagina non vengano stampati #header, #menuuno, #menudue, #menulaterale, #footer. Tutto questo ovviamente vorrei metterlo all'interno del css già presente nel sito, per non dover modificare tutte le centinaia di pagine del sito.

Ho provato a fare come nell'esempio della guida ma non funziona: andando su anteprima di stampa, non ci sono le modifiche volute.

Questo è il codice css ho usato:

codice:

html,body{
	margin: 0px;
	padding: 0px;
}
*{
margin: 0px;
padding: 0px;
}
body{
	font-size: 11px;
	font-family: Verdana, Arial, sans-serif;
	background: #ffffff;
	color: #000000;
	text-align: center;
}
div#main{
	margin: 0px;
	padding: 0px;
}
@media screen {
div#header {
	width: 949px;
	w\idth: 950px;
	\width: 949px;
	margin: 0px auto;
	padding: 0px;
	text-align: left;
	height: 137px;
	overflow: hidden;
	background: #587ABA;
	border-bottom: 0px solid #000000;
	border-right: 1px solid #000000;
}
}
@media print {
div#header {
	display: none;
}
}
div#main{
	width: 950px;
	w\idth: 950px;
	\width: 950px;
	margin: 0px auto;
	padding: 0px;
	text-align:left;
	background: #ffffff;
}
@media screen {
div#menuuno{
	margin: 0px 0px 0px 20px;
	width: 918px;
	w\idth: 930px;
	\width: 918px;
	padding: 5px;
	text-align: left;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	background: #A5AAC2;
	height: 20px;
}
}
@media print {
div#menuuno {
	display: none;
}
}
div#menuuno p{
	float: left;
	margin-left: 2px;
	margin-top: 3px;
	margin-bottom: 3px;
}
div#menuuno a{
	text-decoration: none;
	font-weight: bold;
	color: #000000;
}
div#menuuno a:hover{
	color: #7B7C7E;
}
@media screen {
div#menudue{
	margin: 0px 0px 0px 20px;
	width: 918px;
	w\idth: 930px;
	\width: 918px;
	padding: 5px;
	text-align: left;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	background: #EABF27;
	height: 20px;
}
}
@media print {
div#menudue {
	display: none;
}
}
div#menudue p{
	float: left;
	margin-left: 2px;
	margin-top: 3px;
	margin-bottom: 3px;
f	ont-weight: bold;
}
div#menudue a{
	text-decoration: none;
	font-weight: bold;
	color: #000000;
}
div#menudue a:hover{
	color: #7B7C7E;
}
div#menudue form  {float: left;}
div#menudue input {float: left;}
div#menudue label {float: left;}
.clearer {
	clear: both;
	padding: 0px;
	margin: 0px;
}
div#container{
	margin: 0px 0px 0px 20px;
	width: 928px;
	w\idth: 930px;
	\width: 928px;
	text-align: left;
	padding: 0px;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	background: url(../immagini/varie/sfondofinto.gif) repeat-y top left #ffffff;
	overflow: auto;
}
div#content{
	float: right;
	width: 660px;
	w\idth: 700px;
	\width: 660px;
	padding: 20px;
	margin: 0px;
	font-family: Verdana, Arial, sans-serif;
	color: #000000;
	font-size: 11px;
	text-align: justify;
	min-height: 600px;
	height: auto !important;
	height: 600px;
	line-height: 16px;
	background: url(../immagini/varie/streck.jpg) top center no-repeat scroll;
	display: inline;
}
#content p{
	margin: 0px 0px 20px 0px;
	clear: left;
	float: left;
	width: 100%;
}

div#menulaterale{
	float: left;
	width: 180px;
	w\idth: 200px;
	\width: 180px;
	padding: 10px;
	margin: 0px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #000000;
	min-height: 450px;
	height: auto !important;
	height: 450px;
}
p.titolohome {
	padding: 0px 0px 6px 0px;
	margin: 0px 0px 15px 0px;
	text-align: center;
	font-weight: bold;
	font-family: Georgia, Helvetica, sans-serif;
	font-size: 20px;
	color: #000000;
}
h1 {
	padding: 0px 0px 6px 0px;
	margin: 0px 0px 15px 0px;
	text-align: left;
	font-weight: bold;
	font-family: Georgia, Helvetica, sans-serif;
	font-size: 20px;
	color: #000000;
}
h1 span {
	font-size: 15px;
}
h2 {
	font-size: 14px;
	font-weight: bold;
	margin: 0px 0px 15px 5px;
}
ul.quadrato{
	margin: 3px 0px 3px 20px;
	list-style-type : square;
	color: #000000;
}
li.quadrato{
	margin: 3px 0px 10px 10px;
	list-style-type : square;
	color: #000000;
}
li.cerchio{
	margin: 3px 0px 10px 10px;
	list-style-type : circle;
	color: #000000;
}
div#vetrinahome{
	float: left;
	width: 180px;
	w\idth: 200px;
	\width: 180px;
	margin: 0px;
	padding: 10px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	color: #000000;
	min-height: 400px;
	height: auto !important;
	height: 400px;
	text-align: center;
}
#vetrinahome img{
	margin: 5px 30px 5px 30px;
	border: 1px #000000 solid;
}
#vetrinahome img.nobordo {
	border: 0px;
}
#aggiornamenti {
	border: 0px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #000000;
	padding: 5px;
	margin: 0px auto;
	text-align: left;
}
#content img.nobordo {
	border: 0px;
}
div#footer{
	width: 928px;
	w\idth: 930px;
	\width: 928px;
	clear: both;
	border: 1px solid #000000;
	text-align: center;
	font-family: Verdana, Arial, sans-serif;
	color: #000000;
	font-size: 10px;
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 0px 0px;
	background: #A5AAC2;
	line-height: 16px;
}
div#footer a {
	color: #000000;
}
div#footer a:hover {
	color: #000000;
	text-decoration: none;
}
img {
	border: 0px;
}
a {
	color: #000000;
	text-decoration: underline;
}
a:hover {
	color: #000000;
}
table.foto {
	margin: 0px;
	padding: 0px;
	border-collapse: separate;
	border-spacing: 7px;
	border: 0px;
	table-layout: fixed;
	width: 99%;
}
tr.foto {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
td.foto {
	margin: 10px;
	padding: 10px;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	text-align: center;
	vertical-align: top;
	width: 33%;
	overflow: hidden;
}
td.foto img {
	border: 1px #000000 solid;
}
caption {
	padding: 0px;
	margin: 0px 0px 10px 0px;
	text-align: left;
	font-weight: bold;
	font-family: Georgia, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
}
p.biblio {
	padding: 0px;
	margin: 0px 0px 15px 0px;
	text-align: left;
	font-weight: bold;
	font-family: Georgia, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
}
hr {
	background: #000000; 
	color: #cccccc;
}

**Mich_** · 12-01-2010, 13:33

In quale browser hai testato?

Perche` le @rules non sono state implementate in tutti i browser!
(e` per questo che sono ancora poco usate)

**LA VALE** · 12-01-2010, 13:43

Originariamente inviato da Mich_
In quale browser hai testato?

Perche` le @rules non sono state implementate in tutti i browser!
(e` per questo che sono ancora poco usate)

Firefox, Internet expolorer, Chrome

Sistema operativo: windows vista

**fcaldera** · 12-01-2010, 14:07

sì ma quel css che hai postato lo hai incluso specificando media="screen, print" o media="all" giusto?

**Marcolino's** · 12-01-2010, 16:10

Vedi un po' se ti aiuta? http://www.webdevout.net/css-hacks#in_css-import_media
non ho il tempo di controllare ora purtroppo

**fcaldera** · 12-01-2010, 16:19

e comunque suggerisco di raggruppare le regole insieme... che senso ha una serie alternata di

codice:

@media print {
   ... 
}

@media screen {
   ...
}

@media print {
   ... 
}

...

?

**Marcolino's** · 12-01-2010, 16:29

Ci avevo pensato anche io ma non avendo modo ora di fare prove ho pensato che forse non era importante dato che stava sempre dentro @rules{} ma forse ci hai azzeccato almeno in parte.
Pensavo anche che la prima parte del foglio di stile andrebbe messa in un @rules media all visto che è parte comune ma visto che IE7 fa il cattivo con queste cose... meglio cambiare no?

**LA VALE** · 12-01-2010, 16:38

@fcaldera:

il css lo richiamo nella pagina così:

codice:

<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />

nella pagina della guida non faceva riferimento al cambiare questa dichiariazione.
A questo punto le @rules mi sono inutili, dovrei comunque cambiare tutte le intestazioni delle pagine, cambiando l'attributo media..

In quanto al fatto di non aver raggruppato le @rules, era una prova non avevo mai usato questa cosa e non sapevo si potesse fare

**fcaldera** · 12-01-2010, 16:55

sì ma quel css che hai postato lo hai incluso specificando media="screen, print" o media="all" giusto?

se lo richiami così

codice:

<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />

come può essere interpretato in fase di stampa?

prova con

codice:

<link rel="stylesheet" type="text/css" media="screen,  print" href="/css/style.css" />

o magari media = all

**LA VALE** · 12-01-2010, 16:58

Originariamente inviato da fcaldera
se lo richiami così

codice:

<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />

come può essere interpretato in fase di stampa?

prova con

codice:

<link rel="stylesheet" type="text/css" media="screen,  print" href="/css/style.css" />

o magari media = all

Si ho capito cosa vuoi dire

Il fatto è che dovremmo cambiare l'attributo media in tutte le pagine, scrivendo come dici tu, quindi non so se adotteremo questa soluzione oppure no, ora vediamo.

Discussione: Domanda sulle @rules

Strumenti discussione

Ricerca discussione

Visualizza

Domanda sulle @rules

Permessi di invio