table的表頭固定,內容可捲動的解法

參考文章:HTML table 表格 thead 表頭固定,tbody 滾動

css解法可用,以下是改良,他原本用 > 主要是避免表格內又包表格。但我需要用捲軸的通常不會再包表格,所以可以直接用空格就好。

thead tr{
display: table;
width: 100%;
table-layout: fixed;
}
tbody{
display: block;
height: 271px;
overflow-y: scroll;
}
tbody tr{
display: table;
width: 100%;
table-layout: fixed;}

然後table-layout的說明看這篇:善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

裡面提到
「CSS 的 table-layout 屬性有兩個可以設定的值:
automatic 表格的總寬度決定於每一個儲存格(Cell)的最大值。( 此為預設值 )
fixed 表格的總寬度決定於表格 width 屬性的定義,以及各欄位(Column) width 屬性的定義」

簡單來說預設值 automatic  要整個表格讀完,瀏覽器才能確認總寬度。
fixed 代表如果你有定義寬,那就直接用定義的寬度。

所以後者顯示速度會比較快。這個有沒有加不影響上述css把表格變成有捲軸。但可以加快網頁成像的速度。

然後讓表格底下有捲軸而且正常顯示的關鍵是要針對tr下 display: table;跟width: 100%;

感覺應該是把tr模擬成表格

總之真的是蠻神奇的設定,可以用就對了。

用css自訂radio btn / checkbox 與 css選擇器

實做技巧參考這篇

重點摘要:

  1. html內radio btn對應的要加上label,裡面可以加入span比較好做後續設定
  2. 用這段隱藏原本的樣式(單選type就改radio)
    input[type="checkbox"] {
        display:none;
    }
  3. 用這段設定新樣式(未選擇),搭配after跟before就可以做到替換框框的效果。
    input[type="checkbox"] + label span
  4. 用這段設定已選擇時的樣式
    input[type="checkbox"]:checked + label span

然後第一次看到+,使用上他就是可以選擇他第一個接觸那個元件。所以找了一下現在css到底有哪些選擇器,css選擇器可以參考這篇

然後我終於搞清楚 > 是什麼意思了。簡單來說 .aaa > ul  跟 .aaa ul 的差異是:

後者只要被 .aaa 包的底下所有 ul 都套用。 前者則是只有第一層。如果第一層ul又包了一層ul,這層就不會被套用。

AE如何讓短影片自動播放 & AE動畫流程整理

AE如何讓短影片自動播放

解法來自這個討論串

  1. 將兩秒鐘可循環的composition置入一分鐘的另一composition
  2. 點選兩秒鐘的comp,點選選單中Layer–> Time –> Enable Time Remapping ,
    選完以後會兩秒鐘的composition在頭跟尾會各有一個keyframe
  3. 將layer拉滿要跑的長度,例如一分鐘。拉的時候記得不要移動到關鍵影格的位置
  4. 點一下圖層底下展開的Time Remap字樣,兩個keyframe點會顯示被選取狀態
  5. 接下來點選選單中 Animation —> Add Expression
  6. 在時間軸 Expression 視窗貼上 loopOut(type = “cycle”, numKeyframes = 0)
  7. 兩秒鐘片段就會一直循環了

AE動畫流程整理

把目前做順的流程跟注意事項整理一下

  1. 先寫好腳本跟口白
  2. 錄好口白並剪好
  3. 用AI把腳本分鏡做出來。最好一個Comp對應一個ai檔,這樣元件匯入的時候才不會一大堆。
  4. 同一個Comp有好幾個分鏡時,AI內可用不同工作區域區隔,才知道到時候元件要放什麼位置,腳本間變化如何。但匯入元件的話,AE只吃單一工作區域,多工作區域圖層匯入會是空的沒東西,所以等分鏡畫完,要另外存一個AI檔,裡面只有一個工作區域,然後只放元件,可以趁這機會也整理一下元件讓每個元件不重複。
  5. 做一個Comp就把一組AI的元件跟對應的口白匯入。做好之後AE裡面把元件再整理到資料夾裡面。

然後如果有整體的背景音效。記得要另外做一個包容全部的Comp,把其他小Comp串接起來以後,在大Comp內才放背景音效,這樣才能貫串。

解決iphone、ipad 無法顯示自訂英文字體的問題

解法說明:https://stackoverflow.com/questions/9351352/font-not-getting-applied-in-a-web-site-viewed-in-ipad

線上產生自訂英文字形的 svg 字體檔:https://www.fontsquirrel.com/tools/webfont-generator

簡單來說,iphone系列不吃普通 .ttf 字體格式,所以你把這個丟到自己空間,只有一般電腦跟安卓系列手機會正常顯示你要的字體。蘋果系列手機跟平版使用 iOS devices 只吃 SVG format font files,就會 GG。

不過我在測試的時候遇到很奇怪的事情,後來回去看 stackoverflow 裡面,解答者底下有人的回覆。我懷疑我們遇到的是類似的狀況。

簡單來說就是我套用失敗,但我的狀況比較奇葩,就是我用線上svg字體產生檔他產生的範例檔案,在ipad上確實可以正常顯示。但是我套用到我自己的網頁的時候,卻又一直卡關。我交叉測試確認路徑是否正確,跟電腦還有安卓手機吃到的是否是我產生出來的檔案,都確認沒問題,但就是 ipad 上怎麼看都看不到,用無痕視窗開也一樣。

stackoverflow 裡面有人回說
We tried out the solution.. Still its not working… How ever its showing a default font not the original “whitney” font
Well.. we figured it out on our end itself.. the corresponding font “.otf” file fixed the problem.. thought of sharing it others.. (BTW svg didn’t worked for us)

我猜他可能遇到的狀況跟我類似。然後他們後來改用 .otf 的格式解決。

所以結論是有兩種解法

  1. 轉成 SVG format font files ,用上述工具會轉出 .woff 跟 .woff2 兩種。然後我測試的結果是如果手機曾經連到該網頁,莫名的還是會吃不過去。後來換瀏覽器好了以後才都好。感覺是 iphone 針對字體的快取這塊吃的有點難清除的感覺。
  2. 轉成 .otf。但這方法我沒用,所以不知道效果如何。

大概是這樣。

blogger 套用付費樣版 & 自訂 amp 版本

最近接了幾個案子都用 blooger ,有些之前不知道現在才知道原來可以這樣的東西記錄一下。

[教學] 自訂 Blogger 行動版範本與自適應設計原理

我本來以為 AMP 版本是自帶不能改。但看這裡寫是可以,只是要先從「主題 > 行動服務」那裡切換。他可以切換成不要用 AMP,直接用網頁本身手機版(其實就還是電腦版啦,只是有做RWD的顯示就會是手機版),或是用 AMP 但可以自訂樣版內容,但就要在行動版內的「主題」選擇自訂。這樣在自訂範本的時候,裡面才匯出現對應的原始碼讓你自己調整。