深入到新的和令人興奮的CSS技巧性強 - 你甚至可以做到不受例如知道它通過學習或實施了炙手可熱的新框架，大家都在談論。更重要的是要充分認識新的CSS類和屬性，實驗與他們并將其付諸實踐，特別是在商業項目時之前了解其局限性。在這篇文章中，我將介紹一些常見的CSS事故和更新的技術陷阱，以幫助建立你的樣式表，當你做出明智的決定。

濫用的屬性

font-size-adjust

如果您對您所選擇的Web字體和回退與完全不同的x高度渲染的問題，這個屬性是給你的。然而，這不僅有利于Firefox用戶，現在，盡管是CSS3規范的一部分。這可能主要與在不同的瀏覽器渲染字體開始與variying方式做，因此很難創建此屬性的值和預期的結果如何能夠確定一個真正的標準。

該font-size-adjust屬性可通過將原始字體大小及按定義的任何后備字體的字體大小調整值除以。什么值應以獲得最好的結果需要反復試驗的大部分并取決于后備字體，初始大小它正在顯示在與該瀏覽器渲染它。一般的例子：

h1{

  font-family: 'Alagreya SC', 'georgia', serif;

  font-size: 2rem;  

  font-size-adjust: 0.5;

}

如果Alagreya不加載，并在標題顯示在格魯吉亞或瀏覽器的默認襯線，將在1rem顯示，或2rem / 50％。5。

該font-size-adjust物業不應該混為一談text-size-adjust，這是專門為文本的移動顯示。一些移動瀏覽器應用文本通脹算法增加一個元素中的文字大小，而無需修改布局，除非CSS存在，以防止這一點。在大多數情況下，僅使用文本大小調整重置了這一點實際上導致對您的網站的移動設備設計的問題。例如：

body{ 

  -webkit-text-size-adjust: 100%; 

  -ms-text-size-adjust: 100%;

}

如果-webkit-text-size-adjust設置為none或取消，基于Webkit的臺式機和平板電腦瀏覽器，如Chrome或Safari會阻止縮放而不是簡單地忽略屬性。這對于臺式機用戶的一個大問題，因此，如果您必須將此屬性設置為none，因為100％不工作，最好是與媒體查詢做到這一點。

在CanIUse字體大小調整

在MDN字體大小調整

MSDN上的文字大小調整

font-stretch

該屬性往往混淆font-size-adjust操縱字體是如何呈現的或其他方法。事實上，它只是讓你選擇一個替代字體面或聲明的字體，如果碰巧有一個。例如，您可能包括的Roboto OTF您的文檔，里面有一個濃縮版英寸 該font-stretch屬性允許您設置此而不需要重新聲明font-family：

h1{

  font-stretch: condensed;

}

以類似的方式，你不希望與混淆font-variant，只允許您啟用之類的東西連字，小型大寫字母或裝飾物是已包含在您的stylsheet開放型字體的一部分。

請注意，這兩個屬性都在Safari都支持。

在MDN字體變形

在CanIUse字體舒展

font-smoothing

-webkit-font-smoothing，-moz-osx-font-smoothing并且font-smooth都試圖消除鋸齒的字體來解決一些設備和瀏覽器的一些字體的鋸齒渲染。除了是從設計的角度完全態勢，因而不可預知的，所有這些特性都被篡改圍繞規范，應該從你的樣式表被刪除或擺在首位不使用。

雖然這個屬性不會導致任何明顯的問題，如果目前，只有-webkit-font-smoothing和-moz-osx-font-smoothing仍然有新的WebKit瀏覽器的部分支持，但被認為是非標準的。

任何時候，你需要達到的CSS來解決設計問題，而不是做設計，找到問題的根源并解決它。在這種情況下，在一個場景渲染不好的字體，你想到了大量游客是在應可能只是一個更好的字體替換。

在CanIUse字體平滑

更多的理由，你不應該由UsabilityPost使用

clip-path

的clip-path在CSS4屬性將允許我們設置定義元件的形狀的幾何值，框值或SVG文件路徑。這是放置在背景復雜的形狀，包括文字填滿，形成抽象的布局或纏繞超過一箱或圓形以外的其他文本非常有用。該聲明是非常簡單的（你需要Chrome或Safari看到這一點）：

但你可以看到，外部SVG文件目前還不支持，并clip-path在所有的工作，你需要在你的WebKit瀏覽器啟用實驗性的功能。需要注意的是Firefox不支持形狀著呢，它不能在IE瀏覽器在所有工作。

在CanIUse夾路徑

object-fit

這是很有幫助的新屬性，您可以處理img，并video通過提供三種主要方式，圖像可以裝進它在大致相同的方式作為背景圖像元素的包裝：scale-down，contain或cover。它的合作伙伴酒店object-position工作就像背景位置，讓您處理圖像或視頻怎么坐在包裝紙里面沒有margin或text-align黑客。

通過這些值，圖像和視頻可以達到反應是更適應屏幕尺寸的水平，幫助我們從Javascript的解決方案移開，如fitvid和解決與需要更復雜的CSS規則來解決視頻寬高比的問題。為WordPress主題開發，對象的契合意味著我們不需要額外安裝圖像尺寸-我們可以讓srcset和CSS做的工作。

使用object-fit是安全的，如果你不關心支持IE，但使用像谷歌調整器的工具，以確保您的布局適當地縮小這種方式回應元素來測試你的實現是非常重要的。