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 相关文章推荐
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php判断linux下程序问题实例
2015/07/09 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
js实现楼层导航功能
2017/02/23 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
layui使用label标签的方法
2019/09/14 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python中操作符重载用法分析
2016/04/29 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
高性能装备提升营地:Kammok
2019/02/27 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
小学生校园广播稿
2014/09/28 职场文书
承诺书范本
2015/01/21 职场文书
《鲸》教学反思
2016/02/23 职场文书