标签

 css 

相关的文章:

本列表汇集了关于 CSS 的最佳实践、创新应用和实用技巧,帮助开发者提升前端开发效率与效果。

所有现代浏览器均可在JavaScript中导入JSON模块,CSS模块将随后支持

Thomas Steiner, Developer Relations Engineer at Google, recently published a blog post announcing that JSON module scripts were now available in all modern browsers. Developers using the latest...

谷歌开发者托马斯·斯坦纳宣布,所有现代浏览器已支持JSON模块脚本,开发者可在JavaScript中直接导入JSON模块。该功能基于导入属性提案,旨在加载非JS模块。虽然CSS模块导入尚未完全支持,但Chrome已有实现。JSON模块不支持命名导出,因其被视为“单一事物”。开发者可在MDN查看兼容性。

所有现代浏览器均可在JavaScript中导入JSON模块,CSS模块将随后支持
原文英文,约600词,阅读约需2分钟。发表于:
阅读原文

使用 CSS 实现缩放动画:变换顺序很重要……有时

当你动画化 scale 时,目标的宽度和高度会在整个动画过程中线性变化(尽管,如前所述,可以应用缓动效果)。这感觉类似于相机缩放效果

在使用 CSS 实现缩放动画时,变换顺序非常重要。将 translate 放在前面可以避免 scale 作为其乘数,从而实现更自然的动画效果。通过调整 transform 属性的顺序和使用 calc 函数,可以获得理想的动画表现。

原文中文,约4300字,阅读约需11分钟。发表于:
阅读原文

CSS级联层与BEM与工具类:特异性控制

CSS can be unpredictable — and specificity is often the culprit. Victor Ayomipo breaks down how and why your styles might not behave as expected, and why understanding specificity is better than...

CSS特异性控制方法包括BEM、工具类和级联层。BEM通过明确命名简化特异性,工具类通过避免特异性提高速度,级联层则提供绝对控制。三者各有优缺点,适用于不同场景,结合使用可优化CSS管理。

CSS级联层与BEM与工具类:特异性控制
原文英文,约2800词,阅读约需11分钟。发表于:
阅读原文

CSS ::scroll-button ::scroll-marker伪元素又是干嘛用的?

CSS越来越强了,Scroll Snap交互又新增了按钮和切换按钮的生成与自定义,类似Carousel ,Slider这类经典交互纯CSS就能完全驾驭了。

本文介绍了CSS的新伪元素::scroll-button和::scroll-marker,分别用于自定义滚动按钮和序号切换,支持无障碍访问。通过示例展示了流畅的图片滑动效果,并强调了这些特性的兼容性要求。

原文中文,约3600字,阅读约需9分钟。发表于:
阅读原文

使用JavaScript和CSS创建“移动高亮”导航栏

In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the...

本文介绍了两种使用JavaScript和CSS创建“移动高亮”导航栏的方法:第一种通过getBoundingClientRect方法实现边框动画,第二种利用View Transition API实现相同效果。这两种方法可为单页应用提供平滑的导航项切换体验。

使用JavaScript和CSS创建“移动高亮”导航栏
原文英文,约1700词,阅读约需7分钟。发表于:
阅读原文
发表于:
阅读原文

少写多交付:3款强大的免费CSS预处理器

Imagine you're painting a wall. With traditional CSS, it's like using a fine brush: it works, but it's a lot of effort. Preprocessors are like paint sprayers — faster, less work, and a smoother...

CSS预处理器如SASS、SCSS和Stylus增强了CSS功能,支持变量、函数、循环和条件语句,提高了代码的组织性和可重用性,适合大型项目,减少了重复代码。选择合适的预处理器能提升开发效率。

少写多交付:3款强大的免费CSS预处理器
原文英文,约700词,阅读约需3分钟。发表于:
阅读原文

Ant Design 的 CSS-in-JS 实现与最佳实践

CSS-in-JS 是一种前端开发技术,它将 CSS 代码直接嵌入到 JavaScript 代码中,以解决传统 CSS 的一些局限性。

CSS-in-JS是一种将CSS嵌入JavaScript的前端开发技术,克服了传统CSS的局限性。其优点包括动态功能、局部作用域、可移植性和易于维护,但缺点是性能开销和包体积增加,尤其在React中,频繁渲染可能导致性能瓶颈。

原文中文,约21000字,阅读约需50分钟。发表于:
阅读原文
原文英文,约1500词,阅读约需6分钟。发表于:
阅读原文

我构建了一个 API,可以从任何网站或 HTML 中提取 SEO 元数据、图片、JS 和 CSS — 可用于审计、自动化或分析 🔍

Hey devs 👋 As someone building tools for digital marketers and devs, I was constantly hacking together different libraries to extract SEO and asset data from web pages. Most tools were either...

SmartWeb Web Scraper API 是一个快速的服务器端 API,能够从任何网站 URL 或原始 HTML 中提取 SEO 信息和页面资产(如 JS、CSS、图片),适用于 SEO 审计、博客发布验证和竞争对手分析等场景。

我构建了一个 API,可以从任何网站或 HTML 中提取 SEO 元数据、图片、JS 和 CSS — 可用于审计、自动化或分析 🔍
原文英文,约500词,阅读约需2分钟。发表于:
阅读原文