css分享資料庫

tags: `切切切`

⭐ css 的巢狀語法

by 雅瓊

css 的巢狀語法：可以像scss一樣寫css，而且更強大（暫時連到官方文件）

⭐ :has()

:has() －可以指定上層和前面的元件

⭐ :is(), :where()

:is(), :where()

⭐ 重複漸層

repeating-linear-gradient() 【範例一】【範例二】【範例三】
repeating-conic-gradient() 【範例四】
repeating-radial-gradient() 【範例五】

⭐ width: min-content 在英文水平選單的應用

⭐ 表格內資料使用刪節號

⭐ block元件內可使用align-content垂直置中，不用下flex

align-content: start;
align-content: center;
align-content: end;
align-content: flex-start;
align-content: flex-end;

https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

⭐ accent-color 變更checkbox/radio顏色

⭐ 區塊內文字斷行設定

by 玟諭 : 2024.05.30

word-break

參考連結 🌐











/* 依照區塊大小強制段行,但會截斷英文單字  */
word-break: break-all;

/* 依照區塊大小強制段行,不會截斷英文單字  */
word-break: normal;

/* 遇標點符號和空格強制段行 */
word-break: keep-all;

/* 為防止溢出，可能會在任意點斷字,但不會截斷英文單字 */
word-break: break-word; /* 已將棄用。不適用於新網站。 */

overflow-wrap

參考連結 🌐

word-wrap 屬性原本屬於微軟的一個私有屬性，在 CSS3 現在的文本規範草案中已經被重名為 overflow-wrap 。 word-wrap 現在被當作 overflow-wrap 的 “別名”。穩定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語法。








/* 不會截斷英文單字  */
overflow-wrap: normal;

/* 任意點處中斷,但不可中斷的英文單字,在計算最小內容固有大小時，考慮由分詞引入的軟換行機會 */
overflow-wrap: anywhere;

/* 為防止溢出，可能會在任意點斷字,但不會截斷英文單字 */
overflow-wrap: break-word;

連結 🌐 ：搞懂overflow-wrap(word-wrap)、word-break

連結 🌐 ：anywhere是什麼

⭐ 單位 rem 與 font size

by 雅瓊 : 2024.05.29

rem 的 r 是 root, 表示根元件。對網頁而言，root 是 <HTML>（不是 <body>）。瀏覽器 <HTML> font size 的預設值通常是 16px，所以 1rem 的長度等於 16px。
hyUI 改變文字大小的 class 是寫在 <body>，因此，如果單位使用rem，不會受所選擇的 font size 影響。

⭐ color-scheme

主講人： Lize
簡報連結 🌐

練習如何使用 color-scheme，
用於切換日間、夜間模式

⭐ isolation

主講人：祺學

inherit / auto / isolate.

isolate: 本來是用來隔離mix-blend-mode元素的混合，但也可以用在z-index上，可以想想成這個dom元素的z-index就是獨立出來的，跟網站中其他的dom元素毫無關係。

當有父層背景時子元件設定z-index:-1，子元件會跑到背景後面，但是使用這個就不會被背景影響。

⭐ inset

簡化top , right, bottom, left的個別設定
設定方式跟padding/margin一樣
一個值 = 上下左右
兩個值 = 上下 / 左右
三個值 = 上 / 左右 / 下
四個值 = 上 / 下 / 左 / 右

⭐ max / min /clamp

適用於RWD狀況或是有可能會變動版型時

max

(value,min)


width:max(50%,100px);

可以同時設定寬度和最小值就是width, min-width
寬度是 50%，否則就使用 50px。

min

(value,max)


width:min(50%,300px);

可以同時設定寬度和最大值就是width, max-width
寬度是 50%，最大 200px。

clamp

(min,value,max)


width:clamp(100px, 50%, 300px);

可以同時設定寬度和最小值和最大值就是min-width, width, max-width

⭐ max-content / min-content / fit-content

可以用來設定寬度與高度的屬性，min-width、min-height、max-width、max-height 中都可以使用。

max-content

寬度等於內容最大寬度，表示內容固有的最大的寬度或高度，以 text 內容來說，就算會溢出（overflow）也不會換行。

min-content

寬度等於內容最小寬度，表示最小不會造成溢出（overflow）的寬度。對於文字（text）內容來說，會變得與最長的單詞一樣的寬度。

fit-content

依照內容寬度伸縮，會讓元素使用可用空間，但不會大於 max-content。

⭐ gap

用來設定網格行與列之間的間隙（gutters），屬性是 row-gap 與 column-gap 的簡寫形式。

因為flex也支援gap，使用上可以更廣泛，可以減少margin的使用

⭐ text-emphasis

對文字進行強調裝飾
text-emphasis-style
可自定義出現符號，如果填入超過兩個字以第一個字為主

text-emphasis-style

內建的幾個裝飾符效果，dot（點）、circle（圓）、double-circle（雙層圓）、triangle（三角形）、sesame（芝麻點），並可以設定是否為空心。














text-emphasis: filled dot;
text-emphasis: open dot;

text-emphasis: filled circle;
text-emphasis: open circle;

text-emphasis: filled double-circle;
text-emphasis: open double-circle;

text-emphasis: filled triangle;
text-emphasis: open triangle;

text-emphasis: filled sesame;
text-emphasis: open sesame;

text-emphasis-position

指定強調裝飾符的位置，預設位置是在正文的上方，我們可以指定強調裝飾符在正文的下方，也可以指定垂直排版的時候強調裝飾符是左側還是右側。







text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;

⭐ table th 固定 by css

主講人： Lize
codepen sample 🌐

水平 th 固定：教學
水平垂直標題固定：教學
table-layout：fixed 注意事項
- 使用此關鍵字時，需要使用該 width 屬性明確指定表格的寬度。
- 如果該屬性的值 width 設定為 auto 或未指定，則瀏覽器將使用自動表格佈局演算法，在這種情況下該 fixed 值不起作用。
- 固定表格佈局演算法比自動佈局演算法更快，因為表格的水平佈局僅取決於表格的寬度、列的寬度以及邊框或儲存格間距。水平佈局不依賴單元格的內容，因為它僅依賴明確設定的寬度。
- 文章來源
- table-layout

建議 hyui 的 table 都加入 thead、tbody，較符合無障礙

⭐ display: grid

主講人： Miley

簡報連結 🌐

⭐ 以 ::before ::after 繪製條件搜尋圖示

主講人：雅瓊

⭐ @properties 應用（自訂 CSS 屬性）

主講人：雅瓊

關於 @properties 的一點點說明
在 codepen 上找到的範例 🌐

⭐ 濾鏡函式(Filter Function)

主講人：玟諭

可以讓我們輕鬆達到滑鼠觸摸時的轉變效果，像是可以一開始是灰階的影像，觸摸時變成彩色的。且「不同濾鏡函式可以疊加使用」，如「filter:blur(1px) opacity(0.5)」，會同時具備模糊及半透明效果。

drop-shadow() 陰影函式

連結 🌐

對物件建立一個陰影效果，與box-shadow效果相似，但特點在於陰影函式可以直接忽略圖片透明區域空間，直接對影像不透明度做陰影效果。


filter: drop-shadow(30px 10px 4px #4444dd);

濾鏡總覽連結 🌐

⭐ 文字裝飾(text-decoration)

此屬性的設定值有：none(無效果)、underline(底線)、overline(頂線)、line-through(刪除線)、inherit(繼承)；但實際上「text-decoration」是由五個屬性組成的：

text-decoration-thickness(線段厚度)
text-decoration-style(線段樣式)：
- dotted(點線)
- dashed(虛線)
- solid(單實線)
- double(雙實線)
- wavy (波浪線)
text-decoration-color(線段色彩)
text-decoration-line(線段位置)
text-decoration-offset(線段偏移位置)：設定底線線段與文字之間的距離 連結 🌐

總攬連結 🌐

⭐ 背景線性漸層應用(linear-gradient)

你會怎麼切紫色這塊？

漸層的語法有很多種，例如：











background-image: linear-gradient(#f00, #ff0);
background-image: linear-gradient(#f00 0 % , #ff0 100 % );

background-image: linear-gradient(to right, #f00, #ff0);
background-image: linear-gradient(to left bottom, #f00 0 % , #ff0 100 % );

background-image: linear-gradient(0deg, #f00, #ff0);
background-image: linear-gradient(110deg, #f00 0 % , #ff0 100 % );

background-image: linea-gradient(角度, 起始色彩 起始色彩的位置, 結束色彩 結束色彩的位置);
background-image: linear-gradient(115 deg, #f00 50 % , transparent 50 % );