HTML/CSSCSS那些暖心却鲜为人知的属性

0

CSS那些暖心却鲜为人知的属性

阅读:1471 时间:2018年03月26日

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://ccued.com/zb_users/upload/2018/03/201803271522116017720796.jpg">
        </li>
        <li>
            <p>object-fit fill</p>
            <img class="object-fit fill" src="http://ccued.com/zb_users/upload/2018/03/201803271522116017720796.jpg">
        </li>
        <li>
            <p>object-fit contain</p>
            <img class="object-fit contain" src="http://ccued.com/zb_users/upload/2018/03/201803271522116017720796.jpg">
        </li>
        <li>
            <p>object-fit cover</p>
            <img class="object-fit cover" src="http://ccued.com/zb_users/upload/2018/03/201803271522116017720796.jpg">
        </li>
        <li>
            <p>object-fit none</p>
            <img class="object-fit none" src="http://ccued.com/zb_users/upload/2018/03/201803271522116017720796.jpg">
        </li>
    </ul>
</body>
</html>


发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^