建站
咨詢
售后
建站咨詢
新聞中心
CSS 是一種不斷發(fā)展的語(yǔ)言。每一次迭代，它都會(huì)變得越來(lái)越好。因此，了解最新的 CSS 功能非常重要，這樣你才能在項(xiàng)目中使用它們，減少對(duì)第三方庫(kù)的依賴。
本文將介紹一些即將推出的 CSS 新特性，這些特性將簡(jiǎn)化你的開(kāi)發(fā)工作。雖然這些特性尚未在所有瀏覽器中支持，但可以提前使用它們，以適應(yīng)未來(lái)的項(xiàng)目需求。在不支持這些特性的瀏覽器中，它們大多會(huì)被忽略。
text-wrap 屬性
text-wrap 屬性用于指定元素中的文本是否應(yīng)換行。它是 CSS 文本模塊第 4 級(jí)規(guī)范的一部分。
該屬性可以接受多個(gè)值，但最有趣的值是 balance 和 pretty 。
如果將 text-wrap 屬性設(shè)置為 balance ，瀏覽器將嘗試以元素的最后一行與第一行一樣長(zhǎng)的方式對(duì)文本進(jìn)行換行。如果希望元素中的文本具有一致的外觀，這將非常有用。例如，在博客文章的標(biāo)題中。
另一方面，如果將 text-wrap 屬性設(shè)置為 pretty ，瀏覽器就會(huì)嘗試智能地將文本分成塊元素，使最后一行不會(huì)出現(xiàn)單字/孤字。
作用域 css
現(xiàn)在，我們可以使用 @scope 規(guī)則在特定元素內(nèi)設(shè)置 CSS 作用域。從本質(zhì)上講，它允許你創(chuàng)建一個(gè)只適用于特定元素及其子元素的 CSS 規(guī)則。
舉例來(lái)說(shuō)，如果你想在某個(gè)特定元素內(nèi)對(duì) CSS 進(jìn)行范圍/限制，可以使用類或 ID 選擇器來(lái)實(shí)現(xiàn)，就像這樣。
@scope (.class-component, #id-component) {
/* CSS rules */
}下面舉例說(shuō)明如何使用它:
.all-green p {
color: darkgreen;
}
@scope(.all-pink) {
p {
color: #c94f65;
}
}上面將確保 .all-pink 元素內(nèi)的p 元素呈現(xiàn)粉紅色，而 p 元素外的 p 元素呈現(xiàn)綠色。
對(duì) CSS 進(jìn)行作用域界定有助于避免使用過(guò)于具體的選擇器，也有助于避免在 CSS 中使用 !important 。
自動(dòng)增加文本區(qū)域
CSS 規(guī)范中即將出現(xiàn)一個(gè)名為 form-sizing 的新 CSS 規(guī)則，它將允許我們控制