深入到新的和令人興奮的CSS技巧性強(qiáng) - 你甚至可以做到不受例如知道它通過學(xué)習(xí)或?qū)嵤┝酥耸挚蔁岬男驴蚣埽蠹叶荚谡務(wù)摗８匾氖且浞终J(rèn)識新的CSS類和屬性，實(shí)驗(yàn)與他們并將其付諸實(shí)踐，特別是在商業(yè)項(xiàng)目時(shí)之前了解其局限性。在這篇文章中，我將介紹一些常見的CSS事故和更新的技術(shù)陷阱，以幫助建立你的樣式表，當(dāng)你做出明智的決定。
濫用的屬性
font-size-adjust
如果您對您所選擇的Web字體和回退與完全不同的x高度渲染的問題，這個(gè)屬性是給你的。然而，這不僅有利于Firefox用戶，現(xiàn)在，盡管是CSS3規(guī)范的一部分。這可能主要與在不同的瀏覽器渲染字體開始與variying方式做，因此很難創(chuàng)建此屬性的值和預(yù)期的結(jié)果如何能夠確定一個(gè)真正的標(biāo)準(zhǔn)。
該font-size-adjust屬性可通過將原始字體大小及按定義的任何后備字體的字體大小調(diào)整值除以。什么值應(yīng)以獲得最好的結(jié)果需要反復(fù)試驗(yàn)的大部分并取決于后備字體，初始大小它正在顯示在與該瀏覽器渲染它。一般的例子：
h1{
font-family: 'Alagreya SC', 'georgia', serif;
font-size: 2rem;
font-size-adjust: 0.5;
}
如果Alagreya不加載，并在標(biāo)題顯示在格魯吉亞或?yàn)g覽器的默認(rèn)襯線，將在1rem顯示，或2rem / 50％。5。
該font-size-adjust物業(yè)不應(yīng)該混為一談text-size-adjust，這是專門為文本的移動(dòng)顯示。一些移動(dòng)瀏覽器應(yīng)用文本通脹算法增加一個(gè)元素中的文字大小，而無需修改布局，除非CSS存在，以防止這一點(diǎn)。在大多數(shù)情況下，僅使用文本大小調(diào)整重置了這一點(diǎn)實(shí)際上導(dǎo)致對您的網(wǎng)站的移動(dòng)設(shè)備設(shè)計(jì)的問題。例如：
body{
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
如果-webkit-text-size-adjust設(shè)置為none或取消，基于Webkit的臺式機(jī)和平板電腦瀏覽器，如Chrome或Safari會阻止縮放而不是簡單地忽略屬性。這對于臺式機(jī)用戶的一個(gè)大問題，因此，如果您必須將此屬性設(shè)置為none，因?yàn)?00％不工作，最好是與媒體查詢做到這一點(diǎn)。
在CanIUse字體大小調(diào)整
在MDN字體大小調(diào)整
MSDN上的文字大小調(diào)整
font-stretch
該屬性往往混淆font-size-adjust操縱字體是如何呈現(xiàn)的或其他方法。事實(shí)上，它只是讓你選擇一個(gè)替代字體面或聲明的字體，如果碰巧有一個(gè)。例如，您可能包括的Roboto OTF您的文檔，里面有一個(gè)濃縮版英寸 該font-stretch屬性允許您設(shè)置此而不需要重新聲明font-family：
h1{
font-stretch: condensed;
}
以類似的方式，你不希望與混淆font-variant，只允許您啟用之類的東西連字，小型大寫字母或裝飾物是已包含在您的stylsheet開放型字體的一部分。
請注意，這兩個(gè)屬性都在Safari都支持。
在MDN字體變形
在CanIUse字體舒展
font-smoothing
-webkit-font-smoothing，-moz-osx-font-smoothing并且font-smooth都試圖消除鋸齒的字體來解決一些設(shè)備和瀏覽器的一些字體的鋸齒渲染。除了是從設(shè)計(jì)的角度完全態(tài)勢，因而不可預(yù)知的，所有這些特性都被篡改圍繞規(guī)范，應(yīng)該從你的樣式表被刪除或擺在首位不使用。
雖然這個(gè)屬性不會導(dǎo)致任何明顯的問題，如果目前，只有-webkit-font-smoothing和-moz-osx-font-smoothing仍然有新的WebKit瀏覽器的部分支持，但被認(rèn)為是非標(biāo)準(zhǔn)的。
任何時(shí)候，你需要達(dá)到的CSS來解決設(shè)計(jì)問題，而不是做設(shè)計(jì)，找到問題的根源并解決它。在這種情況下，在一個(gè)場景渲染不好的字體，你想到了大量游客是在應(yīng)可能只是一個(gè)更好的字體替換。
在CanIUse字體平滑
更多的理由，你不應(yīng)該由UsabilityPost使用
clip-path
的clip-path在CSS4屬性將允許我們設(shè)置定義元件的形狀的幾何值，框值或SVG文件路徑。這是放置在背景復(fù)雜的形狀，包括文字填滿，形成抽象的布局或纏繞超過一箱或圓形以外的其他文本非常有用。該聲明是非常簡單的（你需要Chrome或Safari看到這一點(diǎn)）：
但你可以看到，外部SVG文件目前還不支持，并clip-path在所有的工作，你需要在你的WebKit瀏覽器啟用實(shí)驗(yàn)性的功能。需要注意的是Firefox不支持形狀著呢，它不能在IE瀏覽器在所有工作。
在CanIUse夾路徑
object-fit
這是很有幫助的新屬性，您可以處理img，并video通過提供三種主要方式，圖像可以裝進(jìn)它在大致相同的方式作為背景圖像元素的包裝：scale-down，contain或cover。它的合作伙伴酒店object-position工作就像背景位置，讓您處理圖像或視頻怎么坐在包裝紙里面沒有margin或text-align黑客。
通過這些值，圖像和視頻可以達(dá)到反應(yīng)是更適應(yīng)屏幕尺寸的水平，幫助我們從Javascript的解決方案移開，如fitvid和解決與需要更復(fù)雜的CSS規(guī)則來解決視頻寬高比的問題。為WordPress主題開發(fā)，對象的契合意味著我們不需要額外安裝圖像尺寸-我們可以讓srcset和CSS做的工作。
使用object-fit是安全的，如果你不關(guān)心支持IE，但使用像谷歌調(diào)整器的工具，以確保您的布局適當(dāng)?shù)乜s小這種方式回應(yīng)元素來測試你的實(shí)現(xiàn)是非常重要的。