文档章节

前端开发工程师如何在2013年里提升自己——阅读笔记(五)

小微
 小微
发布于 2013/01/08 16:47
字数 425
阅读 167
收藏 2

三. 面向未来的开发(The Future)

第一篇文章:The CSS of Tomorrow, Peter Gasston

这篇文章中介绍了很多CSS的新用法,让我看的眼花缭乱。看过之后简直不敢声称自己会CSS了。具体内容大家自己参见ppt吧,这里记录下我最感兴趣的页面布局相关的部分。

1. Flexbox

.holder { display: flex; }
.child { width: 30%; }

.child { flex: 1; }

.a { flex: 2; }
.b { flex: 1; }

.outer { flex-direction: column; }
.a { flex: 2; }
.b { flex: 1; }

.outer { flex-direction: column; }
.a, .b{ order: 2; }
.c { order: 1; }

2. Grid Layout

E {
    display: grid;
    grid-definition-columns: 1fr 1fr 2fr;
}

E {
    grid-definition-columns: 1fr 1fr 2fr;
    grid-definition-rows: 10em auto 40px;
}

F {
    grid-column-position: 2;
    grid-row-position: 2;
}

.a { grid-column: 2 2; }
.b { grid-row-span: 3; }

E {
    grid-template:
      'head head head'
      'nav main main'
      'foot foot foot';
}
Grid Templates

.a { grid-area: 'head'; }
.b { grid-area: 'main'; }

3. Overflow

E { overflow-x: pages; }

4. Regions

.a { flow-into: foo; }
.b { flow-from: foo; }

.b, .c, .d { flow-from: foo; }

文章中涉及的其他CSS新特性的链接总结在下面:

  1. Root-relative units
  2. Intrinsic & Extrinsic Sizing
  3. Selector另外一个链接
  4. Positioning
  5. Media Queries
  6. Device Adaptation
  7. Images
  8. Exclusions & Shapes
  9. Filters
  10. Masking
  11. Cascading Variables
  12. Hierarchies


第二篇文章:The Future of JavaScript, Dave Herman

这篇文章和上篇文章的感受一样,就是学习js是任重而道远的一件事,有太多知识点需要钻研了。

一个链接:A Few New Things Coming To JavaScript


第三篇文章:Web Components and the Future of Web App Development, Eric Bidelman

这篇文章暂时无法访问。

几个链接:

  1. JavaScript: Object.observe
  2. Model-driven Views: Design
  3. Detect DOM changes with Mutation Observers
  4. What the Heck is Shadow DOM?


上一篇文章:前端开发工程师如何在2013年里提升自己——阅读笔记(四)

下一篇文章:前端开发工程师如何在2013年里提升自己——阅读笔记(六)

© 著作权归作者所有

小微
粉丝 117
博文 78
码字总数 81696
作品 0
海淀
程序员
私信 提问
掘金 AMA:听开源活跃贡献者 + 程序员秀恩爱伪专家 -- phodal 和你聊如何平衡写作、工作、生活

第六期 沸点,掘金团队请来了开源活跃贡献者 + 程序员秀恩爱伪专家 -- phodal做了为期三天的 Ask Me Anything (AMA) 活动(已结束)。 我们在此精选了一些来自用户的提问及 phodal 的回答。 ...

清蒸不是水煮
2018/09/26
0
0
这『六本』电子书能帮助你成为优秀的程序员(含下载地址)

epub、pdf、mobi、rtf,你还需要什么格式呢? 作为一个自诩是 markdown 程序员的 “资深咨询师”,我编写了很多的代码,写了很多文章(我的博客 phodal.com 上有 600+),也写了很多电子书。...

phodal
2017/11/15
0
0
这『六本』电子书能帮助你成为优秀的程序员(含下载地址)

epub、pdf、mobi、rtf,你还需要什么格式呢? 作为一个自谥是 markdown 程序员的 “资深咨询师”,我编写了很多的代码,写了很多文章(我的博客 phodal.com 上有 600+),也写了很多电子书。...

Phodal
2017/11/15
0
0
【GitChat】精选——JavaScript进阶指南

GitChat 是一款基于微信平台的 IT 阅读/写作互动产品。我们的目的是通过这款产品改变 IT 知识的学习方式,让专业读者获得自主选择权,让知识分享者获得收益。 关于GitChat 你想知道的都在这里...

blogdevteam
2017/11/24
0
0
如何成为一名前端开发工程师

  看过原文之后非常有感触,很多观点都是自己长期非常坚持和认同的,所以翻译出来分享给更多的前端同学!   最近我收到一封读者来信让我陷入了思考,信是这么写的: Hi Philip,您是否介...

qq_37694763
2017/03/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部