Faire varier le format d’une date avec CSS et les media-queries

Nous allons voir comment dans un blog « responsive » on peut afficher un format de date différent, comme par exemple avoir tantôt le mois en toutes lettres (ex : Septembre), tantôt l’abréviation du mois (ex : SEP), le tout en gardant une syntaxe HTML propre.

Rappel sur le design « responsive » (ou « réactif ») : il s’agit d’utiliser les media-queries pour s’adapter à la taille du device et/ou du navigateur de manière intelligente et ergonomique. Pour plus d’infos, voir cet article sur les media-queries par Alsacréations.

Voir l’exemple

Nouveau site, nouveaux challenges

Cet été nous préparons la refonte du site de soluo.fr. En fait, plus qu’une refonte, nous refaisons tout !

Notre nouveau site sera « responsive » (ou réactif), comme le site de Secri Gestion dont nous avons parlé dans des articles antérieurs.

Pour le nouveau site, nous avons choisi de séparer le blog. Il reprendra la charte graphique du site mais aura une structure et un design différent.

Tout blog qui se respecte contient des articles, auxquels certaines données « meta » sont associées. En général il y a au moins une date de publication et un auteur. L’article peut aussi être catégorisé et taggué par exemple.

Concentrons nous sur la date de publication d’un article. Notre blog sera lui aussi réactif, c’est à dire que son interface va s’adapter à la taille du navigateur et de l’appareil utilisé pour le visualiser.

Dans mon design « grand format », c’est à dire pour écrans d’ordinateurs classiques, j’ai choisi de montrer la date comme sur un petit bloc-calendrier. Je veux que l’abréviation du mois en 3 lettres s’affiche en haut, au dessous duquel on verra le jour en gros, puis l’année en plus petit, comme sur cette image :

date d'un article en format bloc-calendrier

Facile, sauf que dans le design pour petits formats (pour les smartphones par exemple) je veux montrer la date d’une autre manière. Le tout s’afficherait sur une ligne avec jour, mois, année, comme ceci :

date d'un article sur une ligne

Positionner les mêmes éléments de manières différentes ne me fait pas peur. Avec les media-queries, c’est facile. Dans le premier cas on peut se servir des positions absolute / relative, et dans le second cas, on laisse les éléments inline se positionner les uns après les autres naturellement.

Le problème : le format de la date

Je ne suis pas développeuse, mais je me doute que si je demande à mon collègue développeur de me fournir 2 formats de date différents selon que certaines media-queries sont déclenchées ou pas, il va me regarder de travers.

Une solution serait d’avoir la date 2 fois dans le code, dans 2 formats différents. Dans un cas on masque l’un, ou l’autre.

Cette solution ne me satisfait pas car j’aime que mon code reste propre.

J’ai posé la question sur Twitter et on m’a suggeré le pseudo-element :after et la propriété content de CSS.

Même si je n’ai pas tout à fait compris la suggestion car je ne souhaitais pas utiliser de lien, cela m’a donné une bonne piste.

J’ai aussi demandé l’avis de la communauté de Sitepoint sur leur forum, et j’y ai posté ma solution (English)

La solution : utiliser l’attribut TITLE

La solution qui me parait la meilleure est de générer la date dans 2 formats différents, du moins pour le mois, qui est l’élément problématique ici.

La balise contiendra le nom entier du mois, et l’attribut TITLE contiendra l’abréviation en 3 lettres.

Après il suffit d’un peu de CSS avec des media-queries pour afficher l’un ou l’autre.

Voici le code que j’ai écrit assez rapidement. Je ne suis pas contente de la manière dont je cache le mot « juillet », je pense qu’on peut mieux faire. Mais ça marche !

<head>

<style type="text/css">

.dateBox {
	font-family: trebuchet ms, helvetica, arial;}

@media screen and (min-width: 800px) {
.dateBox {
	-moz-box-shadow: 2px 2px 0 #dcdcdc;
	-webkit-box-shadow: 2px 2px 0 #dcdcdc;
	box-shadow: 2px 2px 0 #dcdcdc;

	background: #eee;
	color: #000;
	font-size: 14px;
	overflow: hidden;
	padding: 15px 2px 2px;
	position: relative;
	text-align: center;
	width: 50px; }

.day {
	font-family: georgia, serif;
	font-size: 34px; }

.month {
	color: #eee;
	left: 3px;
	margin-top: -15px;
	position: absolute;
	text-transform: uppercase;
	top: 3px;
	width: 50px; }

.month:after {
	color: #000;
    content: attr(title);
    display: block; }
}

@media screen and (max-width: 800px) { 

.dateBox {
	color: #666;
	font-size: 12px;
	font-style: italic;}

}

</style>
</head>
<body>

<div class="dateBox">
	<span class="day">12</span>
	<span title="JUL" class="month">juillet</span>
	<span class="year">2011</span>
</div>

Pour voir comment ça marche, redimmensionnez la fenêtre de votre navigateur.

Voir l’exemple

N’hésitez pas à me faire part d’améliorations éventuelles, notamment pour la manière de cacher le contenu de la balise « month ».

Note sur la compatibilité

Cet exemple ne fonctionnera que sur les navigateurs modernes, qui comprennent les media-queries. C’est un petit essai que j’ai fait rapidement, sans me soucier de la compatibilité avec mon très cher Internet Explorer (6, 7 et 8). Cependant il est tout à fait possible de faire fonctionner tout ça sur IE en utilisant un outil tel que 320 and up qui inclut des fichiers javascript.

Credits : merci à IconSweets pour l’icône Calendrier.

Commentaires

  1. Salut !

    Très bonne idée, mais comme tu l’as dit, on peut faire encore mieux.
    Si j’imagine faire un site compatible avec un écran d’ordinateur, de tablette et de smartphone, on sera un peu embêtés avec le côté « je n’ai qu’une seule balise title ».

    Je vois plusieurs solutions pour parer cette contrainte, mais la plus cohérente serait d’utiliser les nouveaux attributs du html5, les data-.

    juillet
    content: attr(data-short);

    Et là, tu as un code et une feuille de style encore plus propre ;)

    Ensuite, si tu comptes utiliser du jQuery et que tu veux utiliser ces valeurs, tu te retrouve aussi en mesure de récupérer ces valeurs facilement avec .data(‘short’) et en plus, tu peux te vanter d’utiliser html5 ;)

    Pour aller plus loin, en utilisant cette stratégie, on pourrait même faire :

    @media screen and (min-width: 800px) {
    .month:after {
    content: attr(data-short);
    }
    }

    @media screen and (max-width: 800px) {
    .month:after {
    content: attr(data-long);
    }
    }
    Bref, a ajuster suivant les goûts et les couleurs !

  2. Puisqu’il semble y avoir un petit « strip » au niveau des commentaires, j’entend utiliser
    [span data-short= »JUL » class= »month »]juillet[/span] à la suite de mon deuxième paragraphe, et
    [span data-short= »JUL » data-long= »juillet » class= »month »][/span] avant les deux définition du media query

  3. raphaelle a écrit:

    Merci Bruno !

    C’est vrai que je n’étais pas au point sur les data- mais tu as raison, c’est une solution bien plus propre que d’utiliser l’attribut TITLE !

  4. Vil Coyot a écrit:

    Puisque tu es dans la précision du code, tu pourrais regarder pour ajouter un autre morceau : le pattern date sauce microformat à la place d’une bête balise div :
    Date Time

    http://microformats.org/wiki/datetime-design-pattern

  5. raphaelle a écrit:

    Tout à fait. C’est dans mes projets en effet. Merci :-)

Exprimez vous!

*