博客

图解CSS:CSS溢出(Part1)

溢出是CSS中的另一个重要的概念。从 图解CSS系列 的《CSS 盒模型》和《元素尺寸的设置》中可以得知,Web上的内容都是放置在一个具有一定大小的盒子中。在某些情况下,盒子大小是有限制的,有可能内容会超出这些盒子,在 CSS 中,这种现象被称为 溢出。而且 W3C 的CSS工作小组专门为溢出划为一个独立的模块。在这一章中,将和大家一起探讨 CSS 溢出模块相关的话题。比如,什么是溢出?什么情况下会导致溢出?如何使用CSS来控制溢出等等。

CSS 比较函数构建响应式UI

在 CSS 中说起函数,我想很多人首先想到是 calc() 数学运算函数,其实在 CSS 中有很多种不同类型的函数,有些“CSS函数”可以在CSS中用于动态计算,比如 calc()函数,计数器函数 counter()counters()CSS比较函数 min()max()clamp()。尤其是 calc()min()max()clamp() 这几个函数,在现代Web开发中所起的作用越来越大,使用的场景越来越多,带来的灵活性和扩展性越来越强。那么在这篇文章中,我们主要和大家一起来探讨 CSS 比较函数在实际开发中能用在哪些地方?又是如何帮助前端构建响应式UI?感兴趣的同学请继续往下阅读。

CSS 的父选择器:has()

W3C 的 Selectors Level 4 新增了很多强大的 CSS 选择器。早在 2018 年年底就在《初探CSS 选择器Level 4》一文中和大家一起探讨了这些选择器。在这些新选择器中,最为有意思的是“逻辑组合选择器”,即 “任意匹配伪类选择器:is()、否定(匹配无)伪类选择器:not()、选择器权生调整伪类选择器:where()和关系性(父选择器)伪类选择器:has() 。尤其是关系性伪类选择器:has(),它和 CSS 容器查询在近十多年来一直成为 Web 开发者期待的 CSS 功能之一。在这篇文章中,我将和大家一起来探讨什么是关系性伪类选择器(又称父选择器)以及它是如何工作的,并且将会通过一些示例来阐述该选择器可以在哪里,最重要的是我们现在如何使用它。

下一代响应式Web设计:组件驱动式Web设计

自从著名设计师 Ethan Marcotte(@beep)在 A List Apart 上发表了一篇名为《 Responsive Web Design 》的文章之后,响应式网页设计(RWD,即 Responsive Web Design)的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来,CSS 也发生了巨大的变化,新增了很多新的特性,近两年尤其如此(详细请参阅《2022 年的 CSS》一文)。这些变化,对于响应式Web设计的开发也有较大的改变。Una Kravets(@Una)大神,在2021的Google I/O 大会上的分享,提出 新的响应式:组件驱动式 Web 设计。 Web 生态即将进入响应式 Web 设计的新时代,并转变我们对其含义的看法,也为会Web设计带来新的变化。组件式驱动 Web 设计(或开发)也被称为是下一代响应式 Web 设计(或开发)。如果你对这方面话题感兴趣的话,请继续往下阅读。

如何编写防御式的 CSS

@Ahmad Shadeed 去年在博客上发表了《The Just in Case Mindset in CSS》的时候,我自己也有一种冲动,也想整理一篇这方面的文章,但一直未动笔(说实话,整理一篇这样的文章真的很费时间)。去年年底在内网看到 @克军 老师发了一篇有关于“防御式CSS开发”的文章(外网 @Ahmad Shadeed 同样发了一篇有关于"防御式CSS开发")之后,这种冲动就更大了。我想我也应该写一篇这方面的文章。希望大家能从文中获益!

图解CSS:CSS阴影

在现代 Web 中,阴影已经成为主要设计要素之一,甚至是随处可见。 阴影增加了质感、透视、并强调物体的尺寸。在 Web 设计中,使用光和影子可以增加物理上的真实感,并且可以用来制作丰富的、可触摸的 UI 界面。从 CSS 技术角度来说,在 Web 中给 UI 添加阴影效果有多种不同的技术方案,但从实现阴影效果的 CSS 属性来说,常见的主要有 text-shadow(文本阴影)、box-shadow(盒子阴影)和 filterdrop-shadow()(不规则阴影)。今天,我们就一起来聊聊 CSS 这方面的特性。

2022 年的 CSS

虽然近些年 CSS 变化很快,但我认为 2021 年是 CSS 的元年。在即将过去的 2021 年,CSS 变化非常地大,其中新增了很多特性,比如 CSS 容器查询CSS 父选择器CSS 层叠控制规则CSS 子网格等等。而且这些特性已经在个别,甚至是在大部分主流浏览器已经可以看到了。几大主流浏览器(Chrome、Firefox、Safari和Edge)还专注于修复浏览器兼容性痛点,让 Web 开发者的工作变得更轻松。 ​

CSS 选择器:is() 和 :where() 与 :has() 有什么功能

对于 CSSer 而言,CSS 选择器是 CSS 领域最基础不过的知识了,他虽基础,但在给元素设置样式,选择器是不可或缺的。正所谓,“众里寻他千百度,蓦然回首,那人却在灯火阑珊处”!在 Web 开发中,我们需要通过选择器的能力,在众人中找到想找到的人。话又说回来,选择器虽然简单,但它却很重要,就从 W3C 规范中有关于选择器版本的迭代中也能说明这一点(现在已经是 Level 4 版本了)。事实上,早在2018年年底我就在《初探CSS 选择器Level 4》一文中和大家一起探讨了在选择器 Level 4 中新增的选择器。

CSS 中的条件圆角技巧

CSS 的 border-radius 技术已经是非常成熟的技术了,在现代 Web 开发的过程中,实现圆角的效果都是使用 border-radius 来实现。使用 border-radius 来给一个盒子添加圆角效果已经是最为常见,最简单的技术了,但前段时间在 Twitter 上看到 @Ahmad Shadeed 发的一条推特信息说:“Facebook 应用在border-radius上使用了 CSS 的比较函数(比如 min()max())来实现按条件给元素设置圆角效果”。这一说法并得到了 Facebook 的工程师 @Frank Yan的确认。Facebook 的工程师使用了一种被称为 “Fab Four” 技术,可以让圆角根据一定的条件来设置不同的值。不知道你是否对该技术感到好奇呢?CSS 是如何有条件地将border-radius设置不同的值。如果您感兴趣的话,请继续往下阅读。

响应式图片使用指南(Part4)

前面我们花了较多的篇幅围绕着 HTML 的 <img> <picture> 元素是如何构建响应式图片。在 <img> 标签元素上可以使用 srcsetsizes 属性大不同环境下提供不同尺寸的图片;在 <picture> 中使用 <source> ,并且结合mediasrcsetsizestype等属性可以为用户提供不同图片(环境不同提供不同的图片)和不同类型图片(type指定图片类型)等。但在 Web 开发中,很多时候还会使用背景图片(background-image)、边框图片(border-image)和蒙板图片(mask-image)等。我们接下来围绕着 CSS 中的背景图片(background-image)来展开,换句话说,在background-image中是否也可以像 <img><picture> 一样,根据用户环境来提供不同的图片。

页面

返回顶部