@font-face {
  font-family: 'Roboto';
  src: url('/_catalogs/masterpage/css/fonts/Roboto/Regular/Roboto-Regular.woff2') format('woff2'),
       url('/_catalogs/masterpage/css/fonts/Roboto/Regular/Roboto-Regular.woff') format('woff'),
       url('/_catalogs/masterpage/css/fonts/Roboto/Regular/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

To have this resource sent back from the Sharepoint server with cache headers, you just need to add ?ctag=0 at the end:

@font-face {
  font-family: 'Roboto';
  src: url('/_catalogs/masterpage/css/fonts/Roboto/Regular/Roboto-Regular.woff2?ctag=0') format('woff2'),
       url('/_catalogs/masterpage/css/fonts/Roboto/Regular/Roboto-Regular.woff?ctag=0') format('woff'),
       url('/_catalogs/masterpage/css/fonts/Roboto/Regular/Roboto-Regular.ttf?ctag=0') format('truetype');
  font-weight: 400;
  font-style: normal;
}

Finally I found some code on StackOverflow and also at Coderwall. I created my own solution that could only work with my own HTML code… but I share it here, maybe that could help someone else.

The HTML code:

  

    This is my text !
  

The related CSS code:

.ribbon-front { overflow:hidden }

And the JavaScript code:

var autoSizeText = function(selector) {
  "use strict";
  var el, elements, i, len, style, fontSize, IEoffsetHeight;
  elements = document.querySelectorAll(selector);
  if (elements.length <= 0) return;
  
  for (i=0, len = elements.length; i < len; i++) {
    el = elements[i];

    // we start from 0px and we grow by 0.5 until the content is too large
    fontSize=0;
    el.style.fontSize = "0px";
    // fix for all IE : I cache the offsetHeight, and if it becomes really bigger than the previous value, then we stop!
    IEoffsetHeight = el.offsetHeight;
    // check if our content is out its box
    while (el.scrollHeight===0 || el.scrollHeight >= el.offsetHeight) {
      fontSize += 0.5;
      el.style.fontSize = fontSize + 'px';

      if (el.offsetHeight - IEoffsetHeight > 10) break;
      IEoffsetHeight = el.offsetHeight;
    }
    el.style.fontSize = (fontSize - 0.5) + 'px';
  }
};
autoSizeText('.ribbon-front > span');

It works for IE8-IE10 and with all modern browsers.

You can see a demo at codepen.

• File Uploaded
• →
• File Reviewed
• →
• File Approved

And the code:

<ul class="steps">
  <li class="step complete">File Uploaded</li>
  <li class="arrow">→</li>
  <li class="step current">File Reviewed</li>
  <li class="arrow">→</li>
  <li class="step">File Approved</li>
</ul>

<style>
body {
  counter-reset:steps
}
ul.steps {
  margin:0;
  padding:0;
}
ul.steps li.step {
  background: none repeat scroll 0 0 lightgray;
  border-radius: 1em;
  color: white;
  display: inline-block;
  font-size: 14px;
  height: 4em;
  line-height: 4em;
  margin: 0 1em;
  position: relative;
  text-align: center;
  width: 9em;
}
ul.steps li.step:before {
  content: counter(steps, decimal) ". ";
  counter-increment: steps;
}
ul.steps li.step.complete:before {
  content: " ";
}
ul.steps li.step.complete {
  background-color: green;
}
ul.steps li.step.current {
  background-color:dodgerblue
}
ul.steps li.arrow {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  color: black;
  display: inline-block;
  font-size: 28px;
  height: 46px;
  line-height: normal;
  margin: 0;
  width: auto;
}
</style>

But if you use jQuery you may want to use this function:

function injectCSS(rule) {
  $("head").append('<style>' + rule + '</style>')
}

// example
injectCSS("div { padding:5px }")

Voici un petit outil en ligne qui permet d'avoir une couleur plus claire ou plus sombre en se basant sur une couleur CSS et en demandant un pourcentage (exprimé entre 0 et 1) à appliquer :

Cette fonction vient directement de stackoverflow.com :

var pad = function(num, totalChars) {
    var pad = '0';
    num = num + '';
    while (num.length < totalChars) {
        num = pad + num;
    }
    return num;
};

// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
    // Trim trailing/leading whitespace
    color = color.replace(/^\s*|\s*$/, '');

    // Expand three-digit hex
    color = color.replace(
        /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
        '#$1$1$2$2$3$3'
    );

    // Calculate ratio
    var difference = Math.round(ratio * 256) * (darker ? -1 : 1),
        // Determine if input is RGB(A)
        rgb = color.match(new RegExp('^rgba?\\(\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '(?:\\s*,\\s*' +
            '(0|1|0?\\.\\d+))?' +
            '\\s*\\)$'
        , 'i')),
        alpha = !!rgb && rgb[4] != null ? rgb[4] : null,

        // Convert hex to decimal
        decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(
            /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
            function() {
                return parseInt(arguments[1], 16) + ',' +
                    parseInt(arguments[2], 16) + ',' +
                    parseInt(arguments[3], 16);
            }
        ).split(/,/),
        returnValue;

    // Return RGB(A)
    return !!rgb ?
        'rgb' + (alpha !== null ? 'a' : '') + '(' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ) +
            (alpha !== null ? ', ' + alpha : '') +
            ')' :
        // Return hex
        [
            '#',
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ).toString(16), 2)
        ].join('');
};
var lighterColor = function(color, ratio) {
    return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
    return changeColor(color, ratio, true);
};

// Use
var darker = darkerColor('rgba(80, 75, 52, .5)', .2);
var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);

Une autre méthode, plus légère, inspirée par stackoverflow:

function LightenDarkenColor(col,amt,usePound,num,f,h,r,b,g) {
  if (col[0]=="#") {
    col = col.slice(1);
    usePound = (usePound==undefined?true:usePound)
  }

  num = parseInt(col,16);
  f=function(n) { return n>255?255:(n<0?0:n) }
  h=function(n) { return n.length<2?"0"+n:n }
  
  r = h(f((num >> 16) + amt).toString(16));
  b = h(f(((num >> 8) & 0x00FF) + amt).toString(16));
  g = h(f((num & 0x0000FF) + amt).toString(16));

  return (usePound?"#":"") + r + b + g;
}

LightenDarkenColor("#FAB787",10);
LightenDarkenColor("#FAB787",-15);
LightenDarkenColor("FAB787",5,true);

J’ai découvert un datepicker qui utilise l’excellent Bootstrap de Twitter (vous savez c’est un ensemble de CSS qu’on peut utiliser pour des effets très réussis), et qui rend comme ça :

Je me suis empressé de l’utiliser dans un projet, jusqu’à ce que je me rende compte qu’il ne fonctionne pas avec Bootstrap v2.0.2, et ni avec IE7+ …. Du coup j’ai modifié le code d’origine pour outrepasser ces divers problèmes (plus d’autres petites choses). J’aurais proposé mon patch au créateur s’il utilisait GitHub, mais ce n’est pas le cas, donc j’ai créé un repository pour ce projet là : https://github.com/Aymkdn/Datepicker-for-Bootstrap

Il ressemble en tout point à la version d’origine, sauf qu’il fonctionne maintenant pour IE et pour la dernière version de Bootstrap. Il permet aussi d’avoir la date du jour comme date par défaut (au lieu du 1/1/1970 ….), et évite d’avoir une date sélectionnée automatiquement lorsqu’on ne fait que passer par le champ en utilisant la touche TAB.

Et bien sûr il y a la démo.

A noter cependant que je rencontre un problème : lorsque j’applique le fichier htc avec behavior alors j’ai ma couleur de fond (background-color) qui devient invisible / disparait. Ce problème peut-être résolu en appliquant la règle CSS suivante (solution trouvée sur leur forum):

* { position:relative }

Grâce à ça tout fonctionne sous IE

Si vous n’êtes pas un webdesigner professionnel, vous vous demandez sans doute quelles polices de caractères sont utilisables sur le Web. Peut-on utiliser une fonte personnalisée? Quelles sont les principales familles de fontes génériques?

C’est ainsi qu’est introduit le billet d’Alsacreation qui vous explique parfaitement les polices disponibles pour la plupart des navigateurs.

Dans cet excellent billet, l’auteur nous propose plusieurs polices de caractères:

/* Polices à empattements (serif) */
font-family: Times, "Times New Roman", "Liberation Serif", FreeSerif, serif;
font-family: Georgia, "DejaVu Serif", Norasi, serif;

/* Polices sans empattements (sans-serif) */
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Impact, "Arial Black", sans-serif;

/* Polices à chasse fixe (monospace) */
font-family: Courier, "Courier New", FreeMono, "Liberation Mono", monospace;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;

Enfin vous pouvez retrouver un tableau très bien fait chez Dustin sur « Web safe and common fonts ».

OpenWeb propose un excellent article nommé « Compatibilité multi-navigateurs des polices de caractères » où ils y expliquent les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web.

Pour résumer, il est conseillé de ne pas utiliser une unité absolue (comme le ‘px’, le ‘pt’, le ‘cm’, etc). Evitez donc de noter dans votre style CSS quelque chose comme:

body { font-size: 15px; } /* défini la taille par défaut de tout le texte */

A cela, préférez des unités relatives, et en l'occurrence l'utilisation de 'em' et de '%'.
Il suffit de définir la taille du texte par défaut en '%' au niveau du body, et d'utiliser 'em' au niveau du reste de vos conteneurs.

Mais comment savoir l'équivalent entre le % et le 'px' ? Pour cela OpenWeb nous propose un tableau d'équivalence :

Ainsi, notre CSS donnera :

body { font-size: 96%; } /* équivaut à 15px */

Grâce à cette méthode, votre texte s'adaptera très bien quelque soit le navigateur et la taille de l'écran de vos lecteurs.