這一篇雖然是在講 CSS，但這是因應 EPUB 而生的樣式文件，所以我就順便提一下 Sigil 好了。
許多 EPUB 電子書都是用 Adobe InDesign 加上自訂義樣式、客製化轉換程式來解決的。不過這兩年 InDesign 的更新版本實在令人不敢恭維，不知道他們家的 Coding 是不是找菜市場賣菜的阿伯在負責，寫出來的 Code 不僅是無中生有，今年的更新還每個版本都有一堆 Bug 跑出來。
一直以來，EPUB 電子書如果不是用 InDesign 這種圖形工具來製作，就是得自己手工打包，雖然也有像「Calibre、Sigil」這種製作工具，但一般情況我不會把 Sigil 列入製作的優先選項，因為 InDesign 在編排書籍上的便利性實在無人出其左右。不過隨著近年 InDesign 排山倒海的 Bug，我終於投降了，我決定放棄 InDesign 的製作環境，改成 Sigil 來應付未來書籍的製作需求。
我會轉往 Sigil 還有另一個原因就是，現在的 Sigil 現況和當年剛發表的時候相比，現在的機制和功能顯然成熟許多。
使用 Sigil 的門檻
使用 Sigil 還是有一定程度的門檻，至少我覺得要能編修自己的樣式表。（這是最基礎的）
雖然 Sigil 本身也存在許多問題，所以為了把日後的電子書流程改到 Sigil 上，我只好重新摸索，並把流程和我自己開發的程式、協力工具，一併的寫成一份全新的手冊。
手冊裡面有很多事我串起來的流程、語法、程式，是提供給團隊的夥伴和協力的廠商，請不要找我要。（除非你願意付錢）
在這幾年摸索程式的過程中，撰寫一份有效率的 Sigil EPUB 製作手冊，這對我來說不算是太困難的工作。最後，實際操作下來，我覺得花最多心思的，反而是重新編寫 CSS 樣式母表，因為它是最後讓 EPUB 看起來賞心悅目的樣式指令。
EPUB 編輯其實都是在編寫樣式表
我參考的樣式表，是傳承自日本電書協會（台灣數位出版聯盟）所提供的 Sample 檔案中，裡面有不少高手的心血。
而整個樣式就是用選擇器去判斷 html 這個元素下面 .hltr 或 .vrtl 底下的元素來表現不同排版的效果，例如：
.vrtl h1{ ⋯ }
.hltr h1{ ⋯ }
雖然這個設計在切換直橫切換的時候立意良好，但兩層選擇器的權重實在太重了，你後面再去宣告 h1 的樣式，也會因為權重的關係，已經被宣告的值會完全無法覆蓋。（除非你每次要覆蓋都要寫相同的權重）
既然提到 CSS 權重，那就來分享一下這方面的知識好了。
CSS specificity
CSS specificity（權重），可以分為四個等級（A, B, C, D）：
- A：行內樣式
- B：ID
- C：class、attribute、pseudo-class
- D：element、pseudo-element
一般來說是不太推薦用「行內樣式」，例如：<p style="margin:bottom:20px;">段落文字</p> 這種寫法，因為你一但把樣式寫在了行內，再來用任何選擇器都無法撼動它了。代價就是管理樣式會更麻煩。
所以通常就是看 BCD 這三個值，也就是說如果用一個 class 就是（0,1,0），連續用兩個 .xxx .xxx 就是（0,2,0）；如果是一個 class 加上 element 就會變成（0,1,1）。
你的 CSS 能不能覆蓋就要看樣式的權重是不是寫的比前面大，如果權重一樣就看下一欄，如果兩個樣式的權重完全一樣，那就是後面覆蓋前面。
但是問題來了，如果我想要像日本電書協的寫法（0,1,1）：
.vrtl h1{ ⋯ }
.hltr h1{ ⋯ }
但是後面又想要用 h1（0,0,1）來覆蓋前面寫的：
h1{ ⋯ }
那這樣要如何才能辦到呢？我研究了許久後發現，如果想要同時保留兩種用法：
.vrtl h1{ ⋯ }
h1{ ⋯ }
那麼就是用一個叫 :where() 來降低權重。
用 :where() 來降低權重
自從這個世界有了 AI 之後，我只需要舉例就可以讓 AI 幫我產生精準又相容性好的樣式選擇器，AI 建議把前面的 .vrtl 那個樣式名稱放到 where 裡面（降低它的權重），例如：
:where(.vrtl) h1{ ⋯ }
如此一來，兩者的權重就完全一樣了，前面的 .vrtl 有效之外，也能在後面直接用 h1 { ⋯ } 就能直接覆蓋，非常方便。
:where(.vrtl) h1{ ⋯ }
h1{ ⋯ }
:where() 的限制
:where() 是 W3C CSS Selectors Level 4 的正式語法，用來包住選擇器群組，權重永遠是 0，不搶權重，現代 CSS 推廣度非常高，在 EPUB 製作中也完全可以安全使用。
不過由於是 CSS4 所採用，現代大多數的瀏覽器、閱讀器都能完整的支援。但少部分舊型 EPUB 閱讀器（尤其是 Android 舊 WebView、Kobo 老機型）可能就會發生不支援的情形。假如你現在還在用 Win7、IE 的話，那可能還是要擔心一下，會發生「不支援」的那種情況。
另外，我在網路上查到 Amazon Kindle 不但會自己私自移除 CSS，遇到 :where() 就直接不支援。囧
所以如果你會用「Kindle Previewer」那個 App 轉換 .mobi 格式的時候，你要有預期的心理準備，裡面的許多 CSS 會不翼而飛。
所以這邊也給一個想買電子書閱讀器的人一個建議，千萬不要為了假裝自己很國際，然後就去買 Kindle 來閱讀，因為 Kindle 在技術、相容性上都落後亞洲這邊的閱讀器很多，除非你一定要 Amazon 那個 Logo，不然以他們家那個驢技術，保證你看書看到七竅生煙……🤣
