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

Links

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

互联网是否杀死了弯引号?

🔗 https://www.theatlantic.com/technology/archive/2016/12/quotation-mark-wars/511766/
阅读评论

Glenn Fleishman

在越来越多的出版物中,[弯引号已被]熨平了。这可能是由于网站设计师缺乏意识,也可能是内容管理系统 (CMS) 每次都难以正确获取弯曲方向。也可能是弯引号的时代已经过去。

我知道在这个社区里,把引号用错是非常不酷的,提醒人们如何输入引号是非常酷的。在这个问题上,我站在不酷的一边。我甚至在这个网站上标准化使用直引号。我不担心编码,但懒惰是其中一部分原因。这是一个奇怪的按键组合(⌥ [),特别是对于习惯于使用直引号的程序员来说。更不用说结束版本的按键组合不同了(例如 ⌥ ⇧ ]),而且在任何非 macOS 系统上,这两个按键组合都更加困难)。两种类型的直引号都有一个专门的按键。

你知道什么现在很酷吗?语言在不断发展,包括书面语言。我并不反对弯引号,我只是不在乎。如果你想用直引号写作,但因为“从算法上来说,这是一个已解决的问题”而以弯引号发布,尽管放手去做。也许网络上的英语书写已经发展到“随便,哪种都行”的程度。哦哦,看看那个位于直引号外部的句号。我是一个独来独往的人,Dottie。一个叛逆者。

display: flow-root;

🔗 https://groups.google.com/forum/#!topic/mozilla.dev.platform/bG9Kpgr5LC4
阅读评论

这可是新闻!它有一个规范,并且 Firefox 表示他们打算发布它。它就像display: block;一样,只是

它总是为其内容建立一个新的块格式化上下文。

.group {
  display: flow-root;
}

意思是:你不需要使用clearfix技巧。不过,它还有更多内容。Fiona Chan有一个关于块格式化上下文的简短演讲。我认为它在某些情况下也会影响z-index和transforms。还有其他人吗?

我怀疑 Nicole Sullivan 会赞成。她一直在撰写和讨论新的格式化上下文。在 2010 年,她甚至写道

我希望我们有一个简单的属性值对,可以在基于标准的浏览器中执行相同操作。

.lastUnit {
  formatting-context: new; /* please! */
}

仅仅使用 overflow并不是真正的解决方案。例如,它隐藏了box-shadow。

另请参阅

  • Rachel Andrew:clearfix 技巧的终结?
  • Thierry Koblentz:display: flow-root 与 clearfix

CSS 书写模式

🔗 https://24ways.org/2016/css-writing-modes/
阅读评论

不久前,我们分享了一个小技巧,关于如何使用writing-mode属性垂直设置标题。虽然这是一个有用的技巧,但它只是这个属性的冰山一角。Jen Simmons 深入研究并解释了真正发生的事情。

元素在网站上以某种方式流动。在不进行任何特殊操作的情况下,块级元素从上到下向下推。内联元素从左到右排列。在书写模式下,这将由(默认)horizontal-tb(水平内联流,“从上到下”块流)表示。不同的语言和文化以不同的方式处理布局,因此此属性允许以比dir属性更全面的方式控制布局。例如,vertical-rl(垂直内联流,“从右到左”块流)。

从乐高学习:模块化网页设计的进步

🔗 http://alistapart.com/article/learning-from-lego-a-step-forward-in-modular-web-design
阅读评论

Samantha Zhang

当 Web 组件像乐高积木一样模块化到元素级别时,它们变得更加通用且易于维护。我们认为这是模块化网页设计的下一步。

这是一个巧妙的系统:在所有元素周围放置半个边距,并在容器周围放置半个边距。这样,无论什么与什么相邻,自然都会存在完整的边距。

每个浏览器的“最佳图像格式”

🔗 http://calendar.perfplanet.com/2016/image-optimization/
阅读评论

也许你听说过WebP图像格式?以及它对支持它的浏览器来说是一个非常好的性能提升?好吧,目前这仅适用于基于 Blink 的浏览器。Estelle Weyl 的文章图像优化解释了每个浏览器的最佳图像格式

浏览器 最佳图像格式
Chrome WebP
IE 9+ / Edge JPEG-XR
Opera WebP
Safari JPEG-2000

你可以通过<picture><source type="">语法提供这些格式。

将这种复杂性与响应式图像的复杂性结合起来,确实看起来像将图像交付外包给专门的服务似乎是可行的方法。至少在一定规模以上。

接下来的是未来

🔗 https://vimeo.com/177267839
阅读评论

Matt Griffin 关于网络的纪录片,现在可以在 Vimeo 上免费观看。

“石头已经松动了”

🔗 https://ma.tt/2016/12/new-org-homepage/
阅读评论

Matt Mullenweg 在发布 WordPress.org 的新主页时,该主页已经很久没有重新设计过了

今天页面上的内容实际上并不重要,即使它在许多方面都更好,关键在于它再次发生变化,石头已经松动,现在可以继续滚动。

我喜欢这种观点。在重新设计时,有时与其关注新的像素本身,不如关注现在已经建立的工作流程,以便工作能够继续进行。

2017 年前端性能检查清单

🔗 https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
阅读评论

Vitaly Friedman 的列表包含一个“快速获胜”部分,其中包含不能忽视的 Web 性能事项。如果你没有为资源设置缓存头、优化图像和压缩,那么你就会错过一些巨大且易于获得的性能提升。在涵盖这些内容之后,你可以深入研究 Brotli、OSCP、tree-shaking 等。

说到这里,我确实应该研究一下 Brotli、OSCP、tree-shaking 等。

客户端存储概述

🔗 https://bitsofco.de/an-overview-of-client-side-storage/
阅读评论

Ire Aderinokun

目前有四种在客户端存储数据的方法。

  1. Cookie(老式方法,仍然有用,因为它们会随服务器请求一起发送)
  2. 本地存储(非常易于使用)
  3. 会话存储(完全相同,只是在选项卡关闭时清除)
  4. IndexedDB(相当复杂,功能强大)

20 年的 CSS

🔗 https://www.w3.org/Style/CSS20/
阅读评论

Bert Bos,注意到今天是一个非常值得纪念的日子

1996 年 12 月 17 日,W3C 发布了第一个 CSS 标准。

看看哪些历史事件入选了时间轴非常有趣。Zen Garden、酸性测试、预处理器……美好的时光!

Quick Hits

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

CSS-Tricks 由DigitalOcean提供支持。

随时了解 Web 开发动态

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

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

© 2024 . All rights reserved.