Placer un break point pour écouter une interaction JS avec un élément du DOM

Vous est-il jamais arrivé de vous arracher les cheveux pour trouver quelle ligne de js était à l’origine d’un comportement étrange dans la page ? La situation s’apparente assez à : “chercher une aiguille dans une botte de foin” ?

Eh bien je viens de découvrir une super astuce dans la console (sans doute présente depuis toujours). Il suffit d’inspecter l’élément, de lui faire un click droit et de choisir l’un des trois comportement suivant :

Continue reading “Placer un break point pour écouter une interaction JS avec un élément du DOM” →

Les glyph icons et l’antialiasing

Je me suis mis il y a peu à la technique des glyph icons, en gros ça permet de gérer les pictos sous forme de fonte (donc c’est du texte) pour profiter de la foultitude de bénéfices que le vecteur peut apporter dans ce domaine. J’ai parlé de la technique dans un précédent billet et ce présent article est un peu mon retour d’expérience.

Alors il y a deux approches, soit vous cherchez des packs d’icônes vectorisés libre de droits, il suffit de choisir un pack d’icônes qui vous plaît, personnellement je vais sur icomoon, leur bibliothèque d’icônes à triplé en 3 mois, l’interface est cool et pis c’est gratos). Bon ça c’est fastoche je ne vais pas m’étendre là-dessus.

Continue reading “Les glyph icons et l’antialiasing” →

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” →

Get rid of the black layer when click event on iOS

On iOS devices, when you click on something you get this black semi-transparent layer for a second or less. What if you would to hide it?

To get rid of it you can apply this css rule:

a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

It says every single “a” elements will be black (the 3 first values of the rgba function) and completely transparent (the last value, 0 means fully transparent, 1 means fully opaque).

-webkit-tap-highlight-color is an iOS css rule so you’re targeting only Apples devices.

But this selector is a bit to wide, adjust it in each case, something like this would be maybe more appropriate:

.btn, input, select, .navbar a,
.close-btn, .etcetera {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

As a side note, be aware that you may need to add an !important at the end of the rule to make it override every thing. Usually !important are considered as bad practice but here you’re targeting only iOS devices and on a very limited use case.

Resources

* Official Apple Documentation (with many other iOS css rules)

Enlever le layer noir au click event sur les appareils iOS

Sur iPad ou iPhone quand on click sur quoi que ce soit, on voit apparaître pendant environ une seconde un layer noir transparent par dessus l’élément html en question. C’est plutôt moche et ça donne l’impression de ralentir l’expérience utilisateur.

Pour s’en débarrasser il vous suffit d’appliquer cette propriété css sur les éléments qui vous intéressent :

a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

En gros ça dit que la couleur de -webkit-tap-highlight-color sur tous les <a> est noire (les 3 premiers zéros dans rgba) et que son opacité est à zéro. Continue reading “Enlever le layer noir au click event sur les appareils iOS” →

SASS et LESS : mixin pour multiple shadow

J’ai posté une astuce il y a peu pour rendre mon mixin SASS box-shadow compatible avec plusieurs shadows dans la même déclaration. Je me suis retrouvé avec un truc assez moche et surtout très redondant.

Sans plus attendre…

Mixin multiple box-shadow v2

@mixin box-shadow($params) {
  -webkit-box-shadow : #{$params};
     -moz-box-shadow : #{$params};
          box-shadow : #{$params};
}

Voilà comment ça s’utilise :

@include box-shadow( "0 0 5px #333 , inset 0 0 2px #666" );

Et c’est tout ! 😀

En fait le principe est de passer une STRING en paramètre (donc concrètement tout ce que vous voulez) puis dans le code du mixin on se sert des #{ } pour échapper les guillemets.

Continue reading “SASS et LESS : mixin pour multiple shadow” →

Ras le bol de devoir return false sur les balises link au click event ?

Si vous aussi vous en avez marre de devoir spécifier (ou carrément d’oublier de spécifier) les return false sur les balises <a href="#"></a> pour éviter que l’internaute soit violemment expulsé en haut de la page quand il clique sur le lien en question, eh bien sachez qu’une lecture rapide de la doc du W3C concernant les balises link vous aurait appris que l’attribut href est optionnel !

Citation W3C :
“Authors may also create an A element that specifies no anchors, i.e., that doesn’t specify href, name, or id. Values for these attributes may be set at a later time through scripts.”
++

Traduction :
“Les auteurs peuvent aussi créer un <a> qui ne spécifie pas d’ancre, par exemple, qui ne spécifie ni href, ni name ou id. Les valeurs pour ces attributs peuvent être set up plus tard via des scripts.”

Il vous est donc possible d’écrire vos liens comme ceci dans vos pages :

# html
<a id="bob" class="leponge">click me!</a>

# js
$('#bob').on('click', function(){
    noNeedToReturnFalseYou(ahahah);
});

# css
a { cursor:pointer; }

Et voilà plus besoin d’annuler le comportement habituel du lien en javascript au moment du click.

SASS : un mixin box-shadow qui supporte plusieurs shadows

Mon mixin box-shadow me rend bien des services, il permet d’écrire :

UPDATE : j’ai trouvé beaucoup plus simple que la technique décrite ici.

@include box-shadow(0px 0px 5px #666);

Qui est ensuite compilé en ça :

-webkit-box-shadow: 0px 0px 5px #666;
   -moz-box-shadow: 0px 0px 5px #666;
        box-shadow: 0px 0px 5px #666;

Le code SCSS de mon mixin en question :

@mixin box-shadow($params) {
  -webkit-box-shadow: $params;
     -moz-box-shadow: $params;
          box-shadow: $params;
}

Malheureusement il ne marche pas si on essaye de lui passer plusieurs shadows pour la même déclaration. Un truc comme ça quoi :

box-shadow: 0px 0px 10px #666,
            0px 0px 15px #666,
            0px 0px 20px #666,
            etc...

Pas moyen d’y arriver avec mon mixin tel quel…

Donc après quelques recherches du côté de Compass puis du côté de StackOverflow je l’ai modifié pour lui permettre de supporter plusieurs shadows dans la même déclaration (9 shadows maximum pour être plus exacte, on va dire que ça suffira hein) 😛

Et voilà, mon petit mixin tout mignon du début s’est transformé en cette chose énorme, immonde et illisible :

@mixin box-shadow( $shadow1, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false, $shadow6:false, $shadow7:false, $shadow8:false, $shadow9:false ) {
$params: $shadow1;
@if $shadow2 { $params: $shadow1, $shadow2; }
@if $shadow3 != false { $params: $shadow1, $shadow2, $shadow3; }
@if $shadow4 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4; }
@if $shadow5 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5; }
@if $shadow6 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6; }
@if $shadow7 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7}
@if $shadow8 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7, $shadow8 }
@if $shadow9 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7, $shadow8, $shadow9 }

-webkit-box-shadow: $params;
   -moz-box-shadow: $params;
        box-shadow: $params;
}

Et ça s’utilise comme ça :

@include box-shadow( 0px 0px 5px blue, 0px 0px 5px lightBlue, etc. );

Donc 9 shadows max. Mais on peut toujours paramétrer le mixin pour qu’il en accepte plus.

Je vais quand même chercher un moyen de simplifier tout ça, peut-être avec @each je sais pas mais ça vaudrait le coup. Enfin bon au moins maintenant il supporte le multiple shadows ! 😀

UPDATE : j’ai trouvé beaucoup plus simple que la technique décrite ici.

How to make absolute positioned elements overlap their overflow hidden parent

I believe, every front-end developer encountered this situation, at least once. Let’s say you need to absolute position something… And then you try to move it in some direction, and boom it disappears… You forgot the parent was set to overflow:hidden and now your element is lost in the hidden infinite vacuum.

Well, usually it ends by putting the absolute element outside of the annoying overflow:hidden parent, and you grumbling about how CSS sucks and so on… Actually you’re quite right. CSS do sucks a lot, even CSS3, I mean … ok no troll here 🙂

Let me show you a neat trick.

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.

Continue reading →