不知道大家有沒有看了Apple的 WWDC25 ？先不論他們說了什麼，我只在想他們的液態玻璃（Liquid Glass）UI要如何實現（這裡討論的是靜態效果）。 部分UI改成毛玻璃樣式。 然而大部分元件則是改成不太一樣的液態玻璃樣式。 backdrop-filter 一開始當然是先想到從以前就有的毛玻璃效果（Glassmorphism），也就是用backdrop-filter來嘗試： See the Pen backdrop-filter by cj ( @cjzopen ) on CodePen . 但你可以發現，做不出底下文字或圖片扭曲的效果，於是就想到了SVG的filter。 <svg style="display: none;"> <filter id="wavy-distort"> <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="2" result="turbulence"/> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G"/> </filter> </svg> feTurbulence 我們可以先在HTML裡創造一個擁有filter的SVG，其中包含feTurbulence： type: turbulence (亂流) / fractalNoise (雲)。 baseFrequency: 雜訊圖的密度。 numOctaves: 雜訊圖疊的層數。 result: 類似 id，後續拿來引用的名稱。 再使用feDisplacementMap引用feTurbulence： ...

其實 HTML 已經有內建 Popover API 了，在某些簡單的場合下，你可以考慮直接用 HTML 和 CSS 就能寫出燈箱（彈出視窗）效果。 本圖片由AI生成 popovertarget 在 button 加上 popovertarget 對應燈箱的 id。 建立一個有 id 的元素，作為燈箱使用。 大功告成！ 疑？就這樣？ 對，就是這麼簡單。再來只要用 CSS 美化就好了。 See the Pen pure HTML popup by cj ( @cjzopen ) on CodePen . ::backdrop 這個 CSS 語法可以設計開啟燈箱的時候，燈箱以外的區域，例如背景顏色。 :popover-open 當你有多個 HTML 原生燈箱元素時，可以用這個語法先設計出 default 燈箱。 @starting-style 你可以用這個語法搭配 transition 做出開啟彈出視窗時的過場動畫。 要注意的缺點 不過，原生 Popover API 有個明顯的缺點：當你點擊 ::backdrop 關閉 popover 時，這個點擊事件會「穿透」到底層元素，導致下方的按鈕或其他元素也意外被觸發。

常常遇到上司想在網頁上方便觀看一些搜集而來的數據，之後又說想要把網頁上的表格匯出成 csv 檔案，方便他們用 excel 計算一些東西。這時候該怎麼辦才好？ 以下為使用 jQuery 的解決方案 function exportTableToCSV($table, filename) { var $rows = $table.find('tr:has(td)'), // Temporary delimiter characters unlikely to be typed by keyboard // This is to avoid accidentally splitting the actual contents tmpColDelim = String.fromCharCode(11), // vertical tab character tmpRowDelim = String.fromCharCode(0), // null character // actual delimiter characters for CSV format colDelim = '","', rowDelim = '"\r\n"', // Grab text from table into CSV formatted string csv = '"' + $rows.map(function(i, row) { var $row = $(row), $cols = $row.find('td'); return $cols.map(function(j, col) { var $col = $(col), text = $col.text(); if(/^(0)([0-9]){9}/.test(text)){ return '=""'+text...

<picture> 是 HTML5 包覆圖片用的 tag。可以搭配 source 來因應不同情況下（解析度、寬度），甚至是相容性（webp、jpg、svg、png……）來顯示的圖片。 現況 基本上所有的瀏覽器都支援此 HTML5 的 tag，除了 IE ( Edge )系列要更新到 Edge 13 之後的版本才能使用。不過就算不支援也只是回到原先的 img 而已，沒有什麼大礙。 使用方法 不同的圖片類型： <source srcset="img/text.avif" type="image/avif"> <source srcset="img/text.webp" type="image/webp"> 不同瀏覽器寬度： <source media="(min-width: 768px)" srcset="text-768.jpg"> <source media="(min-width: 360px)" srcset="text-360.jpg"> picture 會由上到下找尋吻合瀏覽器現況的 source 值，若第一個 source 值不符合使用的瀏覽器的支援度，才會去找第二個、第三個……，以此類推，都不適用才會直接套用原本寫在 img 的圖片。 實例 <picture> <source media="(min-width: 1440px)" srcset="https://api.fnkr.net/testimg/1920x400/9a91f2/FFF/?text=min-width-1440px"> <source media="(min-width: 768px)" srcset="https://api.fnkr.net/testimg/1440x300/c7254e/FFF/?text=min-width-992px"> <img src="https:/...