Redmi Buds 4開箱簡評：才199還有降噪 可以無腦入
在上個月舉辦的Redmi Note11T Pro系列新機發布會上，除了兩款手機新品之外，Redmi還帶來了兩款TWS真無線藍牙耳機產品，Redmi Buds 4和Redmi Buds 4 Pro，此前我們在Redmi Note11T
有時候，提升你的應用程序的CSS只需要一個簡單的一行升級或增強！了解這12個屬性，開始將它們融入到你的項目中，享受減少技術債務、去除JavaScript，以及為用戶體驗贏得輕松的勝利。
你是否曾為視頻嵌入時的寬高比感到困擾？例如，我們常見的高清視頻寬高比是16:9。過去，我們可能需要使用一些復雜的方法來實現這個比例，比如大家熟悉的“padding hack”。但現在，有了一個更簡潔的解決方案。
padding hack：https://css-tricks.com/aspect-ratio-boxes/
2021年9月開始，大多數主流瀏覽器都穩定支持了一個新的CSS屬性：aspect-ratio。這個屬性可以非常方便地定義元素的寬高比。比如說，對于一個高清視頻，你只需要設置aspect-ratio: 16/9就可以了。如果你想要一個完美的正方形，設置aspect-ratio: 1即可，因為默認情況下第二個值也是1。
來看一個例子：
.aspect-ratio-hd { aspect-ratio: 16/9;}.aspect-ratio-square { aspect-ratio: 1;}
值得一提的是，應用了aspect-ratio屬性的元素在某種程度上是“寬容”的。這意味著當內容導致元素在至少一個維度上超出設定的比例時，元素仍然會增長或變形以適應內容。為了防止或控制這種行為，你可以添加額外的尺寸屬性，如max-width，這在避免元素超出彈性盒或網格容器時可能是必要的。
雖然這個屬性已經出現了一段時間，但它解決了一個重要的問題，并且可以說是“一行代碼”的升級。
object-fit屬性的作用是讓img標簽或其他替換元素（如視頻）的內容表現得就像它們是容器本身，從而使這些內容能夠像背景圖片那樣進行尺寸調整。
這個屬性有幾個值可以選擇，但最常用的可能是以下兩個：
在這兩種情況下，object-fit與aspect-ratio結合使用是非常理想的，這可以確保在應用自定義寬高比時圖片不會失真。
.image { object-fit: cover; aspect-ratio: 1; /* Optional: constrain image size */ max-block-size: 250px;}margin-inline是CSS邏輯屬性中的一員，用于簡化水平書寫模式下（如英文、中文）的左右外邊距設置。在傳統的CSS中，你可能會分別設置margin-left和margin-right來達到這一目的。而使用margin-inline，可以更加簡潔和高效地完成同樣的任務。
/* 之前的寫法 */margin-left: auto;margin-right: auto;/* 使用margin-inline */margin-inline: auto;使用margin-inline的主要優勢在于它的“邏輯性”。這意味著它可以根據文本的書寫模式（如從左到右、從右到左）自動調整外邊距。這對于設計能夠適應多種語言和文化的網站尤其重要。
舉個例子，對于從右到左書寫的語言（如阿拉伯語），margin-inline-start將自動應用于右邊距，而margin-inline-end應用于左邊距。這樣，無論內容是哪種書寫模式，布局都能保持一致和諧。
現在，margin-inline等邏輯屬性已經得到了廣泛的支持，兼容性超過了98%，盡管在某些情況下可能需要添加前綴。
text-underline-offset屬性用于控制文本基線與下劃線之間的距離。通過這個屬性，開發者可以精確地定位下劃線的位置，使其既不遮擋文字，又能起到強調作用。
/* 應用text-underline-offset */a:not([class]) { text-underline-offset: 0.25em;}在這個例子中，所有沒有class屬性的a元素（通常是鏈接）的下劃線被設置了0.25em的偏移量。
text-underline-offset可以與其他CSS屬性結合使用，以實現更加豐富的視覺效果：
a { text-decoration-color: blue; /* 下劃線顏色 */ text-decoration-thickness: 2px; /* 下劃線粗細 */ text-underline-offset: 0.25em; /* 下劃線偏移量 */}在Web前端開發中，為元素添加視覺焦點是一項基本且重要的任務。傳統上，我們可能會使用box-shadow或偽元素來創建元素焦點時的自定義輪廓。但其實，有一個自2006年就已存在的CSS屬性可能被許多人忽略了——outline-offset。這個屬性可以讓你輕松地控制元素輪廓的位置。
outline-offset屬性允許你調整輪廓（outline）與元素邊界之間的距離。通過設置正值，可以將輪廓向外推移；設置負值，則可以將輪廓向內拉近。
/* 應用outline-offset */.outline-offset { outline: 2px dashed blue; /* 藍色虛線輪廓 */ outline-offset: var(--outline-offset, .5em); /* 輪廓偏移量 */}在這個例子中，當元素獲得焦點時，它將顯示一個藍色虛線輪廓，輪廓與元素邊界之間的距離為0.5em。
兩個相對較新的CSS屬性：scroll-margin和scroll-padding，它們在處理滾動行為時尤為重要。
scroll-margin系列屬性允許你為元素在滾動位置上下文中添加一個偏移量。這在處理諸如固定導航欄遮擋錨點鏈接內容時特別有用。
/* 為所有具有id屬性的元素添加scroll-margin */[id] { scroll-margin-top: 2rem;}在這個例子中，任何具有id屬性的元素，在通過導航滾動到它時，其頂部都會有2rem的額外空間，以避免被固定在頂部的導航欄遮擋。
與scroll-margin類似，scroll-padding屬性可以在滾動視圖內增加內邊距。這不會影響元素在文檔中的布局位置，但可以改善滾動到特定元素時的視覺體驗。
隨著暗黑模式在用戶界面中的普及，為網站或應用程序提供光暗主題切換成為了一種流行趨勢。CSS中的color-scheme屬性為開發者提供了一種簡單的方式來適配瀏覽器UI元素的光暗模式，今天我們就來深入探討它的應用。
color-scheme屬性允許網頁告訴瀏覽器，其內容是為淺色模式、暗色模式，或兩者皆適配的。設置此屬性后，瀏覽器會自動調整表單控件、滾動條和CSS系統顏色等UI元素，以適應相應的主題模式。
/* 在根元素上設置color-scheme */:root { color-scheme: dark light;}你也可以在單個元素上使用color-scheme屬性，以改善特定背景下的對比度和可讀性。
/* 對暗背景的元素使用暗色模式 */.dark-background { color-scheme: dark;}在前端開發中，定制化表單元素的樣式一直是一個挑戰，尤其是對于復選框和單選按鈕這樣的原生UI控件。幸運的是，CSS引入了一個新屬性accent-color，讓這一任務變得更加簡單和直觀。
accent-color屬性允許開發者改變復選框、單選按鈕、進度條和滑塊（range）等表單控件的主題色。通過這個屬性，你可以輕松地為這些元素設置一個自定義的顏色，以匹配你的網站或應用程序的整體風格。
/* 使用accent-color自定義顏色 */:root { accent-color: mediumvioletred;}在這段代碼中，所有原生的表單控件（如單選按鈕和復選框）將使用中紫羅蘭紅色作為它們的主題色。
在前端開發中，經常需要調整元素的寬度以適應其內容。傳統方法如使用display: inline-block等，雖然能實現這一需求，但可能會影響元素的布局位置。幸運的是，CSS提供了一個更為優雅的解決方案——width: fit-content屬性。
width: fit-content 屬性允許元素的寬度自動調整以適應其內容的大小，相當于“收縮包裹”（shrink wrap）效果。這意味著元素的寬度會剛好足夠容納其內容，不會過大或過小。
/* 應用width: fit-content */.fit-content { width: fit-content;}在這個例子中，類名為.fit-content的元素將其寬度自動調整為恰好適應其內容的大小。
在網頁設計中，處理滾動行為是提升用戶體驗的關鍵之一。特別是在有限維度的滾動區域（如側邊欄或滾動框），當滾動到達邊界時，滾動行為可能會傳遞給背景頁面，這可能會給用戶帶來不便。為了解決這個問題，CSS提供了一個屬性overscroll-behavior。
overscroll-behavior屬性允許開發者控制滾動區域的邊界行為。當設置為contain時，它可以阻止滾動行為從一個滾動容器傳遞到其父容器或背景頁面。
/* 設置overscroll-behavior */.overscroll-container { overscroll-behavior: contain;}在這個例子中，類名為.overscroll-container的元素在達到滾動邊界時，不會將滾動行為傳遞給其父級元素或背景頁面。
在網頁排版中，處理文本換行是一個經典問題，尤其是要避免在段落的最后一行留下孤立的單詞（又稱“孤行”）。2023年，CSS引入了一個新屬性text-wrap，旨在解決這類排版問題。
text-wrap屬性提供了對文本換行行為的更精細控制，其目標是均衡每行文本的字符數，從而避免不平衡的文本行和孤行現象。
balance：這個值的目標是均衡每行的字符數，使得文本行更加平衡和諧。
/* 應用text-wrap屬性 */.headline { text-wrap: balance;} /* For demonstration */ max-inline-size: 25ch;
text-wrap屬性的pretty值是針對防止孤行設計的。它的算法會評估文本塊的最后四行，根據需要做出調整，確保最后一行至少有兩個單詞。
/* 應用text-wrap屬性的pretty值 */.article-text { text-wrap: pretty;}
在網頁設計中，滾動條的出現和消失有時會導致不希望的布局變化。為了解決這一問題，CSS引入了一個新屬性scrollbar-gutter，它允許在布局中預留滾動條的空間，防止這種不期望的布局偏移。
scrollbar-gutter屬性的主要作用是在滾動容器中預留出滾動條的空間。即使在不需要滾動條的情況下，瀏覽器也會繪制一個“溝槽”（gutter），作為滾動容器的額外空間，避免了因滾動條消失而引起的布局變化。
/* 使用scrollbar-gutter屬性 */.container { scrollbar-gutter: stable both-edges;}至此，我們對幾個CSS中的新特性進行了深入的探討和分析。從text-wrap的平衡排版到scrollbar-gutter防止布局偏移的巧妙應用，這些現代CSS特性為前端開發者打開了新的大門。希望本文能幫助大家更好地理解這些新工具，從而在實際項目中運用得心應手，創造出更加美觀、用戶友好的網頁。前端技術的世界總是充滿驚喜和挑戰，讓我們保持好奇心，不斷學習和探索，共同推動這個領域的發展。
本文鏈接：http://www.www897cc.com/showinfo-26-80345-0.html分享 12 個現代化 CSS 新屬性
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Python進階：多進程編程攻略
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號