CSS

[CSS] Flex/Grid Layout Modules, part 1

[CSS] Flex/Grid Layout Modules, part 1

11 min read CSSFlexbox2021鐵人賽
> 其實我不知道 Flexbox 還有誰想看？ 這年頭好像用框架比較快，誰理你背後的原理是什麼呢？ -------------------------------------------------------------------------------- Flexbox 我們先來看看可使用狀況。基本上除了 IE 以外，是不用擔心使用上的問題。 CSS Flexible Box Layout ModuleFlexbox 的基本盤是對應從 CSS2.1 以來的四種編排模式， 1. 區塊（block） 2. 行內（inline, inline block） 3. 表格資料（table, 或各種資料集設計）

[CSS] Flex/Grid Layout Modules, part 0

4 min read CSSGrid LayoutGrid SystemFlexbox鐵人賽2021
> 萬事起頭難，只要不起頭，就一點都不難了。 在這個充滿著 CSS Frameworks 的年代，人人有功練，人人有版切，身為老屁股的我只能在沙灘上曬乾，而且還賣不到錢。 鐵人賽就當作自己還有在喘氣的證明。 -------------------------------------------------------------------------------- 前言 其實寫 CSS 框架應該比較多觀眾，但就一個碼農來說，自己動手做會比較有趣一點。而且那些框架實在有點五花八門，就是你去 Google 一些關鍵字，諸如「超好用」「XX 天就上手」「20XX 熱門框架」然後就會跑出一堆。 > 我沒有阻止你用，只要能賺錢的框架就是好框架。 君不見

[12th 鐵人賽] 最後的行動裝置, Day 30

2 min read CSSCSS Media Query Level 4Media QueryITHome鐵人賽2020
那個行動裝置 雖然我們都概括說是手機版，但 Media Query 其實支援更多裝置的呈現，只是，應該不會有人把 Switch 拿來裝瀏覽器之類的（等等還真的有）。對於 Media Query 來說，Switch 也是一種行動裝置，只是不能打電話而已。 > 在 Switch 上面裝 Ubuntu [https://gbatemp.net/threads/l4t-ubuntu-a-fully-featured-linux-on-your-switch.537301/] 所以，在整個 Media Query 所面對的，

[12th 鐵人賽] 還在吵架的 subgrid, Day 29

1 min read CSSITHome鐵人賽2020CSS3CSS Media Query Level 4Media QueryGrid LayoutGrid System
Grid 與 subgrid subgrid 是一種很奇妙的跨維度設定，在 w3c [https://www.w3.org/TR/css-grid-2/#subgrids] 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。 * 遵從父層格線系統，跳出現有維度形成單一欄（或行）的區塊。 * 子格線系統跟父層格線系統共享格線設定。 * 子格線系統格線總量與他所跨維度的父層格線軌跡相同。 * 若子網格系統跨維度軌跡固定，則取父層格線軌跡的跨度起始值。 * 若子網格系統跨維度不固定，則取父層格線軌跡跨度起算為 1。 * 子網格系統起算的 <數字> - <位置> 是獨立在自己的網格系統內。 * 子網格若是被填充在父層格線系統之前，

[12th 鐵人賽] 關於 InAppBrowser, Day 28

2 min read CSSITHome鐵人賽2020InAppBrowser
InAppBrowser 說在最前面的，以目前的 iOS / Android 生態來看，所謂的 InAppBrowser 大部分的支援程度都還算可以。最主要的差異在於使用了 JavaScript 的差異，跟真正的 瀏覽器 會有點落差。但是，對於樣式表來說，支援度基本上都還會有七八分像，至於不像的部分，那就是看 iOS / Android 給各種 App 的 WebView 是不是有什麼限制。 通常，對於一般用戶來說，在 App 裡面打開網頁這件事情很常見， > 你的網站我打不開很爛耶！