JavaScript im head oder body einbinden?

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Scripte sollten, wenn sie nicht async oder defer sind, möglichst am Ende des body eingebunden werden, um das Rendern der Seite nicht zu blockieren.

Lassen sich Empfehlungen geben unter welchen Umständen was vorzuziehen wäre?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Scripte sollten, wenn sie nicht async oder defer sind, möglichst am Ende des body eingebunden werden, um das Rendern der Seite nicht zu blockieren.

Lassen sich Empfehlungen geben unter welchen Umständen was vorzuziehen wäre?

Ich würd da nach „async defer jake archibald“ suchen. Treffer.

LLAP 🖖

[Linuchs]

Lassen sich Empfehlungen geben unter welchen Umständen was vorzuziehen wäre?

Mehr und mehr gehe ich dazu über, CSS und Javascript nach Bedarf zu laden.

Beispiel: Für die Erfassung eines Veranstaltungstermins können nacheinander mehrere Formulare aufgerufen werden. Zunächst die Basisdaten, dann Zusätze.

Aber nur bei den Basisdaten benötige ich Ajax, um Ergänzungs-Vorschläge für die ersten getippten Buchstaben eines Ortes zu holen. Warum sollte ich diese Javascript-Datei für alle anderen Formulare auch laden?

Und ich muss nicht immer durch die Basisdaten durch, und damit nicht die JS Datei in den Cache laden. Bei Änderungen kann ich direkt die Zusätze ändern.

CSS- und JS-Angaben sind dann Teil des Objekts, im Sinne von objektorientierter Programmierung. Warum sollte ich die Angaben zu einem Formular in den Kopf- oder Fussbereich der Seite packen und damit zerteilen? Schlecht für die Übersicht, gut für Fehler.

Linuchs

[JürgenB]

Hallo

CSS- und JS-Angaben sind dann Teil des Objekts, im Sinne von objektorientierter Programmierung. Warum sollte ich die Angaben zu einem Formular in den Kopf- oder Fussbereich der Seite packen und damit zerteilen? Schlecht für die Übersicht, gut für Fehler.

also CSS im Body?

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

also CSS im Body?

• scoped
  • Beispiel
  • CanIUse

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

• CanIUse

deswegen die Nachfrage, die Unterstützung ist extrem mau.

Gruß
Jürgen

[Linuchs]

Der neue "Quelltext" sieht ja seltsam aus …

Hallo Jürgen,

deswegen die Nachfrage, die Unterstützung ist extrem mau.

Ich packe "Objekte", also zusammengehörendes CSS, HTML und Javascript in einen Container mit ID. Die zusätzlichen styles beschränken sich auf diese ID:

<div id="basis">
<style scoped>
#basis {
  border: 1px solid #aaa;
}
#basis h1 {
  color: #f00;
}
</style>
<script>...<script>
<h1>Basisangaben</h1>
...
</div><!-- id="basis" -->

Linuchs

[Matthias Apsel]

Hallo Linuchs,

Der neue "Quelltext" sieht ja seltsam aus …

Nicht, wenn man es richtig macht.

3 Tilden für Block-Code, Backticks für inline-Code. Wie immer eigentlich.

Bis demnächst
Matthias

[Linuchs]

3 Tilden für Block-Code, Backticks für inline-Code. Wie immer eigentlich.

Nur, dass bei mir (FF 48.0) bei Klick auf [Quelltext] die Backticks kommen und nicht die Tilden wie bisher.

[Julius]

Hallo Linuchs,

3 Tilden für Block-Code, Backticks für inline-Code. Wie immer eigentlich.

Nur, dass bei mir (FF 48.0) bei Klick auf [Quelltext] die Backticks kommen und nicht die Tilden wie bisher.

Ich habe es gerade mal ausprobiert (ich gebe die Tilden immer von Hand ein, das ist m. M. n. auch der Vorteil von Markdown):

• wenn du nichts markiert hast, bekommst die Backticks
• wenn du eine Zeile markiert hast, bekommst du ebenfalls die Backticks drumherum gepackt
• wenn du mehrere Zeilen ausgewählt hast, macht er dir die Tilden drumherum

Nebenbei: Du solltest mal deinen Browser updaten.

Gruß
Julius

[Orlok]

Hallo Julius,

Nur, dass bei mir (FF 48.0) bei Klick auf [Quelltext] die Backticks kommen und nicht die Tilden wie bisher.

Früher wurden beim Klick auf den Button in vielen Fällen Tilden eingefügt, auch wenn es sich eigentlich um inline-Code gehandelt hat. Der so erzeugte Codeblock wurde dann wegen fehlender Newlines vor der Markierung nicht gerendert. Das war ein Bug den ich kürzlich gefixt habe.

Ich habe es gerade mal ausprobiert (ich gebe die Tilden immer von Hand ein, das ist m. M. n. auch der Vorteil von Markdown):

• wenn du nichts markiert hast, bekommst die Backticks
• wenn du eine Zeile markiert hast, bekommst du ebenfalls die Backticks drumherum gepackt
• wenn du mehrere Zeilen ausgewählt hast, macht er dir die Tilden drumherum

So sollte es sein. Ich bin allerdings am überlegen, ob ich für den Fall das nichts markiert wurde und dann der Button gedrückt wird, einen Test einbauen soll. Wenn der Cursor am Anfang der Zeile ist und davor eine Leerzeile ist, könnte man statt Backticks Tilden für einen Codeblock einfügen.

Beste Grüße,

Orlok

[JürgenB]

Hallo Orlok,

Wenn der Cursor am Anfang der Zeile ist und davor eine Leerzeile ist, könnte man statt Backticks Tilden für einen Codeblock einfügen.

sollte. Oder wie kann ich einen Codeblock auszeichnen, wenn da (noch) nichts zu markieren ist?

Gruß
Jürgen

[Julius]

Hallo Orlok,

• wenn du nichts markiert hast, bekommst die Backticks
• wenn du eine Zeile markiert hast, bekommst du ebenfalls die Backticks drumherum gepackt
• wenn du mehrere Zeilen ausgewählt hast, macht er dir die Tilden drumherum

So sollte es sein.

Das dachte ich mir, finde ich gut :-)

Ich bin allerdings am überlegen, ob ich für den Fall das nichts markiert wurde und dann der Button gedrückt wird, einen Test einbauen soll.

Einen Hinweis- oder Beispieltext?

Wenn der Cursor am Anfang der Zeile ist und davor eine Leerzeile ist, könnte man statt Backticks Tilden für einen Codeblock einfügen.

Das klingt gut. Aber dieses Verhalten müsste man den Nutzern noch irgendwie (Tooltip?) erklären, es ist zwar praktisch, aber nicht für jedermann intuitiv.

Gruß
Julius

[Tabellenkalk]

Hallo,

Ich bin allerdings am überlegen, ob ich für den Fall das nichts markiert wurde und dann der Button gedrückt wird, einen Test einbauen soll.

Einen Hinweis- oder Beispieltext?

Z.B.: „Bitte genauer lesen!“

Gruß
Kalk

[Julius]

Hallo Tabellenkalk,

Ich bin allerdings am überlegen, ob ich für den Fall das nichts markiert wurde und dann der Button gedrückt wird, einen Test einbauen soll.

Einen Hinweis- oder Beispieltext?

Z.B.: „Bitte genauer lesen!“

Ja, genau diesen Hinweis hätte ich gerne immer vor dem Schreiben jedes einzelnen Buchstaben :-)

Gruß
Julius

[Matthias Scharwies]

Servus!

@all @Matthias Apsel

Ist Euch eigentlich schon mal aufgefallen, dass sich spätestens nach dem 5. Posting jeder Thread um Änderungen an der Forums-UI oder den Markdown-Regeln dreht?

Ist das so gewollt, um das Forum am Leben zu erhalten oder wollt ihr uns einch nur so verwirren?

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Matthias,

… oder wollt ihr uns einch nur so verwirren?

also ich nicht. Mir war nur nach dem Posting von Orlok aufgefallen, dass der Quelltextbutton als Default einen Einzeiler vorsieht. Mir gefiel Mehrzeiler (mit ~~~) als Default besser. Die Idee von Orlok, die Entscheidung kontextabhängig zu machen, finde ich auch gut.

Übrigens, könnte man solche Drifts nicht einfach in einen neuen Thread schieben?

Gruß
Jürgen

[JürgenB]

Hallo Linuchs,

und wie reagieren die Browser, die scope nicht unterstützen?

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

und wie reagieren die Browser, die scope nicht unterstützen?

Die meisten wenden das CSS auf das gesamte Dokument an und überschreiben ggf. vorherige Deklarationen.

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

gibt es auch Browser, die das CSS im Body ignorieren?

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

gibt es auch Browser, die das CSS im Body ignorieren?

keine Ahnung. Insgesamt ist aber davon abzuraten, sich auf undokumentiertes Verhalten zu verlassen.

Bis demnächst
Matthias

[Linuchs]

Hallo Jürgen,

und wie reagieren die Browser, die scope nicht unterstützen?

Die wenden die style-Angaben auf den Container mit id="basis" an. Davon sollte es nur einen geben im Dokument.

Linuchs