Sprites et SVG

Lorsqu’on utilise des sprites avec des images jpg/png, c’est la propriété background-position sur laquelle on s’appuie pour afficher l’icône souhaitée. L’inconvénient majeur est, que lorsqu’on modifie la taille d’une icône, il faut modifier les positions de toutes les autres icônes.

Une alternative possible est d’utiliser les svg.

Le principe est de superposer toutes les icônes à la même position. On nomme les calques (une icône = un calque) avec un identifiant différent. Ensuite, on les cache par défaut (les calques ont une classe commune à laquelle on applique la propriété display: none). On passe par un éditeur de texte pour modifier le fichier svg (syntaxe xml). Enfin, dans notre css, lors de la déclaration de la balise, on utilise la propriété background: url en appelant le fichier svg et l’identifiant : icones.svg#test. Ce qui a pour effet d’afficher uniquement le calque concerné. De plus, le format vectoriel permet d’agrandir / réduire à volonté.

Plus de problématique de positionnement, et on peut ajouter autant de calques que nécessaire.

Le fichier svg avec 3 icônes :

Et le fichier html :

Malheureusement, aux premiers tests c’est non compatible Safari…

 

 

 

 

DataTables et formatage de tableau

En installant dataTables sur un tableau, on peut avoir l’erreur suivante :

Datatables: Cannot read property ‘mData’ of undefined

C’est sûrement une erreur de formatage de votre tableau. Pour y remédier, veillez à ce que certaines règles soient respectées :

  • utiliser les balises <thead> et <tbody> pour bien séparer l’en-tête et le corps du tableau
  • garder, pour chaque ligne <tr>, le même nombre de colonnes <th> dans <thead> que de cellules <td> dans <tbody>
  • la dernière colonne ne doit pas contenir l’attribut colspan

Exemple de bon formatage :

 

 

Utiliser des controller spécifiques pour les assets css

Pour éviter de charger du style inutilement au risque de ralentir le chargement de la page, nous allons utiliser les styles css propres à chaque controller rails.

1. Pour ce faire, dans le fichier application.css, il faut retirer
*= require_tree . et mettre *= require_self

2. Ensuite, dans le layout on met à jour la ligne d’inclusion des assets :

3. Enfin, il faut créer un nouveau fichier dans config/initializers : assets.rb

En remplaçant les controller_one et controller_two par les noms de vos controllers.

Et voilà !

 

 

Utiliser des clearer avec des pseudo-éléments

Pour afficher correctement des éléments après des flottants, on utilise souvent :

Côté html :

Côté css :

L’inconvénient c’est que ça surcharge la structure html des fichiers. Pour parer à ce souci, on peut utiliser des pseudo-elements :

Côté html :

Côté css :

Et comme souvent, on utilise plusieurs fois les clearer, on peut faire un mixin qu’on appelle à chaque besoin.

 

Déplacer un élément avec les transitions css3

Cas concret :

Sur un site, un menu fixed en haut de page avec des rubriques centrées. On souhaite que lorsqu’on scrolle, à partir d’un certain niveau, les catégories du menu passent à droite.

Admettons que les rubriques aient des styles associés :

On va définir une nouvelle classe pour les rubriques placées à droite avec les propriétés qui nous intéressent pour le déplacement :

En javascript maintenant, on va attribuer la nouvelle classe aux rubriques :

Et on retire la nouvelle classe, lorsqu’on remonte vers le haut.

Pour ajouter la transition et son bel effet, il faut ajouter la ligne suivante dans les propriétés du menu initial :

Ainsi, le passage entre les deux états se fera de manière fluide et élégante.

 

#Barcamp : Intégrer une typographie web

Le but de cette veille était de déterminer les différentes possibilités afin d’insérer des typographies lors de l’intégration de sites internet.

Première possibilité

Google propose un service open source afin d’insérer facilement une typographie parmi plusieurs centaines mises à disposition.

Son avantage, un choix important de polices et une facilité de mise en place.

Malheureusement, il n’est pas possible d’avoir la main sur le code généré. Le jour où la police n’est plus disponible sur Google Fonts, il est très difficile de connaître les conséquences sur le site qui les utilise.

C’est pour cela, que nous avons choisi la deuxième solution.

Deuxième technique

Pour insérer une typographie sur un site, il est nécessaire de disposer de différents formats de fichiers afin de rendre la police compatible pour les différents navigateurs.

  • un fichier au format .eot
  • un fichier au format .woff (ou .woff2 plus récent)
  • un fichier au format .svg
  • un fichier au format .ttf (le plus standard)

Avant de choisir une typographie, il faut penser à plusieurs points :

  • regarder la licence : est-ce que je peux utiliser cette typo pour le web pour un site à but commercial ?
  • est-ce que tous les caractères sont supportés par la typo : accents, caractères spéciaux, majuscules ?
  • il ne faut pas trop d’écart de taille entre la typo choisie et la typo de substitution (Arial par ex.) : si jamais votre typo n’est pas prise en compte, il ne faut pas que l’Arial soit affichée en 60px.
  • regarder le poids des fichiers : max. 500k pour un chargement rapide

Après cette checklist, on va générer un « kit de notre typo web » via le site www.fontsquirrel.com : https://www.fontsquirrel.com/tools/webfont-generator.

Pour uploader une police, prenez un fichier ttf qui ne se situe pas dans votre dossier « Fonts » de votre ordinateur mais plutôt sur un autre dossier.

Ce kit va contenir les formats de fichiers typographiques nécessaires ainsi qu’un fichier css avec la syntaxe à utiliser.

Voici un exemple avec ma_typo_web :

La propriété « local » permet d’aller chercher la typo en local sur l’ordinateur de l’internaute. Si la police est trouvée, le chargement est plus rapide.

Ensuite, il suffit juste d’appeler la police ma_typo_web lors de la déclaration des propriétés :

#Barcamp : Création de webdesign en 2016

Points clés :

  • Style minimaliste
    • sites épurés qui laissent la place aux textes et éléments visuels
  • Conception en mosaïque
    • permet la réorganisation modulable des éléments en responsive
    • organisation fonctionnelle, vision claire
  • Scrolling vertical
    • confortable et les internautes habitués
    • one-page
  • Grandes photos de qualité
    • plus grandes résolutions –> utilisation de grandes images valorisantes
  • Infographies et data visualisations
    • style vectoriel pour afficher des données complexes en une forme compréhensible (animations svg) et ludique
  • Le retour de l’importance de la typo
    • typos = éléments graphiques incontournables
    • un effort conséquent est fait pour améliorer la lecture
    • des textes plus gros et des interlignages
  • Disparitions des grandes images en tête de page
    • sliders dépréciés car un faible taux de clic
    • « fourre-tout » et les gens ne prennent pas le temps de les visualiser toutes
  • Le burgon icon
    • navigation révélée d’un clic
    • menu gauche sortant (slide out) avec un retour à la navigation verticale

Sources :

#Barcamp : Pseudo-éléments en css

Le sujet de veille d’aujourd’hui concerne l’utilisation des pseudo-elements en CSS.

Les pseudo-elements, qu’est-ce que c’est ?

Les pseudo-elements sont utilisés pour pouvoir ajouter des éléments supplémentaires (fantômes) à l’élément ciblé et pouvoir y appliquer un style en particulier.

Pourquoi fantôme ?

Tout simplement parce que l’élément ajouté n’est pas présent dans la structure du DOM mais n’est visible que dans le css.

Petit exemple

A la suite de cette phrase, je souhaite ajouter la phrase tu plaisantes ? en gras et en rouge.

Pour cela, il existe le pseudo-element suivant ::after (ou :after). 

Voyons maintenant comment appliquer ce pseudo-element sur notre exemple.

Mise en place d’un pseudo-element

Dans le fichier CSS et devant l’élément concerné, ici le p, il suffit de placer l’instruction ::after et de lui indiquer ce que l’on souhaite faire.

Ici, la propriété content est nécessaire sans quoi le pseudo-element ::after (idem pour ::before) ne sert à rien. Si vous n’avez pas la nécessité d’ajouter de texte mais uniquement de modifier le style de l’élément ciblé, il suffit simplement de mettre une chaîne de caractères vide au niveau de la propriété content.

Petite remarque, il est tout à fait possible de ne mettre qu’un seul double point plutôt que 2 pour appliquer un pseudo-element mais depuis CSS3 cela permet de bien faire la différence entre les pseudo-classes (:) et les pseudo-elements (::).

Personnaliser les checkbox en CSS

Voici une méthode simple sans javascript pour personnaliser vos checkbox.

  • Partir du code suivant : checkbox + label

  • Enlever l’input de type checkbox avec un « display:none ». Pas de panique, l’action de cocher est toujours présente grâce au « for » du label.

  • Créer une nouvelle case à cocher en css :

Ce code va sélectionner le label qui se trouve après une checkbox ( + ) et met un bloc vide (content: «  ») devant le label (pseudo-élément :before)

  • Pour créer le style de la checkbox « checkée », rien de plus simple :

On sélectionne la checkbox « checkée » (:checked) et on remplit le bloc vide devant le label avec une coche (content: « \2713 ») et un fond de couleur différent.

Voici le code complet pour tester :

Quelques règles d’intégration pour une newsletter passe partout

Lorsqu’on intègre un site internet, il faut être compatible multi-navigateurs. Et bien, les newsletters n’échappent pas à la règle, avec les logiciels de messagerie (webmails et autres).

Voici quelques règles simples d’intégration qui vont rendre un affichage correct sur beaucoup de logiciels de messagerie :

  • mettre les styles inline dans le html, pas de css en feuille de styles externe
  • faire un reset des margin, padding :

  • intégrer avec des tableaux, sous la forme :

  • utiliser des largeurs fixes en pixels pour vos largeurs de tableaux
  • ne pas hésiter à redéfinir des tableaux dans des tableaux ou à utiliser des colspan / rowspan
  • répéter les styles pour les éléments les plus « fins » : pour chaque balise <p>, redéfinir la taille, la police, la couleur, les marges pour éviter que le logiciel de messagerie ne surcharge les styles :

  • pour les images, insérer bien un chemin absolu et non relatif, spécifier les attributs height et width (si jamais les images ne s’affichent pas par défaut dans le mail, ça permet de prendre juste la place nécessaire) et un petit attribut « alt= » n’est jamais de refus 😉

Evidemment, cette liste n’est pas exhaustive !