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