Cahnory

Un simple développeur web qui souhaite communiquer sa passion, ses trouvailles et son humble savoir.

[cahnory]

Effectively remove whitespaces between inline-block elements

Background

A few years or even a decade ago, the float property was almost exclusively used to horizontally align elements. Inline-block was like a breath of fresh air when it came out of the shadows. There were no more double margin bugs, clearers, or float holders, left, right, and centre alignment became easy.

The niggle

Because we were only too happy to use this new tool or because the need was not systematic, we ignored a small problem for a short while.

Why are there spaces between my elements?

The spaces between inline-block elements are visible bit this was nothing, at most a thorn in the integrator's side. After all, if spaces were displayed it was because they were there. So they just needed to be deleted.

HTML solutions

The snag is that to delete spaces the tags need to be aligned on kp (kilopixels) which is neither pleasant nor easy to read. Luckily, integrators are clever and workarounds quickly appeared:

<ul> <li>    A</li><li>    B</li><li>    C</li> </ul> <ul> <li>A</li ><li>B</li ><li>C</li> </ul> <ul>    <li>A    <li>B    <li>C </ul> <ul>    <li>A</li><!-- --><li>B</li><!-- --><li>C</li> </ul>

(source: https://css-tricks.com/fighting-the-space-between-inline-block-elements/)

The code was now more readable but this imposed rigour was concerning as there were indentation or, regarding the last method, DOM overload problems.

CSS solutions

Another process needed to be found. After all, that is what the CSS was made for isn't it?

Once again, a few solutions were found:

negative margins

font-size at 0

These were all unsatisfactory as they required values or value resets that were practically specific to each case of use. CSS-Tricks presents these very well along with a short introduction to flexbox.

The universal solution

By universal, I mean something that works independently to the context, including font-size.

ul { display: table; display: block\0; word-spacing: -2em; width: 100%; } li { display: inline-block; word-spacing: normal; }

In case you have not already noticed, an element in display: table does not show spaces. This is exactly what we want except for certain versions of IE, which are still far too popular, on which it does not work.

word-spacing to the rescue

The word-spacing property deletes spaces for IE and, best of all, a value that is greater than that necessary continues to do exactly what you ask it to do. In other words, if it is defined sufficiently high, the property will function irrespective to the size of these famous spaces. 2em should be amply sufficient.

With display: table, the width of the box changes. Width is set at 100% to harmonise display on the various browsers.

Update: display: block is restored for IE 8+ in order to be able to control overflow.

Compatibility

The versions presented here are therefore the oldest I was able to test but compatibility could be wider.

Chrome 14+

Dolphin 11.4+

Firefox 10+

IE 5.5+

Nintendo 3DS

Opera 11.6+

Safari 5.1+

Another fix to consider

If spaces have been deleted, you could encounter other problems during use which I feel are relevant to cover here.

Inline-block and old IE

If you want inline-block to be compatible with Internet Explorer versions prior to 8, here is a solution.

li { *display: inline; *zoom: 1; }

Dolphin and content at 100%

On this browser, a child box with a width of 100% will not take up all of the space. For this, it must have a child itself in display: block.

li:before { content: ''; display: block; }

Final style

ul { display: table; display: block\0; word-spacing: -2em; width: 100%; } li { display: inline-block; word-spacing: normal; *display: inline; *zoom: 1; } li:before { content: ''; display: block; }

Thanks to Nicolas Hoffmann for article corrections.

[cahnory]

Supprimer les espaces efficacement

Historique

Il y a quelques années, voir maintenant une décennie, l'alignement horizontal d'éléments ne passait presque qu'exclusivement par l'utilisation de la propriété float. Quand inline-block sortit de l'ombre, ce fut comme une bouffée d'air frais. Oubliés les double margin bug, clearer ou float holder, l'alignement s'annonçait facile, et ce à gauche, à droite comme au centre !

Le détail qui chiffonne

En réalité, trop contents de bénéficier de ce nouvel outil ou parce que la nécessité n'était pas systématique, nous ignorions pour un temps seulement une petite problématique.

Pourquoi j'ai des espaces entre mes éléments ?!

Les espaces présents entre des éléments inline-block sont visibles. Ce n'était rien, tout au plus une écharde dans le pied de l'intégrateur. Après tout si les espaces s'affichaient c'est parce qu'ils étaient là. Il suffirait donc de les supprimer.

Les solutions html

Oui mais voilà, supprimer les espaces c'est aligner des balises sur des kp (kilopixel) et ce n'est ni agréable ni très lisible. Heureusement l'intégrateur sait se montrer astucieux et les parades ne se firent pas trop attendre :

<ul> <li> A</li><li> B</li><li> C</li> </ul> <ul> <li>A</li ><li>B</li ><li>C</li> </ul> <ul> <li>A <li>B <li>C </ul> <ul> <li>A</li><!-- --><li>B</li><!-- --><li>C</li> </ul>

(source : https://css-tricks.com/fighting-the-space-between-inline-block-elements/)

Le code est maintenant plus lisible mais cette rigueur imposée dérange d'autant qu'elle ne va pas sans poser des problèmes d'indentation ou, en ce qui concerne la dernière méthode, de surcharge du DOM.

Les solutions CSS

Il fallait trouver une autre façon de procéder. Après tout, le CSS est fait pour ça non ?

Encore une fois, on trouva quelques solutions :

marges négatives

font-size à 0

Toutes peu satisfaisantes car demandant des valeurs ou reset de valeurs spécifiques à chaque cas d'utilisation ou presque. CSS-Tricks en fait très bien la présentation accompagné d'une courte initiation à flexbox.

La solution universelle

Et par universelle, j'entends qui fonctionnera indépendamment du contexte, notamment du font-size.

ul { display: table; display: block\0; word-spacing: -2em; width: 100%; } li { display: inline-block; word-spacing: normal; }

Si vous ne l'aviez pas remarqué, un élément en display: table n'affiche pas les espaces. C'est parfaitement ce que nous désirons, sauf que certaines versions d'IE, dont certaines encore trop utilisées, ne le supportent pas.

word-spacing à la rescousse

C'est la propriété word-spacing qui s'occupera de supprimer les espaces pour IE et, comble du bonheur, une valeur plus grande que nécessaire continue de ne faire que ce qu'on lui demande. Autrement dit, en la définissant suffisamment élevée, la propriété fonctionnera indépendamment de la taille de ces fameux espaces. 2em devraient amplement suffirent.

Avec display: table, le contenant voit sa largeur changer. Afin d'harmoniser l'affichage sur les différents navigateurs, nous fixons sa largeur à 100%.

Mise à jour : display: block est redéfini pour IE 8+ afin de pouvoir contrôler l'overflow.

Compatibilité

Les versions présentées ici sont donc les plus anciennes que j'ai pu tester, il se peut donc que la compatibilité soit plus large.

Chrome 14+

Dolphin 11.4+

Edge

Firefox 10+

IE 5.5+

Nintendo 3DS

Opera 11.6+

Safari 5.1+

Autre fix à considérer

Si les espaces sont bien supprimés, à l'utilisation vous pourrez rencontrer des problèmes annexes qu'il me semble bon de couvrir ici.

Inline-block et vieux IE

Si vous souhaitez rendre compatible inline-block avec les versions d'Internet Explorer précédant la 8, voici une solution :

li { *display: inline; *zoom: 1; }

Dolphin et contenu à 100%

Sur ce navigateur, un enfant de contenant dont la largeur serait 100% n'occupera pas tout l'espace. Pour cela, il devra avoir lui-même un enfant en display: block.

li:before { content: ''; display: block; }

Style final

ul { display: table; display: block\0; word-spacing: -2em; width: 100%; } li { display: inline-block; word-spacing: normal; *display: inline; *zoom: 1; } li:before { content: ''; display: block; }

Merci à Nicolas Hoffmann sans qui ce texte serait truffé de fautes :)

[cahnory]

setx /M PATH "%PATH%;%APPDATA%/npm"

Un utilisateur de node.js sur windows

[cahnory]

Sélectionner les x premiers éléments

Pour sélectionner les x premiers éléments en css il existe une méthode simple mais qui ne m'était jamais venu à l'idée jusqu'à ce matin :

:nth-child(-n + x){} // remplacez x par le nombre d'éléments désirés

Notez que si le parent contient moins d'éléments que désiré, les éléments présents seront tout de même ciblés.

[kaelig]

TL;DR

CSS doesn’t allow us (yet) to scope our styles to a particular component in an HTML document (unless we use iframes…). We can try to circumvent this limitation by respecting the global CSS namespace.

We usually can safely set typography styles globally, but when it comes to form...

[cahnory]

Test : target, checked et sélecteurs adjacents

La combinaison des pseudos-classes :target et :checked et des sélecteurs adjacents (+ et ~) se révèlent très puissante. Elles nous permettent, de styler des éléments en fonction d'un état binaire et ont permis notamment l'apparition de menu déroulant ne nécessitant pas javascript pour fonctionner.

Après que l'on m'ait remonté quelques bugs sur certaines des combinaisons possibles, j'ai voulu faire un point sur celles-ci. J'ai donc préparé une page visant à les tester et vous invite à vous y rendre avec différents navigateurs, différents os, différents appareils,… en multipliant donc au maximum les contextes (mais il va sans dire qu'un unique retour sera autant apprécié).

Edit : La page de test : http://cahnory.fr/css/tests/checked-target.html 

Vous pouvez poster vos retours (succès comme échecs) dans les commentaires de cet article en n'oubliant pas de préciser le contexte pour chaque résultat. Je compilerai ces résultats au fur et à mesure.

Une nouvelle page de test avec un formulaire pour soumettre vos résultats est disponible : http://cahnory.fr/css/tests/checked-target2.html --

Merci à vous !

[cahnory]

Regex : changer rapidement les & en &

J'ai pris très tôt la bonne habitudes de valider mes documents html. Comme toute personne un minimum consciencieuse. À force on fini par ne plus trop faire d'erreur, on vérifie simplement que des étourderies ne se soient pas glissées ça et là.

Pour y remédier, je met à disposition une regex simple qui vous permettra de très vite les trouver et donc les convertir :

\&(?![a-zA-Z0-9#]+\;)

Comme vous l'aurez certainement remarqué, cette regex prend garde de ne pas convertir les & utilisés pour la déclaration d'entité. Aucun risque, à priori, de double encodage, à une limitation près. Je me suis basé sur ma mémoire pour dresser la liste des caractères autorisés dans les noms d'entités (alphanumériques et le signe #). Il n'est pas impossible que je soit passé à coté d'autre caractères autorisés. Si vous remarquez un oubli, ou, si vous avez une documentation sur le sujet n'hésitez pas à me le faire savoir !

[cahnory]

[cahnory]

Regex : valider une adresse IP v4

Je suis régulièrement sur le chat de developpez.com où j'essai de répondre aux questions posées dans la limite du possible et de mon humeur. Force est de constater que les questions concernants les expressions régulières reviennent souvent. N'ayant pas pour habitude de conserver toutes les réponses, je me suis dit qu'il pourrait être intéressant de les poster ici avec plus ou moins d'explication sur comment j'arrive au résultat voulu.

Je commence avec une question posée ce matin (j'évite en général d'aller sur le chat pendant mes heures de travail mais il se trouve que j'avais une question à poser moi aussi) :

comment valider une IP v4 ?

Analyse

Une IP v4 est constituée de 4 nombres séparés par des points. Chaque nombre obéit aux mêmes règles :

le nombre doit être compris entre 0 et 255 inclus

à l'exception du nombre 0, il ne doit pas commencer par le chiffre 0 (01 et 047 ne sont pas valides)

Nous allons donc nous attarder en premier lieu sur la regex de l'un de ces nombres, la suite ne sera plus qu'une formalité.

Je sépare les possibilités selon 4 cas, basés sur le chiffre qui commence le nombre. Nous avons les nombres :

de 0 à 9 (seul cas où le nombre peu commencer par tous les chiffres)

de 10 à 99 (seul cas où le nombre peu commencer par tous les chiffres sauf 0)

de 100 à 199 (nombres ne commençant que par 1)

de 200 à 255 (nombres ne commençant que par 2)

Le dernier cas sera lui même séparé en fonction de la dizaine, déterminant les possibilités de l'unité :

pour les dizaines allant de 0 à 4, les unités iront de 0 à 9

pour celle de 5, les unités irons de 0 à 5 (250 à 255)

Mise en pratique

Le premier cas est très simple :

[0-9]

Le second pas bien compliqué non plus :

[1-9][0-9]

mais si vous êtes familiarisé avec les regex, vous aurez sans doute noté que l'on pouvait fusionner nos deux premier cas de la sorte :

[1-9]?[0-9]

Le troisième cas :

1[0-9]{2}

Et enfin le quatrième cas, divisé en deux regex :

2[0-4][0-9]

et

25[0-5]

Maintenant il ne nous reste plus qu'à regrouper toutes ces possibilités pour avoir la regex complète d'un nombre d'une adresse IP

[1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]

Pour valider complètement l'adresse IP, il faudra que ce motif apparaîsse 4 fois successives. Les trois premières apparitions du motif seront suivies d'un point :

(?:(?:[1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}

Notez que le motif ?: peut être retiré, il indique simplement que le contenu des parenthèse ne doit pas être capturé. Si vous ne comprenez pas bien cette notion, sachez simplement que c'est facultatif dans le cas présent.

Maintenant nous ajoutons simplement la quatrième apparition du motif ainsi que les indicateur de début et fin de chaîne (^ et $) :

^(?:(?:[1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}(?:[1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$

Notre regex est maintenant terminée est prête à l'emplois !

[cahnory]

Effets de pression "façon OS X" en CSS3

L'explication est assais simple, nous allons utiliser les pseudos éléments ::before et ::after, placés à l'extérieur du bouton, de chaque coté à l'aide d'un positionnement absolute. Tandis qu'un overflow: hidden masquera ces élément, leur ombre portée créée à l'aide de la propriété box-shadow chevauchera elle les boutons créant l'illusion d'une ombre interne à celui-ci.

Une fois le principe intégré, il ne reste plus qu'à s'amuser un peu avec les propriétés à notre disposition pour varier les effets. Ici, on jouera principalement du border-radius, de la taille des pseudos éléments ainsi que de la position de ceux-ci.

Un exemple étant bien plus parlant, je vous invite à consulter celui que je me suis amusé à faire. Pour chaque effet, j'ai ajouté une version laissant apparaître les pseudos éléments, vous pourrez ainsi mieux visualiser leur fonctionnement.

N'hésitez pas à partager vos propres variations ;)

[cahnory]

Des checkbox/radio slider uniquement en CSS

Popularisé par iOS, le checkbox slider est un élément d'interface utilisateur très apprécié (des concepteurs tout au moins). Il existe beaucoup de plugins JavaScript permettant de transformer les habituelles checkboxes en slider mais vous allez voir qu'il est possible d'y parvenir à l'aide de CSS seulement. Tout cet article parlera de checkbox mais vous pouvez (techniquement) l'appliquer à des boutons radio.

Côté HTML

Nous allons devoir ajouter un élément à la suite de notre checkbox et, encapsuler le tout dans un label. Nous lui donnerons deux attributs data qui contiendront des "labels" pour les états checked et unchecked. Nous les afficherons à l'aide des pseudo éléments ::before et ::after. Les attributs data implique l'utilisation d'HTML5.

<label><input type="checkbox" /><span class="checkslide" data-checked="on" data-unchecked="off"></span></label>

Nous aurions pu nous passer de cet élément supplémentaire mais, si webkit permet l'utilisation des pseudo éléments ::before et ::after (constaté sous chrome) il n'en est rien des autres navigateurs et surtout, c'est contraire aux specs.

Côté CSS

Mettre notre .checkslide et l'input dans le label permet de checker et unchecker l'input en cliquant sur .checkslide. Mettre le .checkslide à la suite de l'input va nous permettre d'utiliser la technique dite du "checkbox hack" et styliser notre .checkslide en fonction de l'état checked de l'input :

input:checked ~ .checkslide::after {     content: attr(data-checked); } input:not(:checked) ~ .checkslide::after {     content: attr(data-unchecked); }

Ici, notre checkbox sera suivi de on ou off selon qu'elle est checked ou non. Ce qu'il y a de bien avec cette technique c'est que notre checkbox reste une checkbox classique sauf si le navigateur supporte :checked, :not, ::after et ::before. La bonne nouvelle c'est que jusqu'à preuve du contraire, les navigateurs qui supportent :checked supportent également :not, ::after et ::before.

On habille le tout

Maintenant nous allons donner à notre élément l'apparence d'un checkbox slider et il y a plusieurs façons d'y parvenir. Ce qu'il faut retenir c'est que si nous voulons appliquer des styles à .checkslide, il faut utiliser, dans le sélecteur, :checked pour que ceux-ci ne s'appliquent qu'aux navigateurs concernés. Cela va souvent nous obliger à les doubler :

input:checked ~ .checkslide, input:not(:checked) ~ .checkslide {     background: #999; }

Quelques styles plutard nous voilà avec quelques exemples de checkbox sliders compatibles Firefox, Opera, Chrome, Safari et Internet Explorer 9 et +. À voir sur dabblet.

Au passage, dabblet est un excellant outil créé par Lea Verou qui, contrairement à ce qui a pu être dit par erreur n'est pas une activiste des propriétés vendeurs mais bel et bien du web standard comme nous l'aimons ;).

[cahnory]

Les (fav|apple-touch-|speed-dial-)icons

Bien connus de tous les développeurs web, le favicon fut pendant longtemps la seule icone dont on avait à se soucier. Aujourd'hui ce n'est plus le cas et un point s'impose afin de gérer au mieux cet aspect certe mineur mais ô combien plaisant de nos sites internets.

Au commencement était le favicon.ico

Le vétéran des icones de site c'est lui et sa première apparition remonte avant sa normalisation par le W3C, sous Internet Explorer 5. Pour l'utiliser il y a quelque règles à respecter.

Premièrement, votre fichier doit réellement être de type ico. J'entend qu'il ne suffit pas de changer l'extension de votre fichier image en ico pour qu'il fonctionne correctement avec Internet Explorer (ou en tout cas pas toujours). À titre personnel j'utilise le site www.favicon.cc.

Ensuite nous indiquons au navigateur où se situe le fichier à l'aide d'une balise meta :

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Sachez que pour Internet Explorer 5, il faudra que le fichier soit situé à la racine du serveur (ce que vous pouvez truquer à l'aide du mode Rewrite d'Apache).

Un peu plus de transparence

Le favicon nous permet un niveau de transparence, c'est pas mal mais on peut avoir mieux. Nous allons utiliser un fichier favicon.png de type png24. Celui-ci ne sera utilisé que s'il est supporté. Dans le cas contraire, ou, devrais-je dir sous Internet Explorer, c'est le favicon.ico qui le sera. Pour que ce mécanisme opère il faut déclarer la version png après la version ico :

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="shortcut icon" type="image/png" href="favicon.png" />

Les apple-touch-icon c'est trognon

C'est avec l'iPod touch que l'apple-touch-icon fit sont apparition. L'icone est automatiquement modifiée, une ombre portée et un effet "glossy" lui sont appliqués et ses coins sont arrondis. Avec la multiplication des supports, différentes tailles d'apple-touch-icon ont fait leur apparition.

Nous allons utiliser des icones dites precomposed. C'est à dire que l'effet glossy ne leur sera pas appliqué, en revanche les bords arrondis et l'ombre portée ne sont pas désactivables. Nous allons avoir 4 déclinaisons de notre icone :

Une icone precomposed de 114x114px

Une icone precomposed de 72x72px

Une icone precomposed de 57x57px

Une icone de 57x57px

La dernière icone étant utilisée par d'anciennes version d'iOS ainsi que d'autres appareils.

Nous allons déclarer nos icones à l'aide de balises meta, de la plus grande à la plus petite en spécifiant les dimensions des icones à l'aide de l'attribut size seulement pour les icones de taille supérieure à 57px. La raison à cet ordre est que certaines versions d'iOS nécessitant une image de seulement 57px ne téléchargent que la dernière icone, ignorant l'attribut size.

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Nous ne déclarons pas notre dernière icone, elle sera utilisée par défaut par les appareils ne reconnaissant pas les icones precomposed. Elle est, comme le favicon, à placer à la racine de votre serveur.

Si nous ne désirons pas utiliser d'icone precomposed, nous n'aurons alors que trois icones, une pour chaque taille, mais nous conserverons les trois balises meta en veillant à remplacer la valeur de l'attribut rel :

<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="apple-touch-icon.png">

Sachez qu'Android utilise également les apple-touch-icon. Sous certaines versions vous devrez utiliser des urls absolues ou une balise base :

<base href="http://www.domaine.fr/base/" />

Cette particularité a été constaté sur une Samsung Galaxy Tab (user-agent : Mozilla/5.0 (Linux; U; Android 2.2.1; fr-fr; GT-P1010 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1).

Le Speed dial d'Opera

Depuis Opera 11.10 il est possible de spécifier une image pour l'écrans Speed Dial. Un article de dev.opera.com fait état d'une dimension maximale par défaut de 256x160px. Après plusieurs tests, j'ai pourtant constaté que 384x240px semblait plus proche de la vérité. Dans tous les cas, votre image sera redimensionnée sur un fond blanc (mais cette couleur peut-elle être modifiée ?) et je vous conseille donc d'utiliser un fond transparent, le png24 étant bien pris en compte.

Il est important de déclarer votre icon Speed Dial avant le favicon. On procède de la même manière, à l'aide d'une balise meta :

<link rel="icon" type="image/png" href="speed-dial-icon.png">

Opera offre également la possibilité d'afficher directement votre page html et d'y appliquer des styles spécifiques au Speed Dial à l'aide de media query et du view-mode minimized :

@media screen and (view-mode: minimized) {     body {         color: #fff;         background: #b20000;     } }

Ici je reprend simplement l'exemple fourni par Opera, vous trouverez également sur cette page d'autres informations relative au Speed Dial .

Conclusion

Nous nous retrouvons donc avec 7 images :

favicon.ico

favicon.png

apple-touch-icon-114x114-precomposed.png

apple-touch-icon-72x72-precomposed.png

apple-touch-icon-57x57-precomposed.png

apple-touch-icon-57x57.png

speed-dial-icon.png

Et le code html suivant :

<base href="http://www.domaine.fr/base/" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> <link rel="icon" type="image/png" href="speed-dial-icon.png"> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="shortcut icon" type="image/png" href="favicon.png" />

Je vous conseille de mettre toutes vos images à la racine de votre serveur ou, si ce n'est pas possible/confortable, de simuler cet état à l'aide du mode Rewrite d'Apache. Certaines devant obligatoirement se placer là, autant toutes les regrouper.

Voici une page démo que je vous invite à visiter. Si vous avez des configurations exotiques ou que vous rencontrez un résultat inattendu n'hésitez pas à le partager : http://www.cahnory.fr/favicon-boilerplate/test.html

Sachez enfin que cette synthèse ne fait que rebondir sur un travail énorme de Mathias Bynens : http://mathiasbynens.be/notes/touch-icons. Tout le mérite de la partie sur les apple-touch-icon lui revient et je vous conseil de le lire si vous souhaitez connaître en détail la prise en charge de ces icones.

Je met enfin à votre disposition un petit PSD qui permet de rapidement visualiser le rendu final de vos apple-touch-icon, precomposed ou pas : http://goo.gl/KQ0GC.

[cahnory]

Des boutons "épais" crossbrowser

C'est quelque chose que l'on voit souvent sur le net et les tutos à ce sujet ne manquent pas. Alors pourquoi en écrire un de plus me direz-vous ? Car la plupart sont en anglais mais aussi, et surtout, parce que dans la folie du CSS3 beaucoup oublient les bonnes vieilles méthodes.

Guère épais… des boutons

Voici le type de bouton que nous allons réaliser, tel qu'ils seront affichés par les navigateurs modernes et plus anciens :

Un petit reset des styles

Nous allons commencer par "uniformiser" les styles des trois éléments susceptibles d'être transformés en bouton, à savoir les élément a, button, et input[type="submit"].

.button {     background: #EEE;     border: 1px solid #DDD;     color: #666;     cursor: pointer;     display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;     font: 1em/1.2em Arial, sans-serif;     outline: none;     margin: 0;     padding: .5em 1.25em;     text-decoration: none; }

À ce stade là, notre bouton s'affiche de la même manière quel que soit l'élément. Vous noterez la manière crossbrowser de définir un élément inline-block (toute la ligne commençant par display y est consacrée). Notez que cette base de code est valable pour tout type de bouton.

Pump up the volume !

Maintenant nous allons ajouter du volume, le principal aspect de notre bouton. Pour y parvenir la propriété border suffit amplement. Nul besoin d'utiliser box-shadow ici.

.button {     background: #EEE;     border: 1px solid #DDD;     border-bottom: 3px solid #BBB;     color: #666;     cursor: pointer;     display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;     font: 1em/1.2em Arial, sans-serif;     outline: none;     margin: 0;     padding: .5em 1.25em;     position: relative;     text-decoration: none;     top: -2px; }

Nous avons épaissi et assombri le border-bottom et avons remonté le bouton à l'aide d'un positionnement relatif et de la propriété top.

Pseudo classes

On ne retire pas les outlines d'un élément impunément, il faut tout de même signaler l'état focus à l'utilisateur. On va prendre soin d'utiliser des propriétés implémentées par tous.

.button:focus {     border-bottom-width: 2px;     top: -1px;     color: #2AD; } .button:hover {     background-color: #F4F4F4; } .button:active {     border-bottom-width: 1px;     color: #2AD;     top: 0; }

Au focus, notre bouton va s'enfoncer d'1px et la couleur du texte vire au bleu. On applique le même principe pour la pseudo classe :active mais en enfonçant cette fois notre bouton de 2px ce qui en fait un bouton plat bordé d'1px. Pour :hover, on éclairci légèrement le bouton, pas besoin d'en faire des tonnes vu que nous utilisons un cursor de type pointer.

Rien que pour vos yeux

Notre base commune est prête, il est temps de s'amuser avec quelques propriétés css3. Un peu de linear-gradient, un léger border-radius et un soupçon de box-shadow,… tout vient à point à qui sait attendre.

.button {     background: #EEE;     background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.07));     border: 1px solid #DDD;     border-bottom: 3px solid #BBB;     border-radius: 3px;     box-shadow: inset 0 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.2),0 2px 2px -1px rgba(0,0,0,.6);     color: #666;     cursor: pointer;     display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;     font: 1em/1.2em Arial, sans-serif;     outline: none;     margin: 0;     padding: .5em 1.25em;     position: relative;     text-decoration: none;     text-shadow: 0 1px #FFF;     top: -2px; } .button:focus {     border-bottom-width: 2px;     top: -1px;     color: #2AD; } .button:hover {     background-color: #F4F4F4;     box-shadow: inset 0 1px rgba(255,255,255,.5), inset 0 0 8px 1px rgba(255,255,255,.5),0 2px 2px -1px rgba(0,0,0,.6); } .button:active {     border-bottom-width: 1px;     box-shadow: inset 0 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.2),0 2px 2px -1px rgba(0,0,0,.6);     color: #2AD;     top: 0; }

Notez que pour plus de clarté, je n'utilise ici que les propriétés standards. Libre à vous d'ajouter les équivalents vendeurs (-moz, -webkit,…), les filtres Internet Explorer ou encore -prefix-free.

Groupe de boutons

Pour coller nos boutons les uns aux autres en une jolie barre, nous allons utiliser un élément englobant et une classe .button-set.

.button-set {     padding-left: 1px; } .button-set .button {     border-radius: 0;     margin-left: -1px; } .button-set .button:first-child {     border-radius: 3px 0 0 3px; } .button-set .button:last-child {     border-radius: 0 3px 3px 0; }

<span class="button-set">     <a href="#" class="button">link</a><!--     --><button class="button">button</button><!--     --><input type="submit" class="button" value="submit" /> </span>

Afin de supprimer tout espace entre les éléments inline-block, j'ajoute des commentaires html entre chacun d'eux. Sachez tout de même que les commentaires sont des élément à part entière du DOM et qu'il est bon de réduire autant que possible le nombre d'élément d'une page. Essayez donc de les délaisser et collez plutôt les boutons les un aux autres, balise fermante contre balise ouvrante, dés que cela est possible.

On applique simplement un margin-left de -1px afin de superposer les bords et un padding-left de 1px au .button-set pour compenser la marge négative du premier élément. On termine notre effet en réglant les valeurs de border-radius en fonction de la position de nos éléments.

Et nous pouvons enfin admirer le résultat.

Ici, même si seuls les navigateurs modernes auront une finition impeccable à base de CSS3, les dinosaures auront quelque chose d'acceptable et dans l'esprit.

[cahnory]

UTF-8, comment ça marche �

L'UTF-8 est un encodage permettant de gérer bien plus de caractères que l'ISO, limité à seulement 256. Il est universel et couvre aussi bien les caractères latins que cyrilliques, arabes, japonais… à titre personnel, il m'est nécessaire pour afficher mon prénom ;).

Si l'UTF-8 est très utile, il n'en reste pas moins que, si l'on est peu habitué aux problématiques d'encodage des caractères, son utilisation peut être déroutante. En effet, même si l'utilisation de l'UTF-8 est devenu la norme, il n'est pas forcément l'encodage par défaut des outils que nous utilisons. Je vais dans cet article tenter de transmettre ce que je sais sur cet encodage. Vous verrez qu'une fois que l'on sait un minimum comment tout cela fonctionne, l'utilisation d'UTF-8 n'aura plus que des avantages.

Avant de commencer, je tiens à souligner que la majeure partie de ce que j'ai pu apprendre sur cet encodage provient d'une seule source, un article brillant d'un certain Thierry. Celui-ci n'est depuis quelques temps plus en ligne ce qui m'a motivé à rédiger cet article. Dans l'éventualité qu'il soit à nouveau en ligne, voici le lien qui y menait : http://electron-libre.fassnet.net/utf8.php L'article est de nouveau en ligne : http://www.electron-libre.org/utf8.php

Les sources de vos données

L'encodage et MySQL

Sous MySQL, il vous est possible de définir l'encodage utilisé sur quatre niveaux :

la connexion

la base de donnée

la table

le champs

Sauf cas particuliers, veillez à ce que l'encodage soit "utf8" (sans tiret) sur chacun de ces niveaux. Pour préciser au serveur que vous allez communiquer avec lui en UTF-8, exécutez cette requête directement après chaque connexion :

SET NAMES 'utf8'

La collation (COLLATE) n'impactera pas vos données mais, lors de vos recherches elle définie comment les caractères sont regroupés.

utf8_bin effectue un regroupement binaire "a != à != A != À".

utf8_general_cs effectue un regroupement par "généralité" sensible à la casse "a = à != A = À".

utf8_general_ci effectue un regroupement par "généralité" insensible à la casse "a = à = A = À".

Si vous ne savez pas lequel choisir, utilisez utf8_general_ci.

Vos fichiers aussi doivent être encodés

Sachez que si vous stocker des données dans des fichiers, ceux-ci devront eux aussi être encodé en UTF-8. D'une manière générale, encodez toujours vos fichiers en UTF-8.

Aussi, vos fichiers ne doivent pas contenir de BOM. Ce caractère "invisible" spécifique à l'unicode est parfois ajouté en début de fichier par votre éditeur et peut être source de perturbations. En effet, bien qu'il s'agisse d'un caractère invisible il aura pour effet, par exemple dans un script php, d'envoyer et clore l'entête HTTP et débuter l'envois du corps de celle-ci.

L'encodage de vos fichiers se gère dans votre éditeur, qui a sa propre méthode. Une liste de procédures à suivre en fonctions de différents éditeurs est à votre disposition, n'hésitez pas à proposer le votre s'il n'y figure pas.

Éditeurs Windows

Komodo Edit

Configuration par défaut Edit › Current file settings › Onglets "Properties" › Encoding (UTF-8). Décochez "Use signature (BOM)"

UltraEdit

Configuration par défaut Advanced › Configuration › File Handling › Save. Décochez "Write UTF-8 BOM header to all UTF-8 files when saved" et "Write UTF-8 BOM on new files created within this program (if above is not set)"

phpDesigner 8 (merci à LeFauve)

Configuration par défaut Tools › Preferences › General (UTF-8). Cochez "Encoding Types" et "Load as UTF-8", activez "UTF-8" et décochez "Save with BOM"

Définition par fichier File › File Encoding

Éditeurs OS X

Panic coda

Configuration par défaut Coda › Preferences › Editor › Default File Encoding › Unicode (UTF-8)

Définition par fichier Text › Encoding › Unicode (UTF-8)

TextEdit

Configuration par défaut TextEdit › Préférences › Ouverture et enregistrement › Encodage › Unicode (UTF-8)

Ubuntu

Bluefish

Définition par fichier Document › encodage des caractères › UTF-8

Multi OS

Aptana Studio 3

Configuration par défaut Aptana Studio 3 › Preferences › General › Workspace › Text file encoding › Other › UTF-8

Données externes

Il peut arriver que vous récupériez vos données depuis d'autres services et/ou de vos utilisateurs (formulaires). Il vous faudra vous assurer qu'elles soient bien en UTF-8.

function toUtf8($string) {     if ('UTF-8' != $encoding = mb_detect_encoding($string, mb_detect_order(), true)) {         if($encoding) {             $string = mb_convert_encoding($string, 'UTF-8', $encoding);         } else {             $string = mb_convert_encoding($string, 'UTF-8');         }     }     return $string; }

Cette fonction vérifie qu'une chaine de caractères est bien encodée en UTF-8 et, si tel n'est pas le cas, la convertie. Elle retournera donc toujours une chaîne encodée en UTF-8.

Pour les formulaires html il existe l'attribut "accept-charset", cependant, comme tout ce qui provient du client est modifiable, je vous déconseille son utilisation. Préférez plutôt le passage des valeurs saisies à la fonction ci-dessus, cela demandera plus de ressource server mais vous serez sûr que les données reçues soient bien en UTF-8.

Manipuler vos données UTF-8

Les fonctions classiques de manipulation de string, tel que strlen, ne sont pas faites pour fonctionner avec de l'UTF-8. En remplacement, nous utiliseront mbstring. Un petit exemple rapide :

echo strlen('Ç');               // Affiche 2 echo mb_strlen('Ç', 'UTF-8');   // Affiche 1

Comme vous pouvez le constater, strlen est dans les choux et ce parcequ'elle n'est pas faite pour manipuler des caractères encodés sur plusieurs octets. mb_strlen elle, peut manipuler des chaines sous différents encodages, spécifié à l'aide du second paramètre. Il en est de même de toutes les fonctions mbstring.

Pour plus de confort et, parceque nous avons décider de n'utiliser que de l'UTF-8, nous allons en faire notre encodage par défaut. Vous pouvez le faire dans votre php.ini, httpd.conf, .htaccess ou script php. Ici nous allons le définir dans notre fichier .htaccess :

<IfModule mod_php5.c>     php_value mbstring.detect_order         "auto"     php_value mbstring.http_output          "UTF-8"     php_value mbstring.internal_encoding    "UTF-8"     php_value mbstring.language             "uni" </IfModule>

Notez que nous prenons soin de vérifier la présence du module php. Plus exactement, ici nous testons la présence du module php5 mais vous pourriez tout à fait remplacer mod_php5.c par mod_php4.c ou encore mettre deux blocs ifModule, un pour chaque version de php dans le but d'avoir un fichier .htaccess paré à toutes situations.

Nous ajoutons ensuite une définition alternative dans notre script php au cas où php ne serait pas exécuté en tant que module apache :

if(mb_internal_encoding() !== 'UTF-8') {     mb_detect_order('auto');     mb_http_output('UTF-8');     mb_internal_encoding('UTF-8');     mb_language('uni'); }

Maintenant, il n'est plus nécessaire de spécifier l'encodage lors de l'utilisation de fonctions mbstring.

Si vous utilisez les fonctions preg_replace, preg_match,… veillez à utiliser le pattern modifier "u" (attention à la casse) pour que le pattern comme le sujet soient traités en UTF-8. mbstring n'offrant que les fonctions ereg.

L'affichage de vos données

Maintenant que vos données sont stockées dans le bon format il vous faut les afficher correctement. Pour se faire il va falloir spécifier le charset utilisé.

Trois méthodes vont vous êtres expliquées. Voici l'ordre de priorité d'application du charset de celles-ci, de la plus prioritaire à la moins prioritaire :

PHP

Apache

HTML

Apache

Si vous faites le choix d'utilisez exclusivement UTF-8, privilégiez autant que possible de définir le charset au niveau d'apache. Cela vous assurera un charset défini pour tous vos scripts.

Dans votre fichier httpd.conf ou dans un fichier .htaccess ajoutez/modifier l'instruction suivante :

AddDefaultCharset UTF-8

PHP

Si vous ne pouvez pas modifier la configuration d'apache d'une façon ou d'une autre vous pouvez spécifier l'encodage de cette façon :

header('Content-type: text/html; charset=UTF-8');

Notez qu'ici l'on spécifie un type text/html mais vous pouvez le modifier si vous désirer envoyer tout autre type de contenu.

HTML

Vous pouvez enfin utiliser une balise meta :

<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

Attention, en html5 la syntaxe change :

<meta charset="utf-8" />

Détecter et corriger les erreurs d'encodage

Si vous rencontrez des caractères de ce type :

ÀÁÂÃÄÅà áâãäåÒÓÔÕÖØòóôõöøÈÉÊËéèêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ

C'est que vos données sont bien encodées en UTF-8 mais qu'elles ne sont pas affichées comme tel. Vérifiez chaque point de la partie "L'affichage de vos données"

Si vous rencontrez des "�" c'est que vos données ne sont pas encodées en UTF-8. Dans ce cas, demandez-vous d'où elles proviennent et veillez à ce que chaque point de la partie "Les sources de vos données" qui s'y rapportent soient bien respectés.

[cahnory]

Centrage vertical et horizontal d'éléments de taille variable

Décidément, le respect de la sémantique nous aura donné du fil à retordre. La balise table, encore elle, permet le plus simplement du monde de centrer des éléments sur les deux axes. Le problème et que son usage se limite aux données tabulaires, exit donc son utilisation pour de la mise en page.

Demain tout ira mieux tu verras

Les navigateurs modernes (ne rigole pas, toi qui me lis du futur à travers ce flux d'information qui pénètre directement ton cerveau) nous ont apporté le display table et ses variantes. En imbriquant un élément en display table-cell dans un élément en display table, nous allons pouvoir aligner verticalement un élément inline ou, ici, inline-block :

<div class="layout">     <div class="layout-wrapper">         <div class="layout-content">             Vous êtes<br />             centré !         </div>     </div> </div>

html, body {     height: 100%;     margin: 0;     width: 100%; } .layout {     display: table;     height: 100%;     overflow: hidden;     text-align: center;     width: 100%; } .layout-wrapper {     display: table-cell;     vertical-align: middle;     width: 100%; } .layout-content {     display: inline-block;     text-align: left; /* Retour à l'alignement classique, non nécessaire */ }

Voilà ce que ça donne en live (navigateur correcte exigé).

Ici j'applique des styles aux éléments html et body dans l'unique but que le centrage vertical se fasse par rapport à la hauteur de la fenêtre mais vous pourriez tout à fait centrer par rapport à un autre élément ou encore, appliquer des dimensions fixes à .layout.

Notez que si vous avez une meilleure idée pour le nom des différentes classes vous pouvez me la faire savoir dans les commentaires ;).

Pour ce qui est des navigateurs modernes, nous avons terminé. Si vous ne vous souciez pas d'Internet Explorer lte 7 et autre Firefox lt 3, vous pourriez très bien vous contentez du code ci-dessus.

Jurassic Explorer

Sur Internet Explorer lte 7 nous allons pouvoir nous approcher de ce résultat. En fait la seule différence que nous allons constater survient lorsque le contenu est plus grand (height) que le conteneur. Quand cela se produit, notre contenu sortira du conteneur par le haut ce qui est disgracieux, voir très embêtant quand ce conteneur est le body et qu'il est donc impossible de voir ce qui dépasse. Je vais sauter les explications tant ce workaround se base sur des spécificités d'Internet Explorer :

html, body {     height: 100%;     margin: 0;     width: 100%; } .layout {     display: table;     height: 100%;     overflow: hidden;     text-align: center;     width: 100%;     *position: relative; } .layout-wrapper {     display: table-cell;     vertical-align: middle;     width: 100%;     *left: 0;     *position: absolute;     *top: 50%; } .layout-content {     display: inline-block;     text-align: left; /* Retour à l'alignement classique, non nécessaire */     *display: inline;     *left: 0;     *position: relative;     *zoom: 1;     *top: -50%; }

Firefox wrap toujours deux fois

Comme l'on peut le voir ici, la valeur de display inline-block n'est supportée qu'à partir de Firefox 3. Avant cela, on doit user de propriétés vendeurs et celle qui dans le cas présent s'y prette le mieux et -moz-inline-stack. Le souci avec celle-ci c'est qu'elle empile, les unes sur les autres, toutes les lignes de l'élément (d'où son nom). Pour y remédier nous allons devoir ajouter un nouveau wrapper en display block à l'intérieur de notre élément .content. Un simple div fera l'affaire.

<div class="layout">     <div class="layout-wrapper">         <div class="layout-content">             <div>                 Vous êtes<br />                 centré !             </div>         </div>     </div> </div>

html, body {     height: 100%;     margin: 0;     width: 100%; } .layout {     display: table;     height: 100%;     overflow: hidden;     text-align: center;     width: 100%;     *position: relative; } .layout-wrapper {     display: table-cell;     vertical-align: middle;     width: 100%;     *left: 0;     *position: absolute;     *top: 50%; } .layout-content {     display: -moz-inline-stack;     display: inline-block;     text-align: left; /* Retour à l'alignement classique, non nécessaire */     *display: inline;     *left: 0;     *position: relative;     *zoom: 1;     *top: -50%; }

Là nous avons fini et nous pouvons admirer le résultat.

[cahnory]

Clear float, technique définitive

Lorsqu'on aborde la propriété clear, chacun a sa méthode. Il en existe une ribambelle et toutes nécessitent un élément html supplémentaire. Là il existe deux possibilités :

Un clearer, un élément ajouté à la suite du dernier floatant.

Un contener, un élément parent à tous les floatants.

Quel élément ?

Ma préférence va au contener pour plusieurs raisons :

Le clearer est souvent ajouté au html dans ce seul et unique but là où le contener est bien souvent présent naturellement (le ul des li en est le parfait exemple).

On pourra appliquer au contener backgrounds, borders et autres effets. C'est d'ailleurs bien souvent pour que ces effets s'affichent correctement que l'on ajoute un clearer (inutile donc).

La technique la plus répandue avec un contener consiste à définir la propriété overflow en hidden (il me semble que ça fonctionne également avec auto). L'inconvénient de cette méthode est que l'on n'a pas forcément envie de définir cette propriété ainsi.

::after

Une autre technique nécessite l'utilisation du pseudo élément ::after. Elle me semble peu répandue et pourtant elle fait des merveilles. Prenons par exemple ce code html :

<ul>     <li>Je float !</li>     <li>Je float !</li>     <li>Je float !</li> </ul> Je float plus… du con la joie ! y à pas de consigne pour ces bouteilles :D

Nous appliquons un float: left aux li et nous utilisons ::after pour appliquer le clear :

li { float: left } ul:after {     clear: left;     content: ' '; /* Attention, c'est un espace insécable (alt+space) */     display: block;     height: 0; }

Je pense que c'est parceque beaucoup se sont arrêtés là que cette technique est peu répandue. En effet si vous avez bien suivi, sous Internet Explorer lte 7, ::after n'est pas reconnu mais le workaround n'est pourtant pas bien compliqué :

ul { *zoom: 1 }

Ça on peut pas dire que je vous ai menti :).

On récapitule

Toujours avec notre ul aux li floatants, voici le code css complet :

li { float: left } ul { *zoom: 1 } ul:after {     clear: left;     content: ' '; /* Attention, c'est un espace insécable (alt+space) */     display: block;     height: 0; }

Et le  résultat en live.

Le titre de ce bulletin est clair mais il faut tout de même être prudent avec ce genre d'affirmation. J'utilise très souvent cette technique et jusqu'à présent, elle ne m'a jamais fait défaut. Mais qui sait, dans une galaxie lointaine, très lointaine…

[cahnory]

Apparaître comme auteur identifié sur google

Vous aurez peut-être remarqué lors de vos recherches sur google que certains résultats étaient associés à un profil google+. On y trouve photo, nom et prénom, le tout lié au profil correspondant. Rien de mystérieux à ça, tout est expliqué ici : http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=1408986.

Tout ?

Et bien en réalité pas vraiment. Google vous décrit deux étapes clés :

Ajouter votre site à votre profil google+

Placer sur vos pages un lien vers votre profil avec le paramètre d'url rel=author

<a href="https://plus.google.com/113747396260316171527?rel=author">G+</a>

Mais, selon la cible de vos pages, vous n'aurez peut-être pas envie que ce lien soit visible. Vous pourriez très bien le masquer à l'aide de css… ou alors vous pourriez utiliser cette petite astuce qui, testée "dans le doute", s'est révélée efficace :

<link rel="author" href="https://plus.google.com/113747396260316171527?rel=author" />

Google en tient compte mais n'en fait pas la promotion ;)