Le Blog

Le blog laboratoire de F.L.D. Studio
0

Trois en un

Présentation

Cet article reprend trois post de ce blog pour fournir une solution concrête de codage de boutons de partages sur les principaux réseaux sociaux dans un environnement 'responsive design'.

See the Pen Composant Réseaux Sociaux by Du Marais ( @DjF ) on CodePen .

Le pré-requis de base est de laisser tomber le support de IE8 afin de faciliter l'implantation de cette solution à base de SVG. En effet IE8 ne reconnait pas le format SVG et si on doit le supporter, il faut implenter des solutions de fallback avec des images au format .PNG, ce qui fait plus de travail a éffectuer en intégration (image .png + image .svg, sans parler des tailles d'images). Pour un utilisateur sous IE8 l'image SVG ne sera tout simplement pas affichée, étant un élément de décors, cela n'a pas vraiment d'importance.

Les 3 posts

1. Les regles CSS, les unitées de mesures relatives : em et rem (   à lire ici    )

2. L'utilisation d'un map-sprite de formes SVG ( Le workflow SVG    )

3. Les URL Sharing des réseaux sociaux. (   relire ici   )

Le mix de ses 3 techniques permet de concevoir un code ( presque ) unique permettant à un utilisateur de partager une page sur un des réseaux sociaux proposés, le tout en utilisant le moins de ressources possibles, dans un environnement responsive et pouvant être utilisé avec une faible bande passante.

1. Les regles CSS

  • Une classe container des boutons, parent des autres classes :   .reseau-social
  • Des styles pour les éléments enfants en utilisant des sélecteurs descendant :
  1. Une classe pour styliser le lien : .reseau-social a   (Porte la font-size référante des enfants du liens)
  2. Une classe pour les icones SVG :   . reseau-social svg
  • Des sous-classes enfants, une par réseau social pour la couleur  du lien :   .facebook , . googleplus , .twitter , .linkedin, ...

30 sélecteurs à connaitre :  http://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Les unitées de mesures relatives

Grace aux unitées de mesure en em et en rem , nous allons pouvoir conserver les proportions du design des liens même si on modifie la taille de la police de base, celle precisée sur la balise html   ou la font-size de la classe parent ( la balise ancre a dabs notre exemple ).

La cascade CSS

Pour commencer nous ramenons la taille de la police par défaut ( 16 pixels en général ) sur une base de 10px afin de faciliter les calculs.

    html{ font-size:62.5% ; /* Police par défaut : 16px * 62.5% = 10px */ }

La taille du parent est donnée en  rem  pour se référer à la taille de l'élément root de la page (html). Dans notre exemple : 1.6rem soit 10px * 1.6 = 16px

La taille des éléments enfants est  donnée en  em  et fonctionne en tant que facteur multiplicateur de son parent fixée à 16px dans notre exemple.

Exemple :  une marge externe de 0.5em sera de 8px , valeur que nous trouvons en multipliant 16px par 0.5. 

Ainsi en modifiant la taille du parent  .reseau-social a  on modifie automatiquement et de manière harmonieuse toutes les dimenssions fournies en unité em  (icone,texte,padding du lien)

Le media query 

Pour se plier aux contrainte d'un design fluide on reprend ici le concept du ' flow naturel '. Il s'agit de concevoir le CSS en penssant au flux naturel du positionnement des balises et de ne coder avec les médias queries que les changements. Au contraire de l'approche 'Mobile First' qui fait commencer l'écriture du code pour les plus petit écrans pour aller vers les plus grands et qui demande parfois à écraser les rêgles que l'on à conçue soi même.

Lorsque la taille de la fenêtre atteint moins de 640px , les textes des liens sont cachés, la marge externe diminue et les icones sont affichées en plus grand, au centre de leur division.  Editer le code dans CodePen et réduire la taille de la fenêtre pour voir l'effet.

Les tooltips

Entièrement réalisé en CSS3 ils proviennent de  https://github.com/catc  , cette solution sans JavaScript permet de réaliser facilement un puissant système de tooltip personalisables. (6,5Ko minifié)

La première étant certainement de fixer d'une police de caractère pour les Tooltips. On réalise cela sur la classe [data-hint]:after

    [data-hint]:after { font-family:Helvetica Neue,Helvetica,Arial,sans-serif;

2. Utilisation d'icones au format SVG

Une image vectoriel permet de s'affranchir du pixel, une seule image suffit pour toutes les dimenssions et toutes les résolution (retina compris).  De plus, étant stylisable en CSS il est possible de modifier les couleurs de fond, des formes ou des lignes sans avoir recours à des images différentes.

Pour l'utilisation d'images au format vectoriel SVG, nous utiliserons ici la technique de la map-sprite embarquée. Cette méthode permet d'économiser les  requêtes DNS pour charger les images (elles sont embarquées dans la page HTML) et les images contenues dans le sprite sont stylisables (dimenssion et couleurs) via du CSS externe. Par sécurité, au cas ou le CSS n'est pas chargé il est recommandé de conserver les attributs de présentation embarqués dans la description de l'image SVG (balise <path>) Attention toutefois au images remplies de blanc qui doivent s'afficher sur un fond blanc ... elles seront alors invisibles ! Dans ce cas il est préférable de supprimer les attributs de présentation embarqués dans la définition de l'image SVG.

La map-sprite permet ensuite d'utiliser les images qu'elle contient en utilisant juste un identificatif. Les images SVG sont définies à l'aide de la balise <symbol> qui permet de préciser la viewbox de l'image et qui à l'avantage de transformer la taille des images en préservant leur ratio (preserve aspect ratio) par défaut.

La technique de la map-sprite fournie donc une technique de codage très 'propre' des balises HTML et beaucoup de souplesse styliser les images avec du CSS.

La map-sprite de notre composant contient les logos des principaux réseaux sociaux :

  • Facebook
  • Google+
  • Twitter
  • Linkedin
  • Une icone mail pour générer un e-mail à l'aide d'un client de messagerie

Pour concerver une bonne lisibilité de la page HTML , à l'aide de PHP on utilsera une instruction pour embarquer le sprite avant de la délivrer au navigateur :

    file_get_contents('chemin/du/script-avec-le-svg.php');

A Noter :

Cette technique permet d'économiser une requête DNS pour charger la ressource mais elle a néanmoinsl' inconvénient d'alourdir la taille de chaque page. De plus les images ne sont pas mises en cache. La technique du sprite externe serait donc préférable sauf que Internet Explorer (toutes versions, même la IE11) ne peut l'exploiter. Si l'on souhaite utiliser la méthode de la map-sprite externe avec sa mise en cache il faudra utiliser un polyfill en javascript qui propose aussi une solution de fallback pour les navigateurs qui ne reconnaissent pas le format SVG ( IE8 ) :   https://github.com/jonathantneal/svg4everybody

On peut aussi envisager de placer la map-sprite en local storage :  http://osvaldas.info/caching-svg-sprite-in-localstorage  mais la aussi il faudra gérer l'absence de local storage sur le navigateur, ou le fait qu'il n'y a plus de place dedans, voir même que le Javascript est désactivé.

Une autre solution très complette proposée par le Filament group expliquée dans  https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/

http://www.grumpicon.com/  permet de créer dans le CSS une image SVG et PNG sous la forme de background. La documentation détaillée :  https://www.filamentgroup.com/lab/grumpicon-workflow.html

La solution la plus simple est de concevoir un système d'allocation de ressource coté serveur à l'aide de PHP. On test le besoin de charger une ou plusieurs  map-sprite pour des pages précises afin d'inclure ou non les ressource externe dans la page pour qu'elle devienne Inline . Exemple une page Contact ou tout autre page contenant un formulaire n'ont  pas besoin des liens de partage social.

3.  Les URL Sharing

Inutile d'utiliser les SDK respectifs de chaque réseaux sociaux pour simplement partager une page. Ils sont très gourmands en ressources et requêtes DNS, un simple lien suffit. Tous les réseaux proposent les leurs.

L'URL de la page doit être encodée et celon les réseaux plus ou moins de paramètres sont ensuite necessaire.

En PHP on utilise l'instruction: url_encode(URL);

Catégories: Développement WEB, svg

Commentaires: Pas de commentaires

Envoyer un commentaire