Future Friendly College

問津書院

問津書院 周刊 第一期

##問津書院-周刊-第一期

我就是要用CSS实现

我们都是前端工程师,无论你现在是页面仔,还是Node服务开发者,抑或是全端大神,毋庸置疑的是,我们都是前端工程师,我们生来就对追求页面的极致拥有敏锐的触觉,无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现,都是我们孜孜不倦的追求目标。即使这些在别人眼里,只是跟其他的页面一样没什么不同,但我们却能为其中那只有我们才知道的一抹别致而窃喜。

而今天我要讲的,就是我们最熟悉的老朋友,CSS。不讲枯燥的语法,抛开js,让我们一起来看业务中那别致的纯CSS实现,让我们一起来追求那更好的页面实现,希望我带着你走完这段旅程后,你能收获一些惊喜甚至灵感。

关于本文

作者:TAT.polar

原文地址: http://www.alloyteam.com/2016/01/let-see-css-world/


深入理解CSS中的层叠上下文和层叠顺序

零、世间的道理都是想通的

在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈。比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上。再比如说话语权,老婆的话永远是对的,领导的话永远是对的。 在CSS届,也是如此。只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等。但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了。例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的。那对于CSS世界中的元素而言,所谓的“冲突”指什么呢,其中,很重要的一个层面就是“层叠显示冲突”。

默认情况下,网页内容是没有偏移角的垂直视觉呈现,当内容发生层叠的时候,一定会有一个前后的层叠顺序产生,有点类似于真实世界中论资排辈的感觉。

而要理解网页中元素是如何“论资排辈”的,就需要深入理解CSS中的层叠上下文和层叠顺序。

我们大家可能都熟悉CSS中的z-index属性,需要跟大家讲的是,z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。

关于本文

作者:张鑫旭

原文地址:http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/)


主流浏览器内核介绍(前端开发值得了解的浏览器内核历史)

内核

首先得搞懂浏览器内核究竟指的是什么。

浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有 10 多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。

关于本文

作者:伯乐在线

原文地址: http://web.jobbole.com/84826/


Meta 标签与搜索引擎优化

当谈及到<meta>标签对搜索引擎排名的影响,很多人都存在误解。在过去,许多已经失去作用的标签仍然被频繁使用。所以哪些标签对搜索引擎优化(SEO)有作用,哪些没有呢?

关于本文

作者:@静子

原文地址: http://www.w3cplus.com/html5/meta-tags-and-seo.html


CSS代码重构与优化之路

写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多。CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余的代码,而保险地增加新代码,最终的坏处就是项目中的CSS会越来越多,最终陷入无底洞。

关于本文

作者:@狼狼的蓝胖子

原文地址: http://www.cnblogs.com/lrzw32/p/5100745.html


[ISUX译]我为css变量狂

几个星期前,CSS Variables ——CSS 变量草案发布在了W3C官方 ,更准确的应该叫CSS 自定义属性,目前在Chrome Canary 版里面已经支持,开启该功能见附

Chrome浏览器工程师Addy Osmani第一时间把这消息发布在twitter后,遭到了数万人的否定敌视怀疑。于我而言,更多的感到是一个惊喜,因为这个功能实在让人太兴奋了。

关于本文

作者:6key

转载:[ISUX译]我为css变量狂

原文地址: http://philipwalton.com/articles/why-im-excited-about-native-css-variables/


本期周刊PDF格式下载

問津書院-周刊-第一期.pdf

微信公眾號

Wechat QRcode

Github: futurefriendly

Twitter: futurefriendly

3290454918@qq.com

Future Friendly & 問津書院