W3C home > Mailing lists > Public > www-style@w3.org > June 2013

[css-ui] “::resizer” proposal and clarification of the “cursor”value

From: 一丝 <yiorsi@gmail.com>
Date: Fri, 28 Jun 2013 00:41:44 +0800
Message-ID: <CA+-d5ZqoAhxb7Lq=8kvAag0s=11ujXF1vov5NAKhPHUX63C=Sw@mail.gmail.com>
To: "www-style@w3.org" <www-style@w3.org>, kanghaol@oupeng.com, tantek@cs.stanford.edu
Spec: http://dev.w3.org/csswg/css-ui/#resize

1. Should the spec clearly define how the cursor is displayed in each
“resize” value? For example,

  1) When it's “resize:both”, the cursor should be displayed as the
image of “cursor:nwse-resize”.
  2) When it's “resize:horizontal”, the cursor should be displayed as
the image of “cursor:ew-resize”.
  3) When it's “resize:vertical”, the cursor should be displayed as the
image of “cursor:ns-resize”.
  4) When it's “resize:none”, the cursor should be displayed as the
image of “cursor:auto/default”.

Currently browsers implement this differently. In webkit, none of
“resize”'s value changes the cursor. In Firefox, “resize:both”would give
“cursor:nwse-resize”. Demo[1]:

      <textarea style="resize: both;">resize: both</textarea>
      <textarea style="resize: horizontal;">resize: horizontal</textarea>
      <textarea style="resize: vertical;">resize: vertical</textarea>

Different browsers have different “cursor” as shown in these pictures:

   1. Opera:http://img02.taobaocdn.com/tps/i2/T16sXuFbBdXXaK2tf.-173-156.gif
   2. Webkit:
http://img04.taobaocdn.com/tps/i4/T1e8tqFmReXXaK2tf.-173-156.gif
   3. Firefox:
http://img02.taobaocdn.com/tps/i2/T1n9psFedfXXagxQkm-182-170.gif

2. Should we add a new pseudo-element “::resizer” for controlling the
appearance of the dragging handle. Such as

   1) background/background image (different browsers use different
backgrounds now)
   2) position
   3) size

WebKit has implemented “::-webkit-resizer”, but it can only control the
brackgrond. I'd like to see this pseduo-element support all the features
“::before”/“::after”have. With this pseudo-element we can easily
implement effects like [2] (animated).

A real example: [3]

This is a decorated application of the “resize” property (to be viewd in
Chrome). [4]

[1]http://jsbin.com/itupaf/2/edit
[2]http://img01.taobaocdn.com/tps/i1/T16hdqFjdeXXXsDY.a-308-248.gif
[3]http://www.kindsoft.net/demo.php
[4]http://jsbin.com/udeqig/22

Simplified chinese version:
http://lists.w3.org/Archives/Public/public-html-ig-zh/2013Jun/0028.html

以上
一丝
Received on Thursday, 27 June 2013 16:42:31 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:12 UTC