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

gif 用的什么工具


2013/6/28 John Hax <johnhax@gmail.com>

> kenny快来做搬运工吧！
>
>
> 2013/6/27 一丝 <yiorsi@gmail.com>
>
>>
>> 规范：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
>>
>> 以上
>> 一丝
>>
>
>


-- 
Best Regards.

陈红林
15810557527
homlean@gmail.com