在Bristol JS上發表的關於超級布局的演講

2021-10-07 15:21:19 字數 1705 閱讀 8625

上周三,我很榮幸在bristol js聚會小組與資深演講者,js whiz和網路音訊先驅(也是我的朋友!) ruth john進行新的演講。 露絲(ruth)在web workers和worklets上做了精彩的演講,其中包括lemmings和許多演示 ,這使我很高興學習更多關於css houdini和css paint api的知識。

以前我只做過幾次演講,所以對於講演講,帶有css網格和css變數的超強布局( 這裡是幻燈片 ),我有點不安,尤其是在js聚會上發表非常面向css的演講! 但是,我不必擔心。 布里斯托js的聽眾非常棒–熱情,熱情並提出許多關於css grid和css變數的有見地的問題。

我的講話是基於我幾個月前寫的這篇關於css變數結合grid的強大功能的文章而鬆懈的。 但是,在演講中,我花了更多時間介紹grid的基礎知識,因為我知道很多人可能還沒有使用它。

有趣的是,只有大約三分之一的觀眾嘗試過(或正在使用)css grid –與我們在mud使用它的開發人員的比例相似。 儘管全球範圍內有88%的瀏覽器支援,但我還是想更深入地了解為何這麼多人還沒有使用它的原因。 我與人交談的印象是兩個原因很重要:

對支援ie11的擔憂–對於某些組織來說仍然是乙個大問題。

如此巨大的規格使人們感到有很多東西要學習,並且想留出大量的時間坐下來妥善解決。

我遇到了與ie支援有關的問題,有時當您在截止日期之前工作時,需要在使用已知技術快速完成某些工作(例如flexbox或float)和做出新的最終使您的布局受益(以及您的學習),但是您需要花費更多的時間為不支援的瀏覽器提供後備功能。 我確實相信學習grid是一項技能方面的巨大投資,並且您使用它的次數越多,您就越會習慣於熟悉的模式來更快地構建grid布局。 在我們用來快速構建通用元件的mud模式庫中,我現在保留了一些經常會碰到的常規網格css模式。 這不僅可以幫助我更快地構建布局(因為它包括我需要的@supports規則之類的東西),還可以幫助對網格不太熟悉的開發人員選擇它並開始在其構建中使用它。

這使我想起第二點:許多人對grid規範感到有些畏縮,並擔心資訊過載。 這肯定是乙個很大的規格,因為您可以做很多事情,但是開始構建乙個非常簡單的網格實際上並不難。 至少需要兩行css,例如:

.grid

那已經給了您4列的網格,每列200畫素寬。 該.grid元素的所有子元素都將自動放置-也就是說,它們每個將跨越一列寬度,並在每行填滿後自動換行。

當然,使用grid可以做更多的事情,但是不要讓它灰心。 您不需要一次全部學習。 您發現的每個新屬性都會使您的布局更有力量。 仍然可以將其與flexbox等其他屬性結合使用-如果事實上,grid和flexbox可以很好地協同工作。 您不必在一件事或另一件事之間進行選擇。

演講結束時我被問到的乙個問題是,網格是否是我們一直在尋找的布局的靈丹妙藥。 我的回答是是,不是。 網格還不能做所有事情 。 級別2正在考慮將允許將網格引數向下傳遞給網格子級的子網格,並有跡象表明它將以某種方式實現。 但是,仍然沒有真正css砌體布局實現的跡象,這將非常有用。 但是,css不斷獲得新的超能力,我相信,隨著時間的推移,我們將看到css解決了所有布局難題。 不僅如此,css grid再加上clip-path(), shapes等,肯定會在網路上開創乙個創造新時代,使我們能夠構建以前無法想象的布局。

用露絲的話說(那天):

每個人都上css火車!

翻譯自:

第一次在CSDN上發表微博

一年前 一年後 一年前,懵懵懂懂的我踏入大學校園 剛剛經歷完高考的我,對大學生活充滿了許許多多的幻想 幻想著能認識一幫人 結果,我做到了。各類社團帶給我無限的新鮮感,在這裡我認識許多無話不談的朋友 一起分享快樂 曾經,我也幻想過好好學好專業課程 可是我卻做不到,高中3年飽受中國教育摧殘的我 再也拿不...

比爾蓋茨在CES 2007上發表主題演講

轉 2007 1 9 第40屆國際消費電子展 ces 1月8日在美國拉斯維加斯開幕,展會為期四天。微軟董事會主席比爾 蓋茨在開幕式上發表了主題演講,這是他第11次在ces大展上發表演講。學生中心第一時間為大家提供演講的 和文字稿件 下面為蓋茨講話的主要內容 大家晚上好。每次從聖誕假期歸來,我都感到非...

Science上發表的簡單快速的聚類方法

工作以後發現自己學習和研究的時間變得少得可憐。我之所以對這個演算法感興趣,主要是因為看到 中可以識別那麼奇形怪狀的點簇,然後又只有兩個指標,好像很有道理又很好算的樣子。沒想到被坑慘了,我用了差不多兩個星期,偶爾下班後有時間看 寫 才把這個簡單的演算法實現下來。其中依然還有乙個引數需要手工調整,就是d...