Dieser Artikel hat keine Autorenangabe und ist auf einer Website, die noch seltsamer spezifisch ist als diese hier, aber ich schätze den Trick hier. Ein Sieben-Spalten-Grid macht ziemlich schnell ein Kalenderlayout. Man kann die Tage (Grid-Elemente) natürlich darauf fallen lassen, außer den ersten Tag mit grid-column-start in die richtige erste Spalte zu schieben.
Gedanken
- Ich würde eher eine
<ol>als eine<ul>verwenden, einfach weil Tage definitiv geordnet zu sein scheinen. - Die Tage als Liste stören mich nicht wirklich, da dies vielleicht semantisch zum Inhalt des Kalenders passt (vorausgesetzt, er hat etwas).
- Aber... die Titel der Wochentage als erste Elemente in derselben Liste zu sehen, fühlt sich seltsam an. Fast so, als sollte das eine separate Liste oder etwas Ähnliches sein.
- Oder vielleicht sollte alles nur eine
<table>sein, da es sich um tabellarische Daten handelt (es liegt auf der Hand, dass man vielleicht Querverweise machen und alle Donnerstage oder so etwas sehen möchte).
Auf jeden Fall macht die Platzierungs-Trickerei Spaß.
Hier ist ein weiterer (ähnlicher) Ansatz aus unserer Sammlung von CSS Grid Starter-Layouts.
Ich habe noch nicht viel mit CSS Grid gearbeitet und dies schien eine großartige Gelegenheit zu sein, es auszuprobieren. Für meinen Kalender habe ich die Daten in ein Pseudo-Element verschoben, das
counter()verwendet, um sie automatisch zu inkrementieren, damit ich Inhalte innerhalb jedes Datums schreiben kann, ohne zusätzliche Elemente zur Trennung zu haben.Ich habe den Grid-Offset auch zu einer CSS-Variable gemacht, damit derselbe Code leichter für weitere Monate wiederverwendet werden kann, und ein wenig einfaches Vanilla JS verwendet, um dem heutigen Datum eine zusätzliche Klasse hinzuzufügen, damit es besser zur Geltung kommt.
Aber wie gesagt... ich bin neu bei Grid und das größte 'Hoppla', auf das ich immer wieder stoße, ist, wie das Grid auf kleineren Bildschirmen zusammenfällt.
Auf dem Desktop sieht es großartig aus, aber sobald man einen bestimmten Breakpoint erreicht, werden die eigentlichen Kalenderelemente den gefürchteten CSS-Flussproblemen ausgesetzt. Ich habe versucht, das
wrapper-Element anzupassen, um eine maximale Breite anzugeben, aber das scheint das Problem nicht zu lösen. Ist das also eine Grid-Sache, über die mich ein Neuling aufklären könnte, oder übersehe ich einfach etwas?Du hast Recht – das ist eine seltsam spezifische Website. Ich habe auf Twitter gesucht, um zu sehen, ob sich die Person geoutet hat, aber nichts gefunden.
Ich liebe das Internet.
Oh Mann, ich erinnere mich an Kalender mit
<
ol> Elementen im Jahr 2009. https://www.russellheimlich.com/frontend-tips/ordered-list-calendar.htm
Es ist wie der Geist von Weihnachten Vergangenheit.
Ziemlich cooler Trick
Ich hatte ein eInk-Display für einen Raspberry Pi, für das ich ein Projekt gesucht habe, und dieser Link hat mich inspiriert, ein Projekt mit dieser Technik zu bauen: https://glitch.com/edit/#!/7-calendar-cafe
Obwohl das CSS wirklich gut ist, habe ich kürzlich eine Unterhaltung zwischen einigen Barrierefreiheitsexperten gesehen, die empfohlen haben, Tabellen für Kalender zu verwenden. Das Argument war, dass ein Kalender im Wesentlichen tabellarische Daten sind.