Peter2: Media print/screen in Formatierung integrieren

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

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

    --
    1/z ist kein Blatt Papier.

    1. Om nah hoo pez nyeetz, Peter2!

      Wieder was gelernt ;-)

      So nicht, aber so.

      Matthias

      Also wie meine oben genannte "Methode b)" ?

      Peter

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

        --
        1/z ist kein Blatt Papier.

  2. @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

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

      Peter

  3. @@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'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. 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