對標蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據(jù)今天鴻蒙OS 4.0的現(xiàn)場演示顯示，華為的實況窗可以更高效的展現(xiàn)出實時通知，比如鎖屏上就能看到外賣、打車、銀行
隨著 WWW（萬維網(wǎng)）的發(fā)明，一個新的數(shù)字時代誕生了。早期的 WWW 僅包含純 HTML 文檔，這些文檔使用語義 HTML 標簽來區(qū)分網(wǎng)頁元素之間的基本樣式。后來，CSS 作為一種基于鍵值的簡單樣式語言被引入，用于為語義 HTML 標簽設置樣式。CSS 不斷演進，現(xiàn)如今，網(wǎng)頁設計師可以使用 CSS 創(chuàng)建現(xiàn)代風格、動畫、響應式元素和圖像濾鏡，且語法對開發(fā)者友好。
現(xiàn)代 CSS 標準不僅僅是基本的鍵值語法，還提供了函數(shù)和嵌套塊（如 at-rules）。此外，現(xiàn)代 CSS 語法支持偽元素、偽類和選擇器組合。這些 CSS 特性旨在提高開發(fā)者的生產力，幫助他們構建可用的現(xiàn)代網(wǎng)站，這些網(wǎng)站在標準網(wǎng)頁瀏覽器上運行流暢。
以下是一些大多數(shù)網(wǎng)頁設計師在設計網(wǎng)站時不常用的 CSS 特性。掌握這些鮮為人知的 CSS 特性，以充分利用 CSS 的潛力，根據(jù)高質量的設計需求，優(yōu)化選擇 CSS 特性來高效設計網(wǎng)站！
傳統(tǒng)的響應式設計概念鼓勵開發(fā)者根據(jù)設備視口大小調整網(wǎng)站布局。而流體設計概念則建議使用相對單位和 CSS 數(shù)學函數(shù)，根據(jù)視口大小動態(tài)調整整個網(wǎng)站元素。
假設你需要根據(jù)視口寬度動態(tài)調整標題字體大小，使用最小和最大字體大小邊界。你可以使用 CSS 的 clamp() 函數(shù)實現(xiàn)一行解決方案：
<style> h1 { font-size: clamp(2.2em, 3vw + 1em, 2.5em) }</style><h1>CSS math functions</h1>上述 clamp 函數(shù)調用使用 3vw + 1em 表達式動態(tài)設置字體大小，但防止字體大小超出 2.2em 和 2.5em 的邊界。
同樣，你可以使用 min() 和 max() 函數(shù)僅設置一個邊界的動態(tài)計算數(shù)值 CSS 值。例如，以下 CSS 代碼片段去除了前一個 clamp() 函數(shù)示例的上限邊界：
h1 { font-size: max(2.2em, 3vw + 1em) }你可以使用這些 CSS 數(shù)學函數(shù)根據(jù)流體設計原則調整布局元素的間距和尺寸。此外，現(xiàn)代 CSS 提供了幾個以網(wǎng)格為重點的函數(shù)，通過不使用媒體查詢實現(xiàn)流體設計以提高響應性。
看一下以下的 HTML 代碼片段：
<style> .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); grid-gap: 1em; justify-self: center; > div { background: #ddd; padding: calc(2vw + 0.5em); font-size: calc(1vw + 1em); font-weight: bold; text-align: center; border-radius: 0.5em; } }</style> <div class="container"> <div>Block 1</div> <div>Block 2</div> <div>Block 3</div> <div>Block 4</div></div>
每種通用編程語言通常提供十進制舍入函數(shù)和內置余數(shù)/取模運算符，以實現(xiàn)一些通用的數(shù)學算法。CSS 規(guī)范在流行的舊 calc() 函數(shù)后開始引入更多數(shù)學函數(shù)。自 2024 年起，每個流行的網(wǎng)絡瀏覽器都最終在其 CSS 引擎中添加了 round()、rem() 和 mod() 階梯值函數(shù)。
假設你使用 --width CSS 變量發(fā)送 1 到 1000 之間的任何像素值，但你需要使用最接近的 10 而不使用 JavaScript。以下 CSS 代碼片段可以實現(xiàn)這一目標：
<style> :root { --width: 527px } .container { background: #aaa; width: round(var(--width), 25px); height: 2em; }</style> <div class="container"></div>在瀏覽器上運行上述 HTML 片段并增加 --width 變量。容器寬度只會更新為可以被 25 整除的像素值，如下預覽所示：
round() 函數(shù)還允許開發(fā)者自定義舍入策略，如官方 MDN 文檔所述。
rem() 函數(shù)讓你在 CSS 中使用 JavaScript 的 % 運算符，并幫助你找到特定被除數(shù)-除數(shù)對的余數(shù)，如下面的 CSS 片段所示：
:root { --width: 50em; --block: 15em; --extra: rem(var(--width), var(--block)); /* --extra: 5em */}mod() 函數(shù)的行為與 rem() 函數(shù)相似，但其結果總是取除數(shù)的符號。
過去，大多數(shù)網(wǎng)站使用固定寬度，有些甚至標明用戶需要特定的屏幕分辨率才能獲得更好的可用性。響應式設計概念引入了一種使用 CSS 媒體查詢?yōu)椴煌聊讳秩靖呖捎眯跃W(wǎng)站布局的方法。我們都知道媒體查詢的響應式設計技巧，但媒體查詢不僅僅是為響應式設計實現(xiàn)的——它們還解決了一些其他關鍵用例。
例如，你可以使用媒體查詢?yōu)榇蛴∥臋n提供自定義樣式：
@media print { header, footer { display: none; }}打印預覽窗口可以幫助測試打印媒體類型，因此將上述 CSS 片段添加到現(xiàn)代網(wǎng)頁中，然后按 Ctrl + P 鍵組合。
可以使用 display-mode 媒體查詢功能來調整網(wǎng)頁全屏模式的樣式，如下所示：
@media (display-mode: fullscreen) { body { margin: 0; padding: 2em; border: 0.5em solid #aaa; }}上述 CSS 片段僅在全屏模式下應用邊框。還可以使用 aspect-ratio 媒體查詢功能檢查設備的縱橫比：
@media (aspect-ratio: 16 / 9) { body { background: darkcyan }}Chrome 設備模式可以幫助我們測試上述代碼片段，如下圖預覽所示：
媒體查詢還提供各種媒體功能，以檢查設備方向、系統(tǒng)顏色主題設置、JavaScript 是否啟用/禁用、屏幕 DPI（每英寸點數(shù)）值等。請從官方 MDN 文檔查看所有支持的媒體功能。
基礎的 HTML 表單控件，如按鈕、文本輸入、單選按鈕和復選框，從早期的 HTML 規(guī)范開始就可用。后來，HTML 規(guī)范引入了范圍滑塊、日期選擇器、顏色選擇器等控件，以構建現(xiàn)代 Web 應用程序。然而，大多數(shù)開發(fā)者不喜歡這些原生表單控件，因為它們的可定制性問題。他們使用基于 CSS 的自定義表單控件，但現(xiàn)在 CSS 開始引入新的屬性以自定義原生表單控件。
accent-color 屬性允許你更改原生表單控件的默認配色方案：
<input type="checkbox" style="accent-color: cadetblue"/><input type="radio" style="accent-color: teal"/><input type="range" style="accent-color: hotpink"/><br/><progress style="accent-color: darkcyan"></progress>上述代碼片段以不同的顏色方案渲染原生表單控件，如下預覽所示：
accent-color 屬性通過更新基于輸入顏色的所有原生表單控件的子元素來生成可訪問的顏色方案。目前，此功能僅適用于上述示例中顯示的表單元素。
CSS 還提供了 color-scheme 屬性，可與 accent-color 屬性一起使用，以提高在明亮和暗黑的系統(tǒng)主題上的原生表單控制可見性：
@media (prefers-color-scheme: dark) { body { background-color: black; color: white; } input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: white; color-scheme: dark; }}上述媒體查詢按如下方式更改原生表單控制顏色方案：
在未來，CSS 將提供新的屬性來調整原生表單控件樣式，并擴展 accent-color 對其他原生元素的支持，但你無疑可以使用現(xiàn)有的 CSS 功能來自定義文本輸入和按鈕。
CSS 計數(shù)器特性提供了一種創(chuàng)建計數(shù)器的方法，你可以在 CSS 選擇器中增加/減少計數(shù)器。我們可以將此功能應用于各種用例。一個簡單的用例是根據(jù)元素的出現(xiàn)次數(shù)顯示計數(shù)器值。
例如：
<style> :root { counter-reset: references } a[href]:empty { text-decoration: none } a[href]:empty::after { counter-increment: references; content: '[' counter(references) ']'; }</style><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in eleifend dolor <a ></a>. Integer mauris eros, posuere vitae ex feugiat, pretium ultrices ex <a ></a>. Nulla et nibh feugiat, pharetra ipsum vel, accumsan augue <a ></a>.</p>以上 CSS 定義創(chuàng)建了一個名為 references 的計數(shù)器，并使用 CSS 計數(shù)器為空的超鏈接標簽顯示 IEEE 引用格式。在這里，我們在 :root 選擇器中初始化計數(shù)器為 0，并通過每個空超鏈接的 ::after 偽類增加它。最后，我們通過訪問 counter() 函數(shù)的計數(shù)器值使用 content 屬性渲染計數(shù)器值。以上 HTML 文檔渲染出以下結果：
通過掌握這些鮮為人知的 CSS 特性，你可以根據(jù)高質量設計需求，優(yōu)化選擇 CSS 特性，高效設計網(wǎng)站。希望這些小技巧能幫助你在網(wǎng)頁設計中更上一層樓！
本文鏈接：http://m.www897cc.com/showinfo-26-99650-0.html應該立即學習的鮮為人知的 CSS 特性
聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號