# 2023/11/30 切切切會議
###### tags: `切切切會議記錄`

會議室：線上 meeting
會議時間：下午14點開始
會議地點：台北（2123( C )會議室）、新竹（R3116會議室）
會議主持人：Lize
會議記錄：Lize
與會人員：琬樺、恬恬、雅瓊、黑白切五味、祺學

---
## CSS 屬性分享

### 1）table th 固定 by css
主講人： Lize

[**codepen sample 🌐**](https://codepen.io/Lize/pen/gOqgdMW)

1. 水平 th 固定：[教學](https://jsfiddle.net/f2XYF/8/)
2. 水平垂直標題固定：[教學](https://www.astralweb.com.tw/pure-css-implementation-table-headers-columns-fixed/)
4. table-layout：fixed 注意事項
* 使用此關鍵字時，需要使用該 width 屬性明確指定表格的寬度。
* 如果該屬性的值 width 設定為 auto 或未指定，則瀏覽器將使用自動表格佈局演算法，在這種情況下該 fixed 值不起作用。
* 固定表格佈局演算法比自動佈局演算法更快，因為表格的水平佈局僅取決於表格的寬度、列的寬度以及邊框或儲存格間距。水平佈局不依賴單元格的內容，因為它僅依賴明確設定的寬度。
* [**文章來源**](https://blog.miniasp.com/post/2009/04/20/Use-CSS-table-layout-property-to-speed-up-table-rendering)
* [**table-layout**](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)

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

### 2）display: grid
主講人： Miley

[**簡報連結 🌐**](https://hackmd.io/@mileyho/B18JUAEZp)

:::warning
1. 直欄、橫列，2維，跟 flex 概念不同
2. ...？？？...喔喔喔！...蛤啊？？...唔？誒？
3. [**Grid by Example**](https://gridbyexample.com/examples/)：直接抓 sample 不用學（喂
4. grid-column-start的值有span時，就是相對於結束位置(grid-column-end)來設置欄數
:::

### 3）以 ::before ::after 繪製條件搜尋圖示
主講人： 雅瓊

[**範例連結 🌐**](https://codepen.io/yachiung/pen/abXawzN)

### 4）@properties 應用（自訂 CSS 屬性）
主講人： 雅瓊

[**範例連結 🌐**](https://codepen.io/yachiung/pen/NWoLprx)
[**關於 @properties 的一點點說明**](https://hackmd.io/yT1GMIa8Q0uWmKJYCdMFkQ)
[**在 codepen 上找到的範例 🌐**](https://codepen.io/skay/pen/OJxRxjE)

:::warning
1. 用 before、after 做按鈕 icon，hover 時可做小動態
2. @properties 做 loading 動態
:::

### 5）CSS屬性分享
主講人： 玟諭

[**簡報連結 🌐**](https://hackmd.io/QAsX_Yh6TkOI1YZxoCX6xw?view)

:::warning
1. [**text-decoration-thickness**](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness)：hover 底線可調整粗細
2. [**text-decoration-offset**](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset)：hover 底線調整距離
3. [**CSS Filter Generator**](https://front-end-tools.com/en/generatefilter/)
4. [**琬樺的測試 svg filter變色**](https://codepen.io/veelatseng/pen/LYqBBMr)
:::
---
## Vue3 + Vuetify3 後台頁面模板整理
主講人： 思晨

[Vue3後台樣式模板整理](https://github.com/HywebU00/vue_cms_template)
[相關設定提醒](https://hackmd.io/yoDKco9sQqGNVa2yJRB3mg?both)

:::warning
1. 使用 Vuetify3 做色版切換
2. 有興趣的捧油，可以向思晨要檔案來學習
:::

---

## Hyui4 共用效果使用教學 + BroadcastChannel API 介紹
主講人： 祺學

:::warning
1. hyui 4.0 選單效果，會註解在 JS
2. resize 不要包 click，視窗拖動時會不斷產生 click 事件的偵聽結果，會影響效能。
3. 兩個頁面的東西可互相聯動，做個通道讓東西丟來丟去，雅瓊問這要幹嘛，我覺得很有趣啦！好性感的能力！
:::

---
## 工作遇到的問題

### 1）Hyui 修改討論
[**hyui_flex 討論連結 🌐**](https://hackmd.io/nttxSvu8SM2TqWWirSLcmQ?view)
:::warning
1. **變數名稱**：hyui flex 與 hyui4 className 寫法目前不需統一
2. **tab寫法**：tab 寫法改成和 hyui4 一樣
3. **無障礙修改對應id位置**：改為 #aC、tag 至 accesskey="C"
4. **hyui.js中，電腦版 menu第二層滑進滑出的速度**：原未填值，預設400，改填入200
6. **無障礙要求，區塊按esc後關閉**：目前可能只有 search 有此修改需求
7. **menu下拉選單，除了最後一組選單會往左邊展開外，其他選單有時也會往左**：改成偵測到超出視窗寬度才往左展開
8. **圖片html去除picture的寫法**：使用頻率趨近於0，拿掉 picture
:::

### 2) 無障礙：fancybox燈箱內的`<img>`沒有alt屬性
加上這段script

<script>
    $(document).ready(function () {
        $('[data-fancybox]').fancybox({
          afterLoad: function (instance, current) {
            current.$image.attr('alt', current.opts.$orig.find('img').attr('alt'));
          },
        });
      });
</script>

[**資料來源 🌐**](https://stackoverflow.com/questions/47493849/how-to-insert-alt-tag-for-fancy-box-images-fancybox3)

:::warning
無障礙被抓錯，img 需有 alt屬性
加在 fancybox.js之後
:::

### 3) 無障礙：hyui舊版燈箱內的`<img>`沒有alt屬性
需修改slick-lightbox.js

<script>
    SlickLightbox.prototype.createModalItems = function() {
    var $items, createItem, links;
            if (this.options.images) {
                links = $.map(this.options.images, function(img) {
                    return '<div class="slick-lightbox-slick-item"><div class="slick-lightbox-slick-item-inner"><img class="slick-lightbox-slick-img" src=" ' + img + '" alt=""/></div></div>';
                });
            } else {
                createItem = function(_this) {
                    return function(el) {
                        var caption, src, alt;
                        caption = _this.getElementCaption(el);
                        src = _this.getElementSrc(el);
                        alt = $(el).data(_this.options.caption);
                        return '<div class="slick-lightbox-slick-item"><div class="slick-lightbox-slick-item-inner"><img class="slick-lightbox-slick-img" src="' + src + '" alt="' + alt+'" />' + caption + '</div></div>';
                    };
                }(this);
                $items = this.filterOutSlickClones(this.$element.find(this.options.itemSelector));
                links = $.map($items, createItem);
            }
            return links;
        };
</script>

:::warning
舊版案子無障礙被抓錯，img 需有 alt屬性
:::

### 4）fancybox燈箱內的文字若要可以複製
:::warning
1. button上面增加data-touch=“false”就可以了
1. 或在內文需要複製的地方，加上data-selectable=“true”
:::

---
## 作品分享
[**作品連結 🌐**](https://docs.google.com/spreadsheets/d/1t_fthnYUL4EWfBYsXrt6fbE3b4cDA8Fmx1aJZ6RN-lc/edit#gid=565687535)

:::warning
網路太慢、案子累積不多、下次一併分享
:::

---
## 臨時動議
1. 提議移除 [hyui flex-grid 🌐](https://hackmd.io/@hywebU00/hyui_flex/https%3A%2F%2Fhywebu00.github.io%2Fhyui_flex%2Fflex_template.htm)

:::warning
先不抽，form beta 好像有用到
:::