CSS3

使用writing-mode实现垂直排版

大约一年前,我写了一篇关于在Web中实现垂直排版的文章。这是一个简单的Demo,它允许你通过复选框来切换书写模式。在不久之后我遇到了@Yoav Weiss,并一起聊了一些关于响应式图片社区小组,因为我提到了如果可以通过媒体查询得到picture元素的writing-mode,就不必在切换排版的时候通过一些黑魔法的方式对图片进行转换。他建议我写一个响应式图片的用例。当我重新打开这个Demo的时候,看到的结果让我感到无语。为了宣泄一下,我将一步一步写下各种浏览器的渲染结果,以及目前可能的解决方案。这篇文章的篇幅很长,可能会花费你一定的时间。

字体变体font-variation-*

今天在Twitter看到Codepen上的一个示例,感觉很神奇。刚开始以为是用了什么黑科技,但仔细一看是纯CSS实现的一个效果。示例中最关键的是使用了font-variation-settings属性。那么这个属性有什么神奇之处呢?容当后述。

使用Firefox 网格检查器调试 CSS网格布局

这篇文章介绍了Firefox DevTools的一些鲜为人知的特性,这些特性可以在你构建和调试新的CSS网格布局时派上用场。你可能在今年听过不少有关于CSS特性的讨论。如果你在同一个句子中听到CSS网格这两个词,那么我强烈建议你去看看CSS Grid的这个CSS模块。浏览器以CSS盒模型的方式呈现HTML元素,而CSS Grid则是一种新的布局模式,它为开发者提供了控制这些盒子及其内容大小和位置的能力。该模块引入了一系列属性,允许我们创建网格结构,并使用CSS控制网格项的位置和大小。

灵活的overflow

说到overflow对于CSSer而言并不会陌生,用来控制内容溢出的现象。而很多时候我们还会使用text-overflow来控制内容溢出的显示。一般是直接截取,另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是,我们今天要说的灵活overflow

CSS overscroll-behavior

overscroll-behavior是CSS的新属性,允许开发者覆盖默认的浏览器滚动行为。CSS用来控制浏览器的滚动行为,大家可能熟悉的是CSS的overflow属性。而对于overscroll-behavior属性应该还是很陌生。那么今天我们就来简单的了解这个属性。

显式网格和隐式网格的区别

网格布局最终使我们能够在CSS中定义网格,并将项目放置到网格单元格中。这本身就很好,但事实上我们也不必指定每个网格轨道,也不必手动拖动每一个网格项目。网格足够灵活,可以适应它们的网格项目。这些都由所谓的显式和隐式网格来处理的。

为什么是display:contents而不是CSS Grid的subgrid

在CSS Grid Layout中,如果没有人提出display:contents;来解决一部分问题,那么你就无法深入的讨论CSS Grid Layout中的subgrid,那么我们真的需要subgrid?事实并非如此,display:contents的确帮我们解决了这类问题,但这些问题与subgrid帮助我们解决的问题不同。在这篇文章中,我将用实例来介绍他们的不同之处。

CSS Grid Layout一些有趣的事情

几周前,我举办了一个有关于CSS Grid Layout的研讨会。我和大多数人一样,对这个话题也很陌生,我在准备PPT和DEMO的时候学到了很多东西。我决定和大家一起分享一些我觉得其中特别感兴趣的东西。希望大家对这些也会感兴趣。

CSS实现长宽比的几种方案

在上一篇文章中总结了CSS如何实现容器长宽比几种方法。对于在CSS中实现容器的长宽比最初的创意是来自于在Web中如何实现纵横比。主要是用于响应式设计中的iframeimgvideo之类的元素。随之扩展为适用于任何的容器长宽比。那在CSS中到底有多少种方案可以实现呢?我一向喜欢做这样的事情,到处搜集多种解决方案。如果你看到前面的两篇文章,或许你知道一些方法,或者说所有的方案你都想到了。如果是这样的话,你可以停止阅读这篇。如果没有的话,你可以继续往下阅读。

容器长宽比

容器长宽比,这个话题在站上也有相关的文章介绍,最早出现于Responsive Web Design中,主要用来处理imgiframevideoobject这些元素的自适应问题。简单点讲,就是根据容器的宽度,按照宽高比例自动计算出容器的大小。并且让图片,视频之类能自适应容器。另外记得在知乎上有一个问题“移动端布局,div按比例布局,宽度为百分比,但又想让高度和宽度一样,即让div为正方形,怎么做布局呢?”,其实解决方案在前面的伟德1946手机版已提到过。既然有相应的解决方案,继续花时间来说,是不是有点多余。那么这个问题又回到了CSS的根源上:在Web中,使用CSS解决问题,往往不只有一种方案,只有更适合的方案。这两天看到@Chris Coyier特意也整理了一篇《Aspect Ratio Boxes》文章,里面有新的方案值得我们思考,特别是CSS自定义属性的部分。那我们再次花时间将相关方案整理在一起,仅供学习与参考。

页面

返回顶部