資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究2020 年網頁設計中的最新 CSS 屬性和 API
為了幫助開發人員使用 JavaScript 和 CSS 的混合來定製他們的網站，開發了新的 CSS 屬性，並且現在支援流行的瀏覽器。下面列出了一些屬性 -
focus-within
旨在解決元素內部的焦點可訪問性問題
scroll-snap
這使得原生滾動和減速成為可能
@media(prefers-*)
根據使用者的裝置偏好設定頁面的 UI 和 UX，從而允許更高水平的個性化。
* 可以表示 light-level、forced-colors、color-scheme、contrast、reduced-motion 和 reduced-transparency
position: sticky
使 UI 保留在視口中。
用於標準佈局的邏輯屬性
允許我們在元素內部和周圍進行動態方向間距。
gap 屬性
此屬性現在可用於彈性盒佈局。gap 將容器設定為擁有間距，而不是讓每個子元素擁有自己的間距。
backfrop-filter
方便地設定元素後面的樣式。
CSS Houdini API
一個低階 API，使開發人員能夠告訴瀏覽器他們希望如何讀取和理解自定義 CSS。CSS 物件模型現在以更易於使用的方式供開發人員訪問。佈局 API、繪製 API、解析器 API、屬性和值 API、動畫工作執行緒、型別化 OM 和字型指標 API 都屬於此類。
aspect-ratio
保持媒體的尺寸
size
在一個屬性中設定高度和寬度
min()、max() 和 clamp()
對任何 CSS 屬性設定約束
display: outer inner
雙值語法，用於更好地擬合元素
list-style-type
為列表新增自定義樣式
CSS 模組
我們現在可以使用 JavaScript 從本地或遠端檔案請求特定的模組
CSS 區域
用內容填充一個區域
CSS 子網格
幫助我們在 CSS 網格中使用微佈局建立微佈局。
示例
以下示例顯示了一些這些屬性 -
<!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>輸出
這將產生以下結果 -
示例
<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>輸出
這將產生以下結果 -
更新於: 2021-03-12
95 次檢視
廣告