HTML5-Tutorium: JavaScript: Hello World 06 - Versionsgeschichte

Kowa am 11. April 2025 um 09:25 Uhr

2025-04-11T09:25:34Z

← Nächstältere Version		Version vom 11. April 2025, 09:25 Uhr
Zeile 53:		Zeile 53:
	{ alias:		{ alias:
	{ ...		{ ...
	'config': fileURLToPath(new URL('./src/css/_config.css', import.meta.url)),		'config.css': fileURLToPath(new URL('./src/css/_config.css', import.meta.url)),
	...		...
	}		}
Zeile 106:		Zeile 106:
	https://sass-lang.com/documentation/operators.<ref>https://sass-lang.com/documentation/operators</ref>		https://sass-lang.com/documentation/operators.<ref>https://sass-lang.com/documentation/operators</ref>

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

Zeile 150:		Zeile 150:
	'''<code>src/css/head.css</code>'''		'''<code>src/css/head.css</code>'''
	<syntaxhighlight lang="CSS">		<syntaxhighlight lang="CSS">
	@import 'config';		@import 'config.css';

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

	html		html
Zeile 220:		Zeile 220:
	In dieser CSS-Datei werden folgende modernen CSS-Befehle verwendet:		In dieser CSS-Datei werden folgende modernen CSS-Befehle verwendet:

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

Kowa am 8. April 2025 um 13:12 Uhr

2025-04-08T13:12:16Z

← Nächstältere Version		Version vom 8. April 2025, 13:12 Uhr
Zeile 106:		Zeile 106:
	https://sass-lang.com/documentation/operators.<ref>https://sass-lang.com/documentation/operators</ref>		https://sass-lang.com/documentation/operators.<ref>https://sass-lang.com/documentation/operators</ref>

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

Kowa: /* PostCSS */

2025-04-08T13:10:03Z

PostCSS

@@ Zeile 114: / Zeile 114: @@
 Beim Einsatz vom SCSS werden Konstanten vom SCSS-Präprozessor auf dem Server während des Build-Prozesses durch ihre Werte ersetzt.
 In CSS muss dies defaultmäßig der Browser übernehmen. Es gibt allerdings ein PostCSS-Plugin [https://www.npmjs.com/package/postcss-var-replace/v/1.0.0 postcss-var-replace], das diese Ersetzungen ebenfalls während des Build-Prozesses vornimmt. Dieses kann man in die Vite-Konfiguration integrieren:
 Laden sie das Pluging <code>postcss-var-replace</code>:

Kowa: /* PostCSS */

2025-04-08T13:08:09Z

PostCSS

@@ Zeile 111: / Zeile 111: @@
 === PostCSS ===
-Der Inhalt der Datei <code>_config.css</code> wird defaultmäßig an den Browser ausgeliefert.
+Der Inhalt der Datei <code>_config.css</code> wird defaultmäßig an den Browser ausgeliefert, obwohl sie nur CSS-Konstanten enthält.
-Es gibt allerdings das NPM-Modul <code>postcss</code> das mittels zahlreicher Plugins CSS-Anweisungen transformieren kann. Dieses Plugin wird von Vite unterstützt.
+Beim Einsatz vom SCSS werden Konstanten vom SCSS-Präprozessor auf dem Server während des Build-Prozesses durch ihre Werte ersetzt.
 Laden sie das Pluging <code>postcss-var-replace</code>:

Kowa: /* CSS-Erweiterungen */

2025-04-08T13:03:25Z

CSS-Erweiterungen

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

Kowa am 8. April 2025 um 12:58 Uhr

2025-04-08T12:58:28Z

← Nächstältere Version		Version vom 8. April 2025, 12:58 Uhr
Zeile 207:		Zeile 207:
	text-align: center;		text-align: center;
	vertical-align: middle;		vertical-align: middle;
	font-size: var(--font-size-base)~~!important~~;		font-size: var(--font-size-base);
	font-family: var(--font-family-sans);		font-family: var(--font-family-sans);
	}		}
Zeile 219:		Zeile 219:
	p, label		p, label
	{ font-family: var(--font-family-serif);		{ font-family: var(--font-family-serif);
	font-size: var(--font-size-p)~~!important~~;		font-size: var(--font-size-p);
	}		}

Zeile 245:		Zeile 245:
	#section_hello		#section_hello
	{ p		{ p
	{ font-size: var(--font-size-p-large) important; }		{ font-size: var(--font-size-p-large) !important; }
	}		}
	</syntaxhighlight>		</syntaxhighlight>

Kowa: /* CSS-Konstanten */

2025-04-08T10:04:50Z

CSS-Konstanten

← Nächstältere Version		Version vom 8. April 2025, 10:04 Uhr
Zeile 181:		Zeile 181:
	'''<code>src/css/head.css</code>'''		'''<code>src/css/head.css</code>'''
	<syntaxhighlight lang="CSS">		<syntaxhighlight lang="CSS">
	@import 'config~~.css~~';		@import 'config';

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

	html		html

Kowa: /* PostCSS */

2025-04-08T10:02:03Z

PostCSS

← Nächstältere Version		Version vom 8. April 2025, 10:02 Uhr
Zeile 179:		Zeile 179:
	verwenden. In dem daraus durch den Build-Befehl <code>npm run build</code> erzeugten CSS-Style-Element steht weiterhin der Farbwert <code>#C5EFFC</code>;		verwenden. In dem daraus durch den Build-Befehl <code>npm run build</code> erzeugten CSS-Style-Element steht weiterhin der Farbwert <code>#C5EFFC</code>;

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

Kowa: /* CSS-Erweiterungen */

2025-04-08T09:48:37Z

CSS-Erweiterungen

← Nächstältere Version		Version vom 8. April 2025, 09:48 Uhr
Zeile 29:		Zeile 29:

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	npm -i -D postcss-var-replace		npm i -D postcss-var-replace

	// vite.config.js		// vite.config.js

Kowa am 7. April 2025 um 07:17 Uhr

2025-04-07T07:17:32Z

← Nächstältere Version		Version vom 7. April 2025, 07:17 Uhr
Zeile 2:		Zeile 2:

	'''Musterlösung'''<br/>		'''Musterlösung'''<br/>
	[https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_06/web/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_06%2Fweb%2Findex.html HTML validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_06%2Fweb%2Findex.html Google PageSpeed])<br/>		[https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_06/web/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_06%2Fweb%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_06%2Fweb%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_06%2Fweb%2Findex.html Google PageSpeed])<br/>
	[{{Git-Server}}/kowa/wk_hello_world_06.git Git-Repository]		[{{Git-Server}}/kowa/wk_hello_world_06.git Git-Repository]