石頭智能洗地機A10 Plus體驗：雙向自清潔治好了我的懶癌
一、前言和介紹專為家庭請假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機A10 Plus。從這個產品名上就不難看出，這次石頭推出的并不是常見的掃地機器
盼了好久，最近 Chrome 125終于迎來了CSS 錨點定位的正式支持。這是一個和 CSS 滾動驅動動畫一樣，足以顛覆整個 Web 開發領域的新特性。有了這個特性，很多以前強依賴 JS 的方式，都可以純 CSS解決，并且實現起來更加簡單、更加靈活，一起看看吧！
可以看到，在切換tab時，底下的背景是可以無縫過渡的。在以前，我們要實現這樣的功能，必須要借助 JS來獲取當前點擊元素的尺寸和位置，但現在，只需要借助 CSS 錨點定位就能輕松實現了。
位置信息前面以及提到了，用anchor(left)和anchor(top)就可以了，那尺寸呢，需要用到anchor-size。
anchor-size(width) /*錨點元素寬度*/anchor-size(height) /*錨點元素高度*/利用這個特性，我們可以很輕松的實現這樣一個效果，結構如下：
<nav class="tab"> <a class="item" href="#HTML" name="HTML">HTML</a> <a class="item" href="#CSS" name="CSS">CSS</a> <a class="item" href="#JavaScript" name="JavaScript">JavaScript</a> <a class="item" href="#React" name="React">React</a> <a class="item" href="#Vue" name="Vue">Vue</a></nav>我們用偽元素來當做tab高亮背景，關鍵實現如下：
.tab::after{ content: ''; position: absolute; border-radius: 100px; background-color: rgba(65, 105, 225, 0.2); position-anchor: --anchor-el; width: anchor-size(width); height: anchor-size(height); left: anchor(left); top: anchor(top); transition: .3s; pointer-events: none;}.item:target{ anchor-name: --anchor-el;}這樣就能輕松實現這個效果了，你也可以訪問以下在線鏈接（Chrome 125+）
有時候定位元素會處于屏幕邊緣，當沒有足夠空間顯示時，可以通過position-try-options來設置一個備用位置。
舉個例子，比如一個氣泡，默認是朝上的，當滾動到屏幕邊緣時會自動朝下，示意如下：
這種情況就可以用@position-try來實現了，具體做法是這樣的。
先通過position-try-options指定一個變量名，比如--bottom。
tooltip{ position: fixed; position-anchor: --anchor-el; inset-area: top; position-try-options: --bottom;}然后通過@position-try來定義規則。
@position-try --bottom { inset-area: bottom;}這樣就實現定位元素位置自動調整了。
除此之外，還有一種便捷寫法，直接給position-try-options指定以下關鍵字。
position-try-options: flip-block; /*垂直翻轉*/position-try-options: flip-inline; /*水平翻轉*/這樣就無需@position-try定義了，實現更簡單。
當然，我覺得這個功能還是稍顯不足的，比如當氣泡帶有箭頭時，雖然也能翻轉，但是卻無法改變箭頭的位置，也就是無法查詢到當前是否已經翻轉了，就像這樣。
首先是點擊出現，這個就是popover的功能了，通過popovertarget和popover屬性，將兩者結合起來，就能輕松實現點擊出現菜單的功能。
<button class="btn" popovertarget="more"></button><div class="menu" id="more" popover> <button class="item">編輯</button> <button class="item">刪除</button></div>然后就定位，利用CSS錨點定位，將菜單定位到按鈕的右下方，也就兩三行代碼的事。
.btn{ anchor-name: --menu;}.menu{ position-anchor: --menu; inset-area: bottom span-right;}這樣就能輕易實現懸浮菜單了，你也可以訪問以下在線鏈接（Chrome 125+）
在codepen上找到了一個更完善的多級菜單案例。
https://codepen.io/jh3y/pen/dyLjbwG
介紹了這么多，一下子肯定難以接受，多回顧幾遍就明白了，至少可以知道錨點定位是干嘛的，如果以后有類似的需求也有一定的方向，下面總結一下本文要點
最近幾年CSS更新的確實有點太快了，很多以往的疑難雜癥都有了新的解決方式。但是很多時候學這些好像暫時沒啥用，畢竟可能 5 年以后才用得上。但是原生特性不像其他，一個框架兩三年就有可能被淘汰，或者有新的替代品出現，原生的學到了就學到了，只要web存在的一天，就永遠都不會過時，所以也不虧是吧。
[1]CSS anchor (codepen.io)： https://codepen.io/xboxyan/pen/dyEVVPb。
[2]CSS anchor nav (codepen.io)： https://codepen.io/xboxyan/pen/zYQpvqg。
[3]CSS anchor position-try-options (codepen.io)： https://codepen.io/xboxyan/pen/dyEJYRO。
[4]CSS anchor menu (codepen.io)： https://codepen.io/xboxyan/pen/qBGpOKq。
本文鏈接：http://www.tebozhan.com/showinfo-26-101375-0.htmlCSS錨點定位終于來了！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： ES13 中最具變革性的五個 JavaScript 功能
下一篇： 軟件版本號為什么那么奇怪？你知道嗎？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號