Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

word-wrap et hyphens #228

Closed
raphaelgoetter opened this issue Nov 29, 2016 · 5 comments
Closed

word-wrap et hyphens #228

raphaelgoetter opened this issue Nov 29, 2016 · 5 comments
Assignees
Labels
Milestone

Comments

@raphaelgoetter
Copy link
Member

@raphaelgoetter raphaelgoetter commented Nov 29, 2016

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

@raphaelgoetter raphaelgoetter self-assigned this Nov 29, 2016
@nico3333fr
Copy link
Contributor

@nico3333fr nico3333fr commented Nov 29, 2016

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
Copy link
Contributor

@nico3333fr nico3333fr commented Nov 29, 2016

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
Copy link
Member Author

@raphaelgoetter raphaelgoetter commented Nov 29, 2016

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
Copy link
Contributor

@nico3333fr nico3333fr commented Jul 10, 2017

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
Copy link
Member Author

@raphaelgoetter raphaelgoetter commented Jul 10, 2017

\o/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants