Elastische Kalender-Formatierung mit CSS

Dieser Beitrag wurde gemeinsam von Chris Coyier und Tim Wright von CSSKarma verfasst.

Ein traditioneller Kalender ist ein Raster aus nummerierten Kästchen auf einer Seite. Als Webdesigner greifen Sie vielleicht direkt zu einer Tabelle, und ich würde Sie dafür nicht tadeln. Tabellen können jedoch manchmal schwierig zu formen sein. Der CSS-Purist in mir wird wütend, wenn ich die Breite einer Tabelle (oder einer Zelle) festlege und sie beschließt, dass sie es besser weiß und sich nach Belieben vergrößert oder verkleinert.

Sie können die Kalenderformatierung mit reinem CSS angehen, und ich finde, das ist semantisch genauso sinnvoll wie eine Tabelle. Was ist ein Kalender, wenn nicht eine geordnete Liste von Tagen? Mit CSS können wir sogar einige coole Dinge tun, wie z. B. die gesamte Größenanpassung mit ems vornehmen, sodass unser Kalenderlayout *elastisch* ist. Das heißt, es wächst in Breite und Höhe, wenn die Textgröße in Browsern geändert wird, und erhöht gleichzeitig die Zugänglichkeit erheblich.

Werfen wir einen Blick darauf, ja?

Demo ansehen Beispiel herunterladen

 

Drei geordnete Listen

Semantisch betrachtet ist ein Monatskalender nicht eine einzige geordnete Liste, sondern drei. Offensichtlich sind alle Tage des Monats eine geordnete Liste. Aber Monate beginnen nicht immer am Sonntag und enden am Samstag, daher gibt es diese "Füll"-Tage am Anfang und Ende des Rasters, die als eigene Listen mehr Sinn ergeben. Schauen Sie mal

<ol class="calendar" start="6">

	<li id="lastmonth">
		<ol start="29">
			<li>29</li>
			<li>30</li>
		</ol>
	</li>
	
	<li id="thismonth">
		<ol>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li>18</li>
			<li>19</li>
			<li>20</li>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li>28</li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
		</ol>
	</li>
	
	<li id="nextmonth">
		<ol>
			<li>1</li>
			<li>2</li>
		</ol>
	</li>
	
</ol>

Und das komplett gestylte CSS

/*
 * CSS Calendar
 * Tim Wright
 * Chris Coyier
 -----------------------------*/

*		{margin:0;padding:0;}
body		{font:1em/1.4 Verdana, Arial, Helvetica, sans-serif; 
			background: url(images/bg.jpg) top center no-repeat #545454;}
body *		{display:inline;}
ol.calendar    {width:52em;margin:0 auto;display:block; min-height: 200px;
			background: url(images/tl.png) top left no-repeat; padding: 12px 0 0 20px;}
li		{list-style:none;}
p.link		{text-align:center;display: block;}
h1		{display: block; width: 200px;height:76px;
			background:url(images/july.png);text-indent:-9999px; margin: 15px auto; }

/*
 * Day styles
 -------------------------*/
li li		{width:6em;height:6em;float:left;margin:.2em; padding:.2em;overflow:auto;
			background: url(images/day-bg.png) bottom right no-repeat; }

/*
 * Day content (UL/OL & P)
 -------------------------*/
li li p	 {font-size:.7em;display:block;}
li li ol	 {width:auto;}
li li ul li,
li li ol li     {font-size:.7em;display:block;height:auto;width:auto; background: none;
			margin:0;padding:.2em 0;float:none;}

/*
 * Holiday class
 -------------------------*/
li li.holiday    {  }

/*
 * Inactive months
 -------------------------*/
li#lastmonth li,
li#nextmonth li    { background: url(images/day-bg-inactive.png);}

Ein paar wichtige Dinge sind hier zu beachten.

Geordnete Listen generieren ihre eigene Nummerierung, sodass wir das technisch ausnutzen und automatisch den Kalender nummerieren könnten. Die Positionierung wird auf diese Weise etwas knifflig, und Sie müssen ohnehin etwas Inhalt in jedem Listenelement haben (mindestens ein  ), damit es in allen Browsern korrekt gerendert wird. Daher ist es am besten, die Listenformatierung auf none zu setzen und die Tageszahlen direkt in die Listenelemente einzufügen. Aus diesem Grund erhalten wir bei ausgeschaltetem CSS dies

1. 1
2. 2
3. 3
…
usw.

Kein Weltuntergang, aber da wir wollen, dass unser Kalender auch ohne CSS so gut wie möglich ist, sollten Sie vielleicht in Betracht ziehen, stattdessen einfach ungeordnete Listen zu verwenden, damit Sie Aufzählungspunkte erhalten.

Beachten Sie auch das „start“-Attribut im <ol>-Element. Dies ermöglicht es Ihrer Liste, buchstäblich mit einer anderen Zahl als „1“ zu beginnen. Dieses Element wurde kürzlich als veraltet eingestuft. Der Grund dafür ist, dass Listen nicht immer dezimalbasiert sind, sie könnten alphabetisch oder römisch oder was auch immer geordnete Listen sein können. Es gibt jedoch keine CSS-Alternative dafür, daher bleibt es ein veraltetes Element. (Hinweis: Wenn Sie dieses start-Attribut aus Validierungsgründen aus Ihrem Code entfernen möchten, hat Piotr Petrus eine Möglichkeit, es per Javascript anzuwenden.)

 

Browserübergreifende Eigenheiten

Vielleicht noch interessanter sind die browserübergreifenden Eigenheiten, auf die wir bei diesem Markup gestoßen sind. Wir zielen auf ein gerades Raster ab, daher verwenden wir geflottete Blöcke. Listen sind aber standardmäßig Block-Elemente, also müssten technisch gesehen alle Blöcke im selben Raster direkt übereinander liegen, damit sie richtig aussehen. Als wir dies erstellten, bekamen alle Browser es richtig hin, außer (interessanterweise) Firefox 2. Firefox 3 bekam es jedoch richtig hin.

Tim zwang Firefox 2 zur Unterwerfung, indem er alle Elemente auf der Seite auf inline setzte

body *              {display:inline;}

Dann setzte er die Elemente nach Bedarf wieder auf block zurück.

Eine interessante Randbemerkung zur Anzeige von inline für alle Elemente innerhalb des Körpers... Der Google Analytics-Code befindet sich im Körper in einem <script>-Tag (das standardmäßig auf display:none gesetzt ist), und wenn inline für <script> gesetzt wird, werden Ihre eingebetteten JavaScripts angezeigt. Dies ist tatsächlich eine nette Ergänzung in Firefox, besonders wenn man ein Tutorial schreibt und seine CSS- oder JavaScript-Codes zeigen möchte. Sie können tatsächlich den eingebetteten CSS/JS-Code anzeigen, der die Seite zum Laufen bringt, sehr cool.

In einem solchen Fall (wenn JS irgendwo im Body eingebettet ist) möchten Sie vielleicht Ihren Kalender in einen <div> einpacken und div *{display:inline;} verwenden.

Eine weitere seltsame Eigenheit, die wir gefunden haben, war, dass die Kombination von display:inline und float:left den Zähler für jedes geordnete Listenelement auf Null zurücksetzte (warum immer noch nicht ganz klar – und das nur in FF3 getestet), sodass Sie am Ende eine lange Liste von Nullen hatten. Das war seltsam, aber da wir die Listenformatierung herausgestrichen haben, war es kein großes Problem.

Und natürlich wäre keine Webseite ohne eine IE-Eigenheit vollständig. In IE 6&7 drückt der Rand für eine OL und eine UL innerhalb jedes Tages den Text leicht zusammen, keine große Sache, aber etwas, dessen man sich bewusst sein sollte.

 

Abschließende Gedanken

Wir plädieren nicht dafür, Ihre Tabellen-basierten Kalender zugunsten einer reinen CSS-Lösung wegzuwerfen. Wir zeigen nur, dass es möglich ist und dass es sogar einige spezifische Vorteile hat, wenn Sie sich dafür entscheiden. Für eine alternative Perspektive lesen Sie Robs neuesten Artikel über CSS-Kalender-Formatierung. Insgesamt hat dieser Kalender etwas länger gedauert, als wir dachten, aber er ist ziemlich gut geworden und ist eine großartige Möglichkeit zu zeigen, dass man mit dem richtigen CSS und etwas semantischem Markup alles so aussehen lassen kann, wie man will.

Unser Beispiel verwendet Hintergrundbilder für die Tage. Aufgrund der elastischen Natur des Designs müssen diese Hintergrundbilder deutlich größer sein als die Kästchen. Viele der neueren Browser bieten „Zoomen“, was dies unnötig macht, aber um alle zu unterstützen, ist dies die beste Vorgehensweise.

Demo & Downloads