现代 CSS

图解CSS:Flexbox布局(Part1)

CSS布局发展至今可以说变化非常的大,其中Flexbox布局已经取代了以前最为流行的浮动布局。这里所说的Flexbox布局指的就是 CSS Flexible Box Module Level 1(简称Flexbox,弹性布局)。Flexbox模块的出现让Web的布局变得极为简单。虽然Flexbox给Web布局带来了很多优势,而且让布局变得简单,但就Flexbox模块本身来说是非常复杂。在这一章节中,我将和大家一起来探讨CSS的Flexbox 模块相关的知识。

CSS生成内容

在CSS中可以使用content来生成内容,该特性最早是在CSS2规范中引入的,经过多年的发展,现在该规范已经进入到了Level 3版本。在实际开发中,时常能看到开发人员在伪元素::before::after中使用content为Web添加内容,只不过这些并不是DOM树中的一员,换句话说,可以在不调整HTML的情况下生成图标、图像、文本等。但很多开发人员可能只知道content添加一个值,事实上它有很多新的特性大家不太了解,接下来这篇文章我们就来和大家探讨这方面的知识。

图解CSS:CSS逻辑属性

自Web诞生以来,我们一直习惯于物理CSS属性,比如我们都知道使用margin-topmargin-rightmargin-bottommargin-bottom来设置元素的外边距,但随着书写模式特性的出现,这些物理特性,比如上、右、下和左的概念已经失去了它们的意义。特别是随着越来越多的Web开发人员要处理国际化业务,那么以前的物理特性已经无法满足业务的需求。换句话说,为了具有不同编写模式的多种语言设计页面时,开发人员必须跨多个元素分别调整这些物理属性,这也成了Web开发者的噩梦。幸运的是,CSS的逻辑属性的出现,可以让开发者根据书写模式来维护布局的完整性。即,根据内容的语义顺序进行动态更新。今天这篇文章,我们将和大家一起来探讨CSS的逻辑属性。

聊一点你可能不知道的HTML

HTML(HyperText Markup Language)是构建Web的最基础部分之一,也可以说是构建Web世界的一砖一瓦。它定义了Web页面或应用的内容的含义结构。HTML中包含了很多种不同的标签元素,用来更好的帮助你构建Web能让客户端更好的理解,更正确的显示,也能更好的帮助搜索引擎理解页面,还可以更好的利于屏幕阅读技术。但不幸的是,很多开发者都认为HTML仅是一种由元素标签构建成的标签性语言,太过于简单,没有什么可以值得去研究和思考的。如果你也是这么想的,那么接下来的内容可能对你会没有任何的意义;如果不是的话,那么你可以继续往下阅读。

图解CSS: CSS中的函数

一直以来大家都不把CSS当作一门编程语言,是因为他不像其他和程序语言一样具有程序语言的特性,比如变量、函数、逻辑运算等。但随着CSS不断的变革,CSS也越来越像一门程序语言,比如CSS也有变量、逻辑操作和函数等特性。虽然说这些特性不像其他程序语言那么强大,但他实实在在的在变化,而且有了一定的进步。今天主要和大家来聊CSS中的函数。

聊聊min(),max()和clamp()函数

CSS函数中的min()max()clamp()CSS值和单位模块第九部分,它们常被称为比较函数。这几个函数并不是什么最新的特性,早在2018年年底就有浏览器开始支持它们,今年4月份Firefox也开始支持这几个函数,这也意味着现在所有主流浏览器都支持这些函数。它们最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。简单地说,这几个函数可以用来设置元素尺寸,比如容器大小,字号大小,内距,外距等。在这篇文章中,我将用一些示例和大家一起来探讨这几个函数在实际中的使用,希望能更好的帮助大家理解它们。

CSS的视觉效果

记得在第五届中国区的CSS Conf大会上@张鑫旭、@袁川两位老师分享的话题都和视觉以及创意有关的话题,而且在社区中有关于这方面讨论也多,比如说@Lea Verou的《CSS Secrets》一书就有很多介绍CSS用来创建视觉效果的技巧。另外,在社区也有很多关于这方面的介绍,比如CSSArt网站ASingleDiv网站CodePen上的SingleDiv等。当然,也有同学私下找我,让我能不能抽空聊聊这方面的话题,那么今天,我们就和大家来聊聊如何使用CSS来实现一些视觉效果,在这里我更倾向于和项目中的一些需求和大家讨论这方面的话题。希望大家对这方面话题感兴趣。

响应式网格布局

从文章标题中不难发现这篇文章要和大家聊的是两个东东,即响应式网格。从布局系统来说,响应式布局和网格布局都不是什么新东西了。但是他们结合在一起,可以让响应式布局变得更灵活。正如@Keir Watson所说,只要20行代码就可以实现响应式网格布局。不过,我们今天来看两个比较有意思的布局,看上去并不是很容易实现的布局效果。

CSS自定义属性在组件开发中的使用

图解CSS系列的《CSS自定义属性》一文中,对CSS的自定义属性做过深入的阐述。如果你阅读过这篇文章,应该对CSS自定义属性有所了解,也能体会到该特性的强大之处。今天,CSS自定义属性可以用于Web开发中的很多地方,能让开发者变得更为便捷灵活,比如最近流行的Dark Mode开发。而今天我们就来和大家聊聊CSS自定义属性在组件开发中的运用。

初探React Context API

最近在整理CSS自定义属性在React中的使用时了解到“可以使用React Context API相关的知识更好的在React组件中使用CSS自定义属性”,但是自己对这方面的知识了解的并不多,因此想借此机会来学习React Context API相关的知识。也基于这个原因有了这篇文章。

页面

返回顶部