CSS那些暖心却鲜为人知的属性
user-modify ：让html标签成为可编辑容器
使用场景：制作一个富文本编辑器
语法
-webkit-user-modify: read-only | read-write | read-write-plaintext-only;
值
read-only
元素内容只读
read-write
元素内容可读写，支持富文本
read-write-plaintext-only
元素内容可读写，只允许纯文本
例子：
<!DOCTYPE html>
<html>
<head>
<title>eg : user-modify</title>
<style type="text/css">
.text{
border:1px solid green;
height: 200px;
}
.ready-only{
-webkit-user-modify:ready-only;
}
.read-write{
-webkit-user-modify:read-write;
}
.read-write-plaintext-only{
-webkit-user-modify:read-write-plaintext-only;
}
</style>
</head>
<body>
<h3>read-only</h3>
<div class="text read-only"></div>
<h3>read-write</h3>
<div class="text read-write"></div>
<h3>read-write-plaintext-only</h3>
<div class="text read-write-plaintext-only"></div>
</body>
</html>pointer-events ：指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
使用场景：禁止滚动，点击等事件
语法
pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
值
auto
等于没有设置
none
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
只适用于SVG的值，具体可参考pointer-events - CSS | MDN
attr() ：用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素
使用场景：用伪类给值加个单位
语法
attr( attribute-name <type-or-unit>? [, <fallback> ]? )
例子：
<!DOCTYPE html>
<html>
<head>
<title>eg : attr()</title>
<style type="text/css">
.attr:after{
content:attr(data-attr);
color: blue;
}
</style>
</head>
<body>
<div class="attr" data-attr="Kg">ATTR</div>
</body>
</html>currentColor : 当前文字颜色的变量，
在CSS选择器中，currentColor=color属性的值。currentColor类似sass的变量，能以color属性的颜色值来代替任何有颜色值的属性的值。具体看下例。
使用场景：一个选择器内有多个同样的颜色
例子：
<!DOCTYPE html>
<html>
<head>
<title>eg : attr()</title>
<style type="text/css">
.currentColor{
color: blue;
border:3px solid currentColor;
}
</style>
</head>
<body>
<div class="currentColor">
currentColor
</div>
</body>
</html>user-select : 禁止选择文本
使用场景：禁止复制网页内容
语法
(-prefix-)user-select: none | text | all | element;
none
元素内的文字及其子元素将不会被选中.
text
用户可以选中文字.
all
在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。
element
火狐和IE中有效.
例子( chrome/webkit )：
<!DOCTYPE html>
<html>
<head>
<title>eg : attr()</title>
<style type="text/css">
.user-select{
border:1px solid green;
padding: 16px;
margin-bottom: 16px;
}
.none{
-webkit-user-select:none;
}
.text{
-webkit-user-select:text;
}
.all{
-webkit-user-select:all;
}
.element{
-webkit-user-select:element;
}
</style>
</head>
<body>
<div class="user-select none"> user-select ：none ; <span>我是子文本</span> </div>
<div class="user-select text"> user-select ：text ; <span>我是子文本</span> </div>
<div class="user-select all"> user-select ：all ; <span>我是子文本</span> </div>
<div class="user-select element"> user-select ：element ; (火狐与IE有效) <span>我是子文本</span> </div>
</body>
</html>selection ： 选择器，可设置文字被选择时的样式
使用场景：个性化选中文本时的样式
例子
<!DOCTYPE html>
<html>
<head>
<title>eg : attr()</title>
<style type="text/css">
.selection{
font-size: 48px;
padding: 16px;
}
.selection::selection{
background: green;
color: yellow;
text-shadow: 2px 2px 2px red;
}
</style>
</head>
<body>
<div class="selection">
选中我试试吧
</div>
</body>
</html>object-fit : 指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
使用场景：在固定宽高的容器内图片变形问题
语法：fobject-fit:ill | contain | cover | none | scale-down
fill
被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。
contain
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover
被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。
none
被替换的内容尺寸不会被改变。
scale-down
内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。
<!DOCTYPE html>
<html>
<head>
<title>eg : attr()</title>
<style type="text/css">
li{
border:1px solid green;
list-style: none;
}
.object-fit{
width: 150px;
height: 150px;
border:1px solid red;
}
.fill{
object-fit: fill;
}
.contain{
object-fit: contain;
}
.cover{
object-fit: cover;
}
.none{
object-fit: none;
}
</style>
</head>
<body>
<ul>
<li>
<p>无样式</p>
<img src="http://blog.lenton.cn/zb_users/upload/2018/03/201803271522116017720796.jpg">
</li>
<li>
<p>object-fit fill</p>
<img class="object-fit fill" src="http://blog.lenton.cn/zb_users/upload/2018/03/201803271522116017720796.jpg">
</li>
<li>
<p>object-fit contain</p>
<img class="object-fit contain" src="http://blog.lenton.cn/zb_users/upload/2018/03/201803271522116017720796.jpg">
</li>
<li>
<p>object-fit cover</p>
<img class="object-fit cover" src="http://blog.lenton.cn/zb_users/upload/2018/03/201803271522116017720796.jpg">
</li>
<li>
<p>object-fit none</p>
<img class="object-fit none" src="http://blog.lenton.cn/zb_users/upload/2018/03/201803271522116017720796.jpg">
</li>
</ul>
</body>
</html>
参与讨论