鐵人檔案
現在許多網站都有分享按鈕，按了之後會看到分享到社群媒體、藍芽分享又或是複製連結分享。今天想加上一個分享按鈕，點擊後複製網頁連結，並跳出已複製連結的提醒訊息。 先...
昨天完成了複製連結的分享按鈕，那當我們傳送連結時會長什麼樣子？假設我們分享一篇IG貼文到Line上，會像下圖這樣。簡單來說，會像下圖這種配置不過在沒有做任何設定...
有些瀏覽器可能會禁用JavaScript，而之前做的讀取畫面是透過JavaScript來隱藏的，那在禁用JavaScript的瀏覽器中，讀取畫面就會一直存在，無...
前幾天我加入了深色模式，讓網頁可以有不同樣式，不過深色模式的背景圖不會在一開始就被加載，導致當使用者切換模式時，會閃過一個白畫面影響美觀，那有沒有辦法可以讓它在...
LCP-Largest Contentful Paint表示頁面上顯示最大內容所花的時間，主要用來評估網站的載入速度。 先到開發人員工具的Performance...
昨天提到縮短頁面準備時間可以加快載入速度，今天紀錄一個簡單的辦法，延遲載入圖片。簡單來說，就是讓還沒用到的圖片先等等，等到快需要用到時再加載，以減少初始頁面的加...
前幾天提到一些關於網頁優化的內容，這幾天回到CSS上，CSS預處理器是什麼？CSS預處理器就是一種可以讓開發者用另一種語法規則來寫CSS，再編譯成CSS檔案讓瀏...
昨天提到預處理可以支援更多，巢狀、函數等等功能，不過會發現在DAY14 文字右移效果的時候，我並沒有加入預處理器。 CSS 巢狀（上次更新時間：2023-03-...
今天最後再加入一些樣式，把畫面優化一下。 ▍隱藏滾動條 ::-webkit-scrollbar { display: none; } 畫面在沒有滾動條和有...
這次的網頁斷斷續續地寫，到完成大概花了一個半月，不過沒想到的是，可以寫出來的部分比想像中還少。因為有很大部分的時間都花在微調CSS上，加上網路上也有不少教學文，...
