CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
上一篇《css grid布局教程之什么是网格布局》中简单介绍了什么是css grid layout以及一些概念和术语,为后续学习和使用css grid layout做了一些铺垫。但浏览器对css grid layout到目前为止各浏览器厂端支持程度不一致,致使无法全面使用,就算是学习做一些测试示例都还需要做一些设置。那么在这篇文章中,将向大家介绍如何让自己的浏览器支持css grid layout模块功能。
浏览器兼容性先来回忆一下几大主流浏览器对css grid layout模块的支持达到什么样的程度:
从上图不做过多阐述,可以说是一目了然,不过值得欣慰的是,一直不给力的ie,这回却给力了一回,从ie10版本就默认开启了css grid layout的模块功能。
开启浏览器的css grid layout模块功能到目前几大主流浏览器主要包括:
chrome safari internet explorer opera firefox当然,喜欢追求新东西的同学,还会观注:
chrome canarywebkit nightlyopera nextfirefox aurora除了ie10+默认支持css grid layout模块功能之外,其他的浏览器chrome、safari、opera和firefox都需要重新设置(启用开发中的实验性网络平台功能)。
chrome浏览器在写这篇文章的时候,我使用的chrome浏览器版本是“chrome 38.0.2125.101”。在chrome浏览器中开启css grid layout模块功能比较简单,只需要在您的浏览器地址栏中输入:chrome://flags
,回车后在列表清单中找到“启用实验性网络平台功能”(#enable-experimental-web-platform-features
),一个更为简单的方法,可以直接在浏览器地址栏中输入网址:chrome://flags#enable-experimental-web-platform-features
立马定位需要的选项,然后点击“启用”(enable
)按钮,如下图所示:
开启之后,记得重启您的浏览器。为了难您已开启成功,你可以在你的浏览器中打开这个demo。如果您能看到类似下图的效果,表示已开启成功,可以做css grid layout相关的学习和演示。
opera浏览器opera浏览器开启css grid layout的方法和chrome是一样的。在opera浏览器网址栏中输入opera://flags
,并且找到##enable experimental web platform features
(或者直接输入opera://flags/#enable-experimental-web-platform-features
),点击“开启”按钮:
重启您的浏览器即可使用css grid layout功能。
注:我测试使用的opera版本是“opera25.0.1614.50”。
safari(webkit)浏览器从2014年4月2号开始,在webkit nightly中默认内置了css grid layout模块功能。详细信息可以点击这里了解。
firefox浏览器非常遗憾,直到目前为止,我还没有找到如何在firefox浏览器中开启css grid layout模块。如果您知道如何在firefox浏览器中开启相关功能,还请多多指点。
总结前面主要向大家介绍了哪些浏览器已默认支持css grid layout模块,并且介绍了如何在chrome和opera浏览器中开始css grid layout模块。当然还有一些遗憾,至今还没有找到如何在firefox中开启类似功能的方法。不过不用担心,到目前为止,我们至少有四种不同的浏览器(ie10+、chrome、opera和webkit nightly)可以做相关的演示与测试。
那么在接下来的教程,我们就可以开始学习如何使用css grid layout来布局。希望大家会喜欢。