Expand clickable areas for a better touch experience

On 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 40×40 pixels wide, to ensure the best user experience.

Continue reading “Expand clickable areas for a better touch experience” →

How to target old versions of Internet Explorer in our CSS in 2013

This is how I like to do in my projects, it may be or may be not the best solution but it works just fine for me, hope you’ll find it useful.

I find myself following these 2 rules :
* Is there a better approach in order to avoid specific ie version targeting?
* If ie specific styles are required, how can I avoid code scattering at all cost?

Continue reading “How to target old versions of Internet Explorer in our CSS in 2013” →

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.

See the Pen Shadow separator by Julien Knebel (@jkneb) on CodePen.

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 “Les picto fontes ou comment se simplifier la gestion des icones” →

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.

Continue reading →

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.

Continue reading →