Expand clickable areas for a better touch experience

expand-areaOn mobile phones/tablets, where touch gestures comes into place, it's sometimes hard to target little links with your finger. Mostly because it was primarily designed for a desktop use. Jacob Rossi, an Internet Explorer 10 engineer who worked on the awesome Microsoft's pointer API (yeah true story man), said at the 2013 W3Conf that every touch oriented elements should be at least 40x40 pixels wide, to ensure the best user experience.

Continue reading ...

Pure CSS 3 fancy separator

I recently had to reproduce a fancy "kinda separator" and I gave it a try in pure css. The result is quite cool. It works like a charm in ie9, Chrome, Safari, Opera and Firefox.

If you're using Firefox you'll notice (or not) that the dashed rounded border is "solid" rather than being "dashed" (inside the white circle)... Well there's a bug about it in Firefox opened since 2007... dashed border simply doesn't work when a border-radius is applied to it. Too bad... Well the guys at Webkit's have the solution, wonder why Firefox didn't implemented it jet.

Anyway the :after shadow border works great every where I tested it so it's a quite robust ie9+ technique. I need to apply a degraded version for ie8, maybe just a simple grey border.

Here's the Codepen version. You can play with the tabs to see how it works underhood.

Les picto fontes ou comment se simplifier la gestion des icones

Les icônes sur le web en 2012, une vraie galère

Ces petits éléments graphiques si chers à nos design sont essentiels, s'ils sont bien choisis ils apportent beauté et compréhension à l'expérience utilisateur de l'internaute. Le hic c'est qu'il est compliqué de les gérer pour un webmaster. Problèmes de résolutions d'écrans, de tailles, de couleurs, etc. Il faut sans cesse changer tel ou tel icone à tel ou tel endroit du site parce que tel autre picto ferait mieux l'affaire... Continue reading ...

Faire déborder des éléments en dehors d’un parent en overflow hidden

Quel intégrateur HTML n'a pas un jour rencontré le cas de figure où il a besoin de faire déborder un élément par rapport à son parent et là, aïe... le parent en question est en overflow:hidden... Eh oui cette propriété fonctionne comme un masque qui cache tout ce qui dépasse (on s'en sert aussi beaucoup pour résoudre le fameux problème de float). Voie sans issue donc ? Non voilà une astuce :) Prenons un exemple d'une div parente en overflow:hidden qui contient une div enfant en position:absolute; et on la décale de manière à essayer de la faire déborder.

L'HTML

<div class="parent">
  <div class="enfant"></div>
</div>

Le CSS

.parent {
  position:relative;
  overflow:hidden;
  margin:0 auto;
  height:100px;
  box-shadow:inset 0px 0px 12px #555;
  background-color:white;
}
.enfant {
  position:absolute;
  top:-10px;
  left:-5px;
  width:30px;
  height:30px;
  background-color:rgba(30,110,190,.8);
}

Le rendu

Bon donc oui on se rend bien compte que ça ne marche pas. Le petit carré bleu est mangé dans l'overflow hidden de son parent.

La solution

Le trick se situe dans le fait de NE PAS définir de propriété "position" (absolute / static / relative / fixed) sur la div qui possède l'overflow hidden (juste ne rien mettre) et là... magie le contenu en absolute apparaîtra en dehors de l'overflow.

L'HTML

<div class="fakeParent">
  <div class="parent">
    <div class="enfant"></div>
  </div>
</div>

Le CSS

.fakeParent {
  position:relative;
}
.parent {
  /* position:relative; */
  overflow:hidden;
  margin:0 auto;
  height:100px;
  box-shadow:inset 0px 0px 12px #555;
  background-color:white;
}
.enfant {
  position:absolute;
  top:-10px;
  left:-5px;
  width:30px;
  height:30px;
  background-color:rgba(30,110,190,.8);
}

Le rendu

 

Attention justement à cet absolute qui du coup va remonter le DOM jusqu'à trouver un parent pour le contenir (en l'occurrence un parent en relative OU en absolute). Donc il est judicieux d'encapsuler le tout dans une nouvelle div parente sur laquelle on met simplement le position:relative. Et voilà, le tour est joué !

Simple hein ? Evidemment on est pas obligé de CRÉER une nouvelle div spécialement pour ça. On pourrait utiliser une div parente déjà existante dans la page et qui pourrait faire l'affaire. Mais bon ce n'est pas toujours possible donc on rajoute juste un parent supplémentaire (l'exemple de notre fakeParent) ce qui aura finalement peu d'impacte en terme de performance sur notre application / site web.

Ressources

Article de Thierry Koblentz en anglais énumérant les différentes manières de « clearer les float » et démontrant l'utilisation de la technique évoquée dans ci-dessus :
L'article lui même
Page de démo

Mieux organiser ses fichiers CSS avec SASS

Déjà SASS c'est quoi ?

Alors SASS ou bien SCSS est un langage qui permet d'améliorer nos CSS traditionnels. C'est basé sur Ruby et ça s'installe sur l'ordinateur en tant qu'exécutable. Vous écrivez votre CSS de manière plus sympa et ensuite ça compile ce que vous avez écrit en une feuille de style CSS tout ce qu'il y a de plus classique. Et c'est cette feuille de style que votre page web appelle. Cette étape de compilation peut soit être faite à la main ou bien peut se faire tout seule chaque fois que vous faite une modification. SASS a un concurrent direct qui s'appelle LESS et qui fait sensiblement la même chose avec quelque légères variantes syntaxiques.

Un petit tour du propriétaire

Voilà le topo. Aujourd'hui ce qui se fait le plus couramment c'est d'écrire tous les styles dans un seul gros fichier CSS qui s'appelle presque à coup sûr style.css.

<head>
  <link rel="stylesheet" href="css/style.css">
</head>

Le plus gros problème avec cette manière de faire concerne l'administration de style.css sur le long terme. En effet avec un fichier qui fera entre 1000 et x millier de lignes, bah au bout d'un moment plus personne sait où on en est. Donc là une manière simple de faire serait de fragmenter style.css en plusieurs fichiers distincts. Comme ceci par exemple :

<head>
  <link rel="stylesheet" href="css/grid.css">
  <link rel="stylesheet" href="css/header.css">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="css/lightbox.css">
  <link rel="stylesheet" href="css/tooltip.css">
  <link rel="stylesheet" href="css/ce-que-vous-voulez.css">
</head>

Ici c'est effectivement plus clair dès le premier coup d'oeil mais on trouve deux inconvénients majeurs à cette manière de faire. Premièrement il faut sans cesse maintenir à jour les appels css du <head>, ce que je déteste faire parce que je suis un gros feignant :P et deuxièmement ce n'est pas ce qu'il y a de mieux pour les performances de chargement. Simplement parce que chaque requête HTTP évitée est un gain généralement non négligeable. L'exemple le plus flagrant c'est l'iPhone et l'iPad qui aujourd'hui ne sont pas capables de paralélliser les requêtes. Ceux-ci chargent chaque fichier CSS (ou autres) un par un... Pas top du tout donc. Bon sinon on pourrait peut-être tirer parti de la propriété css @import... Cette propriété permet d'inclure un fichier css dans un autre. Déjà premier avantage : ça permet de revenir à un fichier unique qui est chargé dans la page.

<head>
  <link rel="stylesheet" href="css/style.css">
</head>

Et maintenant dans style.css, voilà à quoi ça ressemblerait :

/* je suis un fichier CSS */
@import "css/grid.css";
@import "css/header.css";
@import "css/footer.css";
@import "css/lightbox.css";
@import "css/tooltip.css";
@import "css/ce-que-vous-voulez.css";
...

Ah là c'est pas mal ! C'est propre on a plusieurs CSS qui sont appelés à l'intérieur de style.css et du coup style.css lui est le seul fichier appelé dans la page donc une seule requête HTTP pour la page, pas mal.

Mais là encore malheureusement c'était sans compter sur cet @import et de son interprétation dans nos navigateurs... En effet cette technique empêche nos navigateurs de paralélliser les requêtes HTTP et sont donc obligés de charger les différents fichiers CSS un par un... Encore pire que la méthode précédente.

Bon et donc comment SASS pourrait-il m'aider à mieux organiser mes CSS ?

Et bien tout simplement en utilisant à nouveau le @import mais cette fois-ci celui de SASS, PAS CELUI de CSS. En fait SASS (et LESS aussi d'ailleurs) permet lui aussi d'inclure des fichiers sass les uns dans les autres. Sauf que ça se fait côté environnement de développement et non plus côté navigateur au moment de l'affichage de la page. En fait voilà comment ça se présenterait dans le navigateur :

<head>
  <link rel="stylesheet" href="css/style.css">
</head>

Donc un seul fichier CSS. Cool ! Et comme on est en SASS en fait on ne travaille pas directement dans ce fichier style.css on travail dans sa version SCSS (ou SASS) c'est à dire qu'on travaille dans style.SCSS qui est ensuite transformé en style.CSS.

Donc depuis le fichier SCSS on peut importer d'autres fichiers SCSS !

// je suis un fichier SCSS/SASS
@import "scss/variables.scss";
@import "scss/mixins.scss";
@import "scss/grid.scss";
@import "scss/header.scss";
@import "scss/footer.scss";
@import "scss/lightbox.scss";
@import "scss/tooltip.scss";
...

Et là on tire profit à la fois de la performance dans le navigateur grâce à un seul fichier CSS et également de la clarté du code grâce à la fragmentation en plusieurs fichiers distincts.

Pas mal hein ? :)

Remarque importante

Vous noterez au passage les deux premiers @import : variables.scss et mixins.scss. En les important en tout premier on peut en faire profiter tous les fichiers SCSS suivants. Exemple : on a un mixin qui s'appelle border-radius(); qui est définit dans mixins.scss, et on peut l'utiliser sans soucis dans tooltip.scss qui lui est importé en dernier. Idem pour les variables ! C'est juste génial on a du coup même pas besoin de faire des @import "scss/variable.scss" et @import "scss/mixins.scss" en haut de chacun des autres fichiers !

Encore mieux hein ? :P

Ressources

• Le site de SASS et celui de LESS
• Article Alsacréations : N'utilisez pas @import
Don't use @import css rule
• Mon propre mini boilerplate qui utilise cette technique (avec des vrais morceaux de Twitter Bootstrap dedans)