CSS3 還缺少哪些必要的特性？

01-14

蟹妖。

先解答一下各位知友的疑惑：

@bombless 「CSS Text Level 4」中已經增加了「text-space-collapse」屬性來控制元素中的空白如何摺疊，使用「text-space-collapse:discard;」就會刪除一切空白符。詳見inline-block 未來（寫作時該屬性名為 white-space-collapsing）

@kevin CSS 已經有專門的模塊來規範變數「CSS Custom Properties for Cascading Variables Module Level 1」。

Firefox 最新版已經支持，也可以使用「suitcss/suit 路 GitHub」來編譯原生的變數語法：
:root { --Excerpt-padding: 20px; --Excerpt-highlight-color: orange; }
.Excerpt { padding: var(--Excerpt-padding); }

@易小易如果是指父元素選擇器，在「Selectors Level 4」中已經有了和 jQuery 一致的「:has()」選擇器。 CSS 中能否選取父元素？

@孫士權
CSS Shapes Module Level 1 規範已經趨於穩定，目前在CR階段，即將進入PR。Chrome 37+，Safari 8 + 已經實現。
可編輯屬性和拖動已經實現了「-webkit-user-modify，-moz-user-modify」和「-webkit-user-drag」，規範中有:drop，:drop()偽類（Selectors Level 4）。

字元溢出的處理不知道主要的問題在哪裡？

2014年7月25日更新
@Belleve 對於基線的精確控制，已經有移植自 SVG 中的「propdef-alignment-adjust」、「baseline-shift-prop」兩個屬性來控制了，暫無瀏覽器支持。
http://dev.w3.org/csswg/css-inline/#propdef-alignment-adjust
http://dev.w3.org/csswg/css-inline/#baseline-shift-prop

￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣(￣?￣)我是賣萌的分割線￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

以下答題：

一、居中

對，你沒看錯，就是簡單的居中，讓我們很痛苦。

縱觀CSS的發展，是一個從一維到二維、從水平到垂直的演變過程。開始主要為了解決網頁排版，更多關注的是文字的水平流動。慢慢發展到現在，隨著越來越多布局的要求，已經演變為一個二維布局系統。幾乎每個開始學習 CSS 的人都會接觸到的就是不定寬高元素的「水平垂直居中」。

雖然現在 table-cell/Flex/Grid 中能很好的解決這個問題。但是我們更希望 display:block 的元素也能更容易的居中。

對於絕對定位元素，迫切希望有一個直接了當的 position:center 一了百了，而不是通過以下晦澀的方式實現：

.foo { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: fit-content; height: fit-content; }

二、動畫問題

比如如何更好的解決 width 從 auto 到 500px 的過渡（transition）。

三、Shadow DOM

儘快完善 Shadow DOM 相關的 CSS 支持。

四、圖片相關的處理

例如：

1. 圖片沒有載入 :img-broken

2. :img-disabled圖片因為用戶設置未載入

3. :img-alt 控制替換文字的樣式

以上。

繼 @一絲　姐姐的話題。居中，特別是水平垂直居中，感興趣的可以看看：垂直居中 | 博客自由標籤　另外有關於CSS3新東西，我羅列幾個值得我們去探討的東西：

1、Grid布局：Grid | css3教程-css3實例-css3動畫

２、Regions:regions | 博客自由標籤

3、Shape:Shapes | 博客自由標籤

5、倒影：使用CSS3製作倒影

６、蒙板：CSS遮罩——如何在CSS中使用遮罩

７、濾鏡：CSS3 Filter的十種特效

其他特性可以看看Christian Krammer發布的文章：The Future Of CSS: Experimental CSS Properties　雖然有點老，但還是值得一讀。

部分屬性支持單位 ppx (physical pixel)

在手機上，動輒 2-3 個物理像素的最小控制單位太粗糙了

Media Query，換算出來用小數，又複雜，又充滿了重複勞動啊

精確地指定某個塊狀元素第一行基線的位置
精確地指定某個 inline-block「對外」所用的基線位置

計算屬性（倒不用是function，希望有類似calc，但可以包含其他元素選擇器或窗口寬高窗口活動距離等預置變數進行計算），或者js里可以對一個css選擇器設置樣式，甚至綁定function作為計算屬性。

當前元素的previous節點選擇器

標籤的title浮層

原生支持less類型的語法就好. 繼承, 變數和簡單的數學以及色彩計算.

對高清設備（不同DPI）邊框寬度的支持。頁面兩個帶背景層的混合模式支持

兼容性。

偽元素添加事件處理

中英文間的的空白間隙：text-autospace 屬性，不知道現在為什麼不支持這個屬性了。樣例對比，

Git 是一個分散式的版本控制系統，最初由 Linus Torvalds 編寫，用作 Linux 內核代碼的管理。

以及

Git是一個分散式的版本控制系統，最初由Linus Torvalds編寫，用作Linux內核代碼的管理。

參考漢字標準格式，寫了一個 text-autospace.js ，可以實現自動添加空白間隙。

代碼位於：mastermay/text-autospace.js · GitHub，演示地址自動添加空格演示。

現在不是缺少特性，而是各個瀏覽器對css3的支持不是很好！在在移動端各種問題！