阅读 821

CSS Conf -《新时代CSS布局》学习总结

  • 作者:陈大鱼头
  • github: KRISACHAN
  • 记录原因:2019年3月30日在深圳举行了第五届的CSS Conf,鱼头作为一枚CSS新手以及爱好者也报名参加了。如果想知道鱼头参加完之后的感受,可以看知乎问题“参加2019年03月30日深圳第五届CSSConf是如何体验?”的回答。会上分享学习了许多干货知识,因为怕自己遗忘,遂写文章,以便后续记忆。

分享嘉宾简介

《新时代CSS布局》的分享者是新加坡的国际知名CSS专家陈慧晶。陈慧晶老师的个人博客地址是:www.chenhuijing.com/

陈慧晶老师的分享主题介绍如下:

CSS布局经常是令前端开发者头痛的一块工作。但是近几年来,浏览器不断发展,开始支持弹性盒子、网格布局、盒模型对齐等布局功能。这些CSS标准纯粹是为了应付网络布局而编写的。我们将深入了解这些新属性的特征,新时代的布局技巧、例子及最佳实践。希望听众会有所启发,利用这些新的CSS属性创造更符合浏览器本质的设计。

本次分享的在线Slide: www.chenhuijing.com/slides/53-c…

为什么纵向比横向难排?

在分享的开始,慧晶老师便抛出了上述的问题。

其实答案也很简单,就是因为在最初的时候,HTMLCSS只是为了欧美国家而服务,而欧美国家文字排版又是横向的,所以最开始的设计也是也横向的文档流为主,到后面互联网不断发展,连接至全世界的时候,才有了纵向排版的需求,所以结论就是设计者一开始并没有考虑纵向排版,所以后续有需求的时候才会出现纵向比横向难排的问题,关于纵横布局的比较可以查阅鱼头的Hello CSS系列的CSS的逻辑属性与盒子模型

然后慧晶老师便分享了互联网的发展史。关于这部分内容,有兴趣的也可以查阅鱼头的Hello CSS系列的序章-起源

在这里,慧晶老师分享了一个很有趣的链接,就是可以查看最初的网页长什么样,链接在此:worldwideweb.cern.ch/browser/

Web布局系统

在这一小节中,慧晶老师主要分享了FlexboxGridBox Alignment这CSS新时代布局的三大栋梁。

CSS布局部队

CSS布局部队是由以下以及其他的553个属性组成。因为CSS是个团队项目。只有各属性相互协调配合,才能把CSS的威力完全发挥出来。

浏览器的渲染过程

慧晶老师又介绍了浏览器的渲染过程,以下是原文摘抄。

如果要揭开CSS布局的神秘面纱,那就必须先熟悉浏览器的渲染过程。渲染引擎会把服务器发送过来的Source文档解析成浏览器能够明白的对象。而在渲染网页之前,浏览器会生成一个渲染树。这个渲染树是个中介性的结构(intermediary structure),是文档格式结构(formatting structure)的表示法。

CSS在解析的过程,会计算出每个元素和文本节点的每个CSS属性值。浏览器就会靠其中的取值来判断要生成哪一类的盒子。

CSS显示模块(CSS Display Module Level 3)

慧晶老师又介绍了**CSS显示模块(CSS Display Module Level 3)**,以下是原文摘抄。

CSS显示模块在这二十多年来,经过不少演变。从一开始的基本、到现在最新规范中一共有十七种属性值。此规范提出了两种显示类型,内部及外部。内部显示类型定义了元素内子元素的布局方式,外部显示类型则定义了元素怎样参与流式布局的处理。

CSS在解析的过程,会计算出每个元素和文本节点的每个CSS属性值。浏览器就会靠其中的取值来判断要生成哪一类的盒子。

CSS显示模块规范提出了两种显示类型,内部及外部。内部显示类型定义了元素内子元素的布局方式,外部显示类型则定义了元素怎样参与流式布局的处理。

Flex

在这部分慧晶老师主要介绍了Flex的语法以及使用技巧(关于语法部分,在此不再累述,有兴趣的可以翻阅MDN)。慧晶老师在介绍完Flex之后便开始了第一个栗子:自动margin是你的好友

在上面这个简单的例子,容器内只有一个子元素。我们可以运用margin来操纵它。如果不设定任何方向,盒子就会在容器的正中间。一行搞定水平垂直居中的问题。

然后慧晶老师提问到:“为什么块格式自动margin不垂直居中元素?

原因是如果元素的高度设为auto,那浏览器在计算它的高度时,只会考虑元素内容及子元素,纵向没有已确定的空间来调整位置。即使元素设了固定的高度,别忘记它跟子元素是互不相关的。这很有可能是浏览器最初执行的抉择遗留下来的行为。浏览器没办法计算上下方的margin取值,所以就把auto取值解析成0。

容器–项目的「父子」关系

这是慧晶老师之前提到的转折点。因为flex或grid容器跟子元素的关系,在布局时是被浏览器承认的。因此,浏览器才有办法计算出四面的自动margin取值。

CSS盒式对齐模块

在这一节,慧晶老师对CSS盒式对齐模块(CSS Box Alignment Level 3)进行了介绍。

在这里,慧晶老师解释道:

当然,光靠自动margin是不够的。要更精确的调整子元素的位置,我们可以运用盒式对齐模块(box alignment)提供的属性值。

Flexbox的首个公开工作草案是在2009发布的,而Grid的则是2011发布。当时两个规范设定了两组不同的对齐属性。经过讨论,工作组决定把盒子对齐写成独立的规范,让过去、现在和未来的formatting contexts都统一使用相同的属性。

Box alignment的属性一共有六个。在使用flex时,用得上其中四个,使用grid的话,六个属性全部都能用。

鱼头注:这里具体的属性也不累述了,有兴趣的可以自行查阅[W3C][www.w3.org/TR/css-alig…]或者W3C PLUS

Grid或者Flexbox?

“所以应该是用Gird还是Flex?”

关于这个问题的答案,慧晶老师回答道:

这不是个二选一的状况,应该是二合一才对。

Flexbox比较适合单维方向的布局。因为运用Flexbox来实现的行列,即使对齐了,也只是个假象。Flexbox的行跟列是互不相关的。但是在单维布局,它拥有最强的弹性功能。

Grid则适合做二维网格布局,因为Grid中的行列才是真实的,才是是有关系的。你可以像在棋盘上排棋子似的,把Grid项目排成理想的布局。

要实现类似上面布局的设计,用新时代布局方式是做得到的。要如何实现这种内容不对齐,环绕每个Grid单元厚厚的border?如果单靠Grid,用Box alignment属性,可以吗?

很可惜,做不到。之前有提过,Grid项目对齐的默认值是stretch。一旦用上任何以外的取值时,项目就会马上缩到内容的尺寸。可是如果我们在Grid项目上设一个display:flex,把它变成Flex容器。那表示Grid项目里面的内容,成为了Flex项目。现在利用Box alignment的各属性调整内容的位置就不会影响到Grid项目的尺寸,border也可以保持在Grid线上了。

百分比的局限(一致性的伸缩率)

慧晶老师原话:“现在已经相当普遍的响应式网页设计,主要是依靠百分比来设定元素的尺寸。运用百分比的局限就是每个元素伸缩率是一致的。有时,这会导致开发者为了应付各种viewport尺寸范围,被逼要写数不清的media query。

在深入研究这些新的布局模式时,我发现到最有趣的东西是灵活性尺寸。根据所设定的属性值,元素伸缩的变化率是有差别的。有些属性值会「坚持自己的立场」,在viewport变化的状况下,尽量保持范围内的宽度。这样讲有点难了解,还是看看一些用例吧。”

接下来慧晶老师主要是对以下三组属性进行了对比:

  1. fr对比auto

  2. max-content对比固定width

  3. fit-content对比minmax()

(鱼头注:关于上述属性对比,有兴趣的童鞋可以点击链接查看)

兼容处理

慧晶老师说:“Grid正式发布到现在,已经有大概两年的时间,浏览器的支持程度如今也高达88%,可以算是被广泛支持了。但是其它12%的用户该怎么办呢?”

上述问题其实CSS可以通过feature query做功能检测。它的语法类似media query,只是用的关键字是@supports

(鱼头注:关于@supports的使用,有兴趣的可以查看鱼头的文章[第一章-CSS的语法与工作流



如果你、喜欢探讨技术,或者对本文有任何的意见或建议,你可以扫描下方二维码,关注微信公众号“鱼头的Web海洋”,随时与鱼头互动。欢迎!衷心希望可以遇见你。

关注下面的标签,发现更多相似文章
评论