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

Links

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

五个巨大的 CSS 里程碑

🔗 http://mediatemple.net/blog/tips/five-huge-css-milestones/
阅读评论

CSS 现在已经超过 20 年历史了。我使用它的时间还不到一半。根据我的经验,在此期间发生在 CSS 上的最大事件是

  1. Firebug
  2. Chrome
  3. CSS3
  4. 预处理
  5. Flexbox & Grid

并且还有很多即将发生的改变。

Connect:前端体验背后的故事

🔗 https://stripe.com/blog/connect-front-end-experience
阅读评论

Benjamin De Cock 分享了一些关于 Stripe 设计工作的精彩幕后故事。一切都非常巧妙,并且使用了非常现代的技术。

  • 使用CSS 网格来创建他们标志性的背景条纹
  • 使用3D 立方体来增加美学效果
  • 使用减少运动媒体查询来适应用户的偏好
  • 使用Web 动画 API在 JavaScript 中进行事件触发的类似关键帧的动画

另外一个我以前从未见过的

Connect 的登录页面使用了新的 Intersection Observer API,它提供了一种更强大、性能更高的方式来检测元素的可见性……observeScroll 助手简化了我们的检测行为(即,当元素完全可见时,回调会触发一次),而无需在主线程上执行任何操作。

minmax() 函数的工作原理

🔗 https://bitsofco.de/how-the-minmax-function-works/
阅读评论

Ire Aderinokun 撰写的另一篇精彩文章,这次讨论的是有趣的 minmax() CSS 函数以及它如何与我们最近一直在尝试的 CSS Grid 功能一起工作。

这里特别棒的是 Ire 解释了我们如何完全避免使用媒体查询的示例。只需几行 CSS,我们现在就可以构建相当复杂的布局。

使用 cPanel 和 WordPress 的免费指南

🔗 http://synd.co/2rRT7pV
阅读评论

如果您需要针对 WordPress 优化的托管解决方案,那么托管 WordPress 托管是一个不错的选择。但它仅适用于 WordPress。

如果您需要更多功能怎么办?

如果您需要电子邮件托管怎么办?如果您需要在 WordPress 旁边运行其他软件怎么办?如果您需要比托管 WordPress 托管允许的更多控制权,但又不想面对 VPS 的复杂性怎么办?

有一个简单的解决方案:在一个地方托管所有内容,并使用功能强大的 cPanel 仪表板管理所有内容。

您将在本 cPanel 和 WordPress 免费指南中了解如何操作。

使用水獭介绍 Web Components

🔗 https://meowni.ca/posts/web-components-with-otters/
阅读评论

Monica Dinculescu 谈论 Web Components 以及我们为什么可能关心它

…在 Web Components 出现之前,您必须等待所有浏览器都同意一个新元素(例如,日期选择器)。即使他们在新元素上达成一致,也需要花费数年时间来实现它……使用 Web Components,Web 开发人员可以编写此类元素,因此您不必等待 10 年才能让所有浏览器都同意他们应该实现日期选择器。

我一直在努力弄清楚 Web Components(使用 Polymer 或不使用 Polymer)是否真的是“未来”。人们肯定没有像对待新 JavaScript 一样,以同样的狂热食欲来采用它们,而新 JavaScript 也解决了组件化问题。但它们是 Web 标准,并且原生支持正在不断增长,所以……大概吧?

不过,我可能错误地将两者混淆了。即使 React 文档也说

React 和 Web Components 旨在解决不同的问题。Web Components 为可重用组件提供了强大的封装,而 React 提供了一个声明式库,用于使 DOM 与您的数据保持同步。这两个目标是互补的。

万维网,而不是富裕的西方网络

🔗 https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/
阅读评论

Bruce Lawson 探讨了 Web 设计师在构建网站时可能存在的许多误解。他的论点的核心是,我们应该专注于为刚刚开始使用互联网的用户以及互联网连接速度缓慢的用户设计网站。

他甚至做了一个大胆的预测

您的许多下一批客户将来自下方圈出的区域,仅仅是因为在这个圆圈内活着的人类比圆圈外世界的人类更多。

如何改进您网站的用户体验

🔗 http://synd.co/2qxqGu8
阅读评论

让我们面对现实吧,如今成为一名 Web 设计师很不容易。您必须站在课堂前面,让大家挑出您前一天晚上花了 10 个小时制作的东西。

但是,如果您真的可以通过来自您的用户和访客的实际数据和反馈来支持您的设计,最终改善整体体验,那该怎么办?

通过结合分析和反馈工具,Hotjar 为您提供了如何改进网站用户体验和性能的“全局视图”。分析工具允许您衡量和观察用户行为(用户做什么),而反馈工具允许您听到用户怎么说(用户之声),所有这些都在一个中心界面中。

立即免费试用。

哦,等等,我正在查看生产环境

🔗 https://twitter.com/mscccc/status/871867435476951040
阅读评论

太对了

为什么这个 CSS 更改不起作用?!

重启服务器

>不行

rm -rf 删除所有内容

>不行

重建开发环境

>不行

哦,等等,我正在查看生产环境

— Mike Coutermarsh (@mscccc) 2017 年 6 月 5 日

我不想破坏这个笑话,但我发现让您的开发域使用与生产环境不同的 Favicon非常有帮助。

阅读该文章的评论线程,那里有一些其他非常巧妙的想法。

使用 CSS 网格突破边界详解

🔗 https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/
阅读评论

Tyler Sticka 分享了一个在CSS 网格布局中突破内容的巧妙技巧,但 Rachel Andrew 进一步解释了该技巧为何有效

当您命名行时,您可以选择将其命名为 *-start 和 *-end,这会为您提供更多网格魔法。我们会获得一个名为主要名称的命名网格区域。听起来很奇怪?请查看下面的图表,它显示了 4 条命名网格线,main-start 和 main-end 既用于列也用于行。这些线的交点所标记的区域现在可以通过名称 main 来引用。如果我们将这些线命名为 foo-start 和 foo-end,那么我们将拥有一个名为 foo 的命名区域。

继续阅读 →

HelloSign:业界最快的电子签名 API 集成

🔗 http://synd.co/2r90Lvr
阅读评论

我最喜欢的软件产品类型是那些非常明确地使生活更简单的产品。能够通过点击电子邮件中的按钮并在上面涂鸦我的鼠标签名来合法地签署文档,绝对是其中之一。

继续阅读 →

Quick Hits

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

CSS-Tricks 由DigitalOcean提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.