很多網站一打開就會跳「權限請求」的視窗，使用者第一個反應通常是：「為什麼要我的位置」、「我連內容都還沒看為何就要我訂閱」、「為什麼要我的xx存取權」，結果就是使用者直接拒絕。 Chrome 144 新增的 <geolocation> 就是在處理這類問題：在使用者理解網站功能後，讓權限請求從網站方變成使用者自己主動要求。 <geolocation> 在做什麼 一定要使用者點擊後才會問權限 不是 JavaScript 自己跳視窗，使用者已有心理準備。 請求發生在有情境的地方 例如「找附近店家」按鈕，點了才要位置，很直覺。 之前拒絕過，也還有回頭路 不用叫使用者自己跑去翻瀏覽器或系統設定。 開發者少寫一堆平台判斷 權限流程、系統層級阻擋，瀏覽器幫忙處理。 它不是突然冒出來的 一開始 Chrome 是用一個比較泛用的 <permission> 元素 做測試，從 Chrome 126 到 143 都在 origin trial。 後來發現，與其什麼權限都塞在同一個元素，不如拆成「用途明確」的元素比較好用，所以才有現在的 <geolocation> 。 相關文章： 對 <permission> 元素的再強化 。 實際怎麼用 用法很單純，就是把它當成一個 HTML 控制項放在畫面上。不支援的瀏覽器會自動吃裡面的 fallback。 <p> 點擊下方按鈕，找你附近的地點 <geolocation> <button onclick="requestLocationLegacy()"> 使用我目前的位置 </button> </geolocation> </p> 不支援 <geolocation> 的瀏覽器，會直接顯示裡面的 <but...

現在只要在CSS加上一行 text-autospace:normal ，中文與英文數字間就會自動產生空格般的視覺間距，不用再為這個網頁開發規範而煩惱。 舊有的快速解決方案 在以前，遇過一個開發規定，就是上面提到的「空格規範」，這其實很簡單就能做到：在VS Code開發環境使用AutoCorrect或 Auto Add Space between Chinese and English 套件就能自動幫你空格。 但如果是要修改公司從以前到現在累積的上千篇文章，全部更正除了人工加上空格之外，想要快速解決這個問題就是載入 pangu.js 這個套件在client端自動處理。 但這個套件其實在某些少數的狀況下不會產生空格，而且為了這個需求而載入一個套件，開發人員還要為此多寫一段測試。 text-autospace降臨解救眾生 在瀏覽器支援text-autospace語法之後，一切的問題都不再是問題。 body{ text-autospace:normal; } text-autospace的瀏覽器支援情況。 但是你在加上這行語法之後，若遇到中英文中間不需有空格視覺的時候（例如某些品牌名稱），則要再寫 text-autospace: no-autospace; 讓文字間看起來沒有空格。 另外，目前也沒有辦法設定這個空白空間的寬度，這是未來瀏覽器可以再精進的方向。 註：本篇文章中文與英文之間都沒有空格，並加上此語法，你可以直接看到此語法的視覺效果。

為什麼 API 權限全開，還是會封鎖連線？ 開發前後端分離架構，或是串接不同環境 API 時，常發生一種情況：後端已設定 Access-Control-Allow-Origin: * （允許所有網域存取），且 Postman 測試正常，但從瀏覽器環境透過 JavaScript 發送請求給內網或私有環境的 API 伺服器時，Chrome 卻強制阻擋連線。 這是 Chrome 實施「 區域網路存取權 」（Local Network Access, LNA）規範所致，目的是為了保護使用者免於跨網站要求偽造 (CSRF) 攻擊。 使用者在初次進入網站時， 若網頁向「本機」網路索取資料時 ，可能會看到這2種提示訊息視窗（也可能不會看到就自動封鎖或允許）： 這會帶來什麼影響？ 這項安全機制會導致即使後端 API 權限全開，瀏覽器仍攔截請求。具體的錯誤訊息如下： Access to fetch at 'https://api.example.com/apiName' from origin 'https://www.example.com' has been blocked by CORS policy: Permission was denied for this request to access the `unknown` address space. net::ERR_FAILED 有些人一看到「blocked by CORS policy」這幾個字可能會誤以為是CORS的問題，實際上並非如此，而是上面所述的LNA或HTTPS問題。 看到 Permission was denied for this request to access the ... address space 關鍵字，即代表觸發「區域網路存取限制」。瀏覽器判定來源（如 www.example.com ）位於公網，而目標解析後位於私有網路或無法判定的位址空間，直接封鎖。 技術債的償還：API 呼叫的正規做法 遇到此問題時，有些網站管理者會教使用者如何解除封鎖，並叫他們點擊「允許」： 點擊網址左邊的icon。 開啟存取權。 重新整理頁面。 跳出提示視窗時點擊允許。 使用者手動解除封...