CSS Grid布局教程之浏览器开启CSS Grid Layout汇总


Posted in HTML / CSS onDecember 30, 2014

上一篇《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)按钮,如下图所示:

CSS Grid布局教程之浏览器开启CSS Grid Layout汇总

开启之后,记得重启您的浏览器。为了难您已开启成功,你可以在你的浏览器中打开这个Demo。如果您能看到类似下图的效果,表示已开启成功,可以做CSS Grid Layout相关的学习和演示。

CSS Grid布局教程之浏览器开启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布局教程之浏览器开启CSS Grid Layout汇总

重启您的浏览器即可使用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来布局。希望大家会喜欢。

HTML / CSS 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 #HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 #HTML / CSS
纯css3制作网站后台管理面板
Dec 30 #HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 #HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 #HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 #HTML / CSS
纯css3实现照片墙效果
Dec 26 #HTML / CSS
You might like
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
浅谈js中的this问题
2017/08/31 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
python基础教程之序列详解
2014/08/29 Python
Python适配器模式代码实现解析
2019/08/02 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
汽车检测与维修个人求职信
2013/09/24 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
初中家长评语大全
2014/12/26 职场文书
小学班主任研修日志
2015/11/13 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫