Skip to content

Instantly share code, notes, and snippets.

<link rel="preload" href="kitten.png" as="image" media="(max-width: 767px)" />
<link rel="preload" href="cat.png" as="image" media="(min-width: 768px)" />
<head>
<link rel="preload" href="hero.avif" as="image" type="image/avif" />
</head>
// HTML
<img data-src="lamas.webp" alt="Lamas!" />
// JavaScript
const images = document.querySelectorAll( 'img[data-src]');
const options = { rootMargin: 'Opx', threshold: 0.5 };
const observer = new IntersectionObserver((entries, observer) => {
entries. forEach (entry => {
<picture>
<source
media="(max-width: 480px)"
srcset="cute-dog__480x480__mobile.avif, cute-dog__480x480__mobile__scale_2.avif 2x"/>
<source
media="(max-width: 767px)"
srcset="cute-dog__767x767__mobile.avif, cute-dog__767x767_mobile__scale_2.avif 2x"/>
<source
media="(max-width: 900px)"
srcset="cute-dog__900x506__desktop.avif, cute-dog__900x506__desktop__scale_2.avif 2x"/>
<img
src="lama.png"
alt="A description of the image."
srcset="small-image.png 300w, medium-image.png 600w, large-image.png 1200w"
>
<input id="lowercaseFoodWithB" type="text"
required
minlength="4"
maxlength="20"
pattern="b[a-z]" />
<input name="pin" type="password"
required
pattern="\d{4,4}" />
<input type="number" min="0" step="5" max="100">
<style>
input:invalid:out-of-range:before {
content: "This is not 'Nam, this is bowling. There are rules!"
}
</style>
<input id="email" required />
<style>
input:invalid {
border: 2px dashed red;
input:valid {
border: 2px solid black;
}
</ style>
// Styling des Dialog-Elements
dialog {}
dialog[open] {}
// Styling des halbtransparenten Sperr-Hintergrunds
dialog:backdrop {}
// Element selektieren
const dialog = document. querySelector( 'dialog');
// Dialog als Modal zeigen (Hintergrund sperren)
dialog. showModal();
// Dialog als nicht-Modal zeigen (Hintergrund bleibt erreichbar)
dialog. show();
// Dialog schließen