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

Links

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

是什么让 CSS 难以掌握

🔗 https://timseverien.com/posts/2020-12-06-what-makes-css-hard-to-master/
阅读评论

Tim Severien:

我认为我们,这个社区,必须承认 CSS 易于入门但难以精通。让我们反思一下这门语言,并找出是什么让它变得困难。

Tim 认为 CSS 难的原因(用我自己的话)

  • 您可以查看匹配的规则集,但仍然无法了解完整的样式信息。可能存在多个位于不同位置的匹配规则集,包括仅在特定条件下应用的位置,例如在 @media 查询中。
  • 即使您认为自己完全掌握了 CSS 中的样式信息,您可能仍然没有,因为样式依赖于 DOM。您需要来自这两个地方的信息才能知道某个元素的样式。
  • 您无法控制设备、浏览器、版本、分辨率、输入模式等,所有这些都可能是 CSS 的关注点。
  • 更改 CSS 可能令人恐惧,因为很难理解它在所有应用于的地方。

我不确定那些对 CSS 做出笼统概括的人,无论是说它太难还是太容易,对任何人都有什么帮助。更有趣的是看看 CSS 中哪些方面可以很简单,哪些方面可能很棘手,就像 Tim 在这里做的那样。

25 年 JavaScript & 25 门免费课程

🔗 https://srv.buysellads.com/ads/long/x/TFZKFILXTTTTTT6JCG6HOTTTTTT4SKOVZATTTTTTW3NAAUYTTTTTTBDW5JYFC5JGHRYCYAII2HILABDWHRHHCKJMHMJUCASW5QWNCBSI
阅读评论

Pluralsight 正在免费赠送 25 门关于 JavaScript 的课程,以庆祝 JavaScript 的 25th 生日。而且这可不是随便送的。课程涵盖从第一次上手 JavaScript 到完整的反应式开发。Pluralsight 已经存在很长时间了,他们知道如何设计出色的课程。

继续阅读 →

遮光罩的力量

🔗 https://www.swyx.io/lampshading/
阅读评论

我喜欢肖恩的这篇博文。遮光罩显然是指电视剧为了避免批评而故意突出一些弱点(例如难以置信的情节点),以便继续进行。通过指出它,它通过展示自我意识来避免批评。对于开发人员来说,肖恩指出,这就像承认你的队友/老板你不知道某种特定技术,以便团队可以继续前进。

这不仅有用,而且很强大。高层需要指出他们不理解的任何事情,因为他们的工作从字面上来说就是提出正确的问题,并确保客户和下属都能清楚地理解。初级人员需要使用它才能成长。

我觉得越靠近初级和高级的极端,就越容易做到这一点。如果你非常新手,人们会想,是的,他们不知道那件事是有道理的。如果你非常(并且理所当然地)资深,人们会想,哇,这个明显且非常博学的人在他们的技能组合中存在差距——他们能说出这一点真是太贴切和谦虚了。我希望遮光罩对每个人都有用,但我可以理解为什么处于中间的人可能会难以做到这一点。

太棒了!CSS!

🔗 https://wizardzines.com/zines/css/
阅读评论

说到你可以购买的酷炫 CSS 内容,茱莉亚·埃文斯的杂志太棒了!CSS! 刚刚出版。一本“杂志”包含 28 页的“简短、信息丰富且有趣的漫画,将快速教会你一些有用的东西。”其中一些部分就像备忘单。有些部分就像通过轻松的格式使概念易于理解。有些部分就像迷你教程。当然也有一些嗯嗯哇,很奇怪的时刻可能会难倒甚至 CSS 高手,例如这种 inline-block 行为。

调试 CSS

🔗 https://debuggingcss.com/
阅读评论

向艾哈迈德·沙迪德发布了他的新书调试 CSS表示祝贺。我认为这是关于 CSS 的一本好书的一个不错的角度。关于 CSS 的一般主题已经有很多书了,所以不是说它们不能对该主题有新的看法,但这感觉同样重要且不太被踏足。

如今,浏览器开发者工具在调试 CSS 方面帮助了我们很多,但据我所知,并没有关于它的分步指南。本书深入探讨了这一点,展示了如何在适当的时候借助开发者工具来调试真正实用且易于理解的 CSS 问题。

继续阅读 →

HTTP 档案年度网络状态报告

🔗 https://almanac.httparchive.org/en/2020/
阅读评论

HTTP 档案查看了超过 700 万个网站,并编制了他们的年度报告,详细说明了这些网站是如何构建的。并且有大量关于 2020 年网络如何变化的信息。事实上,这份报告更像是一本巨大的书籍,而且完全棒极了。数据来自对HTTP 档案进行查询,并细分为各个部分,例如性能、安全性和语言本身,包括人们如何编写 HTML 或 CSS。

继续阅读 →

我为什么喜欢 Tailwind

🔗 https://mxstbr.com/thoughts/tailwind/
阅读评论

马克斯·斯托伊伯写了一些有趣的笔记,说明他为什么喜欢Tailwind。(马克斯创建了styled-components,因此他在样式方法论游戏中也有一些经验。)这篇文章中有很多关于 Tailwind 如何出现并成为设计师和工程师都宝贵工具的历史,但他还谈到了 Tailwind 系统的核心是什么,以及是什么让它如此方便。

Tailwind 受欢迎的关键在于框架核心精心构建的设计令牌系统。该系统的精心挑选的约束为开发人员提供了恰到好处的护栏。它们通过仅提供离散步骤来使选择是好是坏变得显而易见。

继续阅读 →

使用 prefers-reduced-data 创建网站

🔗 https://polypane.app/blog/creating-websites-with-prefers-reduced-data/
阅读评论

剧透警告:目前尚不支持它。但它在媒体查询级别 5 规范中进行了定义,其中包括其他最近但更熟悉的用户偏好功能,如 prefers-color-scheme 和 prefers-reduced-motion。

Polypane 博客深入探讨了 prefers-reduced-data,尤其是对于我们尚未在现实世界中看到的东西来说。这实际上也是 Polypane 团队成为该主题理想之声的原因。其产品是一款浏览器,能够在 Chromium 标志后面模拟该功能。

继续阅读 →

Web 性能日历

🔗 https://calendar.perfplanet.com/2020/
阅读评论

今年Web 性能日历 重新启动了。到目前为止,前两篇文章都是关于性能的!首先,里克·维斯科米写了关于神话般的“快速”网页。

您处理衡量网页性能的方式可以告诉您它是为速度而构建的,还是感觉很快。我们称它们为实验室工具和现场工具。实验室工具是检查页面所有可能摩擦点的显微镜。现场工具是望远镜,让您可以概览用户如何体验页面。

继续阅读 →

在 Vue 中更愉快的 HTML5 表单验证

🔗 https://daverupert.com/2020/11/happier-html5-form-validation-in-vue/
阅读评论

我们可以使用 CSS 中的 input:invalid {} 来为输入处于无效状态时设置样式,这一点非常巧妙。然而,如果完全按照这种方式使用,则 UX 会很糟糕。假设您有 <input type="text" required>。在用户执行任何操作之前,它立即无效。这是一种非常糟糕的 UX,因此您在现实世界中从未见过它被使用。但是,如果我们能避免这一点,那么 :invalid 选择器可以为我们完成大量表单验证工作,而无需依赖大型的复杂库。

戴夫有一个想法,它是2017 年最初的想法的变体。

继续阅读 →

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 Web 开发动态

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

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

© 2024 . All rights reserved.