鴻蒙OS 4.0公測機型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統將于今天下午正式登場，官方在發布會之前也已經正式給出了可升級的機型產品，這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
隨著 WWW（萬維網）的發明，一個新的數字時代誕生了。早期的 WWW 僅包含純 HTML 文檔，這些文檔使用語義 HTML 標簽來區分網頁元素之間的基本樣式。后來，CSS 作為一種基于鍵值的簡單樣式語言被引入，用于為語義 HTML 標簽設置樣式。CSS 不斷演進，現如今，網頁設計師可以使用 CSS 創建現代風格、動畫、響應式元素和圖像濾鏡，且語法對開發者友好。
現代 CSS 標準不僅僅是基本的鍵值語法，還提供了函數和嵌套塊（如 at-rules）。此外，現代 CSS 語法支持偽元素、偽類和選擇器組合。這些 CSS 特性旨在提高開發者的生產力，幫助他們構建可用的現代網站，這些網站在標準網頁瀏覽器上運行流暢。
以下是一些大多數網頁設計師在設計網站時不常用的 CSS 特性。掌握這些鮮為人知的 CSS 特性，以充分利用 CSS 的潛力，根據高質量的設計需求，優化選擇 CSS 特性來高效設計網站！
傳統的響應式設計概念鼓勵開發者根據設備視口大小調整網站布局。而流體設計概念則建議使用相對單位和 CSS 數學函數，根據視口大小動態調整整個網站元素。
假設你需要根據視口寬度動態調整標題字體大小，使用最小和最大字體大小邊界。你可以使用 CSS 的 clamp() 函數實現一行解決方案：
<style> h1 { font-size: clamp(2.2em, 3vw + 1em, 2.5em) }</style><h1>CSS math functions</h1>上述 clamp 函數調用使用 3vw + 1em 表達式動態設置字體大小，但防止字體大小超出 2.2em 和 2.5em 的邊界。
同樣，你可以使用 min() 和 max() 函數僅設置一個邊界的動態計算數值 CSS 值。例如，以下 CSS 代碼片段去除了前一個 clamp() 函數示例的上限邊界：
h1 { font-size: max(2.2em, 3vw + 1em) }你可以使用這些 CSS 數學函數根據流體設計原則調整布局元素的間距和尺寸。此外，現代 CSS 提供了幾個以網格為重點的函數，通過不使用媒體查詢實現流體設計以提高響應性。
看一下以下的 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>
每種通用編程語言通常提供十進制舍入函數和內置余數/取模運算符，以實現一些通用的數學算法。CSS 規范在流行的舊 calc() 函數后開始引入更多數學函數。自 2024 年起，每個流行的網絡瀏覽器都最終在其 CSS 引擎中添加了 round()、rem() 和 mod() 階梯值函數。
假設你使用 --width CSS 變量發送 1 到 1000 之間的任何像素值，但你需要使用最接近的 10 而不使用 JavaScript。以下 CSS 代碼片段可以實現這一目標：
<style> :root { --width: 527px } .container { background: #aaa; width: round(var(--width), 25px); height: 2em; }</style> <div class="container"></div>在瀏覽器上運行上述 HTML 片段并增加 --width 變量。容器寬度只會更新為可以被 25 整除的像素值，如下預覽所示：
round() 函數還允許開發者自定義舍入策略，如官方 MDN 文檔所述。
rem() 函數讓你在 CSS 中使用 JavaScript 的 % 運算符，并幫助你找到特定被除數-除數對的余數，如下面的 CSS 片段所示：
:root { --width: 50em; --block: 15em; --extra: rem(var(--width), var(--block)); /* --extra: 5em */}mod() 函數的行為與 rem() 函數相似，但其結果總是取除數的符號。
過去，大多數網站使用固定寬度，有些甚至標明用戶需要特定的屏幕分辨率才能獲得更好的可用性。響應式設計概念引入了一種使用 CSS 媒體查詢為不同屏幕渲染高可用性網站布局的方法。我們都知道媒體查詢的響應式設計技巧，但媒體查詢不僅僅是為響應式設計實現的——它們還解決了一些其他關鍵用例。
例如，你可以使用媒體查詢為打印文檔提供自定義樣式：
@media print { header, footer { display: none; }}打印預覽窗口可以幫助測試打印媒體類型，因此將上述 CSS 片段添加到現代網頁中，然后按 Ctrl + P 鍵組合。
可以使用 display-mode 媒體查詢功能來調整網頁全屏模式的樣式，如下所示：
@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 設備模式可以幫助我們測試上述代碼片段，如下圖預覽所示：
媒體查詢還提供各種媒體功能，以檢查設備方向、系統顏色主題設置、JavaScript 是否啟用/禁用、屏幕 DPI（每英寸點數）值等。請從官方 MDN 文檔查看所有支持的媒體功能。
基礎的 HTML 表單控件，如按鈕、文本輸入、單選按鈕和復選框，從早期的 HTML 規范開始就可用。后來，HTML 規范引入了范圍滑塊、日期選擇器、顏色選擇器等控件，以構建現代 Web 應用程序。然而，大多數開發者不喜歡這些原生表單控件，因為它們的可定制性問題。他們使用基于 CSS 的自定義表單控件，但現在 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 屬性一起使用，以提高在明亮和暗黑的系統主題上的原生表單控制可見性：
@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 對其他原生元素的支持，但你無疑可以使用現有的 CSS 功能來自定義文本輸入和按鈕。
CSS 計數器特性提供了一種創建計數器的方法，你可以在 CSS 選擇器中增加/減少計數器。我們可以將此功能應用于各種用例。一個簡單的用例是根據元素的出現次數顯示計數器值。
例如：
<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 定義創建了一個名為 references 的計數器，并使用 CSS 計數器為空的超鏈接標簽顯示 IEEE 引用格式。在這里，我們在 :root 選擇器中初始化計數器為 0，并通過每個空超鏈接的 ::after 偽類增加它。最后，我們通過訪問 counter() 函數的計數器值使用 content 屬性渲染計數器值。以上 HTML 文檔渲染出以下結果：
通過掌握這些鮮為人知的 CSS 特性，你可以根據高質量設計需求，優化選擇 CSS 特性，高效設計網站。希望這些小技巧能幫助你在網頁設計中更上一層樓！
本文鏈接：http://www.tebozhan.com/showinfo-26-99650-0.html應該立即學習的鮮為人知的 CSS 特性
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號