Alex: Angaben zusammenfassen?

Hi,

was ist besser im CSS Code?

  
h1 {  
	font-size:2.5em;  
	line-height:3.8em;  
	font-family:Helvetica;  
	font-weight:100;  
	color:#e2dbdb;  
	margin:0em;  
}  
h2 {  
	font-size:1.563em;  
	font-family:Helvetica;  
	font-weight:100;  
	line-height:1.8em;  
	color:#2f2d2c;  
	margin:0em;  
	padding:1.25em;  
	text-align:left;	  
}  

oder doch lieber so?

  
h1, h2 {  
	font-family:Helvetica;  
	font-weight:100;  
	color:#e2dbdb;  
	margin:0em;  
	text-align:left;	  
}  
  
h1 {  
	font-size:2.5em;  
	line-height:3.8em;  
}  
  
h2 {  
	font-size:1.563em;  
	line-height:1.8em;  
	padding:1.25em;  
}  

vielleicht doch ganz anderes?

  1. Hallo

    was ist besser im CSS Code?

    oder doch lieber so?

    Lieber so.

    h1, h2 {
    font-family:Helvetica;
    font-weight:100;
    color:#e2dbdb;
    margin:0em;
    text-align:left;
    }

    h1 {
    font-size:2.5em;
    line-height:3.8em;
    }

    h2 {
    font-size:1.563em;
    line-height:1.8em;
    padding:1.25em;
    }

    
    >   
    > vielleicht doch ganz anderes?  
      
    Von Präprozessoren, die dir dieses Regelwerk aus dem ganz anderen generieren, werden dir Andere noch erzählen. Die haben schon was, man muss sich allerdings auch mit einer neuen Syntax auseinandersetzen.  
      
    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](http://termindbase.auge8472.de/)
    
    1. Hi Auge,

      Von Präprozessoren, die dir dieses Regelwerk aus dem ganz anderen generieren, werden dir Andere noch erzählen. Die haben schon was, man muss sich allerdings auch mit einer neuen Syntax auseinandersetzen.

      du meinst bestimmt LESS oder SASS? Ist mir ehrlich gesagt viel zu viel Arbeit jede Änderungen erst umwandeln zu lassen um zu sehen wie es aussieht. Bei einem großen Projekt mag es wohl praktisch sein aber nicht bei einer kleiner WP Seite.

      1. Hallo

        Von Präprozessoren, die dir dieses Regelwerk aus dem ganz anderen generieren, werden dir Andere noch erzählen. Die haben schon was, man muss sich allerdings auch mit einer neuen Syntax auseinandersetzen.

        du meinst bestimmt LESS oder SASS?

        Jep.

        Ist mir ehrlich gesagt viel zu viel Arbeit jede Änderungen erst umwandeln zu lassen um zu sehen wie es aussieht. Bei einem großen Projekt mag es wohl praktisch sein aber nicht bei einer kleiner WP Seite.

        Wie gesagt, das bringt seinen nicht immer gerechtfertigten Aufwand mit sich.

        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. Mahlzeit,

        du meinst bestimmt LESS oder SASS? Ist mir ehrlich gesagt viel zu viel Arbeit jede Änderungen erst umwandeln zu lassen um zu sehen wie es aussieht.

        Also zumindest Sass bietet die Möglichkeit, einen Ordner zu überwachen und die CSS-Datei automatisch zu erzeugen, sobald die .scss geändert wird. Also keine zusätzliche Arbeit.
        Ansonsten kann man gute Editoren ebenfalls so konfigurieren, dass sie die CSS-Datei automatisch erzeugen.

        --
        42
        1. Hi,

          Ansonsten kann man gute Editoren ebenfalls so konfigurieren, dass sie die CSS-Datei automatisch erzeugen.

          Ich nutze Brackets. Keine Ahnung ob dieses ein guter oder ein schlechter Editor ist.

          1. Mahlzeit,

            Ich nutze Brackets. Keine Ahnung ob dieses ein guter oder ein schlechter Editor ist.

            Ich auch nicht, weil ich den nicht kenne. Wenn der Editor sowas wie Autobuild, Macros oder Scripte zur Automatisierung nicht kennt, ist es in meinen Augen _kein_ guter Editor, das ist aber immer Geschmacksache. Früher hab ich auf Quanta+ geschworen, heute geht mir nix über Sublime Text. Und für letzter gibt es eine Erweiterung "Build ob Save", die muss ich nur installieren und schon wird .scss nach .css "kompiliert"

            Geht z.B. auch mit .po nach .mo (und wenn ich PHP-FCGI laufen hab wird die neue Sprachdatei auch automatisch aktiviert), C/C++ wird gleich kompiliert usw.

            Auf Wunsch wird eine geänderte Datei gleich auf den Server gespielt, es gibt ein Modul zu Subversion (Git nutze ich nicht)

            Um dir alle Vorteile von Sublime Text aufzuzählen, fehlt der Platz ;) Aber für _mich_ macht so ein Umfach einen guten Editor auf. Und da alles modular ist, kann ich mir eine Entwicklungsumgebung zusammenstellen, die für mich perfekt ist.

            Wenn dein Editor das nicht kann, ist er für mich kein guter Editor :)

            --
            42
            1. @@M.:

              nuqneH

              Wenn der Editor sowas wie Autobuild, Macros oder Scripte zur Automatisierung nicht kennt, ist es in meinen Augen _kein_ guter Editor

              Dann ist es in meinen Augen ein Editor. Was du verlangst, ist schon IDE.

              (Git nutze ich nicht)

              Sollteste mal. Dann ist Subversion in deinen Augen kein gutes Versionskontrollsystem mehr.

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              1. Mahlzeit,

                Sollteste mal. Dann ist Subversion in deinen Augen kein gutes Versionskontrollsystem mehr.

                Möglich. Aber die Umstellung inkl. sämtlicher Hooks, Scripts zum automatischen Anlegen von Repos, Anbindung an Redmine usw.
                Kurz: Verdammt viel Arbeit was durch die Vorteile nicht aufgewogen wird, deshalb bleib ich bei Subversion ;)

                --
                42
  2. Om nah hoo pez nyeetz, Alex!

    Du solltest bei font-family mehrere Alternativen einschließlich einer generischen Familie anbieten. Außerdem lassen sich die Angaben zur Schrift zusammenfassen und text-align: left ist der Defaultwert.

    Der Rest ist wohl Geschmackssache.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen TeX und Textmarker.

    1. Hi Matthias,

      Du solltest bei font-family mehrere Alternativen einschließlich einer generischen Familie anbieten.

      Helvetica ist auf allen System verfügbar. Daher ist eine zweite Sprache nicht von Nöten.

      1. Hallo,

        Helvetica ist auf allen System verfügbar.

        wie kommst du denn darauf?
        Helvetica ist eine lizenzpflichtige Schrift, AFAIK von Apple. Oder war's Adobe? Egal.

        Windows hat sie jedenfalls nicht von sich aus "an Bord". Auf meinen XP-Systemen hatte ich nie eine Helvetica, und die Windows-7-Büchse, die ich hier gerade benutzen "darf", hat diese Schrift auch nicht.

        Sehr wohl hat Windows eine interne Ersetzungstabelle, so dass als Ersatzschrift für Helvetica automatisch Arial genommen wird.

        Daher ist eine zweite Sprache nicht von Nöten.

        Schrift, nicht Sprache.
        Und doch, mindestens eine generische Schriftfamilie, in diesem Fall Sans-Serif, sollte man angeben.

        Ciao,
         Martin

        --
        Ich liebe Politiker auf Wahlplakaten.
        Sie sind tragbar, geräuschlos, und leicht wieder zu entfernen.
          (Loriot, deutscher Humorist, †2011)
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. @@Der Martin:

          nuqneH

          Helvetica ist eine lizenzpflichtige Schrift, AFAIK von Apple. Oder war's Adobe? Egal.

          Weder noch. Helvetica ist deutlich älter. Sonst könnten ja viele bekannte Logos nicht in Helvetica gesetzt sein.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Om nah hoo pez nyeetz, Alex!

        Helvetica ist auf allen System verfügbar. Daher ist eine zweite Sprache nicht von Nöten.

        Da wäre ich nicht sicher. Zudem, kann es schaden, Alternativen anzubieten?

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Manga und Mangan.

        1. Hi Matthias,

          Da wäre ich nicht sicher. Zudem, kann es schaden, Alternativen anzubieten?

          ich dachte immer umso weniger Zeilen / Zeichen Code umso schneller ist die Seite. Deshalb habe ich auf solche Dinge keine Rücksicht genommen. Sollte ich vielleicht ändern?

          1. Hallo

            Da wäre ich nicht sicher. Zudem, kann es schaden, Alternativen anzubieten?

            ich dachte immer umso weniger Zeilen / Zeichen Code umso schneller ist die Seite. Deshalb habe ich auf solche Dinge keine Rücksicht genommen. Sollte ich vielleicht ändern?

            Klar sollte man nicht notwendiges weglassen. Die Schriftarten und -familien bei jedem Element zu verzeichnen, ist Mumpitz, Die Regel durch die einmalige Angabe mehrerer Schriftarten und der -familie robust zu machen, nicht.

            Tip zur Optimierung: Falls du auf der ganzen Seite nur eine Schriftartdeklaration brauchst, schreibe die Regel nicht für eine Sammlung von Elementen (h1, h2, h3, p, li, th, td { font-familiy:; }) sondern lege das für das Dokument fest (body { font-familiy:; }). Wenn du nun für den Seitentitel (h1) eine andere Schrift nehmen willst, mache dafür eine abweichende Deklaration.

            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
      3. Hallo

        Du solltest bei font-family mehrere Alternativen einschließlich einer generischen Familie anbieten.

        Helvetica ist auf allen System verfügbar.

        Um von dem von Martin angesprochenen Punkt [1] weg zu kommen, kann man dir, wenn man den Satz wortwörtlich nimmt, ja nur zustimmen.

        Ja, die Schriftart ist überall verfügbar, aber nein, sie ist nicht überall installiert [1]. Es wird sich auch niemand wegen einer Website eine Schriftart isntallieren. Du könntest sie zwar per CSS nachladen lassen, das ist aber bei einer solchen Brotschrift mMn zu viel des Guten. Lässt du es, wird der Nutzer nicht einmal merken, dass ihm der Text mit Arial oder einer anderen Alltagsschriftart statt Helvetica angezeigt wird.

        Von daher ist die Angabe weiterer Schriften und zu guter Letzt der Schriftfamilie zielführend und mehr als nur ein „kann man machen“. Man *soll* es machen.

        [1] Auch bei mir (Win7) ist Helvetica nicht installiert.

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

          Ja, die Schriftart ist überall verfügbar, aber nein, sie ist nicht überall installiert.

          ah, gut. Ich hatte verfügbar mit "benutzbar", also bereits installiert, gleichgesetzt.

          Ciao,
           Martin

          --
          Zwischen Leber und Milz
          passt immer noch'n Pils.
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      4. @@Alex:

        nuqneH

        Helvetica ist auf allen System verfügbar.

        Ich hab gerade ein Gerät in der Hand, auf dem keine Helvetica installiert ist. Arial übrigens auch nicht.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      5. Mahlzeit,

        Helvetica ist auf allen System verfügbar. Daher ist eine zweite Sprache nicht von Nöten.

        Nur zur Info, unter Linux Mint und unter Debian nicht vorhanden. Ob installierbar, hab ich nicht geprüft. Auf jeden Fall kein Default-Font.

        --
        42
        1. Nur zur Info, unter Linux Mint und unter Debian nicht vorhanden. Ob installierbar, hab ich nicht geprüft. Auf jeden Fall kein Default-Font.

          Was passiert eigentlich wenn eine Schrift nicht geladen wird? Kann mir nicht vorstellen dass die Seite dann weiß bleibt?

          1. Hallo,

            Was passiert eigentlich wenn eine Schrift nicht geladen wird? Kann mir nicht vorstellen dass die Seite dann weiß bleibt?

            nein, dann fällt der Browser auf einen der voreingestellten Standardfonts zurück. Das ist dann auf Windows typischerweise Times New Roman für Serifenschriften, Arial für Sans-Serif-Schriften, Courier New für Monospace-Schriften. Andere Systeme haben andere Default-Fonts.

            Aber du merkst hier deutlich: Man muss als Autor immer damit rechnen, dass die Seite beim Besucher mit einer anderen Schrift angezeigt wird, als man eigentlich beabsichtigt hat.

            Ciao,
             Martin

            --
            Ich denke, also bin ich hier falsch.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          2. Mahlzeit,

            Was passiert eigentlich wenn eine Schrift nicht geladen wird? Kann mir nicht vorstellen dass die Seite dann weiß bleibt?

            Unter Linux ist der Defaultfont entweder Times New Roman, Arial (nur wenn per Hand nachinstalliert) oder Bitstream Vera Sans (muss aber auch per Hand installiert werden).
            Bei mir meistens Times. Ich ändere das zwar weil es Seitenautoren gibt, die das nicht beachten, aber ich weiss halt, wo ich hinlangen muss ;)

            --
            42
    2. @@Matthias Apsel:

      nuqneH

      Der Rest ist wohl Geschmackssache.

      Nein, Der Martin hat gute Gründe aufgeführt, dass das nicht Geschmackssache ist.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  3. Hallo,

    h1 {

    }
    h2 {
    }

    
    >   
    > oder doch lieber so?  
    >   
    > ~~~css
    
    h1, h2 {  
    
    > }  
    >   
    > h1 {  
    > }  
    > h2 {  
    > }
    
    

    ich würde sagen: Kommt drauf an[tm].

    Wenn du zwei Elemente oder Elementtypen hast, die nur "zufällig" ein paar gemeinsame Eigenschaften haben, aber von der Semantik her eigentlich völlig eigenständig sind, würde ich sie auch komplett getrennt definieren.

    In diesem Fall ist aber anzunehmen, dass h1 und h2 durchaus gewollt gewisse Gemeinsamkeiten haben. Dann würde ich die zweite Variante vorziehen. Sie hat den Vorteil, dass gleiche Eigenschaften nur einmal notiert werden und ist daher pflegefreundlicher.

    So long,
     Martin

    --
    Lieber eine Stumme im Bett, als eine Taube auf dem Dach.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  4. @@Alex:

    nuqneH

    h1 {
    font-size:2.5em;
    line-height:3.8em;

    Eine Zeilenhöhe vom 3.8-fachen der Schriftgröße (und zwar der der Überschrift, nicht der des Fließtextes) ist wohl viel zu groß.

    Die Zeilenhöhe bestimmt den Zeilenabstand (wenn die Überschrift mehrzeilig ist) und darf nicht zum Setzen des Abstandes der Überschrift von anderen Elementen verwendet werden.

    Ein sinnvoller Zeilenabstand bei der Schriftgröße ist eher so 1.0 bis 1.1.

    Bei h2 ebenso.

    font-weight:100;

    Die allerwenigsten Systeme werden die Helvetica so dünn im Angebot haben.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hi,

      Ein sinnvoller Zeilenabstand bei der Schriftgröße ist eher so 1.0 bis 1.1.

      Das glaube ich nicht, Tim. *)

      Bei line-height:1.0; kommen die runterhängenden Teile der 1. Überschrift-Zeile (also die unter der Zeile liegenden Teile von g, q, p,  usw.) mit den nach oben überstehenden Teile der 2. Zeile (Akzente auf Großbuchstaben ...) durcheinander. Bei 1.1 berühren die Akzente die runterhängenden Teile noch.

      Und das ziemlich unabhängig von der Schriftgröße - bei den üblichen Schriften zumindest. Diktengleiche Schriften oder solche, bei denen die Buchstaben relativ breit sind, mögen line-height:1.1; vertragen, aber "normale" Schriften wie Arial, Helvetica, Times New Roman und solche mit ähnlichen Breite/Höhe-Verhältnissen brauchen m.E. mehr line-height.

      cu,
      Andreas

      *) Zitat von Al Borland

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      1. @@MudGuard:

        nuqneH

        Bei line-height:1.0; kommen die runterhängenden Teile der 1. Überschrift-Zeile (also die unter der Zeile liegenden Teile von g, q, p,  usw.) mit den nach oben überstehenden Teile der 2. Zeile (Akzente auf Großbuchstaben ...) durcheinander.

        Das könnte vielleicht problematisch sein …

        Bei 1.1 berühren die Akzente die runterhängenden Teile noch.

        … das eher nicht. Die Buchstaben laufen nicht ineinander, die diakritischen Zeichen sind zu erkennen. Und die Wahrscheinlichkeit, dass ein großer Umlaut auf einen Kleinbuchstaben mit Unterlänge trifft, ist wohl nicht sehr hoch. In anderen Sprachen mit mehr diakritischen Zeichen (Tschechisch bspw.) werden Substantive nicht groß geschrieben, Großbuchstaben treten nur am Anfang und bei Eigennamen auf; Zusammentreffen mit Unterlänge also auch nicht sehr wahrscheinlich. (Wir reden nicht über Vietnamesisch, wo Buchstaben auch mehrere diakritische Zeichen übereinander tragen können, oder?)

        aber "normale" Schriften wie Arial, Helvetica, Times New Roman und solche mit ähnlichen Breite/Höhe-Verhältnissen brauchen m.E. mehr line-height.

        Für Fließtext selbstverständlich. Hier geht’s aber um Überschriften, wo mehr als zwei Zeilen nicht sehr häufig sind. Bei einer zweizeiligen überschrift hat die erste Zeile Luft nach oben, die zweite nach unten. Daher können sie ruhig enger zusammen stehen.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)