【CSS】 Kevin Powell's CSS lessons
===

- [製作 responsive header with hamburger menu](https://www.youtube.com/watch?v=HbBMp6yUXO0)
1. **margin-inline:** 設定 margin-left + margin-right 的 shorthand。除了 IE 其他 browser 都支援。
2. **margin-block:** 設定 margin-top + margin-bottom 的 shorthand。以上兩者也有 `padding-*` 的版本。
3. 對 Logo 自身使用 margin，不設定 header 本身的 margin。
4. **padding: min(10vh, 100px)** mobile 時因為手機畫面小，所以手機板會優先使用 10vh，隨畫面越用越大，會固定用 100px。
5. **rgb() 跟 hsl():** 有新的用法，除了 rgb(0,0,0) 還有 rgb(0 0 0 / .5)
6. **backdrop-filter: blur(2px)** 不一定所有 browser 都支援 (例如IE 和 FF)，所以要改寫成 不使用 backdrop 時的預設背景 + `@supprts (backdrop-filter: blur(2px))` 。記得這兩種設計都要能讓字看得清楚。

nav {
    color: #fff;
    background: rgba(0 0 0 / .5);
    /* 因為是白色字所以預設用黑色背景 */
}
@supports (backdrop-filter: blur(2px)) {
    nav {
        background: hsl(0 0% 100% / .2);
        backdrop-filter: blur(2px);
        /* 微透明的白色背景 */
    }
}

6. **Hamburger:** 通常是自備漢堡圖片 + 關閉圖片，然後點擊的時候切換。
1. 切換方式是預設 `button background: url(hamburger.svg)`, 打開菜單時 `button[aria-expanded="true"] background: url(close.svg)`
2. 在 js 對 `aria-expanded` 切換
3. 設置 `position=absolute` `z-index: 99` 並永置於畫面右上方
4. html 寫在 header 裡面，但不寫在 nav 裡面。他們互相獨立。
7. **Menu**: 通常製作方式是 先做好顯示的版，再用 `transform: translateX(100%)` 讓它移動到畫面外面。(100% 表示全身移動；50% 就是移動身體一半)
1. nav 本身是固定的，做畫面變化的是裡面的 `<ul>`。所以負責 transform 的也是 `<ul>`
2. `<ul>` 要設置 `data-visibility="false"`。因為我們不直接用 JS 操作 CSS，而是在 CSS 寫好物件在不同 attribute 下該長什麼樣子，並讓 JS 只負責改變 Attribute。
3. false 的情況下 `translateX(100%)`； true 的話 `translateX(0)`
4. 因為我們把物體移動到畫面外了，`body` 要設置 `overflow-x: hidden`
8. **clamp(min, size, max):** 設置三個數值。
1. 第二個數值是會動態改變的值 (例如: 10%, 10vw 這種)
2. min/max 就是限制這個動態值只能在這個邊界內改變，不可以超出此範圍的大小
3. 通常用法: `padding: clamp(2rem, 10vw, 10rem)`
4. min/max 的值就是以不跑版為主即可，初學要一個值一個值試試看，久了自然能直覺該設多少比較好看
---

- [怎麼用 mix-blend-mode](https://www.youtube.com/watch?v=TAA89nkEuhw&t=602s)

1. **multiply:**
- remove lighter color
- remain darker color
2. **screen:**
- opposite of multiply
- take of darker color
- remain lighter one
3. **overlay:**
- opacity lower
- combination of screen and multiply
4. **difference:**
- 用負片效果做出兩張圖的差異
- 若兩張圖長一樣則為全黑
- <span style="color:#f00">**注意: 在有文字的元件上使用 mix-blend-mode 會讓字也受影響，如果不想影響字就要開新的 element**</span>

<!-- 假如 html 結構長這樣， -->
<div clas="wrapper background-image-here">
    <div class="inner text-here">
        <h2>Title here</h2>
    </div>
</div>

<style>
    .wrapper {
        background-image: url(image-here);
        isolation: isolate;
    }
    .wrapper:after {
        content: "";
        background: teal;
        z-index: -1;
        mix-blend-mode: multiply;
    }
</style>

- **isolation: isolate** 讓其元素和子元素的 stacking context 和其他元素獨立出來，和 `z-index: 1;` 是一樣的意思。
- 雖然把 psudo-element 設為 -1 ，但不會比 background image 後面。而是所有 child 當中最後面的意思。實際最底層還是背景圖本身。
- stacking context 順序是 背景圖 -> psudo-ele. -> text
- psudo-ele. 不能設在 `.inner:after` 這裡，一定要設在最底層的背景圖片層上。

---

- [只要 15 個字讓你實踐 Lazy loading](https://www.youtube.com/watch?v=AActXSWxsRo)
1. 在 vscode 按下 `Ctrl Alt Arrow-down` 可以一次輸入多行
2. 在 vscode 按下 `Shift Alt Arrow-down` 可以複製一行到下一行
3. **省效能 tips:** 在 `<img>` 上加上 `loading=lazy` 就能讓那張圖 lazy-loading
4. `loading=eager` 就是相反意思: 無論如何立即載入圖片。但等於預設效果，所以別寫。
5. IE 不支援。
6. **省效能 tips:** 一打開網頁就能看到的圖片不要用 lazy-loading
7. **省效能 tips:** 不要用大圖片，超過 1MB 就算大
8. 圖片要設定好尺寸 (長寬都要)，這樣就算還沒 load 完，畫面也會先預留空格，才不會讀文章到一半突然畫面跑掉。
9. **省效能 tips:** 如果有尺寸設為 `auto`，每 resize 一次畫面其實瀏覽器就得重算一次尺寸，很浪費效能，所以盡量不要設 auto
10. 模擬低網速環境: 打開 `F12` -> `network` -> disable cache & 網速模擬設在 3G

- [另一個比較複雜的 lazy-loading (JS)](https://www.youtube.com/watch?v=mC93zsEsSrg&t=394s)
1. 使用 javascript 的 intersection observer
2. 設置 所有 img 的 src 為空
3. 設置 所有 img 的 data-src=url
4. observe all imgs
5. in observer callback: set img.src = data-src url
6. unobserve each img

---

- [超神!! margin: auto 的絕妙用法](https://www.youtube.com/watch?v=Azfj1efPAH0)

1. 務必要搭配 **flex**
2. `flex-basis=100%` 等同於 `flex-grow: 1`，意思都是盡可能把元素填滿到 100% 寬
3. <u>讓元素靠右站</u>

/* margin-left: auto 讓元素靠右站 */
ul {
    display: flex;
}
ul li:nth-of-type(4) {
    margin-left: auto;
}


4. <u>讓元素靠置中</u>

/* 同時設左和設右，就能置中 */
ul {
    display: flex;
}
ul li:nth-of-type(2) {
    margin-left: auto;
}
ul li:nth-of-type(4) {
    margin-right: auto;
}


5. <u>讓元素有置中又能靠右</u>

/* 兩個東西設靠右，就會自動算成一個置中一個靠右 */
ul {
    display: flex;
}
ul li:nth-of-type(1) {
    margin-left: auto;
}
ul li:nth-of-type(5) {
    margin-left: auto;
}


6. 直版的元素也適用上述方法，只是 left 改成 top

ul {
    display: flex;
    flex-direction: column;
    height: 100%; /* required! */
}
ul li:nth-of-type(1),
ul li:nth-of-type(5) {
    margin-top: auto;
}

---

- [Flexbox design patterns: 很多你不知道的事](https://www.youtube.com/watch?v=vQAvjof1oe4)
- **核心: 想讓 flex children elements 共享一樣大的寬度**
- 基本款:

/* A. 最基本款 */
.flexbox > * { 
    flex-basis: 100%;
}

/*
 * 但這樣只有一個元素時會單一元素佔 100%
 * 兩個元素的話就各佔 50% 
 * 有時候不希望這樣的滿版排列，可以改成這樣
 */

/* B. 不強制滿版的基本方式 */
.flexbox > * {
    flex-basis: 33%;
}

- shorthands 寫法:

.flexbox {
    display: flex;
    flex-wrap: wrap; /* required */
}

.flexbox > * {
    flex: 1 1 100%;
}

/* 
 * 因為你要求箱子預設寬度 100%，又設定可以 wrap
 * 所以箱子會設為 100% 寬，並堆疊成 5 列，一列 1 箱子
 */

/*
 * 但如果你沒寫 wrap，那會變成雖然預設箱子是100%，
 * 但每個箱子得共享這一列的100%寬度，
 * 所以會變成一列 5 箱子，各20%寬
 */

.flexbox {
    display: flex;
    flex-wrap: wrap;
}

.flexbox > * {
    flex: 1 1 33%;
}

/*
 * 因為設置了 wrap，又設置了 33%，所以箱子至少 33%的寬，
 * 並要求箱子一定要填滿 100% 寬的容器
 * 所以會變成兩列，第一列 3 個箱子，各33% (如同預期)
 * 但第二列會有 2 個箱子，各50%寬度
 */

- 如果改成:

.flexbox > * {
    flex: 0 1 33%;
}
/*
 * 箱子不會填滿100%的寬，就是固定 33%的大小，
 * 並且超過的箱子排到下一列
 * 所以是兩列，第一列同上；第二列有 2 個 33% 寬的箱子
 */

- **注意: 因為設定是百分比，所以就算調成手機板大小也是33%，會破版。所以 flex-basis 最好設定成 固定尺寸 (如 10em)**

---

### Accessibility

1. aria-controls:
- 設置在 hamburger **button** 上面 (不是 menu 上)
- 表示這個按鈕 **控制了菜單**。
- 先在 menu 上設置 `id="menu"`，再於 button 上設置 `aria-control=menu`，讓讀報軟體理解是這個按鈕在控制菜單
3. aria-expanded=false:
- 設置在 hamburger 按鈕上，用來提示現在菜單是開or關的
- 預設是 false 表示收著，當我們打開菜單要在 js 設置成 true

---

- [用 Netfliy 上架靜態網頁](https://www.youtube.com/watch?v=9RfU6KGNkfE&t=813s)
1. Method A. without GIT
1. drop your project folder from desktop
2. click domain setting ==> add custom domain or add https if you want
3. if you want to version control => click deploys page => drop new file here
4. you can rollback to old version
2. Method B. set up by GIT
1. choose github (or others) => select project => choose branch => finished
2. if github data updated => website will updated automatically

---

- [簡單設計網頁的色彩](https://www.youtube.com/watch?v=mq8LYj6kRyE&t=1s)

1. black and white
- 文字黑色 背景白色、文字白色 背景黑色 都可以
- 並用也可以

2. 自選一色主色 + 白色 ( + 黑色、灰色系 )
- 例如: 主色為紫色 + 白色和灰色 (背景或文字)
- 例如: 主色蘋果綠 + 白色 (背景或文字皆可) + 黑色文字
- 例如: 主色漸層藍綠色 (這樣算一種色、漸層色) + 黑 + 白
- 例如: 主色漸層橘紅色 (like css-trick) + 白 + 黑
- **基本就是 main color + dark color (black or gray) + white**
- icon 或圖片是顏色很豐富的多媒體也沒關係，仍適用上述規則

3. 先用 1. 打稿，再把 1. 的黑色改成一個自選主色 => 共三色
- 背景色、按鈕、大標題改成新主色，內文文字可以依舊維持黑色
- 如果不知道該選什麼顏色: 可以吸 主圖片上面的一個顏色 來用；或是主圖片上的對比色來用
- 例如: 咖啡的主題圖，選用海軍藍 (對比色) 當作主色

4. 想要使用多種顏色 (調色盤):
- 推薦: [mycolor.space](https://mycolor.space/)
- 推薦: [color.adobe](https://color.adobe.com/zh/explore)
- 推薦: [color wheel](https://color.adobe.com/zh/create/color-wheel)

- 多顏色就難以掌控，盡量選單一種色系 + 黑灰白 的就好
- 類似的兩種顏色不要都用，直接選其中一種用到底
- 深色用作文字、淺色用作 link color
- 想用多種顏色就要對色彩學有很深入的了解，外行人乖乖用 MAX 三色
- 可以背景圖或外框圖用主色，內部文字用對比色 (但慎選，個人覺得不一定好看)

---

- [SPACE](https://jsfiddle.net/79afm3Ld/)
- [figma](https://www.figma.com/file/6nY9FRbNdhvNuWZ55XV6Tr/space-tourism-website?node-id=0%3A1)