记录－交流－Web开发知识分享
前段时间，laravel更新8.0版本，系统内置的Jetstream应用支架使用的是Tailwind CSS，于是勾起了我对Tailwind CSS的兴趣。
后来项目中也是逐步使用，总体感觉超级爽。就像他的简介一样Utility-First效用优先的CSS框架。…
写CSS有些年头了，经历了不同的时期用不同的姿势来编写CSS，其目的就是给Web元素添加样式。但编写样式着实令人感到烦恼，甚至是效率低下，成本极高。也正因如此，社区中有很多CSS方法论和框架来帮助开发快速有效编写CSS。虽然这些方法论和框架有助于我们快速编写CSS，构建UI组件，但也有令人感到头痛之处，比如冗余的代码，代码的覆盖等。随着功能第一（Utility-First）CSS的出现，让我看到了编写CSS的另一种有效的方式，该方式也被认为是现代Web中构建Web界面最好的选择。其中Utility-First CSS的典型作品之一就是Tailwind CSS。接下来，我们就来了探讨Tailwind CSS，我们将了解基于组件的样式有哪些问题，以及为什么要基于Utility-First CSS来构建组件。
时至今日，编写CSS有很多方式，也可以基于一些CSS框架来编写。比如2019年CSS状态报告中也有相关的统计:
或许你在项目中已经用了一些CSS方法论，比如BEM、Atomic CSS、OOCSS、SMACSS和ITCSS等，也体验过了在项目中引用社区中优秀的CSS框架，比如大家熟悉的Bootstrap、Foundation等。
随着一些优秀的JavaScript框架（比如，React和Vue）等出现，我们构建Web的方式也变了，也致使我们编写CSS的方式也不同了，社区中有很多关于CSS-in-JS的讨论，同样也有不同的方式方法：
如果你面对众多的编写CSS的姿势和管理维护方式感到困惑的话，建议你可以按照下图的流程来做选择：
有关于这方面的讨论，这里就不做过多的阐述了，如果你感兴趣的话，可以阅读：
虽然这些CSS方法都在试图着帮助我们解决CSS编写和管理的问题，但是如果我们能够编写实用程序类（Utility Class），然后在我们的代码库中重复使用它们，就会更容易一些。这些实用工具类是详尽的，可以作为padding、margin、font-size等方面的独立指南。
另外实用程序类（Utility Class）将解决重复样式的问题，因为我们不再需要编写任何自定义样式。此外，如果我们的UI风格遵循特定的标准，我们也可以在开发中遵循相同的标准。其中Tailwind CSS就是社区中目前具备这些特点的CSS框架之一。是不是对Tailwind CSS感到好奇，如果是的话，请继续往下阅读。
Tailwind CSS官网是这么描述的：
一个实用的CSS框架，是一个高度可定制的，底层的CSS框架，它为你提供了所有的构建模块，可以快速构建定制设计，也不会有额外的自定义CSS需要去覆盖。
换句话说，Tailwind
https://www.joshwcomeau.com/css/transforms/…
本文讲解CSS中使用频率并不高的content属性，通过多个实用的案例，带你由浅入深的掌握content的用法，让代码变得更加简洁、高效。
W3school中这样定义：
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
在前端日常开发中，content属性使用频率并不高，所以开发者一般对它的理解并不深入，通常会在清除浮动、字体图标时偶尔使用。下面通过各种案例，来一起看看content的妙用。
| <!--css--> | |
| .left {float: left} | |
| .right {float: right} | |
| .clear:after { | |
| content: ''; | |
| clear: both; | |
| display: block; | |
| } | |
| <!--html--> | |
| <div class="container clear" |
by Marko | April 21, 2020CSS tips and tricks you won’t see in most of the tutorials.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document
作者 | Rumesh Eranga Hapuarachchi
译者 | 张健欣
策划 | 田晓旭
用户喜欢快速的 Web 应用。他们期望页面加载速度快，运行流畅。如果滚动时出现动画中断或延迟，用户很可能就会离开你的网站。作为一名开发者，你可以做很多事情来提升用户体验。本文主要介绍你可以用来提升页面渲染速度的 4 个 CSS 技巧。
1. Content-visibility
一般来说，大部分 Web 应用都有复杂的 UI 元素，并且它的扩展超出了用户在浏览器视图中所能看到的范围。在这种情况下，我们可以使用content-visibility来跳过渲染屏幕之外的内容。如果你有大量屏幕之外的内容的话，这会大大减少页面渲染时间。
在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例，Firefox 使用Geoko——Mozilla 自主研发的渲染引擎，Safari 和Chrome 都使用 webkit。
我们主要以 Webkit的主流程为例
HTML 生成 DOM 树CSS 生成CSSOM 规则树DOM 树与 CSSOM 规则树合并在一起生成渲染树html table表格固定列效果实现
css代码：…
如果问，CSS 中 position 属性的取值有几个？
大部分人的回答是，大概是下面这几个吧？
|
1
2
3
4
5
6
|
{ position: static; position: relative; position: absolute; position: fixed;} |
额，其实，我们还可以有这 3 个取值：…
<html lang="zh-CN" class=""><head>
<meta charset="UTF-8">
<title>CodePen Demo</title>
<style>
.table-container {
width: 50%;
height: 200px;
border: solid 1px #cccccc;
margin: 10px auto;
background: #FFF;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
padding-top: 50px;
overflow: hidden;
}
…
近期评论