nicht angemeldet
Spickzettel zum schnellen Nachschlagen
Matthias Scharwies
Spickzettel zum schnellen Nachschlagen
Matthias Scharwies
Bei der Überarbeitung unseres Flexbox-Tutorials kam die Sprache auf Spickzettel, die die wichtigsten Eigenschaften und Werte übersichtlich auf einer Seite zusammenfassen. Sie ersetzen keine Dokumentation, helfen aber dabei, häufig benötigte Informationen schnell wiederzufinden.
Denn Hand aufs Herz: Kaum jemand merkt sich auf Anhieb, ob es nun space-around, space-evenly oder doch space-between war.
Wir hatten schon mehrfach überlegt, solche Spickzettel anzubieten.[1]
Die Frage dabei war immer, welches Zielpublikum wir denn ansprechen wollen.
Hier ist die Antwort einfach: Das haben wir für uns getan!
Entweder ausgedruckt und laminiert als Mousepad, griffbereit in einem Ordner oder gar immer offen in den zahllosen geöffneten Browser-Tabs.
Ich trau's mich gar nicht zuzugeben: Meine ersten Cheat Sheets hatte ich mit Word erstellt und dann als PDF exportiert.
Diesmal wollten wir nicht jedes Textfeld und jedes Code-Snippet immer wieder von Hand neu formatieren. Deshalb haben wir die vorhandenen Spickzettel in HTML erstellt und mit CSS zentral formatiert. Code-Abschnitte werden mithilfe von Prism.js automatisch mit Syntaxhervorhebung dargestellt. Dadurch lassen sie sich schneller erfassen.
Dabei ging es immer wieder um die Frage, was und vor allem wie viel davon auf die zwei DIN A4-Seiten kommen soll.[2] Spickzettel sind keine Referenz, sondern eben das Wichtigste zusammengefasst!
Alles was wir gemeinsam erarbeitet haben, findet sich in unserem neuen Tutorial:
→ Spickzettel - PDFs mit HTML erstellen
Jede HTML-Datei kann im Browser geöffnet und auf einem Monitor angeschaut werden. Die Spickzettel lassen sich aber ebenso gut ausdrucken oder als PDF speichern und später – auch ohne Internetverbindung – nutzen.
Beim Drucken – insbesondere beim Speichern als PDF – zeigte sich jedoch, dass die Browser die CSS-Eigenschaften für das Drucklayout nicht durchgängig gleich interpretieren. Das gewünschte Ergebnis, das Cheat Sheet auf genau zwei Seiten auszugeben, erreichte in unseren Tests nur Google Chrome.
Deshalb haben wir diesen Arbeitsschritt für euch übernommen und stellen Euch die fertigen PDFs zur Verfügung:
- HTML & CSS (PDF, 141KB)
- Formulare in HTML (PDF, 116KB)
- CSS (PDF, 127KB)
- Flexbox (PDF, 114KB)
- Grid Layout (PDF, 251KB)
- Größenangaben in CSS (in Arbeit)
- Container Queries (in Arbeit)
- SVG (PDF, 138KB)
SELF-Forum: Cheat Sheet für HTML? vom 27.05.2024 ↩︎
SELF-Forum: Spickzettel HTML & CSS vom 12.05.2025
Ausufernde Grundlagendiskussion, wie man die spitzen Klammern von HTML-Tags denn besser nennen könne.
Wir blieben bei der ursprünglichen Fassung! ↩︎
-
Beim Drucken – insbesondere beim Speichern als PDF – zeigte sich jedoch, dass die Browser die CSS-Eigenschaften für das Drucklayout nicht durchgängig gleich interpretieren.
Die Vermutung, beim Ausdrucken (egal ob „richtig“ oder als PDF) käme @media(print) zum Einsatz, scheint also … naiv zu sein?
-
Servus!
Beim Drucken – insbesondere beim Speichern als PDF – zeigte sich jedoch, dass die Browser die CSS-Eigenschaften für das Drucklayout nicht durchgängig gleich interpretieren.
Die Vermutung, beim Ausdrucken (egal ob „richtig“ oder als PDF) käme @media(print) zum Einsatz, scheint also … naiv zu sein?
Im Tutorial wird's erklärt:
@media print { html { print-color-adjust: exact; } :root { --base-font-size: 9pt; --space-2: 0.05rem; --space-4: 0.5rem; --space-6: 0.2rem; } .page { width: 210mm; height: 297mm; break-after: always; } .page:last-child { break-after: auto; } }Leider funktionieren die Einstellungen nicht so wie gewünscht (auf Arbeit: Win 10 FF151 macht aus 2 Seiten eben 2 Seiten und einen Absatz; Mac + Chrome erzielt die besten Ergebnisse.)
Herzliche Grüße
Matthias Scharwies-
Also doch
@media print— eigentlich.Ich find’s lustig: auf Bildschirmen sind Längenangaben absoluter Art einigermaßen für die Katz’. Weil das ja „kein Drucker ist“, heißt es da schon mal.
Und nun passen im Druck vielleicht diese Angaben, aber …
BTW: das mit seltsamen „letzten Zeilen auf unerwartet neuer letzter Seite“ kommt mir bekannt vor! Vor etlichen Jahren „durfte“ ich mit (dem damaligen) Word (wahrscheinlich die Version mit eingebautem „Realitätsverlust“) so eine kleine Hauszeitschrift montieren. Da kam es dann auch mal vor, daß kleine Änderungen „mitten in den Seiten“ (also welche, die keine Verschiebung des explizit eingebauten Seitenumbruchs bewirkt haben) aus der zunächst letzten (gut gefüllten) Seite zwei gemacht haben …
-
Servus!
Also doch
@media print— eigentlich.Ich find’s lustig: auf Bildschirmen sind Längenangaben absoluter Art einigermaßen für die Katz’. Weil das ja „kein Drucker ist“, heißt es da schon mal.
Und nun passen im Druck vielleicht diese Angaben, aber …
Bitte lies das Tutorial und schau die Demos an.
Media queries arbeiten so, dass für denscreenrelative Größenangaben verwendet werden, und fürprinteben feste Werte wie 9pt.
Die Festlegungen werden auf das jeweilige Medienmerkmal abgestimmt!BTW: das mit seltsamen „letzten Zeilen auf unerwartet neuer letzter Seite“ kommt mir bekannt vor! Vor etlichen Jahren „durfte“ ich mit (dem damaligen) Word (wahrscheinlich die Version mit eingebautem „Realitätsverlust“) so eine kleine Hauszeitschrift montieren. Da kam es dann auch mal vor, daß kleine Änderungen „mitten in den Seiten“ (also welche, die keine Verschiebung des explizit eingebauten Seitenumbruchs bewirkt haben) aus der zunächst letzten (gut gefüllten) Seite zwei gemacht haben …
Das ist, wie ich im Tutorial geschrieben habe, der Raison d'Être dieser Vorgehensweise.
Umfangreiche DTP-Projekte mit Adobe Indesign oder Scribus; Spickzettel und Flyer eben doch mit HTML und nicht mit Word.Herzliche Grüße
Matthias Scharwies
-
-
-