Meta（原 Facebook）开源了全新的 CSS-in-JS 库 StyleX。 GitHub 地址：https://github.com/facebook/stylex 官方介绍道，StyleX 是一个富有表现力、具有确定性、可靠且可扩展的样式系统。它通过使用编译时 (com
2023-12-13
现实生活中，物体并不是突然启动或者停止， 当然也不可能一直保持匀速移动。就像我们 打开抽屉的过程那样，刚开始拉的那一下动作很快， 但是当抽屉被拉出来之后我们会不自觉的放慢动作。或是掉落在地板上的物体，一开始下降的速度很快， 接着就会在地板上来回反弹直到停止。今天就来介绍一下Chrome 113+全新
2023-12-11
一、:in-range 和 :out-of-range 伪类:in-range 和 :out-of-range 是 CSS 中的伪类，它们可以用来样式化表单控件中的输入值。:in-range 表示当前输入值位于 min 和 max 属性之间，可以使用它来样式化合法输入值。:out-of-range
2023-12-08
大家好，在上一篇文章里 CSS小知识，分享14个你可能还未用上但又实用的CSS属性（上）我们一起学习了上半部分，这篇文章我们我们继续学习下半部分。八、CSS Shake Effect 晃动效果CSS Shake Effect 是一种使用 CSS 制作的晃动效果。这种效果通常用于错误提类似的场景。如下
2023-12-08
大家好，我卡颂。近日，Meta开源了一款「CSS-in-JS库」 —— StyleX。看命名方式，Style - X是不是有点像JS - X，他们有关系么？当然有。JSX是一种「用JS描述HTML」的语法规范，广泛应用于前端框架中（比如React、SolidJS...），由Meta公司提出。同样的，
2023-12-08
本文翻译自 CSS Nesting，作者：Ahmad Shadeed， 略有删改。如果你是一个前端开发人员，那么你应该使用过CSS预处理器以及预处理器中的嵌套特性。它一直是一个受欢迎的功能，我一直都在使用CSS预处理器。今年所有的主流浏览器都支持原生CSS嵌套：Chrome、Firefox和Safa
2023-12-07
前言Flex想必大家都很熟悉，也是大家平时在进行页面布局的首选方案。(反正我是!)。不知道大家平时在遇到Flex布局属性问题时，是如何查阅并解决的。反正，我每次记不住哪些属性或者对哪些属性的用法忘记时。我总是求助于阮一峰老师写的Flex 布局教程：语法篇[1]。其实，对于CSS来讲，大家都抱着一种「
2023-12-07
为了构建一个阅读进度条，即显示用户向下滚动时阅读文章的进度，很难不考虑 JavaScript。但是，事实证明，您也可以使用纯 CSS 构建阅读进度条。从本质上讲，一个名为 animation-timeline[1] 的新实验性 CSS 属性可以让你指定用于控制 CSS 动画进度的时间轴。我们将用它来
2023-11-30
谈到 CSS，您总是必须编写许多代码行，才能使您的项目在样式方面看起来美观大方。当然，专注于为前端编写好的 CSS 很重要，但这个过程可能会花费很多时间。作为 Web 开发人员，CSS 是我们开展项目时必不可少的语言之一。我知道现在有很多框架可以让编写 CSS 代码比以往任何时候都容易得多。但是，在
2023-11-30
免费体验 Gpt4 plus 与 AI作图神器，我们出的钱 体验地址：体验使用 Tailwind CSS，我避免了在 React 项目中复制大量 CSS 文件的麻烦，使网页开发变得更加迅速高效。虽然 Tailwind 已经非常优秀，但我还是发现了一些技巧，可以进一步提升使用这个框架的体验。IDE 设
2023-11-28
行业动态图片State of JavaScript 2023 调查启动[1] - 一年一度，了解社区动态和工具使用文章图片CSS 容器查询入门教程[2] - MDN Blog 上的最新内容。深入探讨使用容器查询（CSS Container Queries）构建网页布局图片CSS 网格交互式指南[3]
2023-11-27
CSS margin 和 padding 属性经常被放在一起讨论，原因有两个：它们都影响空白区域，并且在 CSS 盒模型中紧挨着，只有在存在边框的情况下才会被边框分隔开来。它们的值接受几乎完全相同的 CSS 数据类型： length 和 percentage （ margin 也接受 auto ，但
2023-11-27
CSS 添加了许多新的数学函数来补充旧有的函数（如 calc() 和最近的 clamp() ）。这些函数最终都表示一个数值，但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数的常见用例以及不太常见的用例。rem() 函数的基础知识 余数的数学概念来自除法，表示一个数不能平均除以另一个数时
2023-11-22
CSS 是一种不断发展的语言。每一次迭代，它都会变得越来越好。因此，了解最新的 CSS 功能非常重要，这样你才能在项目中使用它们，减少对第三方库的依赖。本文将介绍一些即将推出的 CSS 新特性，这些特性将简化你的开发工作。虽然这些特性尚未在所有浏览器中支持，但可以提前使用它们，以适应未来的项目需求。
2023-11-16
为什么尽管一些网页设计工具为按钮等元素指定了 CSS 高度值，但设置高度或最大高度实际上可能会违反 WCAG 2.2 Success Criterion 1.4.4 Resize Text.标准要求：除了字幕和文本图片外，文本可以在不使用辅助技术的情况下放大到 200% 而不会丢失内容或功能。如果
2023-11-15
介绍Bootstrap 是一个强大的框架，有助于创建响应式、以移动设备为首的网站。虽然开箱即用的 Bootstrap 样式非常出色，但在某些情况下，你可能希望进一步定制设计。这就是 Sass 的魔力发挥作用的地方，Sass 是一种预处理脚本语言，可以解释或编译成层叠样式表（CSS）。Bootstra
2023-11-15
前端工程师最常见且最具挑战性的问题之一是 CSS 命名约定。随着 Block Element Modifier（BEM）方法的流行，许多人习惯于按照一种可维护的模式组织他们的样式。即将在 Chrome 浏览器中实施的 @scope 允许在样式表中对样式进行块级作用域划分，从而进一步提高了 BEM 的
2023-11-13
前言你是否厌倦了在实现响应式网站时需要管理多个媒体查询？说再见复杂的代码，拥抱更简单的解决方案吧：CSS Grid。在这篇文章中，我们将踏上一场激动人心的 CSS Grid 之旅，发现它如何消除了对复杂媒体查询的需求，使你能够轻松创建响应式网站。所以，让我们深入研究，彻底改变你对网页设计的方式吧！介
2023-11-09
修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景啊！前端开发人员几乎每天都会与它们打交道。本文收集了13个CSS技巧，我们一起来回顾一下。1.解决图片5px间距问题5px ，你是否经常遇到图片底部多余空间的问题？别担心，有4种方法可以解决。方案一：更改其父元
2023-11-02
前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。最近看一个网站的时候，发现一个效果类似于广告灯的感觉，挺不错的，于是就想用纯CSS来实现这个效果，顺便提升一下自己的CSS动画技能。图片分析我们先分析怎么做的，这个效果分成两个部分：上层：真正动画的层级下
2023-11-01