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

Links

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

使用 minmax() 和 min() 实现内在响应式 CSS 网格

🔗 http://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
阅读评论

迄今为止,从 CSS 网格中诞生的最著名的代码行是

grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

无需任何媒体查询,这将设置一个具有灵活列数的网格容器。 列会稍微拉伸,直到有足够的空间容纳另一个列,然后添加一个新的列,反之亦然。

这里唯一的弱点是 minmax() 中的第一个值(上面的 10rem 值)。 如果容器比该最小值窄,则该单列中的元素将溢出。 Evan Minto 向我们展示了使用 min() 的解决方案

grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));

浏览器支持尚未普及,但 Evan 演示了一些渐进增强技术,可以立即利用这些技术。

以最简单的方式异步加载 CSS

🔗 https://www.filamentgroup.com/lab/load-css-simpler/
阅读评论

Scott Jehl

我们可以做出的最有影响力的改进页面性能和弹性的方法之一是以不延迟页面渲染的方式加载 CSS。 这是因为默认情况下,浏览器会同步加载外部 CSS——在 CSS 下载和解析时停止所有页面渲染——这两种情况都会导致潜在的延迟。

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"/>

继续阅读 →

从一年 Web 平台测试中学到的经验教训

🔗 https://bocoup.com/blog/lessons-learned-from-a-year-of-testing-the-web-platform
阅读评论

Mike Pennisi

web-platform-tests 项目 是一套庞大的测试套件(总计超过一百万个),它验证软件(主要是 Web 浏览器)是否正确实现了 Web 技术。 它既重要又雄心勃勃:Web 的健康取决于多种互操作实现。

虽然 Bocoup 多年来一直在为 web-platform-tests 或“WPT”做出贡献,但直到 2017 年后期,我们才开始从 Web 浏览器收集测试结果并将它们发布到 wpt.fyi

谈论做上帝的工作。

这篇文章的其余部分是关于扩展如此庞大的测试套件所带来的难以置信的痛苦。 最终,Azure Pipelines 很有效。

让设计系统定制恰到好处

🔗 https://ux.shopify.com/getting-design-system-customization-just-right-3012151ef5ea
阅读评论

几个月前,我对设计系统有一些牢骚:“设计系统是为谁服务的?” 我的主要观点是,有如此多的公开和开源设计系统,选择一个就像为你的房子选择新家具一样。 你只需要量出你需要什么和你喜欢什么,然后选择一个。 但事实并非如此简单。 有些是为你量身定制的,有些制造商希望你使用它们,有些只是不行。

更冷静的看法来自 Koen Vendrik(一如既往,就是那个刚刚制作了酷炫的 Jest 浏览器工具的 Koen)

… 重要的是,你首先要定义设计系统是为谁服务的,以及人们应该用它做什么。 当你决定了这一点,并开始根据你的灵活程度要求寻找实现方案时,请记住,做一些与现有方案不同的东西是可以的。 创造很大的灵活性或完全没有灵活性很容易,关键是找到恰到好处的平衡。

继续阅读 →

卫报数字设计系统

🔗 https://design.theguardian.com
阅读评论

这是一个关于卫报设计系统的有趣视角,逐步分解了它的组成部分以及设计人员和开发人员可以使用哪些选项。 它向我们展示了该团队如何将颜色、排版、布局和视觉提示(如规则和边框)视为规则。

继续阅读 →

我喜欢 Vue 的地方

🔗 https://daverupert.com/2019/07/what-i-like-about-vue/
阅读评论

Dave Rupert 探讨了他最喜欢的 Vue 特性以及他对 React 的一个特定问题

我意识到,我对 React 不太喜欢的一件事是跳到一个文件,阅读顶部以查找状态,跳到底部查找渲染函数,然后向上跟踪方法调用以找到一系列其他子渲染函数,最后发现我正在寻找的组件在另一个城堡。 这种认知负担对我来说太繁重了。

我最近在 我们的时事通讯 中写到了这个问题,我当时认为,在 React 组件中找到我的位置很难。 我感觉我必须花费比必要更多的精力来弄清楚一个组件是如何工作的,因为 React 鼓励我以某种方式编写代码。

另一方面,Dave 说 Vue 符合他在创作组件时的思维模型

<template>
  // Start with a foundation of good HTML markup 
</template>
<script>
  // Add interaction with JavaScript
</script>
<style>
  // Add styling as necessary. 
</style>

当然,这与我思考问题的方式也相符。

把它修正

🔗 http://unsuck-it.com/browse/
阅读评论

Julia Carrie Wong 和 Matthew Cantor 的 如何用硅谷语言交谈:53 个必备科技兄弟术语解析 很搞笑。 里面有一些东西可以冒犯所有人。

说到有点傻的词,我想到我最喜欢的网站之一:Unsuck It。 它不仅指出了许多术语,说它们很糟糕,还提出了非糟糕的替代方案。

继续阅读 →

所以,你认为你已经掌握了项目管理

🔗 https://synd.co/2Jrcs8A
阅读评论

谁需要项目经理? 你是一个有组织的人,可以跟踪自己的工作,对吧?

错了。

好吧,如果你是一个团队的一部分,那就错了。 自我组织与项目管理相关,但并不等同于项目管理。 例如:如果你的项目依赖于其他人的参与会发生什么? 当然,你很有条理,但你能始终说你的同事也是这样吗? 有可能你需要一些东西来使每个人保持同步,以便项目按计划进行。

这就是你应该考虑尝试 monday.com 的地方。

继续阅读 →

前端大师:新的完整 React 入门课程……现在带有 Hooks!

🔗 https://synd.co/2xyVxeO
阅读评论

不仅仅是入门课程,你将使用 React 中的最新功能(包括 🎣 hooks、效果、上下文和门户)构建一个真实的应用程序。

我们还有一个 完整的 React 学习路径,供你更深入地探索 React!

为 CSS-Tricks 开发强大的字体加载策略

🔗 https://www.zachleat.com/web/css-tricks-web-fonts/
阅读评论

Zach Leatherman 与 Chris 密切合作,为你现在正在阅读的这个网站制定了字体加载策略。 Zach 在这篇博文中向我们介绍了设计,并分享了一些可以应用于其他项目的技巧。

剧透警报:字体加载是项目中一个复杂而重要的部分。

这篇文章最有趣的部分是 Zach 如何谈论根据代码库的最佳情况来改变设计——或者正如 Harry Roberts 所说,“规范化设计”。 用户真的会注意到 font-weight: 400 和 font-weight: 500 之间的区别吗? 好吧,如果我们可以丢弃整个字体文件,那么这可能会对性能产生重大影响,进而改善用户体验。

继续阅读 →

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速点击 →
  • 较新
  • 1
  • ...
  • 57
  • 58
  • 59
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费信用额度!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.