ios9.3为前端带来哪些新特性

Scorpion 发布于2019-08-30 12:52 / 2995人阅读

摘要：妨碍设计人员利用字体的全部特性的一项限制是无法访问许多字体中内置的大量可选特性。这些特性定义了字形替代和定位选项，以支持基本的版式特性如字距调整上标和下标上下文字形如连写数字样式以及访问可选的东亚字形和花饰字体。

CSS font-feature-settings

IEBlog
由于提供了对 CSS3 @font-face 规则和 WOFF 字体封装格式的跨浏览器支持，现代的 Web 版式已远远超出了“Web 安全字体”所定义的范畴，像 New Yorker 这样的知名杂志就使用了 Web 字体来彰显标题版式的独特风格，而在美国总统奥巴马的竞选连任活动中，也使用了 Web 字体服务 Typekit 来托管其独具一格的字体。

妨碍 Web 设计人员利用字体的全部特性的一项限制是：无法访问许多字体中内置的大量可选 OpenType® 特性。这些特性定义了字形替代和定位选项，以支持基本的版式特性（如字距调整、上标和下标）、上下文字形（如连写、数字样式）以及访
问可选的东亚字形和花饰字体。

是不是很晕

举个例子

html

The fix was in for the fiveflirting fleurons.

scss

p {
  font-size: 40px;
  margin-bottom: 10px;
  padding-left: 10px;
  font-style: italic;
}

body {
  background-color: #ffffd;
  font-family: "chaparral-pro";
  margin: 0;
  padding: 0;
}

span {
  transition: color .3s ease;
}

.liga {
  font-feature-settings: "sups" 1; 
  
  span {
    color: lighten(red, 10);
  }
}

button {
  cursor: pointer;
  margin-left: 10px;
  
  &:after {
    content: " on";
  }
  
  &.on:after {
    content: " off";
  }
}

var btn = document.querySelector("button"),
    body = document.documentElement,
    activeClass = "liga";

btn.addEventListener("click", function(e){
  e.preventDefault();
  body.classList.toggle(activeClass);
  btn.classList.toggle("on");
});

按钮未改变时效果

按钮按下添加liga类

咦为什么会是这样呢 font-feature-setting为我们提供了更多的可以兼容opentype的功能

该特性兼容性

CSS will-change

will-change属性，允许作者提前告知浏览器的默认样式，那他们可能会做出一个元素。它允许对浏览器默认样式的优化如何提前处理因素，在动画实际开始之前，为准备动画执行潜在昂贵的工作。

之前我们希望调用gpu进行优化时需要这么写

.accelerate {
  -webkit-transform: translate3d(0, 0, 0);
}

不过这样浏览器就会耗费很多资源 will-change可以有助于浏览器进行优化

该特性兼容性

CSS touch-action

该特性兼容性

CSS all property

CSS all简写属性重设除了unicode-bidi 和direction之外的所有属性至它们的初始值或继承值。

举个例子

html

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Phasellus eget velit sagittis.

css

html { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue;  color: red; }

然后这样子

css加上一句

blockquote { all: unset; }

就可以屏蔽全局的影响

该特性兼容性

CSS unset value

顾名思义就是撤销继承过来的值

该特性兼容性

CSS revert value

不太懂啊返回浏览器原始? 没啥用啊

该特性兼容性

CSS variables

ios支持css变量了

这里我们有一篇seagmentfault文章

该特性兼容性

CSS font-variant-alternates property

可以自己组装字体了不过浏览器兼容性不太好

该特性兼容性

picture element

这次ios9.3最大的更新就是提供了picture element了

这里我给大家提供几篇文章
whatwg介绍
浏览器内建支持的响应式图像
响应式图片101(六)：picture元素

该特性兼容性

GPU云服务器云服务器企业使用云主机能带来哪些好处新特性新特性整理新特性总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115131.html

Node12有哪些值得关注的新特性？

摘要：再之后会有个月的延长维护期。期间支持的变更严重的，严重的安全问题或者文档更新。已经成为协议的一个重大更新，并且正在积极地在上集成。此外，默认情况下已禁用和，并且库已删除已弃用的函数。前言时隔一年，Node.js 12 如约而至，正式发布第一个 Current 版本。它将从2019年10月开始进入长期支持（LTS）版本直到2022年4月。该版本带来的新特性： V8 更新带来好多不...

kaka 2019-08-23 17:10 评论0 收藏0
【阿里前端面试点】目标，想成为一名好的前端工程师

摘要：广义的定位，涉及到浏览器，手机里面的用户交互展示的内容，都属于前端。对自己有好处因为多次和阿里的面试官进行了电话面试沟通，所以这些不只是一个面试官提出的问题，而是多个面试官提出的问题。保持一个虚心学习的状态。介绍狭义的来讲，前端指的就是我们常说的html, css, javascript. 三者必不可缺. 而其中涵盖的知识点不可一篇文章就能完整的讲述出来的。广义的定位，涉及到浏览器...

TalkingData 2019-08-21 16:48 评论0 收藏0
let和const的引入会对js编程带来哪些改变？

摘要：我们一起看一下和的引入对现有的编码方式会带来哪些影响。和的引入同样改变了这种现象作用域变量和对象属性分得清清楚楚。和引入后，每次循环都会创建特定于当次循环作用域的局部变量。块级作用域let&const js给人的感觉往往是用起来比较简单，语法上宽松。这给开发者带来便利的同时也造成了一些违反思维习惯的别扭之处。es6一些新的特性的引入，可以认为试图纠正或补齐js最初设计的缺陷。我们一...

xavier 2019-08-21 17:55 评论0 收藏0