5个不知道的CSS属性
来源:互联网 发布:淘宝店铺关注排行 编辑:程序博客网 时间:2024/05/17 07:52
- 书写显示(font-display和write-mode);
- 渲染性能提升(contain和will-change);
- 创建新的花式设计(clip-path);
(使用can I use 工具检查属性的跨浏览器特性)
1.font-display
允许控制可下载字体在完全加载之前的呈现方式,或者下载失败时的处理方案。五个值:
- auto:默认值,相当于不使用此属性,结果是浏览器隐藏文本,在自定义字体加载完成以后再显示文本;
- blocl:等待自定义字体加载时的隐藏文本时间减少了。如果这段时间自顶子字体未加载好,文本会应用备用字体呈现,同时,浏览器将无限期等待自定义字体加载,加载完成后再相应应用;
- swap:浏览器立即展示备用字体,同时加载自定义字体。加载成功后,浏览器会使用自定义字体替换备用字体。
- fallback:自定义字体渲染文本在短时间内不可见(大约100ms),之后浏览器将持续加载自定义字体,期间,文本将以无样式呈现,加载好之后会被赋予自定义字体。但如果加载字体耗时过长,文本将会使用备用字体,并且当加载完成不会替换字体;
- optional:效果与fallback一样,但optional选项可以让浏览器自由决定是否使用甚至加载字体;
2.contain@font-face { font-family: AmazingFont; src: url('/fonts/amazingfont.woff2') format('woff2'), url('/fonts/amazingfont.eot') format('eot'); font-display: fallback;}h1 { font-family: AmazingFont, Arial, sans-serif;}在浏览器不支持这个属性的时候,浏览器会忽略它
contain属性允许开发者声明当前元素和它的内容尽可能的独立于其他部分的Dom树
属性值:
- none:默认值,不应用属性
- size:该值开启元素的大小限制。意味着修改元素的大小可以不需要检查其后代;
- layout:开启元素的布局限制。规定外面的任何东西都不会影响到内部布局,反之亦然;
- style:开启元素的样式限制。对元素及其后代可能产生影响的属性不会影响到这个元素之外的任何内容;
- paint:开启元素的绘制限制。意味着元素的后代不会显示在其边界之外。例如,一个元素是屏幕外(或不可见的),它的所有元素都是屏幕外(或不可见的)。典型的用例是移动设备上的屏幕清单;
- strict:该属性适用于所有的限制,本质上是除去none以外的上述值的组合(size、layout、style、paint);
- content:这个值与strict很像,但不包含size。
<button id="button">Show menu</button><ul id="menu" hidden><li>Home</li><li>About</li><li>Contact</li></ul>js:const menu = document.querySelector('#menu');document.querySelector('#button').addEventListener('click', function() {if (menu.hasAttribute('hidden')) { menu.removeAttribute('hidden');} else { menu.setAttribute('hidden', '');}});css:#menu {contain: paint;}
- writing-mode
定义文本行是水平还是垂直布置,块的进度方向。
writing-mode值:
- horizontal-tb:内容为我们常规的水平排列,从左到右阅读,第二行在第一行下方;
- vertical-rl:内容垂直排列,从上到下,从左到右阅读;
- vertical-lr:内容垂直排列,从上到下,从右到左阅读;
- sideways-lr:内容垂直排列,从上到下,从左到右阅读。在所有排版方式中,即使是垂直版式,字的顶部都是向左的;
- sideways-rl:内容垂直排列,从上到下,从右到左阅读。在所有排版方式中,即使是垂直版式,字的顶部都是向右的;
最后两个属性仅有FireFox支持
- clip-path
在CSS中创建简单的形状到相当复杂的形状,此属性很方便。使用它,可以隐藏元素的特定区域。最常见的用例是对于图像使用这个属性,你可以从”clip-path“仅显示一部分内容,从而创造出比原图片更有创意的图片
clip-path:<clip-source> | <basic-shape> | <geometry-box> | none
属性值:
- clip-source:引用内部或外部的SVG元素的URL;
- basic-shape:基础形状函数,定义在CSS Shape specification;
- geometry-box:如果明确与”组合“,它将为基本形状提供参考框;
- none:没有剪贴;
IE和Edge不支持,Safari支持带有-webkit-前缀的属性,所有浏览器支持部分功能;
- will-change
属性值:
- auto:不会产生效果;
- scroll-position:您希望在不久的将来随时更改元素的滚动位置。一些位于在可滚动的元素中的内容需要未来在滚动视窗内可见的时候,该值用来提示浏览器准备渲染内容;
- contents:指定要更改元素的内容;
内容摘自:JavaScript公众号,微信号:FedJavaScript
阅读全文
0 0
- 5个不知道的CSS属性
- 5个你可能不知道的CSS属性
- 一些你不知道的CSS属性
- CSS一些不知道的属性
- 你可能不知道的CSS的一些属性
- 10个你可能不知道的CSS技巧
- 你不知道的CSS
- 不常用的CSS属性
- 你不知道的5个Java有用的工具
- 5个你不知道的HTML5的接口
- CSS浮动,你不知道的事
- 你可能不知道的CSS技巧
- 你不知道的CSS单位
- 你不知道的CSS(边框塌陷)
- 【CSS】你不知道的auto
- 5个你不知道确怕问的XHTML标记
- 你不知道的5个JVM命令行标志
- 你不知道的5个Web技术秘密!
- 内联汇编
- hdu6124 Euler theorem -多校联盟7
- 【高等数学】导数存在是否蕴含导数连续?
- 大数据处理场景01
- PHP代码优化的53个细节
- 5个不知道的CSS属性
- 最少拦截系统 (贪心算法)
- 数据库中的sql语句优化
- ref总结
- poj1942组合数学
- 算法学习之旅,初级篇(21)--栈的实现
- java基础
- Laravel Application Object
- Greendao操作数据库