小红花·文摘
  • 首页
  • 广场
  • 排行榜🏆
  • 直播
  • FAQ
Dify.AI
CSS Grid Lanes何时到来?我们还需要多久才能使用它?

CSS Grid Lanes是一种新布局工具,目前在Safari技术预览版中可用,其他浏览器如Firefox、Chrome和Edge也在积极实现中。开发者可以通过渐进增强技术,利用Grid Lanes创建砖石风格布局,并为不支持的浏览器提供后备方案。文章介绍了三种实现方法:使用JavaScript库作为后备、选择其他CSS布局或同时使用Grid Lanes和后备布局。

CSS Grid Lanes何时到来?我们还需要多久才能使用它?

WebKit
WebKit · 2026-01-22T10:00:30Z
OpenTelemetry专家谈移动端面临的复杂遥测挑战

前端可观察性正在变化,OpenTelemetry对移动应用的支持受到关注。新成立的浏览器特别兴趣小组致力于改善浏览器运行时支持。调查显示,未来12至24个月内,移动数据收集的OpenTelemetry采用率将增加三倍。移动开发者面临数据规模、性能和生命周期复杂性等挑战,需要在采样和数据收集上做出权衡。Android和Swift小组正在改善开发者体验,提供更好的API和工具支持。

OpenTelemetry专家谈移动端面临的复杂遥测挑战

The New Stack
The New Stack · 2025-11-07T17:00:52Z

CSS新增了:heading伪类,用于匹配h1至h6元素。:heading()函数可筛选特定标题元素,优先级与类名相同。目前仅Firefox支持此特性,其他浏览器尚未跟进。

垃圾特性之CSS :heading伪类和:heading()函数

张鑫旭
张鑫旭 · 2025-11-03T07:52:37Z

QUIC协议是Google开发并于2021年标准化的UDP传输协议,主要用于HTTP/3,具有在高延迟或丢包网络中优越的表现,但某些网络设备可能会阻止UDP流量。Chrome和Firefox浏览器支持QUIC,用户可通过特定网站和工具测试服务器的QUIC支持情况。

QUIC协议科普

绿盟科技技术博客
绿盟科技技术博客 · 2025-08-11T10:44:21Z
无须JavaScript的滚动动画:介绍animation-timeline: view()

使用CSS的animation-timeline: view()属性,可以实现基于滚动的动画,无需JavaScript。该属性根据元素在视口中的滚动位置控制动画,提供更流畅的体验,并通过animation-range精确设置动画的开始和结束位置。这种方法减少了代码复杂性,提高了性能,适用于多种动态效果。目前,Chrome和Edge支持该功能,Firefox和Safari仍在开发中。

无须JavaScript的滚动动画:介绍animation-timeline: view()

DEV Community
DEV Community · 2025-05-17T04:01:39Z
如何在Vite应用中设置Tailwind CSS v4.0

本文介绍了如何在Vite应用中设置Tailwind CSS v4.0,该版本于2023年1月发布,具有更快的构建速度和内置导入功能。安装步骤包括通过npm安装、在Vite配置中添加插件以及在CSS文件中导入Tailwind。若从v3升级,需查看升级指南并更新Node.js环境。v4.0支持现代浏览器,旧版浏览器需继续使用v3.4。

如何在Vite应用中设置Tailwind CSS v4.0

DEV Community
DEV Community · 2025-04-30T11:45:49Z

本文介绍了CSS @supports规则中新增加的font-tech()和font-format()特性。font-tech()用于检测浏览器对特定字体技术的支持,而font-format()则用于检测字体格式支持。作者认为这两个特性在中文场景中不实用,且font-format()出现得太晚,已无必要,但仍可用于判断浏览器类型。

CSS @supports规则又新增font-tech,font-format判断

张鑫旭-鑫空间-鑫生活
张鑫旭-鑫空间-鑫生活 · 2025-03-09T13:11:08Z

本文介绍了CSS的新属性font-size-adjust,旨在解决不同字体字形大小不一致的问题。通过调整字体纵横比,使不同字体在视觉上更统一。该属性支持多种语法,适用于英文和中文场景,尽管中文支持有限。现代浏览器已支持font-size-adjust,未来有望广泛应用。

不要搞混了,不是text而是CSS font-size-adjust属性

张鑫旭-鑫空间-鑫生活
张鑫旭-鑫空间-鑫生活 · 2025-02-12T13:01:24Z
为什么每个人都在谈论CSS容器查询(以及如何使用它们)

容器查询是CSS布局的一项创新,允许元素根据父容器的大小调整样式,解决了可重用组件在不同环境中的不一致表现。除iOS 15及更早版本的Safari外,所有主要浏览器均支持此功能。

为什么每个人都在谈论CSS容器查询(以及如何使用它们)

DEV Community
DEV Community · 2025-02-11T17:21:59Z
影子 DOM:构建完美封装的网页组件

Shadow DOM 是一种网页标准,提供真正的封装,允许将隐藏的 DOM 树附加到常规 DOM 元素,避免样式泄漏和逻辑冲突。它支持构建可重用的组件,确保在不同环境中的一致性。尽管面临浏览器支持和学习曲线的挑战,但它为开发者提供了构建可维护、可靠网页组件的强大工具。

影子 DOM:构建完美封装的网页组件

DEV Community
DEV Community · 2025-01-11T23:19:28Z
一个展示浏览器支持和基线状态的网页组件 (#博客文章)

我的博客提供来自MDN的浏览器支持信息。W3C WebDX社区发布了一个网页组件,展示浏览器支持和基线状态,令人兴奋!

一个展示浏览器支持和基线状态的网页组件 (#博客文章)

Stefan Judis Web Development
Stefan Judis Web Development · 2024-10-28T13:00:00Z
CSS 形状:围绕形状环绕文本

CSS Shapes 是一种强大的工具,允许设计师通过操控 HTML 元素的形状来创建独特布局。它的优点包括增强视觉吸引力、灵活布局和改善用户体验,但浏览器支持有限且实现复杂。尽管如此,CSS Shapes 为网页设计带来了创新,未来随着支持增加,将有更多创意设计出现。

CSS 形状:围绕形状环绕文本

DEV Community
DEV Community · 2024-09-30T04:18:42Z
理解 CSS 中的作用域概念

CSS中的样式泄漏问题常见,传统命名方法如BEM无法完全解决。@scope at-rule提供了一种新方法,通过定义作用域限制样式应用范围,避免冲突,提升代码可维护性。虽然Firefox暂不支持,但其他主流浏览器已支持,未来将普及。

理解 CSS 中的作用域概念

DEV Community
DEV Community · 2024-09-29T10:36:03Z
CSS Flexbox:制作粘性侧边栏

CSS Flexbox是一个强大的布局工具,适合创建响应式用户界面。使用Flexbox制作粘性侧边栏简单高效,只需少量代码,无需复杂的JavaScript。其缺点是对旧版浏览器支持不足。尽管如此,Flexbox因其灵活性和功能性,仍是开发者的热门选择。

CSS Flexbox:制作粘性侧边栏

DEV Community
DEV Community · 2024-09-25T04:18:22Z

CSS Flexbox是一种强大的CSS技术,用于创建灵活和响应式的布局。它简化了对齐和分布项目的过程,提供了响应式设计能力,减少了浮动和定位等技巧的使用。然而,旧浏览器的支持不足。CSS Flexbox提供了多种属性来控制项目在容器中的对齐和间距,支持项目的自动调整大小和顺序。总之,CSS Flexbox是一种灵活高效的方法,用于创建动态和响应式的布局,广受前端开发人员欢迎。

CSS Flexbox:对齐和分布项目

DEV Community
DEV Community · 2024-08-31T04:17:39Z

内容安全策略(CSP)是一种防止跨站脚本攻击和数据注入等攻击的安全功能。然而,CSP的配置需要精确和有意识,不是简单添加指令。CSP并不能解决所有安全问题,需要其他安全措施的支持。不同浏览器对CSP的支持程度不同,配置CSP需要维护和更新。因此,CSP应作为综合安全策略的一部分,而非唯一解决方案。

CSP真的能提升你的安全性吗?🤔

DEV Community
DEV Community · 2024-08-29T17:45:44Z

Avalonia 11.1是跨平台UI框架的重大更新,提供了跨平台支持、浏览器支持、Android和iOS改进、性能优化、UI和UX改进、开发者生产力功能、图形和动画增强、可访问性和国际化、移动设备增强、新窗口功能、文件系统集成和构建部署改进等方面的增强。更新包括对三星Tizen和Apple TV平台的支持、改进的浏览器支持、Vulkan后端以提高性能、增强的资源管理、改进的用户界面控件、改进的开发工具、改进的XAML系统、增强的绑定系统、新的转换器类型、改进的图形和动画功能、改进的可访问性和国际化支持、移动设备增强、新窗口功能、改进的文件系统集成和构建部署改进。此更新代表了Avalonia在框架各个方面的重大进步。鼓励开发者升级到这个新版本并探索其丰富的功能和改进。社区的反馈和贡献对于塑造Avalonia的未来非常宝贵。此更新得益于核心团队和社区贡献者的辛勤工作、创造力和奉献精神。

.NET跨平台UI框架Avalonia 11.1重磅发布 - Setli

Setli
Setli · 2024-07-23T01:50:00Z
实现全站图片使用avif格式,替代臃肿的webp教程

本文介绍了AVIF格式的优势和使用方法,包括转换图片、显示图片和判断浏览器支持。作者提供了使用EO平台和COS+数据万象+CDN两种方法来显示AVIF格式的图片。同时,还介绍了使用FFmpeg和ImageMagick转换图片为AVIF格式的方法。

实现全站图片使用avif格式,替代臃肿的webp教程

张洪Heo
张洪Heo · 2024-05-31T08:21:07Z
Dialog 的魔法

<dialog>标签是HTML5中的新元素,类似于旧版的confirm和alert。它可以通过open属性或JavaScript显示,并支持modal模式,确保对话框在最上层且用户无法与其他元素互动。<dialog>的样式可通过CSS调整,宽高可自适应内容。Chrome早在2014年就支持该标签,但Firefox和Safari直到2022年才正式支持。

Dialog 的魔法

O3noBLOG
O3noBLOG · 2024-04-03T03:49:41Z
现代图像格式:AVIF 与 WebP

AVIF 和 WebP 是两种现代图像格式。AVIF 基于 AV1 编解码器,压缩效率和图像质量优于 WebP,但支持较少。WebP 工具更成熟,支持广泛。开发者可通过 <picture> 标签结合使用这两种格式,以适应不同浏览器的支持情况。

现代图像格式:AVIF 与 WebP

程序师
程序师 · 2024-02-02T03:10:45Z
  • <<
  • <
  • 1 (current)
  • 2
  • >
  • >>
👤 个人中心
在公众号发送验证码完成验证
登录验证
在本设备完成一次验证即可继续使用

完成下面两步后,将自动完成登录并继续当前操作。

1 关注公众号
小红花技术领袖公众号二维码
小红花技术领袖
如果当前 App 无法识别二维码,请在微信搜索并关注该公众号
2 发送验证码
在公众号对话中发送下面 4 位验证码
友情链接: MOGE.AI 九胧科技 模力方舟 Gitee AI 菜鸟教程 Remio.AI DeekSeek连连 53AI 神龙海外代理IP IPIPGO全球代理IP 东波哥的博客 匡优考试在线考试系统 开源服务指南 蓝莺IM Solo 独立开发者社区 AI酷站导航 极客Fun 我爱水煮鱼 周报生成器 He3.app 简单简历 白鲸出海 T沙龙 职友集 TechParty 蟒周刊 Best AI Music Generator

小红花技术领袖俱乐部
小红花·文摘:汇聚分发优质内容
小红花技术领袖俱乐部
Copyright © 2021-
粤ICP备2022094092号-1
公众号 小红花技术领袖俱乐部公众号二维码
视频号 小红花技术领袖俱乐部视频号二维码