Lass den Browser mal machen

2022-11-19

Es ist mal wieder Zeit für ein neues Blog Design. Auch dieses mal habe ich zu erst das CSS gebaut und dann die Hugo Templates komplett neu geschrieben. Beim CSS Design setze ich auf den Gedanken “Lass den Browser mal machen” und verzichte bewußt auf Pixel-Perfekt Anpassungen. Das hat zur Folge, das das CSS zum vorherigen um 60% kleiner ist und keine Fonts nachgeladen werden müssen.

Alles began mit dem kleinsten CSS,

html {
	max-width: 80ch;
	padding: 1em 1em;
	margin: auto;
	line-height: 1.75;
	font-size: 1.25em;
}

gefolgt von dem klassischem Header-Main-Footer Layout,

body {
	min-height: calc(100vh - 3rem);
	display: grid;
	grid-template-rows: min-content 1fr min-content;
	grid-template-areas: "header" "main" "footer";
	gap: 1em;
	overflow-x: hidden;
}

header { grid-area: header; }
main { grid-area: main; }
footer { grid-area: footer; }
header,main,footer { display: block;}

ein paar Font Anweisungen,

:root {
	--font-size-tiny: clamp(0.6rem, 0.2vw + 0.6rem, 1rem);
	--font-size-sm: clamp(0.75rem, 0.2vw + 0.75rem, 1rem);
	--font-size-base: clamp(1rem, 0.25vw + 1rem, 1.5rem);
}

html {
	font-family: ideal sans ssm a,ideal sans ssm b,system-ui,sans-serif;
	font-size: var(--font-size-base);
	line-height: 1.55;
	font-weight: 300;
}

und fertig ist ein einfaches CSS Responsive Design.

Ein dazu passendes Hugo Template ist nicht kompliziert und für den Rest sucht man sich ein gutes Tutorial.

<!-- /layouts/_default/baseof.html -->

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <header>
           {{ partial "header.html" . }} 
        </header>
        <main>
        	{{ block "main" . }} {{ end }}
        </main>
        <footer>
           {{ partial "footer.html" . }} 
        </footer>
    </body>
</html>

Die Grafiken habe ich alle in das webp Format konvertiert, welches dato von allen gängigen Browsern unterstützt wird.

find ./static/images -type f -name "*.jpg" |
while read file; do
	cwebp "$file" -o "${file%.jpg}.webp"
done

Bleibt die Frage “Inline CSS oder per Request”? Ich denke hier gibt es kein Richtig oder Falsch. Beide Varianten haben ihre Vor- und Nachteile. Ich denke wenn das CSS auf ein minimum reduziert ist, und die Gesamtgröße der Seite unter 14kb bleibt, dann ist es völlig in Ordnung das CSS als Inline Payload auszuliefern.

<head>
	{{ $style := resources.Get "/css/base.css" | resources.Minify }}
	{{ $style := $style | resources.Fingerprint "sha256" }}
	<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self'; style-src 'self' '{{ $style.Data.Integrity }}';"/>
	<style>{{ $style.Content | safeCSS }}</style>
</head>

Nach dem kompletten Neubau hat sich meine Blog Größe um 60-70% verringert.

Fazit:

Es ist völlig in Ordnung auf System Fonts zu setzen. Klar jedes System wird es ein wenig anders darstellen. Der Bediener hat sich jedoch für genau das System entschieden und wenn Browser X das anders rendert als Browser Y, dann macht es einer von beiden verkehrt. Wir haben Standards die exakt beschreiben wie ein Element angeordnet werden soll. Man muss nicht für jeden frei drehenden Browser irgendwelche CSS Hacks oder Fallbacks für angestaubte Browser basteln.

Lass den Browser mal machen. In diesem Sinne - viel Spass mit TTY.