HTML und CSS, die Grundpfeiler der modernen Online-Welt, bieten einen riesigen Werkzeugkasten zur Entwicklung von Webanwendungen. Während die meisten Entwickler die grundlegenden Konzepte dieser Technologien beherrschen, gibt es viele weniger bekannte Features, die Web-Projekte auf das nächste Level heben können.
Als IT-Freelancer ist es besonders wichtig, stets auf dem neuesten Stand der Technik zu bleiben und innovative Ansätze zu nutzen, um sich von der Konkurrenz abzuheben. In diesem Blogpost möchte ich einige dieser wenig bekannten Features von HTML und CSS vorstellen.
1. HTML-Tags <detail> und <summary>
Man kennt das gängige UI-Pattern, in dem eine Zusammenfassung aufgeklappt werden kann, um weitere Details und ausführlichere Informationen anzuzeigen. Was früher häufig mit JavaScript und aufwändigem CSS entwickelt wurde, lässt sich bereits mit HTML Bordmitteln relativ simpel umsetzen:
<details>
<summary>Mehr Informationen</summary>
<p>Hier sind die zusätzlichen Details.</p>
</details>2. HTML-Tag <dialog>
HTML bringt bereits eingebaute Unterstützung für ein Modal-Dialogfeld mit, das ohne zusätzliche JavaScript-Bibliotheken verwendet werden kann. Auch im Hinblick auf Accessibility kann und sollte dieser Tag verwendet werden, um einen Dialog anzuzeigen.
<dialog id="myDialog">
<p>Dies ist ein Dialog.</p>
<button onclick="document.getElementById('myDialog').close()">Schließen</button>
</dialog>3. HTML-Tag <template>
Eine Funktion, die man von gängigen Frontend Frameworks wie Angular oder VueJS kennt, sind Templates. Ein Template definiert Inhalte, die man an gewünschter Stelle in den DOM einfügen kann. HTML bringt hierfür bereits Unterstützung mit. Die mit <template> definierten Inhalte werden nicht im Dokument gerendert, und können mit JavaScript kopiert und an gewünschter Stelle verwendet werden.
<template id="myTemplate">
<p>Dies ist eine Vorlage.</p>
</template>4. HTML-Tag <picture>
Mithilfe dieses Tags können Bilder für unterschiedliche Gerätebedingungen (z.B. Bildschirmgrößen) geladen werden. Damit lässt sich verhindern, dass auf Geräten mit kleinen Bildschirmen bspw. extrem hochauflösende Grafiken geladen werden, und andersherum.
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<img src="small.jpg" alt="Beispielbild">
</picture>5. Eingabe von Datum, Uhrzeit und Farbe mit nativen Browser-Widgets
Häufig werden für die Eingabe von Datum, Uhrzeit und Farbe fertige Libraries oder Pakete verwendet. Je nach Kontext ist dies jedoch nicht zwingend notwendig. HTML bringt bereits entsprechende Input-Typen mit:
<input type="date">
<input type="time">
<input type="color">6. CSS Scroll Snap
Eingeführt im Jahr 2016, wird es heute immer mehr verwendet: Das CSS Scroll Snapping. Es wird häufig mit JavaScript umgesetzt, lässt sich aber auch problemlos mit CSS selbst lösen. Es wird verwendet, indem die Eigenschaft scroll-snap-type für ein Containerelement gesetzt wird. Für die Kindelemente wird das scroll-snap-align festgelegt. Wenn das Containerelement gescrollt wird, rastet es an den definierten Kindelementen ein.
.container {
scroll-snap-type: x mandatory;
overflow-x: scroll;
}
.child {
scroll-snap-align: start;
}7. CSS shape-outside für nicht-rechteckigen Textfluss
Normalerweise umfließt ein Text andere Elements rechteckig. Mit shape-outside lässt sich steuern, wie der Text um die Bounding Box eines floating Elements fließen soll:
.element {
float: left;
width: 250px;
height: 250px;
shape-outside: circle(50%);
}8. CSS Containment (contain)
Die contain Anweisung ist eine Möglichkeit zur Leistungsoptimierung. Sie hilft dem Browser, nur Teile der Seite neu zu rendern, wenn sich ein bestimmtes Element ändert. Wendet man contain auf ein Element an, teilt man dem Browser mit, dass dieses Element und seine Inhalte weitestgehend unabhängig vom restlichen Inhalt der Seite sind. Berechnungen für Layout, Stil, Darstellung und Größe werden damit auf einen Teilbaum des DOMs beschränkt.
.element {
contain: strict;
}9. CSS Subgrid
Der gängiste Ansatz für Layouts von Webseiten ist heutzutage das CSS Grid. Davon hat inzwischen jeder Entwickler schon gehört. Doch es gibt seit 2023 auch gute Browserunterstützung für CSS Subgrids. Dieses Feature erweitert die Möglichkeiten des CSS Grid Layouts, indem es es untergeordneten Grid-Elementen ermöglicht, die gleiche Grid-Struktur wie ihr Elternteil zu verwenden. Dies ist besonders nützlich für verschachtelte Layouts.
HTML:
<div class="grid">
<div class="child">
<div class="subchild"></div>
</div>
</div>CSS:
/* Grid mit 9 Spalten und 4 Rows */
.grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(4, minmax(100px, auto));
}
/* Child von Spalte 2 bis 5 und Zeile 2 bis 4 */
.child {
grid-column: 2 / 5;
grid-row: 2 / 4;
// Element ist selbst ein Grid, aber die Spalten sind ein Subgrid
display: grid;
grid-template-columns: subgrid;
grid-template-rows: repeat(3, 80px);
}
/* Subitem kann durch Subgrid des Elternelements das ursprüngliche Grid nutzen */
.subchild {
grid-column: 3 / 6;
grid-row: 1 / 3;
}10. CSS :focus-within Pseudo-Klasse
Die :focus-within Pseudo-Klasse matcht ein Element, wenn eines seiner Kind-Elemente den Fokus erhält. Dies ist besonders nützlich für Formulare oder interaktive Komponenten.
.container:focus-within {
background-color: lightblue;
}Zusammenfassung
Diese weniger bekannten Features von HTML und CSS sind nur ein Teil der Möglichkeiten, die HTML und CSS bieten. Sie wollen eine Webanwendung entwickeln, die moderne Technologien wie diese einsetzt? Wir von Himmelmann Technology Consulting unterstützen Sie gerne dabei. Nehmen Sie gerne noch heute Kontakt mit uns auf!
Antworten