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

Links

我们正在阅读的网络内容,以及一些想法。 有我们应该知道的链接吗? 告诉我们!

使用 Web 音频 API 重新创建传奇的 8 位游戏音乐

🔗 http://codepen.io/gregh/post/recreating-legendary-8-bit-games-music-with-web-audio-api
阅读评论

Greg Hovanesyan,最近在这里发布了 Web 音频 API 简介,之后又发布了另一篇关于如何使用它来创建我们过去年代的标志性音乐的大型文章,例如来自《塞尔达传说》和《银河战士》的声音。

最终的演示以 项目 的形式呈现,您可以探索。 并且不要错过我们最近对 CodePen 上一些 最好的 Web 音频 API Pens 的汇总。

相对路径第 47 集 - 教条主义

🔗 https://www.relativepaths.uk/ep47-dogmatism-with-chris-coyier/
阅读评论

我和 Mark Phoenix 和 Ben Hutchings 谈论了,很大程度上是,这篇文章 以及关于科技界行为和态度的更广泛的讨论。

现代 JavaScript 适用于古代 Web 开发人员

🔗 https://trackchanges.postlight.com/modern-javascript-for-ancient-web-developers-58e7cae050f9
阅读评论

Gina Trapani

… 当您学习现代 JavaScript 时,很有可能您遇到的问题的解决方案仍在开发中。 事实上,它很可能离被合并到您正在使用的包中只有一次代码审查的距离。

这是一个奇怪的时代。 我们中的很多人生活在刀刃边缘。 正如 Gina 所说,现在越来越难找到“解决您问题的 5 年前的 Stack Overflow 答案”。 新事物会立即发布并投入生产,这与等待 .1 版本的传统智慧略有矛盾。

Novapattern

🔗 http://novapattern.com/
阅读评论

策划设计精良的模式

确实如此!

额外福利:里斯本阿祖勒茹 中充满了由 Mathieu Grac 基于里斯本城市瓷砖创建的精美图案。 它拥有有趣的 UI 来探索它们。

包容性组件

🔗 http://inclusive-components.club/
阅读评论

Heydon Pickering 的新项目

一个试图成为模式库的博客。 每篇文章都探讨了健壮且可访问的界面组件的设计。

目前只有一篇关于 切换按钮 的文章,但这绝对是一篇好文章。

归零桌面

🔗 https://superyesmore.com/zeroing-the-desk-3a166215eee0758e9e84d1b76eacdf7f
阅读评论

Brendan Dawes

在大型混音台的录音过程中,在您拨动无数旋钮并推动许多推子之后,您会执行一项称为“归零桌面”的操作。 这是您将每个控制旋钮和每个推子恢复到零的位置,这样当下一位工程师进来时,就不会在大型低音猛烈地打在他脸上的时候从座位上跳起来,并且可能导致某些东西爆炸。 这是对您的同事音响工程师的一种礼貌行为。

让我想起 all: unset; ;)

(来自 Brad Frost)

下一个 Smashing Magazine

🔗 https://next.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here--meet-the-next-smashing-magazine/
阅读评论

祝贺那里组建的大团队,他们承担了这次重大的重新设计过程。 与我们这里通常更像是重新调整,每次迭代都伴随少量开发工作和 UX 点缀的重新设计不同,这对他们来说是一个从头开始的重建。 他们将许多不同的平台迁移到一个平台,一个基于静态网站的系统,具有所有前端 API。 将所有这些东西整合到一个系统中一定感觉很好。 我记得当我这里曾经有四个不同的系统(WordPress、论坛(各种)、电子商务(各种)和一些原始的 PHP 代码)时,将它们全部整合到一个 WordPress 屋檐下时的感觉很棒。

Guetzli

🔗 https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
阅读评论

Geutzili,谷歌的新开源算法…

…它创建的高质量 JPEG 图像文件大小比目前可用的方法小 35%,使网站管理员能够创建加载速度更快且使用更少数据的网页。

我已经看到这则消息被广泛报道,这很好,因为如今图像造成了网络臃肿的主要原因,而用技术反击似乎很明智。

我也看到了 Anselm Hannemann 的 笔记

这很棒,但为了说明问题,我们还必须考虑到它的速度比 Mozilla 的 mozJPEG 编码器慢 100 倍,在许多情况下,它在相同文件大小下无法达到相同的质量。

来源:Kornel Lesiński,ImageOptim 背后的开发人员,他说 Guetzli 将被纳入下一个版本。

使用 *:not() 无忧无虑地实现全出血

🔗 http://daverupert.com/2017/03/full-bleed-with-not/
阅读评论

Dave Rupert 记录的常见情况 documented by Dave Rupert

假设您正在制作一个博客文章布局。 内容在 CMS 中的 WYSIWYG 编辑器字段中输入。 您将该内容回显到页面上。 您在移动设备上打开它,并注意到段落延伸到边缘。 哎呀,这有点不舒服。 所以您添加某种左右填充,也许使用 div.container。

这很好用,直到客户要求图像和视频全出血。 您的通用填充解决方案不再有效。

您有选择。 容器化在任何情况下都不好。 那么,您如何取出那些全出血元素? Dave 使用了“反向白名单”。 假设您希望图像和视频全出血,但其他所有内容都需要边缘填充。

.post > *:not( img ):not( video ) {
    margin-left: auto;
    margin-right: auto;
    max-width: 50rem;
    padding-left: 5%;
    padding-right: 5%;
}

他使用 :not() 来选择所有不是图像或视频的元素。 这些元素是白名单。 维护每个可能的 HTML 元素的黑名单要容易得多。

我在 CSS-Tricks 的这个设计中使用了它,但不是对所有内容应用填充,而是使用了一个容器,并将白名单中的项目用负边距拉到边缘。 我认为我更喜欢 Dave 的想法。

网络上的滚动:入门

🔗 https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97
阅读评论

滚动很复杂。 Nolan Lawson

  • 用户用触摸板上的两只手指滚动
  • 用户用触摸屏上的一根手指滚动
  • 用户用物理鼠标上的滚轮滚动
  • 用户单击侧边栏并将其上下拖动
  • 用户按下键盘上的向上键、向下键、PageUp、PageDown 或空格键

事实证明,所有这五种输入方法都具有截然不同的特性,尤其是在性能和跨浏览器行为方面。 其中一些(例如触摸屏滚动)即使在使用大量 JavaScript 的页面上也可能很流畅,而另一些(例如键盘滚动)会使同一个页面感觉迟钝且无响应。 此外,某些类型的滚动可能会被 DOM 事件处理程序减慢,而另一些则不会。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 较新
  • 1
  • ...
  • 107
  • 108
  • 109
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

了解最新的 Web 开发动态

通过我们的手工制作的时事通讯

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

© 2024 . All rights reserved.