跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

Links

来自网络的我们正在阅读并有一些想法的东西。 我们应该知道哪些链接? 告诉我们!

快速了解 React 和 Redux DevTools

🔗 http://mediatemple.net/blog/tips/a-quick-look-at-the-react-and-redux-devtools/
阅读评论

我在这方面仍然是一个新手,但我认为围绕 React 和 Redux 的开发工具非常令人印象深刻。

4 分钟完成的网页设计

🔗 http://jgthms.com/web-design-in-4-minutes/
阅读评论

Jeremy Thomas 通过交互式的逐步演练解释网页设计(将样式应用于内容的基本部分)。 我能看到这对于许多正在学习网页设计早期阶段的人来说是一个顿悟时刻。

iOS 的新 `video` 策略

🔗 https://webkit.ac.cn/blog/6784/new-video-policies-for-ios
阅读评论

这是一个很大的新闻:今天早些时候,WebKit 团队宣布 iOS 10 现在将支持带有 `autoplay` 属性的静默 `<video>` 元素,这对性能来说意义重大。 Jer Noble 更详细地描述了更新

事实证明,如今人们真的很喜欢 GIF。 但与 H.264 等现代视频编解码器相比,GIF 格式被证明是一种非常昂贵的编码动画图像的方法。 我们发现,GIF 在带宽上最多可以贵 12 倍,在能耗上贵 2 倍。 它的成本如此之高,以至于许多最大的 GIF 提供商一直在从 GIF 转向 `<video>` 元素。 由于大多数这些 GIF 最初都是以视频剪辑的形式出现,被转换为动画 GIF,然后又被转换回视频剪辑,所以你可以说循环已经完成。

使用 fieldset 和 legend 元素

🔗 https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/
阅读评论

Leonie Watson

您应该在以下情况下使用 `<fieldset>` 和 `<legend>` 元素

  • 您有一个单一的多个选择问题(使用单选按钮或复选框)。
  • 您有几个与同一主题相关的问题(例如文本框或任何其他类型的字段)。

您不应该在以下情况下使用 `<fieldset>` 和 `<legend>` 元素

  • 您有一个用于请求单个信息的单个表单字段。

代码审查,或再次热爱网络的理由

🔗 http://bradfrost.com/blog/post/a-code-review-or-yet-another-reason-to-love-the-web/
阅读评论
  1. Brad Frost 发布了一些代码 以供审查。
  2. Jonathan Snook 对其进行了审查。

字体加载策略的综合指南

🔗 https://www.zachleat.com/web/comprehensive-webfonts/
阅读评论

哇!

我们一直在等待 Zach Leatherman 发布的帖子。 这将成为在字体加载方面做出技术和 UX 选择时的参考指南。

Zach 比较了 11 种当前(和未来)的网页字体加载技术,所有这些技术都带有实时演示。 他清楚地列出了每种技术的优缺点,而不会使其成为一部小说。 最有价值的是,他为每种技术提供了判决,让您知道该技术是否达到了标准。

宣布了一个赢家,但它的实现相当棘手。 它需要一个作为数据 URL 加载到头部、使用 sessionStorage 缓存并通过类名分阶段观察和加载的“非常小的罗马网页字体子集”。 “基准标准”是“带有类的 FOUT”(消除了危险的 FOIT),如果你真的不喜欢 FOUT,这里也有其他选择。

也宣布了一个未来的赢家。

我是如何最终使用元素查询的,以及您今天如何使用它们

🔗 https://www.smashingmagazine.com/2016/07/how-i-ended-up-with-element-queries-and-how-you-can-use-them-today/
阅读评论

我们通常希望组件响应其父元素的尺寸,而不是浏览器窗口的尺寸。 目前这不可能,但最终这就是元素查询背后的理念,而在 Smashing Magazine 上 Tommy Hodgins 写了关于EQCSS.js 的开发,EQCSS.js 是一个允许开发人员编写元素查询的 JavaScript 库。

元素查询的这种实现很有趣,因为它表明我们可以根据另一个元素的特性对元素进行样式设置,即使它不是父元素。 Tommy 做了一个这样的例子

@element '.widget' and (min‐width: 500px) {
  body {
    background: red;
  }
}

如果 `widget` 元素大于 500px,那么 body 将更改其背景颜色,因此这为使用 CSS 开辟了一个全新的实验领域。 如果你问我的话,这真是太棒了。

Dreamweaver Beta

🔗 http://blogs.adobe.com/dreamweaver/2016/06/see-how-dreamweaver-is-transforming-for-the-future.html
阅读评论

除了 IE 笑话之外,最过时的一种笑话就是 Dreamweaver 笑话。 但 Dreamweaver 刚刚发布了一个新的 Beta 版,一些开发人员非常喜欢它。 Anselm Hannemann

这是一个缩小的工作区,然后停用了一些工具,以从旨在为寻求 UI 支持编辑的用户提供帮助的面板中清理 UI。 新的编码工作区只关注代码,旨在取悦那些不想使用可视化工具并更喜欢使用一些上下文帮助的基本代码编辑器的专业编码人员。

快速编辑看起来很有趣 - 它将根据您在 HTML 代码中选择的 HTML 元素带您到相关的 CSS。 内置的预处理也很智能。

奇怪的是,他们演示了 Emmet,但没有称之为 Emmet,而是称之为“Web 开发工具包”。

那些几乎成为 CSS 的语言

🔗 https://eager.io/blog/the-languages-which-almost-were-css/
阅读评论

如今,CSS 实际上没有任何竞争对手。 我们可能会编译另一种语言 来获得它,或者以非同寻常的方式 应用它,但最终,样式在 Web 上通过 CSS 完成。

但在 CSS 巩固自己之前,还有 RRP、PWP、FOSI、DSSSL、PSL、CHSS 和 JSSS。

Zack Bloom 带领我们踏上了一段关于 Web 样式历史的精彩旅程。

自动填充:Web 开发人员应该知道但不知道的事情

🔗 http://blog.cloudfour.com/autofill-what-web-devs-should-know-but-dont/
阅读评论

我不知道/我不知道

许多人知道您可以在 Mobile Safari 中扫描您的信用卡。 但有多少 Web 开发人员知道如何创建一个支持该功能的表单?

Jason Grigsby 详细介绍了这些细节,包括列表,其中列出了 iOS 预期用于触发自动填充的标签名称,以及一个实用的工作演示。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 122
  • 123
  • 124
  • ...
  • 219
  • 较旧的

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发动态

使用我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获取免费积分!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作宣传
  • 联系我们
社交
  • RSS 提要
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.