Is there a pure-CSS hack to activate “text-align: justify” only if the browser supports “hyphens: auto”?
css, hyphenation
Solution
The new @supports property can do it, however that is not supported by all browsers either. If you are willing to accept that as a limitation you can look at the Mozilla Docs here: @supports
Problem
The browser support for `hyphens: auto` is still a bit lacking, even for English, but I would like to provide it already to my visitors using Firefox. If the browser does not support it, however, the gaps in the justified text are unseemly wide, and I would rather fall back on flush left alignment. This is essentially what the CSS code looks like. ``` p { text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } ``` I’m aware of JavaScript libraries like Hyphenator.js that provide hyphenation for a range of browsers, but is there maybe a pure CSS solution for my simpler use case? I’ve come to think of hyphenation as less than essential on the web, unfortunately, and don’t want to embed a JavaScript library if there is a simpler fallback solution. Thanks!