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

Links

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

快速提示:在真正的本地模拟器(或您的实际 iPhone/iPad)上调试 iOS Safari

🔗 http://mediatemple.net/blog/tips/quick-tip-debug-ios-safari-true-local-emulator-actual-iphoneipad
阅读评论

多年来我们一直能够做到这一点,而且在很大程度上是免费的(忽略计算机和设备的成本),但我不知道有多少人知道这一点。

太长不看:XCode 带有一个“模拟器”程序,您可以打开它在虚拟 iOS 设备中进行测试。然后,如果您打开 Safari 的“开发/调试”菜单,则可以使用其 DevTools 在那里进行检查——如果您插入实际的 iOS 设备,情况也是如此。

在您的产品中提供卓越的客户体验

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

Pendo 是一个产品云,有助于创建客户离不开的可爱产品。Pendo 使产品团队能够了解产品使用情况、收集用户反馈、衡量 NPS、在应用程序中协助用户以及在产品中推广新功能——所有这些都不需要任何工程资源。这种独特的组合功能都建立在产品数据的通用基础设施之上,并带来更好的入职体验、提高用户参与度、改善客户满意度、降低流失率和增加收入。

Pendo 是 Salesforce、Marketo、Zendesk、Citrix、BMC 和许多其他领先公司的创新型产品领导者的首选。

立即请求 Pendo 演示。​

dialog 元素

🔗 https://www.viget.com/articles/the-dialog-element/
阅读评论

Chris Manning 深入探讨了<dialog>

dialog 元素提供

  • 一个易于显示和隐藏的元素,包括元素本身上的open布尔属性。
  • 两个版本:标准弹出窗口或模态版本。
  • 一个用于模态类型的::backdrop 伪元素。
  • 内置焦点:请参阅dialog 聚焦步骤。
  • ARIA 角色支持(dialog 是隐含的默认值)。还接受alertdialog 角色。
  • 一个用于多个对话框的挂起堆栈。
  • 一个具有open布尔值和show、showModal和close方法的 DOM 接口。

这些只是一些亮点!在其他内容之上显示内容从未如此简单。

这是网络发展的最佳体现。识别主要开发人员的难题并帮助解决它。

取消按钮样式

🔗 https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html
阅读评论

不久前,我们在 CSS-Tricks 上深入研究了覆盖默认按钮样式。使用普通的、完全跨浏览器支持的样式,您需要 6 到 10 个 CSS 规则来拆除按钮上的任何内容,然后放置您自己的样式。如果您问我,这并不是什么大问题,尤其是在您很可能无论如何都要设置按钮样式的情况下。

Scott O’Hara 也进行了研究,包括其他一些有趣的 CSS 探讨,但由于各种原因,这些探讨都没有成功

  • display: contents; – 一些基于语义的可访问性问题。
  • all: unset; – 不会重置显示值,浏览器支持不够好。

我花了一点时间才理解这一点,包括与 Scott 通过 DM 进行了一点聊天。我非常困惑,因为他提出的正确方法是<span role="button" tabindex="0" onClick="...">。什么?!我心想。迫使非按钮元素表现得像按钮并以其他方式复制所有按钮功能几乎从来都不是正确的事情。实际上,如果您只有一个或两个单词的按钮,您可能不需要这样做,并且只需取消按钮样式即可。问题出在这里:您无法取消<button>上的inline-block。显然,这是不可能的。您可以将其设置为display: inline;,它会接受,但它不会像那样表现。

仅使用 :placeholder-shown 伪类实现浮动标签

🔗 https://callmenick.com/dev/floated-labels-with-placeholder-shown/
阅读评论

浮动标签技术已经存在很长时间了,其基本思想是:我们有一个带有占位符属性的文本输入,用作标签。当用户在该输入中键入内容时,标签会从输入内部移动到输入外部。

继续阅读 →

业界最佳开放 API

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

凭借我们强大的 SDK、超级简洁的仪表板、详细的文档和世界一流的支持,HelloSign API 是市场上最灵活、功能最强大的 API 之一。立即开始免费构建。

设计的编码

🔗 https://snook.ca/archives/design/codification-of-design
阅读评论

Jonathan Snook 谈论管理设计师制作内容与开发人员最终构建内容之间的复杂性

设计师在 Sketch 或 Photoshop 文件中绘制的所有内容都需要转换为代码。代码需要开发、交付给用户,并由团队维护。

这意味着设计中的复杂性会导致代码中的复杂性。

这并不是说不允许复杂性。但是,考虑复杂性的影响非常重要——尤其是在它与您的代码库相关联时。

Jonathan 在该帖子中继续争论,设计师和开发人员需要处于持续的反馈循环中,以便正确评估设计复杂性是否值得工程解决方案的复杂性。

我长期以来一直在思考这种与我在设计系统中的工作相关的事情——我感觉这个问题源于设计师和开发人员使用不同货币进行交易的事实。设计师通常最关心用户体验,而开发人员可能会优先考虑底层代码,愿意为这个微不足道的细节过度设计。

正如 Snook 在其帖子后面提到的那样,模式库并不能完全解决此问题

这就是为什么在设计过程中进行这些对话很重要的原因。了解团队内的优先事项非常重要。了解您愿意做出哪些权衡也很重要。如果没有团队内部的一致意见,当前端开发团队的要求与设计团队的要求发生冲突时,您将继续发生冲突。

因此,让这两个团队交换相同货币的最佳方法是进行沟通,而不是使用工具。或者,也许可以通过用代码设计。

依赖于布局的选择器

🔗 https://wiki.csswg.org/faq#selectors-that-depend-on-layout
阅读评论

“为什么我们没有::first-column?”

我前几天听到有人这样问,这是一个合理的问题。我甚至会进一步提出这个问题,询问::nth-column()或其他与 CSS列相关的内容。我们有像::first-letter和::first-line这样的东西。为什么没有其他选择呢?

在“nth”人群中,有很多值得注意的东西缺失。七年前,我写了“呼吁使用 ::nth-everything”,其中包括一些清晰的用例,例如,选择段落的前两行。

我不知道所有技术细节,但我知道在 CSS 中没有所有这些内容有一些相当不错的理由。一部分原因是很难将其规范化(例如,跨书写语言的单词和字符变得棘手),另一部分原因是很难实现它们。我刚刚发现的是有一份FAQ文档解释了这一点!

继续阅读 →

Netlify

🔗 https://www.netlify.com/?utm_source=csstricks&utm_medium=blog&utm_campaign=css-1018
阅读评论

观看开发人员第一次发现Netlify总是很有趣。这太简单了。一种方法是只需将文件夹拖放到他们那里,它就会在线。更好的是,将 Git 存储库连接到 Netlify 站点并告诉它要监视哪个分支,然后对该分支的任何提交都将自动生效,甚至在执行操作时运行站点的构建。我听到一位开发人员说,“就像有人真正设计了托管和部署。”

这非常适合静态站点,但不要认为静态站点仅适用于某些类型的站点或在某种程度上受到限制。这就是JAMstack的意义所在!想了解更多信息?参加 JAMstack_conf!

继续阅读 →

使用 100 美元的信用额度免费试用开发人员喜爱的云平台

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

DigitalOcean 邀请您体验一个更好、更快、更简单的云平台,该平台旨在根据您的需求进行扩展。使用 100 美元的信用额度免费开始您的第一个项目,并了解为什么最具创新性的公司已经托管在 DigitalOcean 上。

Quick Hits

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

CSS-Tricks 由DigitalOcean提供支持。

随时了解 Web 开发动态

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

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

© 2024 . All rights reserved.