零售大模型“干中學”，攀爬數(shù)字化珠峰
文/侯煜編輯/cc來源/華爾街科技眼對于絕大多數(shù)登山愛好者而言，攀爬珠穆朗瑪峰可謂終極目標。攀登珠峰的商業(yè)路線有兩條，一是尼泊爾境內(nèi)的南坡路線，一是中國境內(nèi)的北坡路線。相
盼了好久，最近 Chrome 125終于迎來了CSS 錨點定位的正式支持。這是一個和 CSS 滾動驅(qū)動動畫一樣，足以顛覆整個 Web 開發(fā)領(lǐng)域的新特性。有了這個特性，很多以前強依賴 JS 的方式，都可以純 CSS解決，并且實現(xiàn)起來更加簡單、更加靈活，一起看看吧！
可以看到，在切換tab時，底下的背景是可以無縫過渡的。在以前，我們要實現(xiàn)這樣的功能，必須要借助 JS來獲取當前點擊元素的尺寸和位置，但現(xiàn)在，只需要借助 CSS 錨點定位就能輕松實現(xiàn)了。
位置信息前面以及提到了，用anchor(left)和anchor(top)就可以了，那尺寸呢，需要用到anchor-size。
anchor-size(width) /*錨點元素寬度*/anchor-size(height) /*錨點元素高度*/利用這個特性，我們可以很輕松的實現(xiàn)這樣一個效果，結(jié)構(gòu)如下：
<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高亮背景，關(guān)鍵實現(xiàn)如下：
.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;}這樣就能輕松實現(xiàn)這個效果了，你也可以訪問以下在線鏈接（Chrome 125+）
有時候定位元素會處于屏幕邊緣，當沒有足夠空間顯示時，可以通過position-try-options來設置一個備用位置。
舉個例子，比如一個氣泡，默認是朝上的，當滾動到屏幕邊緣時會自動朝下，示意如下：
這種情況就可以用@position-try來實現(xiàn)了，具體做法是這樣的。
先通過position-try-options指定一個變量名，比如--bottom。
tooltip{ position: fixed; position-anchor: --anchor-el; inset-area: top; position-try-options: --bottom;}然后通過@position-try來定義規(guī)則。
@position-try --bottom { inset-area: bottom;}這樣就實現(xiàn)定位元素位置自動調(diào)整了。
除此之外，還有一種便捷寫法，直接給position-try-options指定以下關(guān)鍵字。
position-try-options: flip-block; /*垂直翻轉(zhuǎn)*/position-try-options: flip-inline; /*水平翻轉(zhuǎn)*/這樣就無需@position-try定義了，實現(xiàn)更簡單。
當然，我覺得這個功能還是稍顯不足的，比如當氣泡帶有箭頭時，雖然也能翻轉(zhuǎn)，但是卻無法改變箭頭的位置，也就是無法查詢到當前是否已經(jīng)翻轉(zhuǎn)了，就像這樣。
首先是點擊出現(xiàn)，這個就是popover的功能了，通過popovertarget和popover屬性，將兩者結(jié)合起來，就能輕松實現(xiàn)點擊出現(xiàn)菜單的功能。
<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;}這樣就能輕易實現(xiàn)懸浮菜單了，你也可以訪問以下在線鏈接（Chrome 125+）
在codepen上找到了一個更完善的多級菜單案例。
https://codepen.io/jh3y/pen/dyLjbwG
介紹了這么多，一下子肯定難以接受，多回顧幾遍就明白了，至少可以知道錨點定位是干嘛的，如果以后有類似的需求也有一定的方向，下面總結(jié)一下本文要點
最近幾年CSS更新的確實有點太快了，很多以往的疑難雜癥都有了新的解決方式。但是很多時候?qū)W這些好像暫時沒啥用，畢竟可能 5 年以后才用得上。但是原生特性不像其他，一個框架兩三年就有可能被淘汰，或者有新的替代品出現(xiàn)，原生的學到了就學到了，只要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://m.www897cc.com/showinfo-26-101375-0.htmlCSS錨點定位終于來了！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： ES13 中最具變革性的五個 JavaScript 功能
下一篇： 軟件版本號為什么那么奇怪？你知道嗎？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號