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

Links

我们正在阅读并有一些想法的网络上的内容。有没有我们应该知道的链接?告诉我们!

(是否使用)类

🔗 http://snook.ca/archives/html_and_css/more-meaningful-css
阅读评论

我喜欢博客辩论!爸爸熊、妈妈熊、小熊。

全部或无

🔗 http://snook.ca/archives/html_and_css/all-or-nothing
阅读评论

Jonathan Snook 考察了all属性,它可以这样使用

.element {
  all: initial;
}

其理念是它应该将元素的所有属性设置为初始,从而移除迄今为止应用的所有自定义样式。本质上是重置任何元素的样式,以便您可以从头开始构建。

不幸的是,每个浏览器之间存在不一致性,因此很难推荐。如果您可以依靠它保持一致,那么这是一个强大的单行代码,可以减轻 iframe、Web Components 或 CSS 模块等某些动机。

尖叫鸟

🔗 http://glench.com/ScreamyBird/
阅读评论

在旧金山的“没人需要且糟糕的主意”黑客马拉松期间,Glen Chiaccheri 制作了一个游戏,你必须真正尖叫着通关。

请确保在 Firefox 中查看,因为 Chrome 和 Safari 不完全支持getUserMedia API。这是允许 Web 开发人员请求访问用户麦克风的 API,您可以在HTML5Rocks上找到更多相关信息。

(是否使用)ARIA 选项卡

🔗 https://alastairc.ac/2016/05/aria-tabs-ui-problems-and-standards/
阅读评论

看起来像爸爸熊、妈妈熊、小熊的情况。

减小 JPG 文件大小

🔗 https://medium.com/@duhroach/reducing-jpg-file-size-e5b27df3257c#.e06g7ewpp
阅读评论

Colt McAnlis 在这篇文章中介绍了许多关于减小 JPG 大小的巧妙技巧。

现在网页的平均大小超过了最初的 DOOM 游戏,您必须开始询问所有字节的来源,以及如何才能做更多的事情来丢弃这些东西。

虽然 JPG 压缩本身就令人印象深刻,但您在应用程序中使用它的方式会显著影响这些文件的大小。因此,我收集了一些可以帮助您挤出最后一点空间,并为用户带来更好体验的内容。

设计系统中的按钮

🔗 https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23
阅读评论

我真的很喜欢 Nathan Curtis 的这篇文章,他在文章中讨论了如何在设计系统中应用按钮

我喜欢按钮。我可以使用按钮做很多事情。迈出下一步。做出承诺。完成任务。有了按钮,交互就变得生动起来。

这就是为什么按钮可以说是设计系统中最重要的组件。它们极其简单,在我可以按压的特定区域提供一个简单的标签。因此,按钮是您应用设计语言的基本属性的地方,这些属性会波及到以后更复杂的组件。

边框、颜色、文本样式、图标;需要考虑的东西太多了!但我真正想在这里快速说明的是设计中的弹性的概念,特别是 Nathan 谈到在按钮内部添加组件(如图标)时。

当您添加元素(即使是简单的图标)时,按钮布局不应该崩溃。应对不太可预测的元素会暴露出内部间距和对齐方面的恼人问题。

因此,无论何时您从按钮内部移除组件,按钮本身都应该仍然可以工作。但这不仅仅对按钮很重要,对我们正在构建的任何组件都很重要。简而言之:询问某个元素在视觉上或交互方面可能会如何崩溃,这对于构建有效的设计系统至关重要。

未来的 CSS

🔗 http://zeke.sikelianos.com/css-from-the-future/
阅读评论

Zeke Sikelianos

所以。我们现在在 CSS 中有了变量。这非常棒,但它并没有让我们完全进入 CSS 的天堂。我们真正需要的是一种编写少量可重用 CSS 的方法。这些功能早已存在于 Sass、Less 和 Stylus 中,但在常规 CSS 中无法实现。

有计划为当前称为@apply规则的新规范添加功能。它看起来像 Sass 的mixin,但实际上更像是扩展占位符选择器,但由于它是原生的,因此不会像extend那样导致选择器混乱。

Blink 已经在运行时标志后发布它。

更新:Tab Atkins 表示@apply已放弃,并且最终可能会变成类似::part()的内容,并且专门用于 Shadow DOM。

这里还有很多可以尝试的空间,虽然失去可能让你兴奋的工具确实令人沮丧,但从技术上讲,@apply确实是一个非常糟糕的想法。让我们正确地解决这些问题。

更新我们的前缀策略

🔗 https://webkit.ac.cn/blog/6131/updating-our-prefixing-policy/
阅读评论

WebKit 将不再发布带有前缀的实验性功能(例如-webkit-font-smoothing),因为许多人发现这实际上可能非常有害。

随着时间的推移,这种策略证明效果不佳。许多网站开始依赖于带前缀的属性。它们通常使用每个功能的带前缀的变体,这使得 CSS 难以维护,JavaScript 程序也更难编写。网站经常只使用功能的带前缀的版本,这使得浏览器在添加对无前缀标准版本的支持时难以放弃对带前缀的变体的支持。最终,浏览器因兼容性问题而承受压力,不得不实现彼此的前缀。

相反,实验性功能将在运行时标志后发布。这意味着新功能将在浏览器的开发版本(例如“技术预览版本”或“每日构建”)中以无前缀的方式提供。

WebKit 是最后一个加入这个行列的。也许几年后,我们几乎不会再使用或考虑前缀了。

2016 年 Web 字体总统

🔗 http://www.zachleat.com/web/president-web-font/
阅读评论

Zach Leatherman 深入研究了总统候选人网站的内部,并揭示了字体加载是一项细致且复杂的工作。

使用 Web 字体服务并不一定意味着您的网站将使用最佳实践。我们必须了解我们使用的工具的内部机制,以便充分利用它们。归根结底,如果您不想投入任何精力,那么使用 TypeKit 会更安全。

CodePen 嵌入式笔升级

🔗 http://codepen.io/embeds
阅读评论

它们现在

  1. 拥有全新的设计,允许在响应式设计允许的情况下进行分屏视图(左侧为代码,右侧为预览)。
  2. 可以编辑。

以及它们一直以来拥有的所有相同的功能,例如主题(完全的设计控制!一次更改所有嵌入!)和可选的点击播放(以提高性能)。

Quick Hits

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

CSS-Tricks 由DigitalOcean提供支持。

关注 Web 开发最新动态

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

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费积分!
CSS-Tricks
  • 为我们写文章!
  • 与我们合作广告
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.