Nele: Warum doppelte Angaben?

Hallo,

mal eine Frage an die CSS Fachleute. Auf vielen Seiten sehe ich folgende Angaben:

  
font-size: 48px;  
font-size: 3.1rem;  

ich frag mich, warum müssen doppelte Angaben gemacht werden? entweder px oder rem?

Gruß
Nele

  1. Hallo,

    die aktuellen Browser kommen alle mit der Einheit rem zurecht, ältere nicht unbedingt. Das ist also ein Fallback für ältere Browser, die die Schriftgröße px nehmen und rem ignorieren. Aktuelle Browser, die mit rem umgehen können, überschreiben die px-Angabe und nehmen die rem-Angabe.

    Gruss

    MrMurphy

    1. Hallo MrMurphy,

      danke für deine Antwort, es heißt doch immer man soll seine Dateien so klein wie möglich halten. Wenn ich überall doppelte Angaben machen muss wird die Datei unnötig groß?

      Also wäre es nicht sinnvoller auf rem einfach zu verzichten?

      Gruß
      Nele

      1. Hallo

        danke für deine Antwort, es heißt doch immer man soll seine Dateien so klein wie möglich halten. Wenn ich überall doppelte Angaben machen muss wird die Datei unnötig groß?

        Also wäre es nicht sinnvoller auf rem einfach zu verzichten?

        Nein und nein. Erstes Nein: „rem“ als Einheit ist einerseits relativ, sprich es passt sich wie Angaben mit den Einheiten „%“ oder „em“ ohne deren Nachteile (z.B. in Listen [1]) den Vorgaben im Browser des Nutzers an und – zweites Nein – wenn du es nicht übertreibst, kannst du so neueren Browsern neue Features zugänglich machen, ohne alte Browser hinten runter fallen zu lassen.

        Die Schriftgröße mag dabei kein besonders einleuchtendes Beispiel sein. Nehmen wir stattdessen Farbverläufe (gradients) für den Hintergrund. Die werden von allen aktuellen Browsern (evtl. mit Vendor-Präfix) unterstützt. Kommt jemand mit einem veralteten Browser daher und wir wollen ihn nicht ausschließen, bekommt er einen einfarbigen Hintergrund. Da wir aber schick sein wollen, sollen aktuelle Browser den Verlauf bekommen. Der muss nun zusätzlich angegeben werden, womit wir bei mehr Code, aber auch mehr Schick sind.

        header {  
        background: #00386a; /* für die alten Browser */  
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(205, 100%, 30%)), color-stop(24%, hsl(205, 100%, 26%)), color-stop(41%, hsl(205, 100%, 20%)), color-stop(42%, #ffffff)); /* alte Webkit-Syntax z.B. für Androids  2.x-Stock-Browser */  
        background: -webkit-linear-gradient(top, hsl(205, 100%, 30%) 0, hsl(205, 100%, 26%) 46px, hsl(205, 100%, 20%) 96px,  #fff 100%); /* für die paar Webkit-Browser, die es noch brauchen */  
        background: linear-gradient(to bottom, hsl(205, 100%, 30%) 0, hsl(205, 100%, 26%) 46px, hsl(205, 100%, 20%) 96px, #fff 100px); /* alle anderen aktuellen Browser */  
        }
        

        Wer kann, greift an entsprechender Stelle zu. Wer nicht kann, ignoriert.

        [1] In verschachtelten Listen verändert sich mit jeder Ebene die Schriftgröße, wenn als Einheit % oder em genutzt wird UND eine Größe != 1 angegeben ist.

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        Veranstaltungsdatenbank Vdb 0.3
      2. Hallo

        danke für deine Antwort, es heißt doch immer man soll seine Dateien so klein wie möglich halten. Wenn ich überall doppelte Angaben machen muss wird die Datei unnötig groß?

        Das hast du nicht richtig verstanden. Der Quellcode soll nicht unnötig aufgebläht werden und nicht mehr benötigte Angaben sollten entfernt werden.

        Im übrigen ist in der Regel ein mittelgroßes Bild viel größer als der gesamte Quellcode.

        Sinnvoller Quellcode soll natürlich auch geschrieben werden. Und dazu gehört auch ein Fallback für ältere Browser. Mit jeder Zeile Quellcode zu geizen ist eher albern.

        Gruss

        MrMurphy