[HTML/CSS/JavaScript] Tipp bei Werten!

[Stefan]

Hallo!

In genannten Sprachen ist ja öfters notwendig eine Eigenschaft mit Werten zu versehen. Zum Beispiel border: 1px. Und wenn man sich manche Skripte anschaut, stellt man schnell fest das die Schreibweise oft unterschiedlich gehandabt wird; Beispiele (CSS):

border:1px
border: 1 px
border: 1px
border:1 px

Ähnlich wird es auch mit mehreren Werten gehandhabt:

border:1px;color:red;hokuspokus:abkradabra;
border: 1 px ; color : red ; hokuspokus : abkradabra;
border: 1px; color: red; hokuspokus: abkradabra;
border:1 px;color:red;hokuspokus:abkradabra;


Und die Frage ist, welche Schreibweise ist die Richtige? Auch wenn es nicht falsch aussieht, so ein Leerzeichen kann viel ausmachen. Doch die Browser, besonders die älteren Browser, haben damit Probleme und sind da Recht Kreativ. Egal ob es sich um CSS oder JavaScript handelt. Richtig geschrieben und von den meisten Browser auch richtig interprediert:

border: 1px oder
border: 1px; color: red;

Nach dem Doppelpunkt und Semikolon gehört immer ein Leerzeichen! Das Semikolon schließt direkt ohne Leerzeichen am Vorzeichen an.

Außerdem ist es Sinnvoll die-Einzeiler zu trennen, denn auch damit können ältere Browser Probleme haben.
Aus border: 1px; color: red; hokuspokus: abkradabra; wird am besten

border: 1px;
color: red;
hokuspokus: abkradabra;

Wenn also mal etwas nicht so funktioniert wie es sein sollte, dann sollte man auch auf solche Kleinigkeiten achten - denn soetwas raubt nur Nerven weil es kaum ersichtlich ist.
Der IE ist meiner Erfahrung nach recht Tollerant. Während Netscape oder Firefox das einen eher sehr Krumm nehmen.

Stefan

[Asto]

Hmm ich habs noch nie probiert, aber auch intuitiv wohl schon immer richtig gemacht *g*

Aber wenn man es richtig formatiert ist es auch einfach übersichtlicher.

Man vergleiche nur mal

Code: Alles auswählen

#msgwindow {
   display: none;
   
   position: absolute;
   z-index: 1000;
   top: 200px;
   left: 50%;
   
   width: 300px;
   
   margin-left: -150px;
   
   background-color: #e1ebf3;
   border: 1px solid #000;
   
   color: #000;
}

mit

Code: Alles auswählen

#msgwindow { display:none;position:absolute;z-index:1000;top:200px;left:50%;width:300px;margin-left:-150px;background-color: #e1ebf3;border:1px solid #000;color: #000;}

*gänsehaut* ^^

Der IE ist meiner Erfahrung nach recht Tollerant. Während Netscape oder Firefox das einen eher sehr Krumm nehmen.

Gott sei Dank ^^ - Würden Firefox und Co auch alles in Sachen Formatierung und Syntax immer so durchgehen lassen, könnte man sich die Webstandards ja sonst wohin schieben *gg

[Stefan]

Ja finde ich auch Übersichtlicher. Dann und wann neige ich aber auch zu quetschen Aber die Übersicht geht eindeutig vor und die Zeit sollte man sich auch nehmen. Man kann dann auch später schneller was ändern (oder Fehler finden).

[Develman]

Wenn ich mal darüber nachgedacht habe, ist es imer dann gewesen, wenn ich andere CSS-Dateien angesehen habe. Da sieht man solche Einzeiler ja öfter mal und das schreckte mich dann immer ab. Wie Asto schon schreibt, geht die Übersicht bei Einzeilern sehr schnell verloren.

Ich versuche meine CSS-Dateien immer ähnlich wie in Astos Beispiel zu Formatieren.
Das mal ein Einzeiler dazwischen rutscht, passiert nur sehr selten (meist in der Anfangsphase der Website-Erstellung) und wird beim späteren Refactoring dann wieder "korrigiert".

[Andrea]

Gutes Thema !

Ich habe mich auch schon manchmal gewundert, dass mal so und mal so geschrieben wird, und ob das eigentlich egal ist.
Ich kann mich noch an Zeiten erinnern, als ein Leerzeichen zuviel oder zuwenig schonmal in stundenlanges Fehlersuchen ausuferte.

Gibt es eigentlich auch Regeln, oder Standards, in welcher Reihenfolge css-Angaben erfolgen sollten ?
Also z.B. erst Schriftfarbe, dann Größe, dann Art, oder andersrum ?

Andrea

[Asto]

Black:

Ja also ich schreibe an sich nie Einzeiler, hatte immer schon ne Abneigung gegen sowas (außer bei der if-else Kurzform in PHP: $var ? $if_do : $else_do; ^^).

Aber mir passierte es oft in der frühen Entwicklung der Seiten, das ich CSS in die style-Attribute der Tags schrieb. Man war das eine sch* Arbeit das nachher wieder alles in IDs und Klassen zu sortieren *gg*

Mittlerweile schreib ich gleich alles in IDs und Klassen bei richtigen Projekten, auch wenn sich der CSS Code erst in den style-Tags im <head> befindet. Später wird er dann ausgelagert wenn der CSS Code länger und länger wird...

Andrea:

Gute Frage, aber sowas ist mir nicht bekannt und würde auch nicht wirklich einen Sinn machen, da der "Parser" (Der der es für die Website in 'Schön' umwandelt ^^) sonst nacheinander schauen müsste ob die Werte so existieren.

So wie es ist kann er schauen was da ist, gucken ob es gültig ist und es dann umsetzen. Im Web muss ja immer alles flott gehen *g*

Was es in älteren W3C Standards mal gab ist die Tatsache, das wenn man eine Hintergrundfarbe definiert, auch eine Vordergrundfarbe (Schriftfarbe) definiert werden sollte, allerdings ist das im neusten Validator für CSS 2.1 auch wohl nicht mehr enthalten.

Edit: Da wir gerade beim Thema sind, ich weiß nicht ob ich es schonmal sagte (wollte auch nochmal irgendwann nen kleinen Performance-Guide schreiben):

CSS und JavaScript Notierungen sollten nicht durcheinander gelistet werden.

Schlechtes Beispiel:

Code: Alles auswählen

<script src="scripts/scripts.js" type="text/javascript"></script>
<link rel="stylesheet" href="design/style.php" type="text/css" />   
<script src="scripts/ajax.js" type="text/javascript"></script>

Gutes Beispiel:

Code: Alles auswählen

<link rel="stylesheet" href="design/style.php" type="text/css" />

<script src="scripts/scripts.js" type="text/javascript"></script>   
<script src="scripts/ajax.js" type="text/javascript"></script>

Warum?
Der Browser kann dann simultan arbeiten. Bei Listing 1 muss er erst von allem etwas runterladen, bis er anfangen kann die CSS oder JS Datei(en) zu verwerten. Bei Listing 2 hingegen kann er die CSS Datei laden und diese schon nutzen, während noch die JS Dateien geladen werden. Browser haben an sich auch eine begrenzte Anzahl gleichzeitig durchzuführender HTTP-Requests, weshalb man auf sowas auch schon mal achten sollte bei größeren Seiten, um das Design schon 'bilden' zu lassen, während die unwichtigeren Scripte noch geladen werden

Darauf gehe ich nochmal im Zusammenhang zu Content-Delivering-Networks ein, wenn ich irgendwann dann mal dazu komme den Guide zu schreiben ^^