Le web à votre mesure
Soluo a été très réactif […] Ils ont su s’adapter à mon site en place en ajoutant le blog qui correspondait à toutes mes attentes.
Dominique Gibert, Editions Diateino
Soluo aide les entreprises et les startups à réaliser leur vrai potentiel. Nous créons des sites internet et des applications web qui sont élégants et surtout pertinents avec votre activité et vos utilisateurs.
Faire varier le format d’une date avec CSS et les media-queries
Par raphaelle, publié dans Technique, Web design, intégration le 11 août 2011
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.
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 :
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 :
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.
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.
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 !
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
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 !
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
Tout à fait. C’est dans mes projets en effet. Merci