现代 CSS

会员专栏

图解CSS: Grid布局(Part5)

前面花了两个章节(Grid布局 Part3Part4)介绍了在grid-template-columnsgrid-template-rows 中使用固定长度值,动态值和一些关键词来设置网格轨道的大小。除了这些之外,还可以使用一些函数,比如minmax(min, max)repeat() 等来设置网格轨道大小。在这一章节点,主要围绕着在 grid-template-columnsgrid-template-rows 属性中如何使用函数(minmax(min, max)repeat())设置网格轨道尺寸,感兴趣的话,请继续往下阅读。

图解CSS: Grid布局(Part4)

“图解CSS:Grid布局” 系列第三部分 主要探讨了,在 grid-template-columnsgrid-template-rows 中使用长度值来设置网格轨道尺寸大小。这里长度值指的是使用不同单位(比如,px%emremvw等)值,并且花了较长的篇幅和大家探讨了 fr (弹性系数,又称<flex>系数)给网格轨道尺寸带来的变化以及 fr 在网格轨道中是怎么计算的。不过,在网格布局中,除了使用上一章节中用的带有不同单位的长度值之外,还可以使用一些关键词,比如接下来要介绍的 noneauto(我们熟悉的),min-contentmax-contentfit-content 等关键词以及fit-content()函数。阅读完这篇文章之后,你就能了解这些关键词是如何帮助我们来设置网格轨道尺寸。感兴趣的同学请继续往下阅读。

图解CSS: Grid布局(Part3)

在第二部分中主要介绍了如何使用display来创建网格容器和网格项目,以及怎么使用 grid-template-columnsgrid-template-rowsgrid-template-areas 定义显式网格。在这部分(Part3)将和大家探讨如何设置网格轨道尺寸?简单地说,在grid-template-columnsgrid-template-rows 中可以显式设置网格轨道大小(列宽和行高),而且设置大小的方式有很多种方式,比如使用不同的长度单位,使用关键词,使用CSS函数等来设置网格轨道大小。如果你感兴趣的话请继续往下阅读。

图解CSS: Grid布局(Part2)

在上一节中,主要介绍了 CSS 网格布局中的一些重要概念和相关术语。从这些概念和术语中,从侧面也再次说明CSS 网格布局到目前为止是最为复杂的一个布局系统,换句话说,CSS 网格布局系统中会有很多属性,这些属性和 Flexbox 布局有些类似,有些属性只能作用于网格容器,有些属性只能作用于网格项目。而在这篇文章中,先从可用于网格容器的属性,即使用display属性创建网格容器和网格项目, grid-template-areasgrid-template-columnsgrid-template-rows 以及这三个属性的简写属性grid-template 来定义显式网格。如果感兴趣的请继续往下阅读。

图解CSS: Grid布局(Part1)

Grid 布局指的是 CSS Grid Layout,它和以往 CSS 框架(CSS Framework)中所说的网格系统(Grid System)有所不同。它是一个基于网格的二维布局系统,在 CSS 中有三个版本的规范(Level 1Level 2Level 3,其中 Level 1 和 Level 2 已进入 W3C 规范 TR 阶段,Level 3 目前还在 ED 阶段)从不同的角度定义 CSS 网格布局模块,这几个模块是专门为解决布局问题而创建的。另外,到目前为止,在 CSS 的系统中,只有 CSS Grid 布局才是二维布局。同时它也是一个复杂的布局系统,所涉及到布局知识要比以往了解的布局模块(比如我们熟悉的 Flexbox 布局)要复杂得多。为此,在图解 CSS 系列中,将分几篇文章来和大家一起探讨 CSS Grid 布局模块。

图解CSS:CSS滚动捕捉(Part2)

图解CSS:CSS滚动捕捉这一章节分成两个部分,第一部分主要介绍了 CSS 滚动捕捉理论方面的知识,详细介绍了 CSS 滚动捕捉中的 scroll-snap-typescroll-snap-alignscroll-marginscroll-padding 以及 scroll-snap-stop 等属性。并且通过一些示例向大家展示了它们怎么使用。在第二部分,也就是接下来的内容中,从简单的示例着手(有些示例在第一部分也出现过),慢慢过渡到复杂的示例,比如模拟 iOS列表向左滑动的交互效果。如果你感兴趣的话,请继续往下阅读。

图解CSS:CSS滚动捕捉(Part1)

CSS 滚动捕捉是 W3C 中 CSS Scroll Snap Module Level 1 模块,可以用来创建一个可滚动的容器,可用来替代以往依赖 JavaScript 脚本来创建滑块组件。也就是说,使用该特性(CSS 的滚动捕捉特性)是快速将元素制作成可滚动容器的一种简单快速的方法。另外,CSS 滚动捕捉特性还可以帮助我们给用户更好的体验。接下来和大家一起来探讨这个 CSS 新特性,即 CSS 滚动捕捉。

被大家遗忘的 hr 标签元素

我们在 UI 还原的过程中,难免会碰到水平或垂直方向的分隔线。在现代 Web 的开发中,大部分前端开发者首先的方案是使用非 <hr> 标签元素,通过 CSS 或 SVG 来制作分隔线,即使在使用 React 或 Vue 构建 Separator (或 Divier)组件,也是采用非 <hr> 标签。可以说,时至今日,<hr> 标签元素已被大部分开发者给遗忘了。既然如此,为什么我要用一篇文章的篇幅来聊 <hr> 元素呢?这主要是出于 Web 的可读性(无障碍)出发点。希望阅读文这篇文章之后,你会有一个更好的选择。

CSS Houdini自定义属性@property给动效带来的扩展

Web中制作动效姿势有很多种,比如说纯CSS制作动效,JavaScript制作动效等。但话又说回来,如果你使用CSS来制作动效的时候会有不少的限制,虽然说CSS自定义属性的到来给CSS制作动效带来不少的变化,但还是有一定的缺陷在这里面。不过,CSS Houdini的到来,不说其自身的Animation API,就说他的自定义属性的出现,就可以帮助我们弥补CSS开发动效带来的缺陷和限制。换句话说,CSS Houdini的自定义属性 @property 可以扩展CSS的动效,也可以帮助我们提高CSS开发动效的能力。这篇文章,主要就是和大家一起来探讨,CSS Houdini的自定义属性是如何扩展动效开发的能力。

仅使用CSS提高页面渲染速度

用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅。如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验是必备的基础技能,而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊,在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。

页面

返回顶部