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

Links

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

Kinsta

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

非常感谢 Kinsta 本周赞助 CSS-Tricks!我们这里都是 WordPress 的忠实粉丝,也知道你们中的一些人也是。 所以这可能很有趣:Kinsta 是运行在 Google Cloud Platform 上的 WordPress 主机。 事实上,它被 Google Cloud *正式推荐* 用于完全托管的 WordPress 主机。

这有什么关系呢? 嗯,当您选择云主机时,您将进入一个可靠性的新领域。 例如,您的网站运行在它自己的隔离容器中,包括运行它所需的所有软件。 像 PHP、MySQL 和 Nginx 这样的熟悉的东西。 这些资源是 100% 私有的,不会与其他人共享 - 即使是您自己的其他网站。

继续阅读 →

VuePress 静态网站生成器

🔗 https://vuepress.vuejs.org/
阅读评论

VuePress 是 Vue 创建者 Evan You 的一个新工具,它可以启动 Vue 项目,这些项目更侧重于基于内容和标记的网站,而不是渐进式 Web 应用程序,并且可以通过几行命令行来完成。

我们在这里谈论了很多关于 Vue 的内容,从 关于 Vue 入门的五部分系列 到一个详细的 无服务器结账车的实现

但是,就像任何新事物一样,即使是入门的基础知识也会让人感到不知所措,并 变得复杂。 像 VuePress 这样的工具可以真正降低许多人(像我一样)仍在努力理解基础知识并尝试概念的门槛。

当然,还有其他选择! 例如,Nuxt 已经为这种事情做好了准备,并且也使启动 Vue 项目变得很容易。 Sarah 编写了一个关于 Nuxt 的简要介绍,值得一试,尤其是当您的项目是渐进式 Web 应用程序时。 如果你更喜欢 React 但喜欢静态网站生成的想法,那么有 Gatsby。

网站博物馆

🔗 https://www.kapwing.com/evolution-of-products
阅读评论

Kapwing 团队从互联网档案的 Wayback Machine 收集了许多图像,并展示了 Google 和纽约时报等热门网站主页随时间推移的变化历史。 非常有趣。

我特别喜欢亚马逊是如何从一个超级高信息密度的网页(看起来有点像博客)演变成一个基本上占据整个屏幕的巨大轮播的。

继续阅读 →

RSS 复兴的时机已到

🔗 https://www.wired.com/story/rss-readers-feedly-inoreader-old-reader/
阅读评论

Brian Barrett

厌倦了 Twitter? Facebook 疲劳? 是时候回到 RSS 了。

我是一个 RSS 阅读器的爱好者,所以我很讨厌承认,但 RSS 不会成为主流。 它在 20 年前太书呆子气了,现在也一样。 RSS 仍然是一种非常有用的技术,但我看不出它能单独流行起来。

为了让 RSS 普及,它需要某种抽象。 就像 Flipboard,在那里你可以立即开始阅读内容,而 RSS 则不需要你手动处理。 Apple News 有点像那样。 不过我对 Apple News 有点又爱又恨。 我喜欢在其中阅读内容,但我停止在其中发布内容,因为它变得太难做,而且看起来也不好。 它就像管理第二个网站,不像 RSS,当你的 CMS 支持它时,它就会像白痴一样工作。 Apple News 的一个鲜为人知的功能是它过去能够用作 RSS 阅读器,但他们在几年前将其删除了。 呜呜呜。

继续阅读 →

使用新的 CSS 类型化对象模型

🔗 https://developers.google.com/web/updates/2018/03/cssom
阅读评论

Eric Bidelman 介绍了 CSS 类型化对象模型。 看起来它将使处理通过 JavaScript 获取和设置样式值变得更容易,并且不易出错。 较少字符串化,更符合数字化(在适当的时候)。

比如,如果我们想知道元素的填充,传统上我们会这样做

var el = document.querySelector("#thing");
var style = window.getComputedStyle(el);
console.log(style.padding);

我们会得到一个字符串“20px”或者任何它是什么。

这些新 API 之一允许我们像这样执行它

console.log(
  el.computedStyleMap().get('padding').value,
  el.computedStyleMap().get('padding').unit
);

我们得到了一个真实的数字 20 和一个字符串“px”。

还有 attributeStyleMap,它具有 getter 和 setter,以及每个值的函数(例如 CSS.px() CSS.vw())。

Eric 列举了这些优点

  1. 很少有错误。
  2. 算术运算和单位转换。
  3. 值钳位和舍入。
  4. 更好的性能。
  5. 错误处理。
  6. 命名完全匹配 CSS。

脱机

🔗 https://abookapart.com/products/going-offline
阅读评论

Jeremy Keith 编写了一本关于 Service Workers 和离线功能的新书,该书将于月底出版。 第一章在 A List Apart 上发布。 现在,iOS 和 macOS Safari 的最新版本 支持 Service Workers,我想不出比现在更好的学习渐进式 Web 应用程序内部工作原理的时机了。 事实上,这里有一个 简单离线网站的示例,以及一个关于 使 Web 应用程序脱机工作的简短系列。

关于 Jeremy 的书的消息让我回到他之前的那本书,Resilient Web Design,在那里我模模糊糊地记得第 4 章中这个超级有趣的引用

如果您使用 Web 技术构建了一些东西,并且有人使用 Web 浏览器访问,您无法确定将支持多少 Web 技术。 可能不会是 100%。 但也不太可能是 0%。 有些人会使用 iOS 设备访问。 其他人会使用 Android 设备访问。 有些人会获得您设计内容的 80% 或 90%。 其他人只会获得 20%、30% 或 50%。 网络不是一个平台。 它是一个连续体。

我喜欢这个将网络视为一个不断改进和发展的连续体的想法,所以我相信 Jeremy 的最新著作也会像以前一样有趣和引人入胜。

`:focus-visible` 和向后兼容性

🔗 https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
阅读评论

Patrick H. Lauke 涵盖了未来的 CSS 伪类 :focus-visible。 我们正处于 浏览器支持的早期阶段,但它旨在解决一个尴尬的状况

… 当焦点样式由于鼠标/指针交互而应用时,它们通常是不可取的。 典型的例子是按钮,它们在页面上触发特定操作,例如向前移动轮播。 虽然让键盘用户能够看到他们的焦点在按钮上很重要,但对于鼠标用户来说,发现按钮的外观在他们点击后发生了变化会很困惑 - 使他们想知道为什么样式“卡住”了,或者按钮的状态/功能是否发生了变化。

如果我们使用 :focus-within *代替* :focus,那么浏览器就可以自由地 *不* 应用焦点样式,因为它认为没有必要,但在例如元素被 Tab 到时仍然可以应用。

可怕的部分是“代替”。 我们可以直接切换到浏览器支持,因为它就是这样。 甚至 @supports 也无法帮助我们。 但 Patrick 有一些想法。

继续阅读 →

“只是”

🔗 http://bradfrost.com/blog/post/just/
阅读评论

Brad Frost 几年前的“只是”一文在 人们中引起了新的共鸣。 这是一个简单的词,可以很容易地脱口而出,可能会用来保持文本的随意感觉,但结果可能是破坏性的。 布拉德

我们领域(或任何领域)中可用的知识量正在不断增加、变得更加复杂和细分。 所有人都下载了同一主题的基本知识的可能性越来越小。 因此,我们必须注意,不要在我们的文档、博客文章、教程、维基和通信中做出太多假设。

想象一下,你向自己以前版本的自己解释一项特定任务。 曾经有一段时间,你不知道你现在知道的知识。 提供背景。 超文本的美妙之处在于,我们能够快速添加非常需要的背景,这对新手来说很有帮助,但对于那些已经了解的人来说很容易浏览。 让文档更易读对每个人都有利。

Ethan Marcotte 将此 更进了一步

我注意到我们行业中有一个修辞手法。 它不像,*很普遍*,但我看到它出现在足够的博客文章和会议演讲中,我认为它是一种非常常见的模式:即作者与读者分享一些建议,如果读者的老板或利益相关者不支持某个行动方案,建议读者“就这样做”。

我认为这是一个糟糕的、有害的修辞手法。 我也认为我们应该避免使用它。

继续阅读 →

设计按钮状态

🔗 https://cloudfour.com/thinks/designing-button-states/
阅读评论

Tyler Sticka 关于设计按钮的复杂性,并确保我们在设计过程中考虑了焦点、悬停和活动状态

事实上,鼠标效果可能是设计中最不重要的状态。 通过尽早考虑更多功能状态,您可以降低在模式库成熟时进行昂贵重新设计的需求。 以下列出了您应该尽早解决的基本状态,按重要性顺序排列。

我最近一直在花更多的时间思考焦点样式,认为在为网络构建时,这是一个至关重要的挑战,因此我特别重视 Tyler 的建议。 他认为我们应该在整个按钮设计过程中重复这条格言

“我郑重起誓,永远不会禁用浏览器焦点样式,除非包含经过深思熟虑的设计的替代方案。”

第一步:关注焦点样式。

相关说明,我们最近做了一个关于 CSS 基础知识的系列,其中包含一篇专门针对 各种链接状态的链接样式 的文章。 此外,还有一篇与本主题相关的非常棒的文章,名为 设计系统中的按钮,它探讨了按钮的许多 UX 注意事项,例如如何编写好的标签。

创建可主题化的设计系统

🔗 http://bradfrost.com/blog/post/creating-themeable-design-systems/
阅读评论

Brad frost 继续讨论关于设计系统的 持续对话。 许多文章似乎都集中在如何创建一个设计系统以及如何执行它,但这里最大的收获是设计系统并不等同于约束。 它们只有在我们设定的范围内才那么严格,新的 CSS 功能(如自定义属性)实际上开辟了新的创意可能性——Andres Galante 和 Cliff Pyles 最近在 CSS-Tricks 上提出的观点。

布拉德

美学层通常是前端栈中最具可塑性的层,这意味着**我们可以创建允许高度美学灵活性的系统,同时保持坚实的底层结构基础。**

这不仅听起来很合理,而且很好地解释了我们为什么喜欢 CSS:它是一组样式,可以以无数种方式应用于相同的 HTML 标记。可以随时添加新的涂层,但建筑物的梁、墙和天花板可以保持不变。Dave Rupert 的个人网站就是一个很好的例子,他详细介绍了他对主题的看法。

啊,CSS Zen Garden…

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 84
  • 85
  • 86
  • ...
  • 219
  • 旧的

CSS-Tricks 由 DigitalOcean 提供支持。

关注 web 开发最新动态

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

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

© 2024 . All rights reserved.