Media print/screen in Formatierung integrieren

[Peter2]

Schönen Tag allseits

als Grundsätze der CSS-Steuerung nach Media sind mir bekannt:

a) Verlinkung von zwei verschiedenen CSS

b) Definition verschiedener Formate

@media screen {
   font: cc
   line-height: 12
}

@media print {
   font: dd
   line-height: 14
}

Aber kann man die Regel mitten in die Definition (eigene CSS-Datei) einbauen, um es kürzer und übersichtlicher zu machen? Beispiel

c)

h1 {
   farbe: ...
   grösse: ...
   font: ....
   margin: ...
   {@media screen
        text-shadow: ...
   }
   weight: ...
}

Damit wäre h1 für alles definiert, aber zusätzlich bei "screen" kommt noch der Schatten dazu.

Sollte das klappen? (Ich habe es nicht hingebracht...)

Peter

[Matthias Apsel]

Om nah hoo pez nyeetz, Peter2!

als Grundsätze der CSS-Steuerung nach Media sind mir bekannt:
a) Verlinkung von zwei verschiedenen CSS

Das ist nicht notwendig, zumal du ggf. alles mehrfach schreibst.

Aber kann man die Regel mitten in die Definition (eigene CSS-Datei) einbauen, um es kürzer und übersichtlicher zu machen? Beispiel

h1 {
   margin: ...
   {@media screen
        text-shadow: ...
   }
   weight: ...
}

So nicht, aber so.

Matthias

[Peter2]

Om nah hoo pez nyeetz, Peter2!

Wieder was gelernt ;-)

So nicht, aber so.

Matthias

Also wie meine oben genannte "Methode b)" ?

Peter

[Matthias Apsel]

Om nah hoo pez nyeetz, Peter2!

Also wie meine oben genannte "Methode b)" ?

im Prinzip ja.

Angaben ohne @media gelten für alles, am Ende des Stylesheets machst du die Änderungen oder zusätzliche Vorgaben für besondere Ausgabemedien.

Matthias

[Emso]

@media screen {
   font: cc
   line-height: 12
}

@media print {
   font: dd
   line-height: 14
}

Sicher nur ein Zitierfehler, die fehlenden ; am Ende der Eigenschaft. Aber ich habe schon Stunden nach Fehlern gesucht und dann war es so ein vergessenes ;

Ach ja, und die Eigenschaften können nicht dem screen oder print direkt zugeordnet werden, sondern html-tags wie etwa p

So, genug gemeckert für diese Woche.

Emso

[Peter2]

Ist klar, aber der Code war als klassischer Pseudocode gedacht, um die Kernfrage besser darzustellen.

Peter

[Gunnar Bittersmann]

@@Peter2:

nuqneH

a) Verlinkung von zwei verschiedenen CSS

AFAIK laden Browser dann alle Ressourcen. Ist also ungünstig: unnötig viel HTTP-Requests.

c)

h1 {
   farbe: ...
   grösse: ...
   font: ....
   margin: ...
   {@media screen
        text-shadow: ...
   }
   weight: ...
}

In CSS ist das nicht möglich, aber in Sass, was daraus CSS gemäß b) generiert.

Qapla'

[Peter2]

In CSS ist das nicht möglich, aber in Sass, was daraus CSS gemäß b) generiert.

Danke, das schaut sehr interessant aus, aber für meine Mini-Anwendung ein zu grosser Einstiegsaufwand. Für Intensivanwender sicher gut.

Peter