Open anjia opened 4 years ago
属性的“脚本魔力”，是指仅仅通过一行简单的属性设置，就能实现看起来要 JS 才能完成的交互功能。包括但不限于：
touch-action
pointer-events
resize
text-transform
shape-outside
inputmode
accesskey
contenteditable
draggable
touch-action可以控制用户在触摸屏上的行为，诸如滚动（横向滚动、纵向滚动）、网页缩放等。它能决定在此元素上触发的触摸行为，能否触发浏览器的默认行为。
它的取值可以是：
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation
取值说明：
auto
none
manipulation
pan-x pan-y pinch-zoom
pan-x | pan-left | pan-right
pan-y | pan-up | pan-down
pinch-zoom
特别说明： 术语 pan 和 scroll 是同义词，用来定义触发 panning（平移）和 scrolling（滚动） pinch 单词释义：捏、掐、撮 zoom 单词释义：放大
特别说明：
该属性最常用的使用场景：
touch-action: pan-y pinch-zoom;
touch-action: manipulation;
touch-action: none;
它的原理是浏览器在响应触摸事件之前，会先判断下属性touch-action的值。更多内容，详见标准 Pointer Events / Details of touch-action values。
不建议用 touch-action: none; 这会影响到无障碍特性。它会禁止操作浏览器的缩放功能，不方便弱视人群阅读网页。
pointer-events可以定义元素如何响应鼠标事件。
pointer-events: auto | none | fill | stroke | all | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted
pointer-events: none 在下面的场景下很有用：
pointer-events: none
以上三个比较直观，可以直接看在线例子。
scroll-* 元素的滚动行为 animation 动画相关
scroll-*
animation
<input type="">
type
text
tel
url
email
contenteditable="true"
draggable="true"
了解这些小小的属性，可以让我们在特定场景下事半功倍。:)
维护配置文件就哭了～。～
zzz6519003
commented
4 years ago zzz6519003
commented
4 years ago
属性的“脚本魔力”，是指仅仅通过一行简单的属性设置，就能实现看起来要 JS 才能完成的交互功能。包括但不限于：
touch-actionpointer-eventsresizetext-transformshape-outsideinputmodeaccesskeycontenteditabledraggabletouch-action
touch-action可以控制用户在触摸屏上的行为，诸如滚动（横向滚动、纵向滚动）、网页缩放等。它能决定在此元素上触发的触摸行为，能否触发浏览器的默认行为。它的取值可以是：
取值说明：
auto默认值。由浏览器自己决定触摸行为none会禁用浏览器自带的一切触摸行为manipulation浏览器只能滚动和缩放，它等价于pan-x pan-y pinch-zoompan-x | pan-left | pan-right横向滚动pan-y | pan-up | pan-down纵向滚动pinch-zoom缩放页面该属性最常用的使用场景：
touch-action: pan-y pinch-zoom;。在一些浏览器中，横滑会触发浏览器自带的“上一页/下一页”的功能，用这行 CSS 可以很好的兼容此类问题。touch-action: manipulation;。300ms延迟的问题，是设备为了区分手势是 tap 还是 double-tap。禁用一些默认的触摸行为，能让浏览器更快地响应其它行为。touch-action: none;。这在一些特殊场景下很有用，比如地图、游戏之类，它们会提供自己特有的拖拽和缩放功能。它的原理是浏览器在响应触摸事件之前，会先判断下属性
touch-action的值。更多内容，详见标准 Pointer Events / Details of touch-action values。pointer-events
pointer-events可以定义元素如何响应鼠标事件。它的取值可以是：
autonone该元素不可能成为鼠标事件的目标pointer-events: none在下面的场景下很有用：其它 CSS 属性
resize元素是否可以拖拽，以及在哪个方向上拖拽text-transform控制文本的大小写shape-outside控制元素的对外占位以上三个比较直观，可以直接看在线例子。
HTML 属性
inputmode指定输入键盘的样式，这在移动端很有用。<input type="">的type属性text、tel、url、emailaccesskey指定元素的快捷键。不同操作系统不同浏览器的组合键会略有差异，详见 accesskeycontenteditable="true"元素可编辑draggable="true"元素可拖拽小结
了解这些小小的属性，可以让我们在特定场景下事半功倍。:)