資訊專欄INFORMATION COLUMN
摘要：瀏覽器瀏覽器開啟的方法和是一樣的。瀏覽器非常遺憾，直到目前為止，我還沒有找到如何在瀏覽器中開啟模塊。如果您知道如何在瀏覽器中開啟相關(guān)功能，還請多多指點(diǎn)。不過不用擔(dān)心，到目前為止，我們至少有四種不同的瀏覽器和可以做相關(guān)的演示與測試。
上一篇《CSS Grid布局：什么是網(wǎng)格布局》中簡單介紹了什么是CSS Grid Layout以及一些概念和術(shù)語，為后續(xù)學(xué)習(xí)和使用CSS Grid Layout做了一些鋪墊。但瀏覽器對CSS Grid Layout到目前為止各瀏覽器廠端支持程度不一致，致使無法全面使用，就算是學(xué)習(xí)做一些測試示例都還需要做一些設(shè)置。那么在這篇文章中，將向大家介紹如何讓自己的瀏覽器支持CSS Grid Layout模塊功能。
瀏覽器兼容性先來回憶一下幾大主流瀏覽器對CSS Grid Layout模塊的支持達(dá)到什么樣的程度：
從上圖不做過多闡述，可以說是一目了然，不過值得欣慰的是，一直不給力的IE，這回卻給力了一回，從IE10版本就默認(rèn)開啟了CSS Grid Layout的模塊功能。
開啟瀏覽器的CSS Grid Layout模塊功能到目前幾大主流瀏覽器主要包括：
Chrome
Safari
Internet Explorer
Opera
Firefox
當(dāng)然，喜歡追求新東西的同學(xué)，還會觀注：
Chrome Canary
Webkit Nightly
Opera Next
Firefox Aurora
除了IE10+默認(rèn)支持CSS Grid Layout模塊功能之外，其他的瀏覽器Chrome、Safari、Opera和Firefox都需要重新設(shè)置（啟用開發(fā)中的實(shí)驗(yàn)性網(wǎng)絡(luò)平臺功能）。
Chrome瀏覽器在寫這篇文章的時(shí)候，我使用的Chrome瀏覽器版本是“Chrome 38.0.2125.101”。在Chrome瀏覽器中開啟CSS Grid Layout模塊功能比較簡單，只需要在您的瀏覽器地址欄中輸入：chrome://flags，回車后在列表清單中找到“啟用實(shí)驗(yàn)性網(wǎng)絡(luò)平臺功能”（#enable-experimental-web-platform-features），一個更為簡單的方法，可以直接在瀏覽器地址欄中輸入網(wǎng)址：chrome://flags#enable-experimental-web-platform-features立馬定位需要的選項(xiàng)，然后點(diǎn)擊“啟用”(enable)按鈕，如下圖所示：
開啟之后，記得重啟您的瀏覽器。為了難您已開啟成功，你可以在你的瀏覽器中打開這個Demo。如果您能看到類似下圖的效果，表示已開啟成功，可以做CSS Grid Layout相關(guān)的學(xué)習(xí)和演示。
Opera瀏覽器Opera瀏覽器開啟CSS Grid Layout的方法和Chrome是一樣的。在Opera瀏覽器網(wǎng)址欄中輸入opera://flags，并且找到##Enable experimental Web Platform features（或者直接輸入opera://flags/#enable-experimental-web-platform-features），點(diǎn)擊“開啟”按鈕：
重啟您的瀏覽器即可使用CSS Grid Layout功能。
注：我測試使用的Opera版本是“Opera25.0.1614.50”。
Safari(Webkit)瀏覽器從2014年4月2號開始，在Webkit Nightly中默認(rèn)內(nèi)置了CSS Grid Layout模塊功能。詳細(xì)信息可以點(diǎn)擊這里了解。
Firefox瀏覽器非常遺憾，直到目前為止，我還沒有找到如何在Firefox瀏覽器中開啟CSS Grid Layout模塊。如果您知道如何在Firefox瀏覽器中開啟相關(guān)功能，還請多多指點(diǎn)。
總結(jié)前面主要向大家介紹了哪些瀏覽器已默認(rèn)支持CSS Grid Layout模塊，并且介紹了如何在Chrome和Opera瀏覽器中開始CSS Grid Layout模塊。當(dāng)然還有一些遺憾，至今還沒有找到如何在Firefox中開啟類似功能的方法。不過不用擔(dān)心，到目前為止，我們至少有四種不同的瀏覽器（IE10+、Chrome、Opera和Webkit Nightly）可以做相關(guān)的演示與測試。
那么在接下來的教程，我們就可以開始學(xué)習(xí)如何使用CSS Grid Layout來布局。希望大家會喜歡。
via W3CPlus
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110980.html
摘要：網(wǎng)格單元格網(wǎng)格單元格是指四條網(wǎng)格線之間的空間。所以它是最小的單位，就像表格中的單元格。圖中突出顯示的網(wǎng)格區(qū)域是行線和列線之間的區(qū)域，其主要包括了四個網(wǎng)格單元格。 CSS Grid現(xiàn)在已經(jīng)被W3C納入到CSS3的一個布局模塊當(dāng)中，被稱為CSS Grid Layout Module。而我們較為熟悉的還是將其想像成網(wǎng)格或者柵格，也就是早期的960gs。不管是網(wǎng)格還是柵格或者現(xiàn)在的CSS Gr...
摘要：基于網(wǎng)格線的占位區(qū)網(wǎng)格中的單元格是有網(wǎng)格線劃分出來的，那么在網(wǎng)格布局中，同樣可以使用網(wǎng)格線來給子元素設(shè)置占位區(qū)域。也就是說這四條網(wǎng)格線間的區(qū)域是一個單元格。 CSS Grid布局對于我等來說就是一個全新的布局，但國外很多同行朋友已對這種布局做了全面的探知。前面花了兩篇內(nèi)容（《CSS Grid布局：什么是網(wǎng)格布局》和《[CSS Grid布局：瀏覽器開啟CSS Grid Layout]ht...
摘要：你可以用網(wǎng)格這樣做這樣的顯示效果是沒什么錯誤的，當(dāng)使用網(wǎng)格，重新定義列數(shù)非常簡單。絕對定位當(dāng)我們絕對定位一個網(wǎng)格元素的時(shí)候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網(wǎng)格自動編號。 注：此文是我翻譯的第一篇技術(shù)文章。適合有一定CSS原生網(wǎng)格布局使用經(jīng)驗(yàn)的開發(fā)者（讀前需要先去了解一下原生CSS網(wǎng)格的語法），原生CSS網(wǎng)格布局（Native CSS grid）截止...
摘要：你可以用網(wǎng)格這樣做這樣的顯示效果是沒什么錯誤的，當(dāng)使用網(wǎng)格，重新定義列數(shù)非常簡單。絕對定位當(dāng)我們絕對定位一個網(wǎng)格元素的時(shí)候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網(wǎng)格自動編號。 注：此文是我翻譯的第一篇技術(shù)文章。適合有一定CSS原生網(wǎng)格布局使用經(jīng)驗(yàn)的開發(fā)者（讀前需要先去了解一下原生CSS網(wǎng)格的語法），原生CSS網(wǎng)格布局（Native CSS grid）截止...
摘要：本位為官方文檔翻譯，原始鏈接安裝下載下載壓縮或未壓縮的壓縮未壓縮在直接飲用文件。排列未加載完成的圖片時(shí)會導(dǎo)致元素的重疊，可以解決這個問題。布局組件尺寸尺寸配置項(xiàng)和可以可以設(shè)置組件的列寬和間距。增加移除控件在瀑布流末尾增加新控件并重排。 本位為Masonry官方文檔翻譯，原始鏈接 安裝Install 下載 下載壓縮或未壓縮的masonry masonry.pkgd.min.js （壓縮...
閱讀 999·2021-11-15 18:06
閱讀 2367·2021-10-08 10:04
閱讀 2652·2019-08-28 18:03
閱讀 897·2019-08-26 13:42
閱讀 1920·2019-08-26 11:31
閱讀 2423·2019-08-23 17:13
閱讀 926·2019-08-23 16:45
閱讀 2054·2019-08-23 14:11
