[css-ui]“resize”建议增加“::resizer”伪元素和明确定义 cursor 的取值

规范:http://dev.w3.org/csswg/css-ui/#resize


1.”resize“属性是否需要明确定义在不同取值时候的鼠标显示的图像,例如:

    1)resize:both 的时候,显示 cursor:nwse-resize 的图像;
    2)resize:horizontal的时候,显示cursor:ew-resize的图像;
    3)resize:vertical 的时候,显示cursor:ns-resize的图像;
    4)resize:none的时候,显示cursor:auto/default的图像;

目前浏览器实现各不相同,Webkit 中 resize取任何值 cursor 都不会改变,Firefox resize:both
时则会使用“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>

不同浏览器 cursor 取值不同图片对比 :

   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.是否需要增加一个伪元素“::resizer”来控制拖动手柄的相关表现,比如
    1)背景/背景图片(目前各浏览器背景图片不同)
    2)位置
    3)大小

目前 Webkit 已经实现“::-webkit-resizer”,但是似乎只能用来改变背景。我希望该伪元素和
::before,::after具有相同的特性。
有了这个伪元素我们便可以很容易实现这样的效果(动画演示)[2]。
实际的例子:[3]。

这里有一个运用“resize”属性控制的弹出层大小的综合例子(请用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


以上
一丝

Received on Thursday, 27 June 2013 10:02:54 UTC