The CSS3-spec is full of wonderful things. Sometimes things that are not so desperately needed as others but anyway… good to have them.
One of these more or less needed properties might be
resize. It is part of the CSS3 Basic User Interface Module. What is really useful with
resize is the ability to restrict the resizing of
textarea for example. But it is possible to resize every element you’d like to as this demo by Simurai shows.
There are four values for
resize that are kinda logical:
none: no resizing at all
horizontal: resizing only horizontal
vertical: resizing only… vertical
both: yeah, well… pretty obvious, right?!
Robert Nyman created this demo using the
resize-property. You should also check out Louis’ article that’s pretty great. And: the MDN docs about
resize. You can also read more about this topic at Stackoverflow.
In browsers we do not have the ability to automatically hyphenate continuous text. This is an issue when you are using
text-align: justify; for instance because the text may look really bad.
I want to write about this topic because of the discussion that came up at the HTML5 Boilerpates issue-list and this blogpost at Fontdeck Blog.
The specification says:
Hyphenation means splitting words to improve the layout of paragraphs.
CSS3 adds six properties to the list of useful thing. These are:
- The most important one is
hyphens. More to this one later.
- You can add dictionary-files with
hyphenate-resource so the browser has a better chance to render your text with the right hyphenation.
hyphenate-before sets a minimum number of characters before the hyphenation.
hyphenate-after does the same as
hyphenate-before but for characters after the hyphenation.
hyphenate-lines defines about how many lines a hyphenated word is written at a maximum.
hyphenate-character you can specify which HTML-entity should be used, e.g.
The main property of this stack is
hyphens. It accepts one of three values:
auto. The default one is
manual, where you can set hyphens via
auto it the better one for continuous text while words get split if possible and available. And
none does not hyphenate at all even if there is a character set for a possible line break in a certain word.
There is one thing you have to be aware of if you use this property: You have to define a
lang-attribute on an element that carries text that should be hyphenated.
I made this jsFidde where no
lang-attribute is set. It does not work in Firefox. With this attribute set, it works quite good in Firefox, too (thx to 91media).
hyphens is supported in Safari 5.1 and Firefox 6. For Firefox 6 the lang-attribute must be set as mentioned above. Also it only supports english.
It is not working in Chrome 15.
You have to add some vendor-prefixes for support in browsers:
There is a polyfill for this. It’s working with JS and inserts the HTML special-char
­ where it fits. It supports many languages. This polyfill also uses the CSS-property where it is possible.
Thanks to Ash for letting me know about my mistake using
hyphen instead of
I just found this issue at the Modernizr issue-tracker where a test for the
hyphens-attribute is discussed. There is a test in the latest GitHub-Version for it. Search for
Update 2: 12.11.2012
-webkit-hyphens has now landed in Chrome Beta.