HTML5-Tutorium: JavaScript: Hello World 06

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 3 (wichtige Quellen vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 3 (gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6

Musterlösung
v01: index.html (HTML validate)
Git-Repository

Anwendungsfälle (Use Cases)

Gegenüber dem dritten, vierten und fünften Teil des Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

In diesem Teil des Tutoriums geht es darum, den CSS-Code „DRY zu machen“.

Erstellen eines neuen Projekts

Erstellen Sie ein neues Projekt hello_world_06 als Fork von hello_world_05.

CSS-Erweiterungen

CSS bietet heute dieselbe Funktionalität wie Transpiler (SASS, Less etc.), die früher verwendet wurden, um fehlende Funktionalität in CSS zu integrieren. Ich werde in diesem Semester CSS an Stelle von SCSS einsetzen, so wie es von vite empfohlen wird:

Because Vite targets modern browsers only, it is recommended to use native CSS variables with PostCSS plugins that implement CSSWG drafts (e.g. postcss-nesting) and author plain, future-standards-compliant CSS. (https://vite.dev/guide/features)

Eine ganz wesentliche Erweiterung ist die Möglichkeit Konstanten zu definieren. Auch die Möglichkeit, Werte zu berechnen, gibt es in der Zwischenzeit (SCSS: math, CSS: calc). Es ist jetzt auch möglich CSS-Elemente zu verschachteln. Das heißt, die Bedeutung von SCSS, Less etc. schwindet.

Allerdings werden Konstanten vom SCSS-Präprozessor auf dem Server bei Build-Prozess durch ihre Werte ersetzt. In CSS muss dies defaultmäßig der Browser übernehmen. Es gibt ein PostCSS-Plugin postcss-var-replace, das diese Ersetzungen ebenfalls vornimmt. Dieses kann man in die Vite-Konfiguration integrieren:

npm -i -D postcss-var-replace

// vite.config.js 
import { postcssVarReplace }  from 'postcss-var-replace';

...
export default
{ ...
  plugins:
  ...
  css:
  { postcss:
    { plugins: 
      [ postcssVarReplace(),
      ],
    },
  },
  resolve:
  { alias:
    { '@':          fileURLToPath(new URL('./src',                  import.meta.url)),
      'config.css': fileURLToPath(new URL('./src/css/_config.css',  import.meta.url)),
      '/css':       fileURLToPath(new URL('./src/css',              import.meta.url)),
      '/js':        fileURLToPath(new URL('./src/js',               import.meta.url)),
    }
  },
}

CSS-Konstanten

Eine ganz wesentliche Erweiterung ist die Möglichkeit Konstanten zu definieren, da man damit CSS-Code DRY formulieren kann.

Wenn eine Konstante definiert wurde, kann man im übrigen CSS-Code mittels var darauf zugreifen (und nicht etwa mittels const, :-( )

:root 
{ --font-family-serif: "Times New Roman", Times, serif; }

p
{ font-family: var(--font-family-serif); }

label
{ font-family: var(--font-family-serif); }

Auch die Möglichkeit, Werte zu berechnen, gibt es in der Zwischenzeit (SCSS: math, CSS: calc). Das heißt, die Bedeutung von SCSS, Less etc. schwindet. In diesem Semester verwende ich nicht mehr SCSS, sondern nur noch CSS.

Fügen Sie "config" als Abkürzung für "./src/css/_config.css" in die Datei vite.config.js ein.

...
  resolve:
  { alias:
    { ...
      'config': fileURLToPath(new URL('./src/css/_config.css', import.meta.url)),
      ...
    }
  }
...

In der Datei _config.css werden Konstanten definiert, die von allen anderen CSS-Dateien verwendet werden können und sollen.

Das heißt, das DRY-Prinzip „Konstanten gehören nicht in den Code, sondern in Konfigurationsdateien“ wird ab sofort beachtet.

Wenn man künftig am Layout einen Zeichensatz, eine Farbe, einen Hintergrund oder Ähnliches ändern will, reicht es, die entsprechenden Konstanten anzupassen und schon erzeugt Vite automatisch aktualisiere CSS-Dateien.

Durch den CSS-Import-Befehl ist es möglich, CSS-Dateien zu modularisieren. Der Underscore _ am Beginn des Dateinamens deutet an, dass diese CSS-Datei nur von anderen CSS-Dateien aber nicht von HTML- oder JavaScript-Dateien importiert werden sollte.

src/css/_config.css

:root
{ --background-color:  #C5EFFC;

  --font-family-sans:  Verdana, Helvetica, sans-serif;
  --font-family-serif: "Times New Roman", Times, serif;
  
  --font-size-base:    3vw;
  --font-size-factor:  1.25;  /* cmp. https://type-scale.com/ */
   
  --font-size-h5:      calc(pow(var(--font-size-factor),1)*var(--font-size-base));
  --font-size-h4:      calc(pow(var(--font-size-factor),2)*var(--font-size-base));
  --font-size-h3:      calc(pow(var(--font-size-factor),3)*var(--font-size-base));
  --font-size-h2:      calc(pow(var(--font-size-factor),4)*var(--font-size-base));
  --font-size-h1:      calc(pow(var(--font-size-factor),5)*var(--font-size-base));
  
  --font-size-p:       calc(pow(var(--font-size-factor),0)*var(--font-size-base));
  --font-size-p-large: calc(pow(var(--font-size-factor),2)*var(--font-size-base));
  
  --font-size-small:   calc(pow(var(--font-size-factor),-1)*var(--font-size-base));
}

In dieser CSS-Datei werden folgende modernen CSS-Konstrukte verwendet:

• Definition von Konstanten (die teilweise per Berechnung ermittelt werden)
• Mathematische Berechnungen: calc

Konstanten starten in CSS mit zwei Minuszeichen. Sobald eine Konstante definiert wurde, kann sie in allen weiteren CSS-Konstrukten verwendet werden. In CSS stehen einen Operatoren zur Verfügung wie +, -, * und /, um Maße zu berechnen. Es gibt weitere Operatoren zum Vergleichen von Zahlen und Maßen sowie zur Berechnung von Strings und booleschen Werten: https://sass-lang.com/documentation/operators.

Die Datei _config.css kann nun mit Hilfe des CSS-Befehls @import 'config.css'; (ohne Underscore, wegen des zuvor eingeführten Vite-Aliases) in die anderen beiden CSS-Dateien eingefügt werden.

PostCSS

Der Inhalt der Datei _config.css wird defaultmäßig an den Browser ausgeliefert. Es gibt allerdings das NPM-Modul postcss das mittels zahlreicher Plugins CSS-Anweisungen transformieren kann. Dieses Plugin wird von Vite unterstützt.

Laden sie das Pluging postcss-var-replace:

npm i -D postcss-var-replace

Anschließend aktivieren Sie es in vite.config.js

import { postcssVarReplace }  from 'postcss-var-replace';

...

export default
{ ...
  css:
  { postcss:
    { plugins: 
      [ postcssVarReplace(),
      ],
    },
  },
  ...
}

Der Import-Befehl hat ab sofort erst dann einen Effekt, wenn in den anderen Dateien auf diese Konstanten zugegriffen wird. Aber er schadet auch nicht, wenn auf keine der dort definierten Konstanten zugegriffen wird. Der Import-Befehl selbst taucht ebenso wenig in den generierten CSS-Dateien auf, wie die Konstantendefinitionen. Der PostCSS-Transpiler ersetzt Konstanten in CSS-Definitionen durch ihren jeweiligen Wert.

Sie können nun beispielsweise in der Datei head.css die Konstante --background-color verwenden. In dem daraus durch den Build-Befehl npm run build erzeugten CSS-Style-Element steht weiterhin der Farbwert #C5EFFC;

src/css/head.scss

@import 'config.css';

body
{ background-color: var(--background-color); }
 
.hidden
{ display: none; }
</syntaxhighlighte>

Die Datei <code>body.css</code> ist deutlich umfangreicher. Daher wird der zugehörige CSS-Code
ja auch erst dynamisch gemeinsam mit der Datei <code>web/js/main.js</code> geladen. 

'''<code>src/css/body.css</code>'''
<syntaxhighlight lang="CSS">
@import 'config.css';

html
{ height:  100%;
  width:   100%;
  display: table;
}

body
{ display:          table-cell;
  text-align:       center;
  vertical-align:   middle;
  font-size:        var(--font-size-base)!important;
  font-family:      var(--font-family-sans);
}

h1
{ padding:   0;
  margin:    0;
  font-size: var(--font-size-h1);
}

p, label
{ font-family: var(--font-family-serif);
  font-size:   var(--font-size-p)!important;
}

label, input
{ width:      10em;
  font-size:  100%;
  display:    inline-block;
  box-sizing: border-box;
  margin:     0.5ex;
}

label
{ text-align: right;
}

#section_form
{ text-align:   center;
  margin-left:  auto;
  margin-right: auto;

  h1
  { margin-bottom: 0.5ex; }
}

#section_hello
{ p
  { font-size: var(--font-size-p-large) important; }
}

In dieser CSS-Datei werden folgende modernen CSS-Befehle verwendet:

• Import-Befehl: @import 'config';
• Konstanten: --font-family-sans, --font-size-base etc. (Es sind noch viele weitere konstante Werte in body.css enthalten, für die in _config.css Konstanten definiert werden sollten)
• Verschachtelte Anweisungen: z. B. h1 innerhalb von #section_form

Die verschachtelten Anweisungen strukturieren den CSS-Code deutlich besser. Es ist nicht mehr notwendig, einen Selektor wie #section_form mehrfach zu verwenden.

Sehen Sie sich den Unterschied an. In der Datei src/css/body.css der Musterlösungen vom dritten Teil des Tutoriums hatte ich Folgendes geschrieben:

#section_form
{ text-align:   center;
  margin-left:  auto;
  margin-right: auto;
}

#section_form > h1
{ margin-bottom: 0.5ex; }

Die modernen CSS-Variante ist deutlich strukturierter und prägnanter.

#section_form
{ text-align:   center;
  margin-left:  auto;
  margin-right: auto;

  h1
  { margin-bottom: 0.5ex; }
}

Insbesondere bei großen CSS-Dateien erweist sich diese kompaktere Schreibweise als vorteilhaft.

Fortsetzung des Tutoriums

Sie sollten nun Teil 1 des Vue-Tutoriums bearbeiten. In diesem Teil des Tutoriums wird die oben erstelle Variante in das Vue-Framework transferiert.

Quellen

5. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)