CSS 宣布支持三角函數下一步是什麼?
2001年CSS的升級版本CSS 3發布以來,Web開發人員對CSS的利用變得越來越自由多變,不再局限於簡單地佈局網頁,CSS 3帶來的新變化主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄佈局等模塊,大大豐富了開發者的想像力與創造力。2月底萬維網聯盟(W3C)CSS工作組會議宣布了一項決議,批准在CSS標準中加入一批新函數,其中包括:
- 正弦函數 – sin()
- 餘弦函數- cos()
- 正切函數 – tan()
- 反餘弦函數- acos()
- 反正弦函數- asin()
- 反正切函數- atan()
- 使用兩個參數 x 和y 的反正切函數 – atan2()
- 平方根函數- sqrt()
- 參數平方和的平方根函數- hypot()
- 開方- pow()
比如CSS 現在能夠編寫複雜的動畫,並支持像Adobe Photoshop 中那樣高級的圖像濾鏡。雖然目前CSS 標準已經支持以下數學函數:
- 計算基本表達式- calc()
- 返回最小值 – min()
- 返回最大值 – max()
- 獲取上限和下限之間的中間值- clamp()
但是這遠遠不夠,者一直需要它擁有處理圖形角度並執行一些更高級數學運算的能力,以往這些需要從JavaScript層或預處理器去處理,但顯然開發者更希望使用原生CSS語法去做這些事情,這樣可以更加簡單的方法處理角度並同步複雜的動畫序列,而無需編寫自定義JavaScript代碼或加載龐大的動畫庫或遊戲引擎。
在開發者強烈的要求下,W3C CSS工作組終於正式宣布批准在CSS標準中加入了一系列數學運算函數。
看到這樣的消息,不少開發者都沸騰了。在Reddit上他們展開了熱烈的討論,有人認為這很自然,下一步顯然是複數支持,然後是向量/矩陣,在能夠使用CSS直接做出一款怪獸級別的項目之前,他們便不會滿意;樓下就有人拋出了一個幾週前發布的項目,並指出雖然談不上怪獸級,但是它完全採用CSS實現了3D效果。
反對派則表示:為什麼CSS 要這樣搞?我認為CSS 是用於將樣式應用於HTML 文檔的東西,計算等操作應該在JS 中完成。
他認為CSS 應該輕量級,孤立的Chrome 實例意味著不同的視圖不能共享內存,所以必須複製一大堆東西,這樣會導致內存冗餘。
有人回复他:
- 一些CSS 動畫可以卸載到GPU,釋放CPU 用於其它事情。
- JavaScript 是單線程的,CSS 動畫可以放棄對轉換的精細控制,以釋放主線程。
還有一些人拋出一個觀點,認為這直接變成了CSS 的TensorFlow binding:Tensorflow.css。
此外還有人認為官方是想讓Sass 中的所有內容成為CSS 中的標準,也有人順手吐槽了一把Firefox:RIP my Firefox。
你怎麼看呢?
新的CSS三角函數還需要一段時間過渡,但是可以在以下上查看自己使用的瀏覽器是否已經支持:https://caniuse.com。