# 2023WebConf - 鳳‧極意？！ - Paul Li

## 01 - Style your form

### web component
從 MDN 的描述中可以看到，web component 的誕生，是爲了解決代碼複用、組件自定義、複用管理等問題。
- 瀏覽器支援度： safari 僅支援部分
[你真的了解 web component 嗎？]('https://www.readfog.com/a/1647804106460467200')

### CSS > accent-color
- [MDN - 關於 accent-color]('https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color')
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/unlinun/embed/wvYaOwY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unlinun/pen/wvYaOwY">
Untitled</a> by unlinun (<a href="https://codepen.io/unlinun">@unlinun</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
- 瀏覽器支援度： **IE 不支援**，基本上 2021 年以上版本的其他瀏覽器都可以使用

### CSS selector `element:is()`
- 最初這個選擇器被命名为 :matches()（以及 :any()），但在 CSSWG issue #3258 中被重命名為 :is()
<iframe height="300" style="width: 100%;" scrolling="no" title=":is()" src="https://codepen.io/unlinun/embed/YzdXYKe?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unlinun/pen/YzdXYKe">
:is()</a> by unlinun (<a href="https://codepen.io/unlinun">@unlinun</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

- 瀏覽器支援度：**IE 不支援**，電腦瀏覽器大部分 2021年以上版本支援，安卓手機的瀏覽器最新版本支援，較早期不支援

### HTML 元素 `<optgroup>` 為 `<select>` 元素中的選項創建分组
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/unlinun/embed/bGOdarb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unlinun/pen/bGOdarb">
Untitled</a> by unlinun (<a href="https://codepen.io/unlinun">@unlinun</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
- 瀏覽器支援度：目前版本的瀏覽器基本上都支援

## 02 - Amazing Supports

### Color (EyeDropper)
EyeDropper API 提供了一種創建拾色器工具的機制。使用該工具，用戶可以從螢幕上取樣顏色，包括瀏覽器窗口之外的區域。目前還算是一個實驗性的 API
- 瀏覽器支援度：目前只有 Chrome、Edge 支援

### type=datetime-local
- 瀏覽器支援度：Safari、Firefox 還不支援

### CSS logical_properties
- [MDN CSS logical_properties 說明](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values)

### CSS selector `element:has()`
若某元素匹配某選擇器，就可以讓它做到某些我們指定要它做的事情。
- [:has() 的使用方法](https://www.tpisoftware.com/tpu/articleDetails/2883)
- 瀏覽器支援度：目前電腦版 firefox 瀏覽器不支援，手機瀏覽器的話 android 跟 safari 是支援的

### `<datalist>`：HTML 數據列表元素
`<datalist>` 標籤 (tag) 用來建立一組資料清單 (list of options)，來和 <input> 欄位結合，在 <input> 欄位會出現一個下拉選單，提供給使用者可以從資料清單中直接選擇一個值，作用很像是 <input> 欄位的自動完成 (autocomplete) 功能。

<iframe height="300" style="width: 100%;" scrolling="no" title="eyedropper" src="https://codepen.io/unlinun/embed/JjwdMVB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unlinun/pen/JjwdMVB">
eyedropper</a> by unlinun (<a href="https://codepen.io/unlinun">@unlinun</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

- 瀏覽器支援度：**IE 不支援**，目前大多數的瀏覽器皆支援，僅有部分手機瀏覽器不支援

### `<details>`：詳細信息展現元素

`<details>`元素可創建一個組件，僅在被切換成展開狀態時，它才會顯示內含的信息。
`<summary>`元素可為該部件提供概要或者標籤。

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/unlinun/embed/MWZwQgv?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unlinun/pen/MWZwQgv">
Untitled</a> by unlinun (<a href="https://codepen.io/unlinun">@unlinun</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

- 瀏覽器支援度：**IE 不支援**，目前大多數的瀏覽器皆支援，僅有部分手機瀏覽器不支援

### `<dialog>`：對話框元素

`<dialog>`元素表示一個對話框或其他交互式組件，例如一個可關閉警告、檢查器或者窗口。

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/unlinun/embed/KKbpQwm?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unlinun/pen/KKbpQwm">
Untitled</a> by unlinun (<a href="https://codepen.io/unlinun">@unlinun</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

- 瀏覽器支援度：**IE 不支援**，目前大多數的瀏覽器皆支援，僅有部分手機瀏覽器不支援

### HTMLElement API: inert
inert屬性可以禁用form表單

- 瀏覽器支援度：**IE 不支援**，目前大多數的電腦瀏覽器皆支援，但手機有的不知道有沒有支援