在
網站開發過程中(zhōng)，CSS的時代可(kě)能(néng)從未像今天這樣激動人心。在這個快速閱讀中(zhōng)，我們為(wèi)您提供了一些有(yǒu)用(yòng)的CSS技(jì )巧和技(jì )術，您可(kě)以立即将其應用(yòng)到您的工(gōng)作(zuò)中(zhōng)。讓我們更深入地研究自我修改CSS變量、懸挂标點符号等。
如果你已經在網站開發行業中(zhōng)呆了很(hěn)長(cháng)時間，你可(kě)能(néng)會回想起CSS完全令人困惑的日子，你不得不想出一些方法和變通辦(bàn)法來使事情正常進行。幸運的是，這樣的日子已經過去了，新(xīn)功能(néng)得到更好的應用(yòng)和選擇，CSS嵌套，選擇器、網格和子網格，甚至新(xīn)色彩空間制作(zuò)CSS比以往任何時候都強大。創新(xīn)不止于此。我們也可(kě)能(néng)有(yǒu)樣式查詢甚至可(kě)能(néng)狀态查詢，連同平衡文(wén)本換行和CSS錨點定位向我們走來。
有(yǒu)了這些可(kě)愛的CSS新(xīn)功能(néng)在接下來的這篇文(wén)章中(zhōng)，我們将通過一些有(yǒu)用(yòng)的技(jì )巧深入了解CSS世界，深入了解特殊性、懸挂标點符号和自我修改CSS變量。我們希望它們能(néng)在你的工(gōng)作(zuò)中(zhōng)派上用(yòng)場。許多(duō)人擔心CSS中(zhōng)的級聯和特異性。然而，這個概念并不像人們想象的那樣難以理(lǐ)解。來幫助你更好地适應CSS最基本的兩個部分(fēn)。
該指南解釋了某些CSS屬性類型如何優先于其他(tā)類型，并深入探讨了特異性評分(fēn)幫助您評估特定規則的CSS适用(yòng)的可(kě)能(néng)性。安(ān)迪用(yòng)實際例子來說明概念，并簡化了潛在的心理(lǐ)模型，使其易于采用(yòng)和利用(yòng)。大幅提升你的CSS技(jì )能(néng)。
你有(yǒu)沒有(yǒu)考慮過用(yòng)CSS而不是JavaScript來測試HTML？CSS選擇器今天的功能(néng)如此強大，以至于實際上可(kě)以單獨使用(yòng)CSS測試大多(duō)數類型的HTML模式。正如新(xīn)功能(néng)指出的那樣，使用(yòng)CSS進行測試有(yǒu)很(hěn)多(duō)好處。特别是如果您在浏覽器中(zhōng)工(gōng)作(zuò)并且喜歡探索視覺回歸和檢查器信息，使用(yòng)CSS進行測試可(kě)能(néng)适合您。它在您無法直接訪問客戶端堆棧的情況下也大放異彩:隻需提供一個測試樣式表，客戶端就可(kě)以找到您為(wèi)其識别的不良模式的實例，而不必讓您幫助他(tā)們這樣做。
自定義屬性的CSS規範不允許引用(yòng)自身的自定義屬性—盡管在很(hěn)多(duō)使用(yòng)案例中(zhōng)，這種特性會很(hěn)有(yǒu)用(yòng)。Roman的方法使用(yòng)容器樣式的查詢作(zuò)為(wèi)訪問定制屬性以前狀态的一種方式。當你想的時候，它會很(hěn)有(yǒu)用(yòng)循環變換各種色調在沒有(yǒu)靜态值列表的情況下，為(wèi)了匹配border-radius視覺上，或者嵌套菜單列表。該解決方法仍然是嚴格的實驗性的(所以不要在生産(chǎn)中(zhōng)使用(yòng)它！)，但是由于樣式查詢很(hěn)可(kě)能(néng)會在之前獲得廣泛的浏覽器支持inherit，潛力很(hěn)大。
hanging-punctuation是一個簡潔的CSS屬性。它擴展了标點符号，例如開始報價來迎合漂亮、幹淨的文(wén)本塊。雖然它目前僅在Safari中(zhōng)受支持，但将它包含在您的代碼中(zhōng)并無大礙，因為(wèi)該屬性是漸進式增強的完美示例:它在不支持它的浏覽器中(zhōng)保持原樣，并在支持它的浏覽器中(zhōng)添加了額外的修飾。
我們将非常高興地歡迎您和我們一起來探索應用(yòng)——讓我們可(kě)以更好的開發網站！
