ios9.3為前端帶來哪些新特性

Scorpion 發布于2019-08-30 12:52 / 3019人閱讀

摘要：妨礙設計人員利用字體的全部特性的一項限制是無法訪問許多字體中內置的大量可選特性。這些特性定義了字形替代和定位選項，以支持基本的版式特性如字距調整上標和下標上下文字形如連寫數字樣式以及訪問可選的東亞字形和花飾字體。

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云服務器企業使用云主機能帶來哪些好處新特性新特性整理新特性總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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