HTMLcat: 42 native Web-Tricks, die man sich merken sollte
Small, native web tricks worth remembering
HTMLcat sammelt 42 kurze, native Web-Techniken für HTML, CSS und JavaScript – von `:has()` über `inert` bis zur Popover-API. Jede Technik wird mit einem kleinen Beispiel und den wichtigsten Einschränkungen vorgestellt; experimentelle Features sind gekennzeichnet. Die Seite richtet sich an Entwickler, die Browser-Features besser ausschöpfen wollen.
HTML, CSS und JavaScript können mehr, als wir uns erinnern.
- m-s-y
Ich liebe es, wenn ich in ein Autohaus gehe und alles über die verschiedenen Autos lesen kann. Besonders, wenn die Autos gar nicht da sind. Tatsächlich gibt es nicht einmal ein Bild von einem einzigen Auto. Ja, das ist genau mein Ding.
- moontear
Es gibt einige gute Beschreibungen und Hinweise, aber was die Seite wirklich braucht, sind Beispiele. Nur den Code anzusehen hilft mir nicht viel. Die Beschreibungen sind auch meistens so kurz, dass sie genauso gut Tooltips auf der Startseite sein könnten.
Die ganze Prämisse der Seite ist eine Sammlung von "Web-Tricks, die man sich merken sollte", und ich kann nicht nachvollziehen, was Bash (z.B. `du -hd 1 . | sort -hr`) dort zu suchen hat.
- zeroq
Vielleicht liegt es an mir, aber es scheint eine riesige Zeitverschwendung zu sein (oder um es positiver auszudrücken – Potenzial).
Schon das erste Beispiel "Device type in JS".
"Ein grober Zeiger bedeutet nicht 'mobil', und ein feiner Zeiger garantiert nicht 'Desktop'. Frag den Browser nach den Eingabefähigkeiten, anstatt das Gerät anhand des User-Agents zu erraten."
const input = {
finePointer: matchMedia('(any-pointer: fine)').matches,
coarsePointer: matchMedia('(any-pointer: coarse)').matches,
canHover: matchMedia('(any-hover: hover)').matches,
};
Es sagt mir also nicht, wie ich den Gerätetyp identifizieren kann. Es führt nicht einmal den Code aus, damit ich schnell die Ergebnisse zwischen meinem mobilen und Desktop-Gerät vergleichen könnte, um eine Basislinie zu etablieren.
- apples_oranges
Bitte versteckt keine Scrollbalken :)
- OuterVale
Das sind nicht wirklich 'Tricks', sondern eher Erwähnungen verschiedener Funktionen von HTML und CSS. Man entdeckt eine ähnliche Auswahl an Dingen (mit viel mehr direkt verfügbaren Details und vielen Beispielen), wenn man einfach auf MDN herumklickt.