本系列同步發表於我的 Hashnode 部落格:
Eva Chen | 網頁設計師下班後 (hashnode.dev)
本系列文章目標是學習 CSS 基本知識,並且研究 The State of CSS 中值得令人期待新屬性,讓想要學習 CSS 的人也能一起學到新知識,不用再零零散散地去爬文搜尋。此外,還會提及一些前端基本知識、版本控制、開發經驗等必要概念,讓新手對於前端開發有全面的認識。
這 30 天我的方向主要是:
自我挑戰:研究新穎的 CSS 屬性
每年都有的 The State of CSS 統計,討論了許多新提出的 CSS 屬性(例如:color-mix()
、:has
、max()
、min()
、clamp()
、container query
等等),我覺得很有趣,卻未曾實際深究,我想趁此機會加以了解。
作為筆記:供自己日後參考
延續上一點,將這些新學到的東西統整起來。再來是,過去在學習的時候有些容易混淆的部分,我希望也能藉此機會一起釐清。
工作了多年,我想留下個紀念,統整這些我所學到的知識,並且透過分享,在網路上留下一些痕跡。
幫助他人:讓人跨出學習網頁的第一步
除了統整好基礎前端與 CSS 知識外,並且上述所說未來能變得實用,且目前瀏覽器支援度還不差的新屬性(支援的瀏覽器>=3),一併整理在所有基礎知識中。這樣想學的人也能一起學到新知識,不用再零零散散地去爬文搜尋。
本系列文章會以 CSS 為主,HTML、Git 等網頁開發概念為輔。
主要目標族群是完全小白新手。無論你是想要學習網頁成為前端工程師,或是想要了解網頁如何運作的 PM 或設計師,都很適合。
我會介紹基礎的前端知識,因為我發現有時在開發上,PM、設計師或是業主,容易因為不懂前端或網頁上的 Domain Knowledge,造成上工作上的溝通成本或重工,而這往往只是缺乏了幾個簡單的概念。
次要則是已經會了,但是想了解 CSS 新屬性的人。
就讓我們開始這 30 天的前端基礎之旅吧!
(這 30 天內持續更新中)
#00
參賽前言 / 文章目錄
#02
關於各家瀏覽器,前端必備的小知識:支援度、市佔率、CSS 實驗語法 -webkit-, -moz-... PostCSS Autoprefixer
#05
HTML 基礎語法
#07
CSS 基本語法 & 權重介紹
#08
CSS 選擇器總整理!id、class、:nth-child(n)、:not、:where、:is、:has 都難不倒我
#28
CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行:white-space、word-break、-webkit-line-clamp 的妙用
#29
CSS 立體字、霓虹字、外框字、漸層字:text-shadow、-webkit-text-stroke、-webkit-background-clip
#31
CSS 顏色設定:基本的 hex、rgb()、cmyk()、hsl()、hsb() 、hwb() 與明日之星的 lch()、oklch()
#32
CSS currentcolor、accent-color 與混色的 color-mix() 讓規劃色彩系統好方便!
#33
CSS 切換淺色/深色模式:Media Queries 的 prefers-color-scheme 搭配 CSS 變數
#34
CSS 讓圖片填滿容器的各種方法,以圓形大頭貼為例:object-fit 與 background-size,搭配 aspect-ratio
#35
圖片的 1x, 2x, 3x 是什麼?關於網頁上圖片解析度的處理:HTML srcset、CSS image-set() 與 @media resolution
#36
HTML 用影片當背景,使用 iframe 嵌入 Youtube/ IG/ TikTok/ X (Twitter) 影片
#37
CSS 基本漸層:線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)
#41
用 CSS border-radius 畫圓角與圓圓的形狀:圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)
#44
CSS 邊框 border 與各種花式邊框的小技巧:borde-image、outline、box-shadow
#48
CSS 噪點漸層 (Grainy Gradients) 的製作方法 (todo)
#50
CSS 3D Transform
#51
CSS Transition 與一些小技巧:倒帶、影響相鄰的兄弟 (todo hover 巢狀冒泡效果)
#52
詳細了解 CSS 各種偽類:hover、focus、active、focus-within、focus-visible、target
(X) CSS Tab 動畫, tooltip (anchor positioning)
#53
CSS Animation (todo 逐格動畫 打字動畫 動畫暫停)
#55
純 CSS 照片淡入淡出輪播動畫
#63
CSS 自訂捲軸顏色與樣式:scrollbar-color、scrollbar-width、scrollbar-gutter、::-webkit-scrollbar-*
#??
HTML hash anchor CSS 滾動動畫與滾動目標提示 :target
#??
CSS scroll 行為設定 (scroll-behavior / scroll snap)
(X) 純 CSS 視差捲動 animation-timeline
#??
用 resize 製作 before & after 對比圖#??
數學被當掉的我,挑戰 CSS 三角函數,能成功嗎? sin()
cos()
(繞著圓周、面對方向永遠正面、改變顏色?)
#??
偽元素的妙用 ::before
、::after
:HTML data-...
、裝飾性元素、CSS 計數器 counter()
#??
SEO 基本概念:語意化標籤、Open Graph、結構化資料
#??
多種 SEO 檢測工具:Google Console、GA 分析、Bing Webmaster Tools、Ahrefs
#??
多種實用前端工具總整理,任務完成,打開百寶箱!
#??
真結局,感言
#??
本系列文章的更新補充紀錄
如果你喜歡我的創作,還想看看其他有趣的分享與日常,
可以追蹤我的 IG @im1010ioio,或者是🧋送杯珍奶鼓勵我,謝謝你🥰。