Archives de catégorie : CSS

CSS : Présentation de Less, le préprocesseur CSS

CSS, le langage qui permet la mise en forme des pages web, est un outil puissant et qui évolue dans le bon sens avec la version 3. Cependant, le langage a encore quelques lacunes que les préprocesseurs CSS tentent de résoudre. Ce sont des « surcouches » à CSS qui permettent de rajouter des fonctionnalités non fournies de base. Vos fichiers seront codés dans le langage du préprocesseur et compilé en CSS (de la même façon qu’il existe des surcouches à JavaScript comme CoffeeScript, TypeScript ou Dart). Il existe plusieurs préprocesseurs, les plus connus étant :

Dans cet article, j’ai porté mon choix sur LESS qui semble être le plus utilisé et qui permet une utilisation sans compilation.

Les fichiers ne sont plus des .css mais des .less (.scss en SASS et .styl en Stylus).

LESS est codé en JavaScript et fonctionne donc coté serveur avec node.js ou Rhino et coté client, directement dans le navigateur.

Il existe cependant des portages pour les autres technologies serveurs :

LESS ajoute les fonctionnalités suivantes que ne sont pas fournies pas CSS :

  • L’utilisation de variables
  • Mixins (fonctions)
  • Les règles imbriquées afin calquer la structure de votre page
  • des opérateurs mathématiques simple: +, -, *, / pour les nombres et les couleurs
  • des opérateurs mathématiques complexe comme floor(), ceiling() et round()
  • des opérations sur les couleurs comme darken(), lighten(), fadein() et fadeout()

Variables

LESS permet l’utilisation des variables, une des fonctionnalités les plus demandées par les développeurs CSS. Une variable est préfixée par un @. Cela peut s’avérer très pratique si l’on veut gérer des thèmes de son site. Au lieu de devoir modifier toutes les couleurs dans tous les styles, il suffit de modifier les valeurs des variables.

// LESS
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

donnera en css :

/* Compiled CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins

Les mixins sont des fonctions auxquelles on peut passer des paramètres. Il est possible de définir une valeur par défaut qui sera utilisé si le paramètre n’est pas fourni. La syntaxe d’un mixin est proche de la déclaration d’une classe. Cela s’avère très utile notamment lors d’utilisation de fonctionnalités CSS3 utilisant des préfixes.

// LESS
.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}

#footer {
  .rounded-corners(10);
}

donnera en css :

/* Compiled CSS */

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Il est à noter qu’il est possible de définir des règles d’applications (pattern-matching-and-guard-expressions) qui rendent ces mixins encore plus puissants.

Règles imbriquées

On veut très souvent en CSS appliquer un style pour des éléments imbriqués dans d’autres éléments. La règle CSS peut devenir importante (#menu ul li a.item). Les règles imbriquées permettent de cloisonner une règle dans son parent permettant ainsi de limiter le code. Cela permet d’avoir un code plus lisible et plus structuré/organisé.

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

donnera en css :

/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Opérations

LESS fournit également un ensemble d’opérations qu’il est possible d’effectuer sur les couleurs, les variables et les valeurs numériques.

Les opérations mathématiques « de base » comme l’addition, la soustraction, la multiplication et l’addition ainsi que quelques opérations plus complexe comme les arrondis (floor, ceil et round).

Les fonctions possibles sur les couleurs sont :

  • darken(@color, 20%); : retourne une couleur 20% plus sombre
  • lighten(@color, 20%); : retourne une couleur 20% plus claire
  • fadein(@color, 20%); : retourne une couleur 20% plus transparente
  • fadeout(@color, 20%); retourne une couleur 20% moins transparente
  • fade(@color, 80%); : retourne une couleur avec 80% de transparence
  • spin(@color, 10); : retourne une couleur avec une teinte plus importante de 10 degrés que la couleur @color
  • mix(@color1, @color2, @weight); : retourne une couleur résultant du mélange de 2 couleurs avec un % de mélange (50% par défaut)
  • Récupération des données d’une couleur (RGBa ou HSLa)
    • hue(@color); : retourne le canal « teinte » de la couleur (HSLa)
    • saturation(@color); : retourne la saturation de la couleur (HSLa)
    • lightness(@color); : retourne la clarté de la couleur (HSLa)
    • alpha(@color); : retourne le canal alpha de la couleur (HSLa ou RGBa)
    • red(@color); : retourne la canal rouge de la couleur (RGBa)
    • green(@color); : retourne le canal vert de la couleur (RGBa)
    • blue(@color); : retourne le canal bleu de la couleur (RGBa)

Les fonctions sont très pratiques et apporte un réel plus combinées avec les variables, comme pour créer des dégradés (gradient) par exemple.

/* J'ai volontairement omis les prefixes vendeurs */
background: linear-gradient(top, @color, darken(@color, 20%));

Voici d’autres exemples d’utilisation de ces fonctions :

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

donnera en css :

/* Compiled CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

@Import

Il est possible d’importer des fichiers LESS via la syntaxe @import comme il est possible de le faire en CSS. L’avantage est la compilation ne générera qu’un seul fichier CSS en sortie, limitant le nombre de requêtes au serveur.
Twitter BootStrap (framework CSS) utilise LESS et est découpé en plusieurs fichiers .less permettant une maintenance plus aisée.

Utilisation

Via JavaScript

Pour une utilisation coté client de LESS, il est nécessaire d’inclure le fichier JavaScript less.js. Celui-ci doit être placé après l’inclusion de vos fichier .less. Les styles doivent être déclarés avec rel= »stylesheet/less ».

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Via Compilation en CSS

Il est également possible d’utiliser LESS coté serveur afin de compiler les fichiers .less en un fichier CSS. Cette compilation peut se faire à la volée par le serveur ou au préalable.

Ressources

Conclusion

Les préprocesseurs CSS s’avèrent très pratique et permettent une meilleure organisation et maintenabilité de votre code CSS.
Il faut espérer que la norme CSS intégrera ces fonctionnalités dans le futur afin de pouvoir profiter de ces ajouts sans surcouche.

Zen Coding devient Emmet

Quelques jours après la publication de mon article concernant Zen Coding, j’apprends que le projet change de nom et devient Emmet. Ce changement de nom est également synonyme de nouvelle version qui apporte quelques nouveautés (la liste complète des nouveautés) dont :

CSS3 – Medias Queries : Adapter son site à différentes résolutions

Avec l’avènement des smartphones et des tablettes, il est possible d’accéder à un site avec des « devices » de résolution très différentes. Voyons comment via CSS modifier l’affichage de votre site en fonction de la résolution du terminal utilisé, sans pour autant modifier le code HTML.

C’est ce que l’on appelle le responsive design. Il existe 2 approches :

  • Mobile First ou amélioration progressive : cela consiste à concevoir votre site pour les petits terminaux et ajouter des améliorations pour les résolutions plus grande.
  • Desktop First ou dégradation élégante : dans cette approche, il s’agit de concevoir pour de grands écrans et supprimer les effets et éléments superflus pour les petits écrans.

La notion de responsive design ne se limite pas seulement aux media queries. L’adaptation pouvant se faire par d’autres moyens, par JavaScript notamment.

En terme de performance, les petits écrans sont souvent associés à des smartphones, moins performant que les ordinateurs de bureau par exemple. L’approche Mobile First sera moins gourmande. En effet, dans le cas du Desktop First, l’affichage par défaut sera adapté pour les grands écrans. La feuille de style sera appliquée puis ensuite les couches pour l’adaptation pour les petits écrans. Ainsi, plusieurs règles pour les mêmes éléments seront interprétées.

En HTML4/CSS2, il est possible de définir des styles en fonction du média (écran, imprimante, projecteur, …).

Les Media Queries CSS3 vont plus loin et permettent d’adapter votre site en fonction de paramètres comme :

  • l’orientation du terminal (portrait ou paysage) : orientation
  • la hauteur : height
  • la largeur : width
  • la hauteur du terminal : device-height
  • la largeur du terminal : device-width
  • le ratio : aspect-ratio

Syntaxe

Les media queries désignent l’expression qui permet de définir dans quel cas le code CSS doit être utilisé. Ce sont des expressions logiques qui peuvent contenir plusieurs conditions. Les opérateurs logiques disponibles sont :

  • and : et
  • only : seulement
  • not : non

A noter que le ou se fait via la virgule. En effet, on pourra définir plusieurs cas pour lesquels le style est applicable en séparant plusieurs media queries par une virgule.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    /* Code CSS */
}

Utilisation

L’utilisation des media queries dans votre page peut se faire via plusieurs techniques.

Fichier CSS unique

Le code CSS pour vos différentes adaptations peut être inclus dans un seul fichier. Le code spécifique pour une « adaptation » (résolution, orientation, …) étant inclus dans un sous bloc définissant les règles d’application. Dans l’exemple ci-dessous, la couleur de fond change pour les terminaux de type écran dont la largeur est inférieure à 480px.

/* fond gris par défaut */
body {
    background : #CCC;
}

@media only screen and (max-device-width: 480px) {
    /* fond blanc pour les terminaux de type écran dont la largeur est inférieure à 480px */
    body {
        background : #FFF;
    }
}

Fichiers séparés

Il est également possible de mettre le code spécifique dans des fichiers séparés. La règle d’application étant définie dans l’attribut média de la balise link.

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

Configuration du viewport pour les terminaux mobiles

Dans le cas des terminaux mobiles comme des smartphones, il est nécessaire de configurer ce qu’on appelle le viewport afin de s’assurer que la résolution cible soit la résolution du terminal. En effet, afin d’assurer une compatibilité des sites pour les smartphones, le navigateur est configuré avec une résolution plus grande que celle de l’écran. Ainsi le site s’affiche pour une résolution plus grande ce qui oblige l’utilisateur a zoomer. La configuration se fait via la balise meta viewport.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Pour en savoir plus, je vous conseille l’article Comprendre le Viewport dans le Web mobile d’Alsacreations.

Maj du 1er Novembre 2012 :
Il est maintenant possible de déclarer le viewport directement en CSS via la directive @viewport.

@viewport{ 
    width: device-width; 
    zoom: 1; 
}

Pour en savoir plus, je vous invite à lire l’article Utilisez @viewport pour le Responsive!

Exemples

Voici une petite liste d’exemples qui montre la puissance des media queries :

  • L’exemple typique : Un gabarit de site qui s’adapte à la résolution du navigateur (exemple issus du site Alsacreations)
  • Des exemples plus originaux :
    • Santa’s Media Queries : le nombre des membres de la famille Simpson diminue avec la résolution
    • Too many fish is the sea : Le nombre de poisson diminue avec la résolution avec une animation (fonctionne seulement sous Firefox)
    • CSS3 Cherry Blossom : Animation de floraison d’un arbre lors de l’agrandissement de la résolution.

Liens

Voici quelques liens/ressources qui m’ont servi pour cet article :

Conclusion

L’utilisation des media queries permet d’adapter facilement un site à différents médias. Il est ainsi possible d’adapter votre site en fonction de la résolution, l’orientation, l’aspect ratio, … afin que ce dernier soit utilisable quelque soit le terminal (ordinateur, smartphone, tablette, TV, ..) sans pour autant modifier le code HTML. Il faut bien prendre en compte ce dernier point. En effet, si les fonctionnalités de la version mobile sont beaucoup plus réduites, il sera plus performant d’avoir une version dédiée à ces supports afin de ne pas charger un trop grand nombre d’éléments inutiles.
Le support des Media Queries est bon pour les navigateurs modernes mais peut poser problème sur les anciennes versions (IE 6/7/8, Firefox < 3.5, Safari 2 notamment). Il existe des solutions (polyfills) afin d’utiliser cette technologie sur les navigateurs non compatibles comme les librairies JavaScript Respond.js ou Enquire.js.

Sélection et utilisation d’une police de Google Web Font

Pour faire suite à l’article précédent concernant les font web, je vais revenir un peu plus en détail sur l’utilisation d’une police web en utilisant le service Google Web Fonts.

La première chose à faire est de se rendre sur le site de Google Web Fonts afin de sélectionner la ou les polices que vous souhaitez utiliser.

La page est composée de plusieurs parties :

  • Une partie centrale qui permet la comparaison des polices disponibles avec 4 modes :
    • Word : Comparaison par mot
    • Sentence : comparaison par phrase
    • Paragraph : comparaison par paragraphe
    • Poster : Affichage sous forme de « poster »

    Pour chaque mode, il est possible de configurer la taille, le texte (sauf en mode poster où le nom de la police est affichée) et le tri (popularité, date d’ajout, …).

  • Une zone de filtre sur la gauche
  • Une zone de gestion de votre collection de police. En effet, Une fois que vous avez trouvé la police qui vous plaît, il suffit d’ajouter la police à votre collection.

Page d'accueil de Google Web FontPour chaque police, plusieurs actions sous forme de liens/boutons :

  • Un lien qui ouvre la page d’explication permettant d’utiliser la police. Cette page est décrite dans la partie Use/Utilisation ci-dessous.
  • un lien permet d’accéder à la page concernant la police affichant les informations (description, auteur, licence), des exemples de texte utilisant la police et la liste des caractères de la police.
  • Le bouton d’ajout/suppression de la collection

Affichage d'un police dans Google Web FontVoyons comment gérer votre collection et les actions possibles.

Review / Comparaison

Une fois votre sélection effectuée, vous pouvez comparer les polices sélectionnées. Plusieurs modes de comparaisons sont disponible :

  • Specimen: 2 modes
    • Headline : Affiche les différents niveaux de titre avec la police
    • Paragraph : Affiche un paragraphe avec différentes tailles pour la police
  • Styles : Comparaison, pour une phrase donnée des différentes variantes d’une police (italique, gras, …)
  • Test Drive : Utilisation des polices dans le cadre d’une page d’exemple
  • Character Set : Comparaison cote à cote des caractères disponibles
  • Compare : Comparaison de 2 police l’une sur l’autre
  • Description : Affichage des informations (description, licence, auteur) de chaque police
Google Web Font : Comparaison en mode Specimen
Comparaison en mode Specimen
Google Web Font : Comparaison en mode Styles
Comparaison en mode Styles
Mode Test Drive de Google Web Font
Utilisation des polices dans une page test
Google Web Font : Comparaison en mode Character Set
Comparaison en mode Character Set
Google Web Font : Comparaison en mode Compare
Comparaison en mode Compare
Google Web Font : Comparaison en mode Description
Comparaison en mode Description

Use / Utilisation

La page est composée de plusieurs blocs :

  • une partie qui permet de sélectionner les polices de la collection à utiliser.
  • Sélection des jeux de caractères à inclure (latin, latin étendu, cyrillique, …)
  • Le code à utiliser pour inclure les police dans votre page. Il y a 3 façons d’inclure les polices : Link, @import et JavaScript.
  • Un exemple de code CSS pour l’utilisation de chaque police.

Google Web Font : Page d'explication de l'utilisation de polices

Divers

Il est à noter qu’il est possible de télécharger les polices de votre collection et d’enregistrer une collection sous la forme d’un marque page, ce qui peut être utile afin de sauvegarder/partager une collection.

Conclusion

Google met à disposition avec Google Web Fonts un outil complet et simple afin d’utiliser les polices web. Cela permet de facilement personnaliser un site web.
Adobe vient de sortir Adobe Edge Web Fonts, une alternative gratuite à Google Web Fonts, se basant sur typekit, la solution de web fonts payante d’Adobe.

CSS : Utilisation des web font

Le design d’un site est important et il peut se jouer sur des détails comme une police de caractères. Les polices standard (Arial, Times New Roman, Verdana, …) sont peu nombreuses et communes. CSS apporte la possibilité d’utiliser des polices web (web fonts) afin de personnaliser votre site. Par exemple, mon blog utilise la police ‘Amaranth’ pour les titres (h1 à h6). Voyons comment les utiliser.

Il faut savoir que la possibilité d’utiliser des polices web a été apportée par la version 2.0 de CSS. Malheureusement, aucun consensus n’ayant été trouvé entre les navigateurs et les fondeurs, en ajoutant le poids de ces fonts, trop important pour l’époque (on était encore au modem 56K à l’époque 🙂 ), cette fonctionnalité a été supprimée de CSS 2.1.

Une des pratiques courantes consiste alors à utiliser une image contenant le texte écrit avec la police.

CSS3 réintroduit cette fontionnalité avec le module CSS Fonts

Présentation @font-face

Syntaxe

Dans la théorie, l’utilisation des web fonts est simple. Voici la déclaration d’une police qu’on appelera MaFont. Cette déclaration se fait via l’utilisation de @font-face qui permet d’indiquer la déclaration d’une police.

/* Déclaration de la police */
@font-face {
  font-family: MaFont;
  src: local("MaFont"), url('MaFont.ttf');
}

/* Utilisation de la police */
h1 {
    /*Utilisation de MaFont par défaut*/
    font-family: MaFont, Helvetica, Arial, sans-serif;
}

Voici les principaux attributs possible :

  • font-family : Il permet de définir le nom de la police que vous utiliserez dans votre css
  • src : l’attribut qui permet de définir ou récupérer la police. Il est possible de déclarer plusieurs sources afin de définir un ordre d’utilisation : local permet d’indiquer que l’on souhaite utiliser la police si elle est disponible sur l’ordinateur de l’utilisateur et url permet d’indiquer l’url de la police à utiliser. Bien entendu, on privilégiera toujours l’utilisation d’une police locale qui ne nécessite pas le téléchargement du fichier de police.
  • font-weight : l’ attribut permet de définir le « poids » de la police (normal, bold, …)
  • font-style : l’attribut permet de définir le style de la police (normal, italic, …)
  • font-size : la taille de la police

On peut voir que la définition d’une police web est assez aisée. Dans la pratique, il existe différents format de police qui rendent la définition d’une police plus complexe.

Différents format de police

En effet, il serait trop simple de n’avoir qu’un seul type de format de police pour le web. Il en existe 4 principaux :

  • le format SVG (.svg)
  • les formats TrueType et OpenType (.ttf, .otf)
  • le format Embedded OpenType (.eot)
  • Le format de police WOFF (.woff) : le petit dernier spécialement conçu pour le web, proposé par Mozilla

Bien entendu, les navigateurs ne supportent pas tous les même format de police (compatibilité des polices suivant les navigateurs).

Pour en savoir plus sur les format de police, je vous invite à lire
cet article sur le site typographisme.net

Ainsi la syntaxe de définition d’une police web prend en compte cette multitude de format de police et permet de définir le type de police lors de l’ajout d’une source de type url avec l’attribut format.

Voici donc la déclaration mise à jour en spécifiant le format de notre police :

/* Déclaration de la police */
@font-face {
  font-family: MaFont;
  src: local("MaFont"), url('MaFont.ttf') format('truetype');
}

Afin que votre site ait le même rendu dans les différents navigateurs, il va falloir déclarer les polices dans les différents format afin d’assurer la compatibilité avec les formats de police.

On obtient donc maintenant une syntaxe du type :

@font-face{
    font-family : "maFont";
    src : local("MaFont"),
          url('maFont.eot?') format('eot'),
          url('maFont.woff') format('woff'),
          url('maFont.svg#svgFontName') format('svg'),
          url('maFont.ttf') format('truetype');
}

L’attribut format permet au navigateur de connaitre le format sans avoir besoin de télécharger la police. Si le navigateur ne supporte pas le format, la fichier de police ne sera pas téléchargé.

LA bonne syntaxe à adopter

Certains navigateurs ont des problèmes avec la syntaxe (utilisation de local() sous Android, non compréhension de la syntaxe CSS3 pour IE, …). L’équipe du site fontspring.com a trouver LA syntaxe à utiliser pour être compatible sur tout les navigateurs. La voici :

@font-face {
	font-family: 'MaFont';
	src: url('MmFont.eot?#iefix') format('embedded-opentype'), 
	     url('maFont.woff') format('woff'), 
	     url('MaFontttf')  format('truetype'),
	     url('MaFont.svg#svgFontName') format('svg');
	}

2 articles si vous voulez en savoir plus :

Outils

Google Web Fonts

Google a créé le service Google Web Font qui permet de mettre à disposition facilement les police web les plus utilisées. L’inclusion est facilitée car il suffit juste d’inclure une feuille de style.

<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>

L’avantage de ce service est qu’il renvoi le bon format de police en fonction du navigateur de l’utilisateur. Il n’est pas possible d’utiliser des polices personnelles mais le nombre de police disponible aujourd’hui est de plus de 500, de quoi trouver son bonheur. Lors de la sélection des polices, Google vous indique même l’impact en terme de performance de l’utilisation de chaque police.

Squirrel

Si vous ne trouvez pas votre bonheur avec les google web font et que vous souhaitez utiliser une font perso, Font face generator de FontSquirrel est l’outil qu’il vous faut. Il permet de générer les différents formats (woff, ttf, otf, eot, svg) à partir d’un fichier source (quelque soit ce dernier) et vous fourni également le code CSS qui va avec.

A noter que le site FontSquirrel fournit, en plus du générateur de police, des polices gratuites et libre d’utilisation, même commerciale, à télécharger.

FontFriend

FontFriend est un book­marklet permettant de facilement appliquer une police via un sélecteur. Cette police peut être une police standard (Arial, Times New Roman, …), une police google web font ou une police perso via un drag’n drop. Un must have !

Autres

Il existe également d’autres outils dont voici une liste non exhaustive :

  • 2 sites équivalent à Google Web Font mais payant :Typekit et Fontdeck
  • Fontspring : Annuaire de police (payant)
  • Dafont : Le site de référence pour le téléchargement de police gratuite
  • What Font Is : Site qui à partir d’une image permet de retrouver une police de caractère (des extensions Firefox et Chrome sont également disponible).

Conclusion

A priori simple, l’utilisation des web font s’avère complexe à gérer afin de supporter les différents format de police. Il faut espérer que le format woff, le plus adapté pour le web, s’imposera et sera supporté par l’ensemble des navigateurs. Des outils (Google Web Fonts, Sqirrel) permettent cependant de facilement utiliser ces polices web. Attention toutefois à ne pas abuser du nombre de police dans une seule page au risque de dégrader les performances de votre site.

CSS : Liens et Impression

J’ai récemment fait mon CV au format HTML. J’ai utilisé des liens sous forme d’image afin de faire un lien vers mon blog, mes comptes Viadeo et LinkedIn.

Liens sous forme d'image

Le problème est que lors de l’impression de mon CV, l’image sera imprimée et la personne ne pourra pas aller sur mon blog ou mes comptes. La solution consiste à adapter l’affichage pour le média print (impression).

Pour cela, j’utilise une technique qui permet d’ajouter du contenu via CSS.

Voici le code de mon lien vers mon blog :

<a class="link" data-print-prefix="blog" href="http://royto.familleroy.fr/"><img height="36" width="36" alt="blog" title="blog" src="icons/blog.png" /></a>

Dans mon CSS, dans le cas d’un media print, je cache l’image de mon lien, puis je rajoute mon contenu via la propriété CSS content. Dans mon cas je récupére l’url de mon lien via l’attribut href que je place après ma balise « a » via le pseudo sélecteur :after (il est possible de le placer avant via le pseudo sélecteur :before).

@media print {
    a.link img {
        display: none;
    }

    a.link:after { 
        content: attr(href); 
    }
}

Ainsi l’image sera remplacée par l’URL de mon lien.

Dans mon cas, je récupère également un préfixe contenu dans une propriété data-*, attribut personnalisé nommé data-print-prefix. Je sépare le préfixe via  » : « . En effet il est possible de mettre du contenu en dur si on met le texte entre quote. Cela me permet de pouvoir avoir plusieurs liens que l’on peut différencier via le préfixe que l’on affichera avant le lien (compte facebook, twitter, linkedin, …).

Le code au final :

@media print {
    /* Modification du style des liens pour impression */
    a {
	color : #75B0D1;
	text-decoration : none;
    }
    
    /* Masquage des images en impression */
    a.link img {
        display: none;
    }
    
    /* Passage en block pour un affichage 1 lien par ligne */
    a.link {
	display : block;
    }

    /* Ajout des informations du lien */
    a.link:after { 
        content: attr(data-print-prefix) " : " attr(href); 
    }
}

NB : J’aurais pu me baser sur un autre attribut de mon lien comme title mais le but était de montrer qu’il était possible d’utiliser les attributs data-*.

Voici le résultat après impression :
rendu de l'impression de liens via CSS

Cette technique peut également être utilisée pour d’autres utilisation (ex : ajout d’un drapeau indiquant la langue du lien, icone indiquant si le lien redirige vers le site lui-même ou un autre site, …).

Outils CSS3 – HTML5 – JavaScript : Episode 3

Cet article fait suite aux 2 précendents articles su le même sujet :

J’ai un temps pensé appeler cet article Outils CSS3 – HTML5 – JavaScript : la suite de la suite mais je me suis dis qu’au fur et à mesure des articles ça commencerai à être long …

Chargeur de fichier JS/CSS/…

Le chargement de fichier JavaScript par le tag script est bloquant. Quand un fichier de script est chargé, votre page est mise en attente du chargement et de l’exécution de votre fichier. Cela est vrai pour chaque script de votre page. Afin de contourner ce problème, des librairies de chargement de scripts asynchrones ont vu le jour comme :

  • RequireJS : un gestionnaire de fichier qui permet de définir les fichiers à charger via un système de dépendance
  • YepNope.js : Librairie très utilisée pour le chargement de polyfills (mis en avant par Modernizr). Cette librairie permet de charger des fichiers suivant un test booléen (ex : Modernizr.geolocation). Un petit lien vers mon article sur cette librairie
  • HeadJS : loader de script mais pas que (détection de fonctionnalités, détection de navigateur, détection de taille d’écran, …)

Sammy.js

Sammy.js est une librairie JavaScript implémentant REST.
Il permet de créer des applications web avec une gestion de l’historique, des événements personnalisé, des plugins, etc.

Tester son code JS

TypedJS est un outil de tests automatique de vos fonctions JavaScript. Il suffit d’annoter vos fonctions avec les types attendus, TypedJS se charge de tester vos fonctions pour vous afin de vérifier que le type retourné est correct. Attention, il ne s’agit pas d’une librairie permettant de faire des tests unitaires automatisés comme QUnit par exemple.

Framework MVC

J’ai évoqué dans mon article de présentation de knockout des framework MVC comme BackoneJS ou EmberJS. AngularJS, un framework MVC développé par Google, fait pas mal parler de lui en ce moment.

JQuery

Jquery ++ : collection de nouvelles fonctionnalités DOM et d’événements bien pratiques pour jQuery

BootStraps / Initializr

Il s’agit ici de boite à outils/template/Framework pour HTML/CSS/Javascript permettant de démarrer un projet rapidement. De nombreux outils sont inclus par défaut pour vous faciliter la vie (classes CSS, jQuery, page html de base, …).

SpritePad

Une des pratiques permettant un gain de vitesse de chargement d’une page web est la mise en place de sprite. Un Sprite est un fichier composé de plusieurs icônes/images. Le CSS se chargera d’afficher qu’une zone de l’image correspondant à la partie à afficher. Ainsi un seul fichier est chargé. SpritePad permet la génération de Sprite CSS en drag’n drop et génère pour vous le CSS.

Mobilité

Les technologies HTML5/CSS3/JavaScript ont beaucoup de succès notamment du fait de leur compatibilité sur terminaux mobiles (smartphone, tablette). Le debuggage sur ce type de terminaux n’est pas évident. Voici quelques outils pour le faire :

CSS3 Generator

CSS3 Generator : Un générateur de règles CSS très complet (Border-Radius, Gradient, Box-Shadow, Transform, Text-Shadow, …).

Partage de code

Je vous avez parlé de JSFiddle dans un précédent article, un outil de partage de code HTML/CSS/JavaScript. JSBin permet également la même chose.

Guide des bonnes pratiques HTML/CSS par Google

Google a misà disposition un ensemble de bonnes pratiques concernant HTML / CSS et JavaScript. A lire !!

Librairies graphiques

datavisualization.ch est un site qui recense les librairies graphiques pour le web et qui aidera à trouver la librairie qui correspond le mieux à vos attentes.
Highcharts : LA librairie pour faire des graphes en SVG avec un fallback en VML pour IE8 et inférieurs.

Animations CSS

Animate.css : Jeu d’animation en CSS déjà coté à réutiliser et à adapter pour vos projets. Possibilité de créer un fichier ne comportant que les animations dont vous avez besoins.

Javscript : Divers

BankersBox

BankersBox est une librairie facilitant la sauvegarde de donnée coté client.

Hammer

Hammer.js est une librairie pour gérer les « gestures ».

Gestion de raccourcis clavier

MouseTrap : une librairie pour gérer des raccourcis clavier et les binder sur des fonctions

Outils CSS3 – HTML5 – JavaScript : la suite

Je poursuis mes recherches et ma veille technologique sur ces technologies prometteuses que sont HTML5 & co (CSS3, API Javascript, Canvas, …).

Voici donc la suite des outils commencée ici :

Animation

CSS3 apporte la notion d’animation et de transition (une animation est un enchainement de transitions par rapport à une ligne de temps timeline). Ces transitions utilisent des fonctions d’easing qui permettent des animations non linéaire. Il faut configurer la transition via la propriété transition-timing-function (avec les préfixes qui vont bien pour la comptatibilité). Voici les différentes valeurs possible :

  • linear: Vitesse constante (valeur par défaut)
  • cubic-bezier: La vitesse sera calculée grâce à une courbe de Bézier cubique définie par deux points de contrôles : P0 et P1 (Il faudra donc fournir 4 paramètres : P0x, P0y, P1x et P1y).
  • ease: correspondant à cubic-bezier(0.25, 0.1, 0.25, 1)
  • ease-in: correspondant à : cubic-bezier(0.42, 0, 1, 1)
  • ease-inout: correspondant à : cubic-bezier(0.42, 0, 0.58, 1)
  • ease-out: correspondant à : cubic-bezier(0, 0, 0.58, 1)

L’outil cubic-bezier permet de configurer via une interface graphique les valeurs des 4 paramètres et de visualiser le rendu de l’animation.

Pour finir sur les transitions/animations, animatable est une page qui regroupe des exemples de transition sur toutes les propriétés animables.

Gestion des préfixes CSS

Les spécifications concernant HTML5 et CSS3 ne sont encore qu’à l’état de draft mais les navigateurs ont déjà commencé à implémenter certaines règles. Concernant CSS3, il faut, pour chaque navigateur, préfixer les propriétés concernées afin de pouvoir les utiliser (-ms pour IE, -moz pour Firefox, -webkit pour les navigateurs basé sur webkit, -o pour Opera …). Il devient alors lourd de rajouter autant de lignes qu’il y a de préfixes afin de faire fonctionner son code dans tous les navigateurs. C’est la qu’interviennent les librairies JavaScript prefixfree et CssFx qui gèrent pour vous l’ajout de ces préfixes.

Démo HTML5

Sites de démos des nouveautés HTML5 :

Normalisation CSS

normalize.css est une alternative au fameux RESET CSS mais au lieu de mettre des valeurs à zéro et devoir vous même spécifier vos propres valeurs, normalize.css normalise les valeurs pour que celles-ci soient identique sur tous les navigateurs. Cette technique est notamment utilisée par HTML5 boilerplate, le template HTML/CSS/JS à la mode.

Testeur de code JavaScript en ligne

http://jsfiddle.net/ permet de tester son code Javascript et de le partager. La page est découper en 4 grandes parties : le code HTML, le code CSS, le code JS et le résultat. La partie résultat correspond à l’interprétation du HTML, CSS et JavaScript. Il est possible de rajouter facilement les librairies JS les plus utilisés (JQuery, Prototype, dojo, YUI, ExtJS, …) ou votre propre script. JSFiddle supporte également CoffeeScript (langage permettant de générer du Javascript) et Sass (Surcouche à CSS). Vous pouvez sauvegarder votre code qui vous générera une URL que vous pourrez ensuite partager. Très utile pour expliquer un problème à un ami à distance ou pour poser une question sur un forum ou stackoverflow.com. L’outil inclut même la validation (via JSLint) et la ré-indentation de votre code JS.

Compatibilité des fonctionnalités HTML5 et leur utilisation

html5please.com et caniuse.com (Can I Use) sont 2 sites qui permettent de connaître la compatibilité des fonctionnalités HTML5 ainsi qu’une indication sur leur utilisation (utilisation possible, non recommandé, avec précaution, …).

Formateur et Validateur JSON

jsonformatter est un outil en ligne qui permet de valider et de formater un objet au format JSON.

Minifieur Javascript

JSMin est un outil qui permet de minifier vos fichiers javascript afin que ceux ci aient une taille réduite pour une optimisation du temps de chargement de vos pages web.

YUI Compressor permet aussi la compression JS mais également CSS.

Librairie de dessins

HTML5 apporte 2 façons de dessiner : Canvas (bitmap) et SVG (Vertoriel). Voici des librairies de dessin utilisant ces technologies :

  • Raphaël : libraire Javascript permettant de faire facilement du dessin vectoriel avec SVG. (Si vous voulez faire des graphes en SVG, gRaphael est une libraire de chart basé sur Raphaël.)
  • Paperjs : Librairie de dessin basé sur Canvas
  • Processing.js : Librairie également basé sur Canvas développé notamment par John Resig, le père de JQuery
  • PlotKit : Librairie de graphique supportant Canvas et SVG

Couleur

colorhexa : Outil permettant d’obtenir des informations sur une couleurs (description détaillée, conversion dans différents formats (hexadécimal, binaire, RVB, …), génération de schémas de couleurs complémentaires, générateur de gradient, …).
css-color-palette-extractor :permet d’extraire les couleurs utilisées dans une CSS.

Générateur d’images

Lorempixel est un site qui permet d’agrémenter vos maquettes, tests, exemples de photo aléatoire comme loremipsum permet de le faire avec du texte. Il est possible de définir la taille de l’image, un thème (sport, nature, abstrait, …), la couleur (noir et blanc ou couleur).

Techdays 2012 : Les vidéos sont en lignes

Les TechDays 2012 organisés par Microsoft se sont tenus à Paris les 7, 8 et 9 Février 2012. Plus de 300 sessions ont été animées. Ces sessions sont disponibles en vidéos. Voici les sessions qui traitent de HTML5, CSS3 et JavaScript.

Bon visionnage !!!

Effet animé de zoom au survol d’une image en CSS

CSS3 et HTML5 apporte beaucoup de nouveautés. Voyons comment mettre en place un effet de zoom animé en pur CSS 3. Nous utiliserons pour ça les transitions. A noter que cette technique ne fonctionne que sur des navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+)

Dans un premier temps nous insérons notre image :

<img class="zoomEffect" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="HTML5" />

Nous avons mis une classe zoomEffect afin de ne cibler que les images ayant cette attribut.

Il faut ensuite styler notre image et l’animer via CSS :

img.zoomEffect {
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.7;
}
img.zoomEffect:hover {
    -moz-transform: rotate(5deg) scale(1.10);
    -webkit-transform: rotate(5deg) scale(1.10);
    -o-transform: rotate(5deg) scale(1.10);
    -ms-transform: rotate(5deg) scale(1.10);
    transform: rotate(5deg) scale(1.10);
    opacity: 1;
}

On définit sur notre image une transition (-*-transition) qui s’appliquera à toutes les propriétés en utilisant la valeur all (on peut définir une liste de propriété qui seront animées). Celle-ci durera une demi-seconde (0.5s) et utilisera l’effet ease-in-out. Le dernier paramètre est le délai avant l’animation. 0s indique qu’on lance l’animation immédiatement. J’ai utilisé ici la notation raccourcis mais on peut définir chaque propriété individuellement. Je vous laisse vous reporter à la documentation ou à cet article d’alsacreations sur les transitions.

Au survol de l’image (:hover), on définit une rotation de 5° rotate(5deg) et d’agrandissement de 10% scale(1.10). On met également l’opacité à 100% (opacity: 1) pour un meilleur effet.

Et voila le résultat :

HTML5

Ceci n’est qu’un exemple simple des possibilités du module de transition de CSS3 qui permet de mettre en place des effets d’animation simple afin d’améliorer l’ergonomie de votre site. Pour avoir plus de contrôle sur les effets, il est possible d’utiliser le module d’animation de CSS3 qui permet de créer des keyframes afin de définit précisément les étapes de votre animation.

Edit (21 Avril 2015) : Il est possible de déterminer l’origine de la transformation en utilisant la propriété transform-origin.

img.zoomOriginEffect {
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.7;
}
img.zoomOriginEffect:hover {
    transform: rotate(25deg);
    opacity: 1;
    transform-origin: top left;
}

NB : j’ai volontairement omis les règles CSS liés aux préfixes propriétaires et supprimer le scale.