word-wrap et hyphens

[raphaelgoetter]

Pour gérer les débordements de contenus, il est (était) recommandé d'utiliser la combinaison de deux déclarations : word-wrap: break-word et hyphens: auto (avec préfixes), la seconde étant moins bien supportée : http://caniuse.com/#search=hyphens

Mais ça c'était avant que word-wrap: break-word devienne systématiquement prioritaire sur hyphens: auto si les deux sont appliqués (quel que soit l’ordre et même avec un !important sur hyphens.

Du coup, la classe appliquée actuellement sur KNACSS est aujourd'hui complètement inutile :
https://github.com/alsacreations/KNACSS/blob/master/sass/library/_misc.scss#L26

@media (max-width: $tiny) {
  /* you shall not pass */
  div,
  textarea,
  table,
  td,
  th,
  code,
  pre,
  samp {
    word-wrap: break-word;
    hyphens: auto;
  }
}

:(

La méthode qui fonctionnerait (bien plus tordue) serait :

div {
  word-wrap: break-word;
}
@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
  div {
    word-wrap: normal;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }
}

Test en ligne (CodePen) : http://codepen.io/raphaelgoetter/pen/aBLQeL?editors=1100

[nico3333fr]

Yop, tu as testé avec quels navigateurs ?

Note qu'en plus, ta solution serait au poil... sauf que je ne suis même pas sûr que Chrome n'annonce pas supporter la propriété hyphens sans être incapable de la gérer, vu qu'il n'embarque pas de dictionnaire de césure. 👎

Je fais un test, et je te tiens au jus.

[nico3333fr]

Ouf, à priori, Chrome ne fait pas n'importe quoi (enfin, façon de parler ^^), il ne supporte pas du tout hyphens : http://codepen.io/nico3333fr/pen/JbrzPX

[raphaelgoetter]

En fait j'avais testé sur Chrome, Safari et Firefox sur Mac et tout était OK.
Là je viens de tester sur Chrome et Firefox Windows et le code ne fonctionne pas : le mot n'est pas coupé et pourtant @supports est bien reconnu :(

EDIT : là c'est le comble, je n'arrive plus du tout à faire fonctionner hyphens sur CodePen (même sans @ supports)
EDITEDIT : ah ben oui, il semble que ce soit un bug de Codepen. Sur un vrai document HTML le code fonctionne.

[nico3333fr]

Salut @raphaelgoetter ,

je me suis permis de reprendre cette idée pour Röcssti du coup, je viens de committer tout ça : nico3333fr/ROCSSTI#28 ;)

Au plaisir !

[raphaelgoetter]

\o/