Alsacreations.com - Actualités - Archives (février 2015)
Les dernières actualités d'Alsacreations.com
Une fois n’est pas coutume, la section “livres” d’Alsacréations vous propose une revue de lecture d’un livre CSS.
Étant co-auteur de cet ouvrage en compagnie de Hugo Giraudel, je vais tâcher de le traiter avec toute l’objectivité possible.
Pour commencer, soyons honnêtes : la vérité est que le plus gros du boulot a été réalisé par Hugo !
De mon côté, j’ai endossé le rôle de “coach”, de par mon expérience dans ce domaine, et nous avons combiné nos connaissances techniques pour produire un résultat dont nous sommes tous deux très fiers.
Le résultat, en toute objectivité bien-sûr, me semble bluffant. Je suis convaincu qu’il s’agit du livre CSS3 qui couvre le mieux ce vaste sujet aujourd’hui.
La cerise sur le gâteau est que cet ouvrage de plus de 350 pages est intégralement en couleur et très riche en illustrations et exemples de codes.
Au sommaire :
- L’état actuel du W3C et des standards CSS
- Les sélecteurs CSS3 : l’accès au DOM
- Positionnement et layout : les nouvelles techniques de mise en page (Modèle de boîte et box-sizing, Multicolonne, Flexbox, Grid Layout, Position «sticky», Régions, Masques de formes)
- Interfaces graphiques et amélioration visuelle
- De nouvelles unités et valeurs en CSS3
- Contrôle du texte
- Variables natives
- Styles conditionnels (`@supports` et `@media`)
- Transformations : un nouveau monde en 2D et en 3D
- Animations et transitions : pour des interfaces moins statiques
À qui s’adresse ce livre ?
Pas aux débutants complets, que ce soit clair.
Hugo et moi avons souhaité nous adresser aux développeurs et intégrateurs déjà très à l’aise en CSS et désireux d’aller plus loin dans les techniques modernes qu’offrent les spécifications CSS3.
Ce que vous trouverez dans ce livre
Quasiment toutes les spécifications CSS3 finalisées, en cours de finalisation, voire en brouillon pour certaines. Le but étant d’offrir un panorama complet et détaillé de la norme CSS3 actuellement utilisable en production.
Ce que vous ne trouverez pas dans ce livre
Tout ce qui sort du domaine de CSS3.
Vous n’y trouverez pas (ou peu) de HTML5, de JavaScript, d’API, ni de méthodologies et astuces “classiques” en CSS.
Pour ceux qui se posent la question, cet ouvrage n’a que très peu de points communs avec “CSS avancées” dont le domaine couvert est la maîtrise du langage CSS “en général” et non pas CSS3 qui n’est réellement abordé que dans deux chapitres.
Enfin, ce livre n'est pas véritablement la suite de l'ancêtre "CSS2 pratique du design web" qui date tout de même de 2005. Il s'agit d'une complète refonte à la sauce CSS3.
Le site du livre
Vous trouverez un site dédié à l’ouvrage, sa présentation, les liens vers les boutiques et éventuelles coquilles à l’adresse css3-pratique.fr
L'événement Hacking Health Camp concerne toutes les personnes impliquées dans le monde de la santé et son innovation. Depuis les professionnels jusqu'aux patients, en passant par les développeurs, hackers, designers et chercheurs UX, le but est de fédérer les capacités de chacun autour de projets relatifs à la santé du futur.
La précédente édition en 2014 avait vu la réalisation de 19 projets, et ambitionne désormais de devenir l'événement de référence en Europe.
Durant 50 heures “ceux qui utilisent” (les professionnels de santé), “ceux qui fabriquent” (les développeurs, designers, ergonomes et ingénieurs) et “ceux qui portent” (les entrepreneurs) collaborent sur des défis soumis avant l’évènement. Le dernier jour chaque équipe présente un prototype fonctionnel à un jury et à toute l’assemblée.
Toutes les informations sur http://hackinghealth.camp/ !
L'utilisation de polices personnalisées (webfont) se développe de plus en plus sur les sites web. notamment les sites développés en responsive design. Elles se composent d'un ou plusieurs fichiers externes (EOT, SVG, TTF, WOFF) chargés via la déclaration font-face.
L'utilisation de ces polices a même été "détournée" pour afficher des icônes, la plus connue étant Font-Awesome, popularisée par BootStrap. Mais il y a un problème de performance : quel est l'intérêt de charger des dizaines de Ko et 479 icônes pour au final utiliser 5 ou 6 icônes sur son site ?
Voici donc un petit guide pratique pour optimiser le chargement d'une police d'icônes.
Icomoon à la rescousse
Icomoon est un des outils les plus simple pour personnaliser et générer une police d'icônes. Il suffit de choisir les icônes que l'on veut intégrer : plusieurs packs sont déjà proposés et on peut mixer plusieurs packs, voire intégrer ses propres icônes. L'outil génère ensuite un fichier CSS et des fichiers pour la police. Nous avons déjà largement diminué le poids des fichiers à charger.
Aller un peu plus loin
Oui mais voila, il reste encore trop de fichiers à charger. C'est là qu'intervient le schéma Data-URI, que l'on utilisait pour les icônes images afin de supprimer une requête en intégrant directement l'image dans le fichier CSS. L'idée est la même, intégrer directement la police de caractères dans le fichier CSS. Une option disponible dans les préférences d'Icomoon : "Encode et Embed Font in CSS".
.png)
On se retrouve avec un fichier CSS contenant les définitions suivantes, où les versions TTF et WOFF de la police sont directement dans le fichier CSS, la version EOT restant externe.
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot');
}
@font-face {
font-family: 'icomoon';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAA...) format('truetype'),
url(data:application/font-woff;charset=utf-8;base64,d09GRgAB...) format('woff');
font-weight: normal;
font-style: normal;
}
On obtient au final un seul fichier CSS pour les navigateurs modernes sans besoin de charger en sus un des fichiers de fonte.
Et les anciens IE dans tout ça ?
Évidemment rien n'est aussi simple et le support des anciennes versions d'IE méritent quelques ajustements. IE7 et inférieur ont besoin de déclarations spécifiques pour pouvoir afficher correctement les icones. Là encore Icomoon vient à la rescousse avec l'option "Support IE7 and older":
.png)
Cette option n'est toutefois pas parfaite : on se retrouve avec un fichier CSS et JS supplémentaire. Une solution plus optimisée est donc d'utiliser les commentaires conditionnels pour IE. L'idée est de créer un seul fichier CSS complet pour les versions égales ou inférieures à IE7 et une version pour les autres navigateurs.
<!--[if lte IE 7]> <link href="IE67.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="modern.css" rel="stylesheet" type="text/css" />
Une dernière astuce permet d'éviter le blocage générés par l'utilisation des commentaires conditionnels, en ajoutant un commentaire conditionnel vide au début du fichier HTML:
<!--[if IE]><![endif]-->
<html>
<head>
<title>Titre de la page</title>
<!--[if lte IE 7]> <link href="IE67.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="modern.css" rel="stylesheet" type="text/css" />
<!--[endif]-->
...
</head>
Au final on garde les avantages des icônes vectorielles, sans les inconvénients du chargement. Ce n'est pas l'objet de cet article, mais il est vivement conseillé d'intégrer la concaténation et la minification des fichiers CSS et JS dans le process de déploiement. En pratique, voila ce que ce donne le chargement sur Chrome et sur IE7.
Tout savoir sur les fontes icônes ?
Pour aller plus loin que cette astuce et traiter encore plus en profondeur le thème des fontes icônes, je vous renvoie vers un article de Stéphanie Walter : "Créer une police d’icônes facilement à partir d’illustrations vectorielles" qui détaille le processus de conception et de modification d'une police d'icônes.