CSS3

[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 鐵人賽] 實際操作 Part 4, Day 22

3 min read CSSITHome鐵人賽CSS3Grid LayoutGrid SystemMedia QueryFlexbox
從手機版開始 還記得昨天的狀況嗎？那個 33% 為何會發生這樣的事情？這件事情在小尺寸基本上一定會發生，就端看你剩下的 1% 是不是跟 grid-gap 的寬度 _剛好一樣_，如果是的話，就不會有昨天那個情況。 差別在於那個 grid-template-column 基本上不會計算 grid-gap 的尺寸，所以當你用百分比定義的時候，他是參考整個容器的尺寸來做定義，所以，你就算設定加起來剛好，還是會因為 grid-gap 的關係然後爆掉。 當然是有解法的， grid-template-columns: repeat(auto-fit, [body] calc((100%

[CSS3] matrix3d 與 rotate3d 之到底在轉什麼鬼

7 min read CSS3Transformrotate3dmatrix3d3D Transform吳姓網友
剛泡好咖啡。對著電腦，路上無車無人，夜深無聲。沉默太久，傷害也太重，我想該是和大家清楚說幾句話的時候。前些日子，收到吳姓網友的訊息，說有一些問題想要討論一下，就此展開了一個奇幻旅程。 -------------------------------------------------------------------------------- 近期因為 VR 的產品像是雨後春筍般的冒出來，相關的應用也慢慢的在發展當中，例如 Youtube 加上 Google Cardboard [https://support.google.com/youtube/answer/6239930?hl=zh-Hant] 的應用，諸如此類的東西，貌似變成了一種潮流。

[CSS tech.] CSS 3 2D Transforms, Transition 動態效果筆記

4 min read CSSWorkCSS32D TransformsTransition
IE 退散！往後面站，往後面站，往後面站... 在 CSS3 的規範裡面，新增了對於動態效果的設定。關於這方面的資訊，可以參考 W3C 的文件 [http://www.w3.org/TR/css3-2d-transforms/]，相信比看我在這邊廢話要來的好很多（肯定的）。在基於 Webkit 的瀏覽器核心底下（我是使用 Chrome） ，這些效果都能夠正常的顯示，不過，總覺得用太多並不是件好事，似乎很吃系統資源的樣子，在我測試幾次之後，還差點讓 Chrome