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

Links

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

弹性、声明式、上下文

🔗 https://keithjgrant.com/posts/2018/06/resilient-declarative-contextual/
阅读评论

Keith J. Grant

我想看一下 CSS 的三个关键特征,这些特征将它与传统的编程语言区分开来:它具有弹性;它是声明式的;它是上下文相关的。 我认为,了解语言的这些方面是精通 CSS 的关键。

  1. 与 HTML 一样,未知或略微损坏的 CSS 不会阻止站点运行。
  2. 你在 CSS 中写下你想要发生的事情,它就发生了,而且还可能发生一堆相关的事情。 我喜欢 Keith 用font-size的例子。 增大它,容器也会在没有你告诉它的情况下增高。
  3. 你无法理解 CSS 将做什么,除非你理解它所配对的 DOM 结构以及正在使用的其他样式。

而且我怀疑,那些接受这些事情并完全内化这些事情的开发者往往更精通 CSS。

正如他们所说,易于学习,精通一生。

用户确实会更改字体大小

🔗 https://medium.com/@vamptvo/pixels-vs-ems-users-do-change-font-size-5cfb20831773
阅读评论

Evan Minto

问题是“有多少用户使用与 16 像素的常用值不同的默认字体大小浏览主要互联网档案网站?” 通过知道这一点,我们可以确定有多少用户会受到使用相对单位(如 rem/em)进行大小调整的影响。

使用我在下面描述的方法,我们发现答案是我们的用户群中的 3.08%。

因此,如果您使用像素设置字体大小,并且您的流量与互联网档案的流量类似,那么您 3% 的用户将无法获得他们明确要求的font-size更改。

这是真的。 我做了一些小型的简化测试案例。 首先,我保留了默认的中等字体大小首选项,并使用像素和 ems 设置了两个,并将它们的大小调整为匹配。 然后,我将首选项调高到大型,只有 ems 改变了,而像素设置的那个保持不变。

一如既往,还有更多需要考虑的事情。 页面缩放是如何融入的? 3% 的人有多恼火? 那些使用像素但将字体大小设置得很大的人在其他网站上的 3% 有多恼火? 我们有多关心那些使用首选项来缩小字体大小的人?

不要使用占位符属性

🔗 https://www.smashingmagazine.com/2018/06/placeholder-attribute/
阅读评论

Eric Bailey 对<input placeholder>采取了强硬立场。

你可能会和我一样想:是的,是的,我知道其中的陷阱。 我有能力负责任地使用占位符。 但是,当你把所有负面因素放在一起看的时候

  • 无法自动翻译;
  • 经常被用作标签的替代品,从而锁定了辅助技术;
  • 在输入内容时,可能会隐藏重要信息;
  • 颜色可能太浅,难以辨认;
  • 样式选项有限;
  • 看起来像是预先填充的信息,可能会被跳过。

…以及这样一个事实,即在输入框之外将任何你想要在其中使用的辅助文本移动到真正的标记中有一些优势……我相当相信。

几乎理想的 React 图片组件

🔗 https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md
阅读评论

是的,这是一个 React 组件,但无论你是否关心这部分,"理想图片组件"部分都可能引起你的兴趣。 如今,我们在网页上放置图片时,需要考虑很多因素。 这处理了

  • 占位符空间(然后在加载后灵活的响应式样式)
  • 低质量的占位符图片
  • 响应式图片语法(srcset)
  • 图片格式(例如,在可以的情况下使用 WebP)
  • 在网络连接不良的情况下点击加载
  • 对于加载错误,提供更好的 UX,并附带可翻译的文字

这甚至不是全部。 对于小小的<img>,要考虑的事情太多了。 我很喜欢 Alejandro Sanchez 的回应

这个组件的自述文件非常棒,可以教会你如何像前端开发者一样思考。

— Alejandro Sanchez (@alesanchezr) 2018 年 6 月 12 日

UTC 对每个人来说都足够了,对吧?

🔗 https://zachholman.com/talk/utc-is-enough-for-everyone-right
阅读评论

Zach Holman 的《年度博文》的最佳候选人。 我认为 Eric Portis 的“w 描述符和大小:幕后”也很不错,但可能更极客。 哦,还有 Frank Chimero 的“The Good Room”也很不错。 但我离题了。

Zach 的文章既有教育意义,又有趣。

继续阅读 →

真正了解您的网站访问者的行为

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

Hotjar 是一种快速简便的方法,可以真正了解您的访客并找出改进和增长的机会。

免费试用一体化的分析和反馈工具。

使用 Nest.js 构建带情绪分析的实时评论

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

有趣的是,博客文章中最重要的领域之一是评论部分。 这在文章或帖子的成功中起着重要作用,因为它允许读者进行适当的互动和参与。 这使得每个具有直接评论系统的平台都不可避免地需要实时处理它。

在这篇文章中,我们将构建一个具有实时评论功能的应用程序。 这将实时发生,因为我们将利用由Pusher Channels提供的基础设施。 我们还将使用情绪分析来衡量评论是正面还是负面,并在管理面板上显示此信息。

全球手腕

🔗 https://ethanmarcotte.com/wrote/wwwatch/
阅读评论

在过去几天关于WWDC的喧嚣之后,Ethan Marcotte 对 Apple Watch 能够查看网页内容的消息感到兴奋。

他写道

如果要我猜,我想象着某种“阅读模式”会出现在 Watch 上:换句话说,当您在 Watch 上打开链接时,这个简化版的 WebKit 不会像一个完整的浏览器那样工作。 它不会呈现所有脚本、样式和布局,而是会呈现网页的简化版本。 如果是这样,那么Jen Simmons 的建议非常到位:从基于语义 HTML 的合理、适合小屏幕的文档结构进行设计变得更加重要。

但谁知道呢! 我可能错了! 也许它比我假设的更强大,我们会开始讨论手表上布局、排版和设计的最佳实践。

我一直有一个直觉,认为由于 Watch 的限制,它永远不会有浏览器,但我希望能够通过某种语音界面大声朗读网页内容,从而出现一种新的方法。 “Siri,读给我听 James 博客的最新文章,” 这可能是大多数人的噩梦燃料,但我一直希望通过这种设备通过音频访问网络。

另一个有趣的旁注是,Safari OSX 和 iOS 很久以前就有了阅读模式,但它只是一个用户在查看内容时可以启用的选项。 在 watchOS 上绕过用户启用的选项是区别所在,以及我们结构化的语义技巧发挥作用的地方。

无头 CMS:开发人员的最佳伙伴

🔗 http://bit.ly/2J3hc2X
阅读评论

您当前的 CMS 很糟糕! 您已经知道一段时间了,但还没有决定下一个解决方案应该是什么。

您已经注意到围绕无头 CMS 的所有炒作,但您仍然不确定这对您有什么好处,以及它如何解决您所有的困扰。

传统的本地 CMS 与带有 REST API 的真正 API优先的云端 CMS 之间有什么区别? 无头 CMS 如何适合您的场景? 它对您来说语言无关有什么优势?

探索由无头 CMS 解锁的新可能性,看看它如何帮助您脱颖而出。

网络可以是任何我们想要的样子

🔗 https://www.youtube.com/watch?v=tvLF7zllsv0
阅读评论

我真的很喜欢 Bruce Lawson 和 Mustafa Kurtuldu 之间的这次聊天,他们在聊天中谈到了浏览器支持和网络的健康状况。 Bruce 扩展了他去年写的一篇名为World Wide Web, Not Wealthy Western Web的文章中的很多想法,他写道

…在全世界范围内,无论可支配收入如何,无论硬件或网络速度如何,人们都希望消费相同类型的商品和服务。 如果您的网站是为全世界而不是仅为富裕的西方世界制作的,那么接下来的 40 亿人可能会消费您的组织制作的东西。

继续阅读 →

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新的
  • 1
  • ...
  • 80
  • 81
  • 82
  • ...
  • 219
  • 旧的

CSS-Tricks 由DigitalOcean提供支持。

关注 Web 开发的最新动态

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

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

© 2024 . All rights reserved.