深入到新的和令人興奮的CSS技巧性強(qiáng) - 你甚至可以做到不受例如知道它通過(guò)學(xué)習(xí)或?qū)嵤┝酥耸挚蔁岬男驴蚣?，大家都在談?wù)摗８匾氖且浞终J(rèn)識(shí)新的CSS類和屬性，實(shí)驗(yàn)與他們并將其付諸實(shí)踐，特別是在商業(yè)項(xiàng)目時(shí)之前了解其局限性。在這篇文章中，我將介紹一些常見(jiàn)的CSS事故和更新的技術(shù)陷阱，以幫助建立你的樣式表，當(dāng)你做出明智的決定。

濫用的屬性

font-size-adjust

如果您對(duì)您所選擇的Web字體和回退與完全不同的x高度渲染的問(wèn)題，這個(gè)屬性是給你的。然而，這不僅有利于Firefox用戶，現(xiàn)在，盡管是CSS3規(guī)范的一部分。這可能主要與在不同的瀏覽器渲染字體開(kāi)始與variying方式做，因此很難創(chuàng)建此屬性的值和預(yù)期的結(jié)果如何能夠確定一個(gè)真正的標(biāo)準(zhǔn)。

該font-size-adjust屬性可通過(guò)將原始字體大小及按定義的任何后備字體的字體大小調(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è)元素中的文字大小，而無(wú)需修改布局，除非CSS存在，以防止這一點(diǎn)。在大多數(shù)情況下，僅使用文本大小調(diào)整重置了這一點(diǎn)實(shí)際上導(dǎo)致對(duì)您的網(wǎng)站的移動(dòng)設(shè)備設(shè)計(jì)的問(wèn)題。例如：

body{ 

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

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

}

如果-webkit-text-size-adjust設(shè)置為none或取消，基于Webkit的臺(tái)式機(jī)和平板電腦瀏覽器，如Chrome或Safari會(huì)阻止縮放而不是簡(jiǎn)單地忽略屬性。這對(duì)于臺(tái)式機(jī)用戶的一個(gè)大問(wèn)題，因此，如果您必須將此屬性設(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開(kāi)放型字體的一部分。

請(qǐng)注意，這兩個(gè)屬性都在Safari都支持。

在MDN字體變形

在CanIUse字體舒展

font-smoothing

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

雖然這個(gè)屬性不會(huì)導(dǎo)致任何明顯的問(wèn)題，如果目前，只有-webkit-font-smoothing和-moz-osx-font-smoothing仍然有新的WebKit瀏覽器的部分支持，但被認(rèn)為是非標(biāo)準(zhǔn)的。

任何時(shí)候，你需要達(dá)到的CSS來(lái)解決設(shè)計(jì)問(wèn)題，而不是做設(shè)計(jì)，找到問(wèn)題的根源并解決它。在這種情況下，在一個(gè)場(chǎng)景渲染不好的字體，你想到了大量游客是在應(yīng)可能只是一個(gè)更好的字體替換。

在CanIUse字體平滑

更多的理由，你不應(yīng)該由UsabilityPost使用

clip-path

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

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

在CanIUse夾路徑

object-fit

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

通過(guò)這些值，圖像和視頻可以達(dá)到反應(yīng)是更適應(yīng)屏幕尺寸的水平，幫助我們從Javascript的解決方案移開(kāi)，如fitvid和解決與需要更復(fù)雜的CSS規(guī)則來(lái)解決視頻寬高比的問(wèn)題。為WordPress主題開(kāi)發(fā)，對(duì)象的契合意味著我們不需要額外安裝圖像尺寸-我們可以讓srcset和CSS做的工作。

使用object-fit是安全的，如果你不關(guān)心支持IE，但使用像谷歌調(diào)整器的工具，以確保您的布局適當(dāng)?shù)乜s小這種方式回應(yīng)元素來(lái)測(cè)試你的實(shí)現(xiàn)是非常重要的。