现代 CSS

CSS

如何隐藏DOM元素

早在2011年整理了一篇有关于图片替换文本的方法,而前几天看到一篇有关于隐藏DOM元素的几种方法。今天这里也将继续说说如何隐藏DOM元素?

八个CSS函数的小技巧

CSS现在已经能实现比网站开发者预料到的更多的功能,并且随着时间的推移,样式表语言越来越强大,能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

font-display的用法

如果你已经对CSS有了一定的了解,也许你之前已经掌握了一些字体加载的方法,那么你使用过font-display吗?font-display是CSS中新添加的属性,它能实现之前类似于Font Loading APIBram Stein's Font Face Observer这种第三方脚本实现的功能。如果这是你第一次接触这类知识,那也没有关系,我们会先简单介绍一下浏览器加载字体的默认方法。

使用Express Server和Handlebars优化Critical-Path性能

最近,我在一个React同构网站工作。这个网站建立在React上,运行于Express服务器上。一切都进行得十分顺利,但是我仍对CSS包的加载阻塞不满意。因此,我开始考虑如何在Express服务器上进行关键路径的优化。这篇文章主要是如何使用Express和Handlebars进行安装以及配置一个关键路径的性能优化的笔记。

字体加载策略大全

本指南不针对于具有优先级加载以及用例示范的font icons,或许,SVG会是一个更好地长期选择。如果你正在寻找具体的方法,这里的一些相关链接可能对你的帮助会更加直接。

【转载】大型项目中的结构化CSS

写CSS很容易。写持续可维护的CSS则很难。你也许听说过不下100 次了。因为在CSS中默认都是全局的申明。如果你是个写C的程序员你知道全局变量是糟糕的。如果你是程序员你会知道,独立及可组合的模块是一个可维护系统的关键所在。

理解Critical CSS

CSS 资源的加载情况对浏览器渲染页面的影响很大,这是因为默认情况下浏览器只有在完成 <head> 部分 CSS 样式的加载、解析之后才会渲染页面。这种渲染方式意味着,如果 CSS 文件很大,那么用户就必须等待很长的时间才能看到渲染结果。针对这一问题,我们将在接下来的内容中讨论一种非常规的解决方案,提高页面的渲染速度,这一方案常被称为 critical rendering path

CSS中的数据类型

在CSS中的属性值有些是使用数字的。为了让用户客户端能够确定这个值有效,就需要确保它的值是符合规范类型中的一个。这些就被称为数据类型,规范中通常写成这样<this>。有两种数据类型:特定的通用的。特定数据类型是一个属性或者一组属性。例如<transform-function>数据类型被用在transform属性的值上。另一方面,通用数据类型是可以用在任何特定的属性上。比如<length>数据类型,可以设置一个10px的值,它可以用在marginfont-fize或者其它可以用数字值的属性。在这篇文章中,将会把所有的通用数据类型给大家介绍一下。

如何理解CSS的display属性

在布局中,display属性是最重要的CSS属性之一。其最常见的属性值有block,inline,none,table以及inline-block。最近的新宠为flex,因为它是专门为布局创建的display属性。新出现的grid(最近仍比较活跃)是另外一个指定的布局属性,其很快就会广泛被使用。这篇文章比我预期的要长很多,你可以选择性进行阅读,但是我更希望你可以静下心来阅读整篇文章。

关于BEM中常见的十个问题以及如何避免

不管你是刚刚才接触BEM还是已经是一名老手,对于它的思想你是不是都十分的赞美?如果你还没有接触过BEM,在阅读这篇文章之前我建议你先到BEM官方网站进行了解,因为我将对其进行分类表述我对这种CSS理念的观点。

页面

返回顶部