grids - font-size et whitespace

[florianbouvot]

Bonjour Raphael,

En utilisant "classic grids", je rencontre le bug suivant sur Safari 7 : en fonction de la largeur de la fenêtre du navigateur, deux colonnes d'une largeur de 50% sont une fois cote à cote une fois l'une au dessus de l'autre.

Le problème survient lorsque je change la taille de police du body par une valeur supérieur à 1.4em (le reste du framework étant inchangé).

Faut-il faire évoluer les valeurs de letter-spacing et word-spacing ?

Merci d'avance, Florian.

[raphaelgoetter]

Bonjour,

Désolé pour le retard dans la réponse, et surtout désolé de ne pas pouvoir t'apporter de réponse optimiste : les grilles classiques sont en float et ne se servent pas du tout de letter-spacing ou word-spacing, donc les modifier ne devraient rien changer :(

[florianbouvot]

Merci pour ta réponse.

Je crois que je me suis mal exprimé, je veux parler de "classic grids" provenant de cette partie du Framework : https://github.com/raphaelgoetter/KNACSS/blob/master/css/02-grids.css

[raphaelgoetter]

Ah oui, au temps pour moi. Ben du coup je ne vois pas mieux : le principe est basé sur SuitCSS et PureCSS (l'outil de Yahoo qui me semble avoir été testé dans de très nombreuses situations) :/

[florianbouvot]

PureCSS résout le problème grâce à flexbox :

https://github.com/yui/pure/blob/master/src/grids/css/grids-core.css
à partir de la ligne 28 :
Use flexbox when possible to avoid letter-spacing side-effects.
display: -webkit-flex;
-webkit-flex-flow: row wrap;

J'ai testé en ajoutant les propriétés à KNACSS tout semble fonctionner correctement (Safari 7 et font-size supérieur à 1.4em).

[raphaelgoetter]

J'ai une idée qui me semble plus simple. Je te tiens au courant .

[raphaelgoetter]

Je crois que la solution la plus simple passe par l'usage de l'unité rem : il suffit d'affecter une font-size 0 au parent, puis de rétablir la font-size en rem à chaque boîte.

Cela éviterait tous les autres artifices de font-family, letter-spacing, word-spacing, text-rendering et autres cumuls de bidouilles.

Le seul souci est la compatibilité IE9 minimum.

Du coup, si on a des classes conditionnelles dans le HTML, il est assez simple de faire ceci :

/* whitespace for modern browsers including IE9+ */
html:not(.ie678) .grid {
    font-size: 0;
}
html:not(.ie678) .grid > * > * {
    font-size: 1.4rem;
}

J'ai testé et ça fonctionne sur mes navigateurs. Tu peux voir si c'est le cas sur Safari 7 ?

[florianbouvot]

La technique du font-size 0 sur le parent fonctionne correctement sur Safari 7, merci.

J'ai toujours été retissant à utiliser font-size 0 (sans trop savoir pourquoi - un mixe entre la compatibilité et la valeur zéro), pourtant cette méthode est efficace et facile à mettre en place.

En travaillant avec une font-size à 100% sur le html, la solution devient très robuste quelque soit le projet. Contrairement à la technique de PureCSS qui oblige à rétablir la font-family : je pense au personne qui n'utilise pas de préprocesseur ou ne connaissant pas tout les détails du framework. (Je suis pas sur d'étre très clair.)

Merci Raphael.

EDIT : je viens de voir que tu as eu le même type de réflexion dans : Au programme pour KNACSS v3.0 - Simplifier les grids et autogrids

[florianbouvot]

Il faut peu-être mentionner l'utilisation de flexbox pour la technique de PureCSS dans l'article d'alsacréations : http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

[raphaelgoetter]

Bien vu, j'ai ajouté la remarque sur l'article.

Et effectivement, ton problème m'a donné des idées pour la V3 de KNACSS ;)