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

Links

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

您的图片可能不是装饰性的

🔗 https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/
阅读评论

Eric 毫不留情,尤其是在标题中,以及在结论中

在现代网页设计和开发中,显示图像是一个高度有意的行为。替代描述允许我们解释图像的内容,并在这样做的过程中,传达为什么它值得包含。

仅仅因为图像显示了一些奇特的东西并不意味着它不值得描述。宣布它的存在确保了任何人在任何能力或情况下,都能完全理解您的数字体验。

我喜欢其中一部分,即使使用 CSS background-image,您仍然可以使用“间隔 GIF”添加 alt 文本。说到alt描述,您知道即使 Open Graph 图像也可以有它们吗?

一个价值 800 万美元的害羞按钮

🔗 https://cloudfour.com/thinks/a-bashful-button-worth-8-million/
阅读评论

我们大多数人在遇到令人沮丧的在线 UX 体验时都会抱怨(例如,由于按钮放错位置而无法完成交易)。我们可能会发一条抱怨的推文。Jason Grigsby 就像我要写 2000 字来解释这件事,并向他们展示真相。当然,他很有道理。一个位于视口之外需要您按下才能完成订单的按钮,在一个大型餐厅品牌的结账体验中,即使按照每个角度都保守的估计,也价值数百万美元的销售损失。

Jamstack 社区调查 2021

🔗 https://www.surveymonkey.com/r/jamstack-survey-css-tricks
阅读评论

Netlify 的团队已经开放了2021 年的 Jamstack 社区调查。超过 3000 名像您一样的前端开发人员参与了去年的调查,该调查评估了人们对“Jamstack”一词的熟悉程度以及他们使用的框架。

这是该调查的第二年,这非常令人兴奋,因为在这里我们将开始揭示同比趋势。使用 Jamstack 架构的开发人员百分比是否会从去年的 71% 上升?React 仍然是最广泛使用的框架,但满意度得分较低吗?或者 Eleventy 仍然是最不常用的框架之一,但满意度得分最高?只有您的答案才能告诉我们!

此外,您还可以通过回复获得限量版 Jamstack 贴纸。请参阅Netlify 的公告以获取更多信息。

了解 `:has`,一个原生 CSS 父选择器

🔗 https://www.smashingmagazine.com/2021/06/has-native-css-parent-selector/
阅读评论

经常被引用的导致容器查询变得困难或不可能的原因是诸如无限循环之类的事情——例如,更改元素的宽度,使容器查询失效,这会再次更改宽度,从而使容器查询生效,等等。但这已通过包含解决。“父选择器”,或者现在已正式命名为:has(我喜欢它,这是jQuery 的做法,尽管 Adrian 指出一条推文指出它更通用),传统上也存在类似的问题。诸如需要“多遍”渲染之类的事情,渲染速度太慢而无法接受。

继续阅读 →

:focus-visible 在 WebKit 中

🔗 https://blogs.igalia.com/mrego/2021/06/07/focus-visible-in-webkit-may-2021/
阅读评论

这是 Manuel Rego Casasnovas 的一个不错的更新。Igalia 有一个想法,就是将重要的 Web 平台功能众包,这些功能需要进行改进(这是他们所做的工作类型)。他们称之为开放优先级排序。它的“获胜者”(获得最多认捐资金的项目)就是他们将要做的。事实证明是 WebKit(Safari)中的:focus-visible支持。在我写这篇文章时,人们已经认捐了 35000 美元目标中的 29337.13 美元,还不错!

该选择是在 2021 年 1 月做出的,正如 Manuel 在 2021 年 6 月撰写的那样,它基本上已经完成了,因为它已在 Safari 技术预览版 125 中发布,这意味着它现在掌握在 Apple 手中。对于 Web 功能来说,速度相当快,而且是一个很棒的功能,因为它将极大地鼓励正确的焦点样式,而不是那些让人们出于美观原因而删除焦点样式,从而损害可访问性的令人沮丧的情况。

继续阅读 →

JavaScript 初学者笔记

🔗 https://wesbos.com/javascript
阅读评论

Wes 有一套很棒的“笔记”用于学习 JavaScript。它像课程一样组织,这意味着如果您教授 JavaScript,您可以做得更糟。它实际上更像是 85 篇真正充实的博客文章,组织成各个部分,并且易于导航。如果您想通过视频学习,那么购买课程。很聪明。

如果您正在寻找其他 JavaScript 课程,最好的选择是

  • Frontend Masters 集训营(免费)和其他很棒的课程(付费)
  • MDN 指南
  • Vets Who Code 有一个开源课程,在第 6 周开始学习 JavaScript。

就像生活中任何其他学习体验一样,学习的最佳方式是多角度学习。如果 HTML 和 CSS 更多的是您的目标,我们有一些建议。

CSS 和 JavaScript 中的三角学:超越三角形

🔗 https://tympanus.net/codrops/2021/06/04/trigonometry-in-css-and-javascript-beyond-triangles/
阅读评论

网页设计是一种如此基于矩形的

继续阅读 →

用于 Web 指标的 CSS

🔗 https://webdev.ac.cn/css-web-vitals/
阅读评论

核心 Web 指标 (CWV) 的营销取得了巨大成功。我想这就是当世界上占主导地位的搜索引擎告诉人们某些事情将成为 SEO 因素时会发生的事情。您知道哪种语言可以在这些 CWV 分数中发挥巨大作用吗?我会等五分钟让你想想。开玩笑,是 CSS。

Katie Hempenius 和 Una Kravets

您编写样式和构建布局的方式会对核心 Web 指标产生重大影响。这对于累积布局偏移 (CLS)和最大内容绘制 (LCP)尤其如此。

继续阅读 →

Chromium 拼写和语法功能

🔗 https://www.azabani.com/2021/05/17/spelling-grammar.html
阅读评论

Delan Azabani 深入探讨了 CSS 中即将推出的(希望很快)::spelling-error和::grammar-error伪选择器。设计控制总是好的。嘿,如果我们可以设置滚动条样式和设置选中文本样式,为什么不这样做呢?

几十年来,指示可能的拼写或语法错误的波浪线一直是计算机上文字处理的基石。但在网络上,这些指示器由浏览器提供支持,浏览器并不总是拥有放置和呈现它们最合适所需的信息。例如,作者可能希望提供自己的语法检查器(放置),或调整颜色以提高对比度(渲染)。

为了解决这个问题,CSS 伪元素和文本装饰规范定义了新的伪元素::spelling-error和::grammar-error,允许作者设置这些指示器的样式,以及新的text-decoration-line值spelling-error和grammar-error,允许作者使用与原生指示器相同的装饰标记其文本。

这篇文章也很独特,因为 Delan 实际上是浏览器中实施该功能的人员。因此,这里有各种关于所有这些内容有多复杂以及需要考虑的所有事项的深入细节。有点像,你知道,Web 开发。很高兴看到这一点。我一直觉得浏览器工程师和网站作者之间似乎很少沟通,这很奇怪,尽管后者是前者工作的直接消费者。

现在有第 2 部分。仍然处于非常早期的阶段。

解决 Safari 中基于视口的流体排版错误

🔗 https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/
阅读评论

Sara 深入探讨了一个我碰巧在 2012 年提到过的错误,即当浏览器窗口大小调整大小时,流体类型不会调整大小。当时,它影响了 Chrome 20 和 Safari 6,但该错误在今天当calc()涉及视口单位时,仍然存在于 Safari 中。

Sara 赞扬 Martin Auswöger 使用-webkit-marquee-increment: 0vw;(这是文档)的超级奇怪且巧妙的技巧来强制 Safari 采用正确的行为。我将制作一个屏幕录像来记录它。

继续阅读 →

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 Web 开发动态

通过我们精心制作的时事通讯

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

© 2024 . All rights reserved.