標籤: CSS 頁1
[CSS] 當畫面捲動到超過畫面時讓元素固定在頁面某處- position: sticky
做網站有一個常見的需求是當我們把內容捲動到超過畫面時，希望讓某個區塊固定在畫面上某處，以往我們可以使用 js 偵測頁面捲動到元素時設定 position: fixed 來固定，不過這個畢竟是用 js 搭配 css，第一個會有可能有延遲的狀況，另一個則是需要再調整樣式，不過在 CSS3 後來有 position: sticky 之後，就方便多了。
[CSS] 設定 focus 後讓上層元素改變樣式的選擇器- :focus-within
:focus-within 是一個可以用來改變上層元素樣式的偽類選擇器，只要在你要套用的元素上面加上 :focus-within，這樣裡面只要有表單元素有被 focus，就會吃到該樣式。
使用 CSS 製作錐狀漸層- conic-gradient()
CSS 以往可以設定的漸層只有線性跟放射狀漸層，現在多了新的漸層填色方式 conic-gradient()，用中文翻大概就是錐狀漸層這樣吧。
[CSS] CSS 原生變數(CSS Variables)使用技巧與說明
在還沒有原生的 CSS 變數之前，很多人應該在使用 SCSS 等工具在撰寫的時候感受到變數的方便，而 CSS 在近年也有了原生的變數可以使用，搭配好還是可以在撰寫純 CSS 的時候讓 code 變得更好維護。
自訂網頁卷軸(scrollbar)樣式
以前要設定網頁捲軸顏色的時候曾經有段時間可以使用 -ms-scrollbar-base-color，不過這過當出只存在舊版 ie，現在這個屬性已經沒有用了，如果還有想要在網頁上自訂卷軸樣式的話，可以使用 ::-webkit-scrollbar 的屬性。
[CSS] 設定 dark mode 下的 CSS 樣式
Mac 在近年推出了 Dark Mode，讓一些喜歡暗色系的使用者可以享受深色底的視窗環境，而這個 Dark Mode 也可以直接在 CSS 的 media query 設定，就能讓你的網頁在 Dark Mode 之下能長得不一樣喔。
解決手機上 safari, chrome 瀏覽器 100vh 無法剛好一整頁的問題
如果我們想要把內容鎖定在一個頁面的高度，在電腦版很自然會想到用 100vh 去設定，但在 safari 會遇到一個問題就是你預期他高度是一個螢幕高，但 header 跟底下的 nav 會把螢幕蓋掉，這樣就會發有一部分被遮掉了。
[CSS] 使用 scroll-behavior 達成免用 js 的平滑滾動效果
常常在做一頁式的頁面時，會做到點了某的按鈕會滑動到指定地方的效果，這個傳統來說是先利用 id 設定錨點，點擊後再根據錨點算出移動的距離後移動過去，現在我們可以用純 CSS 的 scroll-behavior 就幫我們達成這個功能了。
輕量的前端打包工具 parcel.js 安裝教學
近年前端在開發的時候往往都需要使用一些打包工具，方便我們在使用新的開發方式後可以在瀏覽器正常運作，其中最熱門的就是 webpack，但 webpack 本身很大也很複雜，如果想要感受打包工具威力的話，這邊我們可以先使用 parcel.js 這隻打包工具來幫助我們專案的開發。