CSS

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

Grid 與 subgrid subgrid 是一種很奇妙的跨維度設定,在 w3c 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。 遵從父層格線系統,跳出現有維度形成單一欄(或行)的區塊。 子格線系統跟父層格線系統共享格線設定。 子格線系統格線總量與他所跨維度的父層格線軌跡相同。 若子網格系統跨維度軌跡固定,則取父層格線軌跡的跨度起始值。 若子網格系統跨維度不固定,則取父層格線軌跡跨度起算為 1。 子網格系統起算的 <數字> - <位置> 是獨立在自己的網格系統內。 子網格若是被填充在父層格線系統之前,那麼子網格軌跡會使用父層格線系統的格線命名,但這些名稱必須要是子網格系統以外的名字。 子網格系統的命名若跟父層格線系統重疊,

  • Hina Chen
    Hina Chen
1 min read
CSS

[12th 鐵人賽] 實際操作 Part 4, Day 22

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

  • Hina Chen
    Hina Chen
3 min read
CSS3

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

剛泡好咖啡。對著電腦,路上無車無人,夜深無聲。沉默太久,傷害也太重,我想該是和大家清楚說幾句話的時候。前些日子,收到吳姓網友的訊息,說有一些問題想要討論一下,就此展開了一個奇幻旅程。 近期因為 VR 的產品像是雨後春筍般的冒出來,相關的應用也慢慢的在發展當中,例如 Youtube 加上 Google Cardboard 的應用,諸如此類的東西,貌似變成了一種潮流。 Image source: http://heckifiknowcomics.com/post/134582065049 其實在 stackoverflow 就有類似解答,

  • Hina Chen
    Hina Chen
7 min read
CSS

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

IE 退散!往後面站,往後面站,往後面站... 在 CSS3 的規範裡面,新增了對於動態效果的設定。關於這方面的資訊,可以參考 W3C 的文件,相信比看我在這邊廢話要來的好很多(肯定的)。在基於 Webkit 的瀏覽器核心底下(我是使用 Chrome) ,這些效果都能夠正常的顯示,不過,總覺得用太多並不是件好事,似乎很吃系統資源的樣子,在我測試幾次之後,還差點讓 Chrome 掛點(我在 Windows 7 系統下測試)。 CSS

  • Hina Chen
    Hina Chen
4 min read