為了幫助開發(fā)人員混合使用 JavaScript 和 CSS 自定義網(wǎng)站，我們開發(fā)了新的 CSS 屬性，現(xiàn)在支持流行的瀏覽器。下面列出了其中一些 –
focus-within
它旨在解決元素內(nèi)的焦點(diǎn)可訪問性
scroll-snap
這可以實(shí)現(xiàn)原生滾動和減速
@media(prefers-*)
幫助根據(jù)用戶的設(shè)備偏好設(shè)置頁面的 UI 和 UX，從而實(shí)現(xiàn)更高級別的個性化.
* 可以表示亮度、強(qiáng)制顏色、配色方案、對比度、減少運(yùn)動和減少透明度
位置：粘性
到將 UI 保持在視口內(nèi)。
具有標(biāo)準(zhǔn)布局的邏輯屬性
允許我們在元素內(nèi)部和周圍擁有動態(tài)方向間距。
gap 屬性
此屬性現(xiàn)在可用于 Flexbox。間隙將容器設(shè)置為擁有間距，而不是讓每個子元素都有自己的間距。
backfrop-filter
用于方便地設(shè)置元素后面的樣式。
CSS Houdini API
一種低級 API，使開發(fā)人員能夠告訴瀏覽器他們希望如何閱讀和理解自定義 CSS。開發(fā)人員現(xiàn)在可以通過更易于使用的方式訪問 CSS 對象模型。布局 API、Paint API、Parser API、Properties & Values API、AnimationWorklet、Typed OM 和 Font Metrics API 均屬于此范圍。
寬高比
維護(hù)媒體尺寸
size
在一個屬性中設(shè)置高度和寬度
min()、max()和clamp()
對任何CSS屬性設(shè)置約束
顯示：外部內(nèi)部
雙值語法可以更好地適應(yīng)元素
list-style-type
向列表添加自定義樣式
CSS 模塊
我們現(xiàn)在可以使用 JavaScript 從本地或遠(yuǎn)程文件請求特定模塊
CSS 區(qū)域
填充區(qū)域帶有內(nèi)容
CSS子網(wǎng)格
幫助我們在CSS網(wǎng)格中使用微布局創(chuàng)建微布局。
示例
以下示例顯示其中一些屬性 –
?實(shí)時演示
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
text-align: center;
}
:is(header, main, footer) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:matches(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html>
登錄后復(fù)制
輸出
這將產(chǎn)生以下結(jié)果 –
示例
?現(xiàn)場演示
<html>
<head>
<style>
#parent {
margin: 8%;
background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
padding: 2%;
width: 200px;
height: 200px;
box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
margin-top: 20vh;
backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body>
登錄后復(fù)制
輸出
這將產(chǎn)生以下結(jié)果 –
以上就是2020 年網(wǎng)頁設(shè)計(jì)最新 CSS 屬性和 API的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
