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

Links

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

V6:排版和比例

🔗 http://v6.robweychert.com/blog/2017/11/v6-typography-proportions/
阅读评论

这是 Rob Weychert 的一篇传统的博客文章,他在其中深入研究了他在他个人网站上实施的新设计系统,特别是将所有内容联系在一起的排版系统。

根据牛津英语词典,比例是“构成测量或分级某事物的标准系统的分级值范围”。使用特定音阶的乐曲——有限的音符选择,具有共享的数学关系——可以影响某种情绪基调。想写一首悲伤的歌? 使用小调。改变主意了吗? 切换到一个大调,突然那首相同的歌曲就变得更加欢快了。

空间关系同样可以使用类似的原则来实现一定的视觉和谐,而比例提供的限制消除了在空间中排列元素过程中的很多随意猜测。我设计的大部分包含类型的作品都以排版比例为基础,这影响着字体选择和布局比例。创建该比例的过程始于询问类型需要做什么,以及对比尺寸将在其中扮演什么角色。

介绍 minmax()

🔗 https://gridbyexample.com/video/series-minmax/
阅读评论

在 CSS Grid 的所有新功能中迷失方向是比较容易的,因为学习和熟悉它们有很多东西要学;在我看来,逐块学习更容易。

因此,您可能已经熟悉 Rachel Andrew 的 Grid By Example,其中包含大量教程,介绍了有关 CSS Grid 的新布局技巧和诀窍。但 minmax() 教程 是您可以今天学习的 Grid 的一小部分,值得庆幸的是 Rachel 制作了一个方便的 2 分钟长的视频,直接深入其中。

事实上,一个新的 CSS 功能可以为我们带来多少机会,令人印象深刻。

Netflix 在没有客户端 React 的情况下运作,这是一件好事

🔗 https://jakearchibald.com/2017/netflix-and-react/
阅读评论

最近,Netflix 从他们的登录页面中删除了客户端 React,这引起了一些轰动。因此,Jake Archibald 调查了该团队为何这样做以及它从长远来看实际上对 React 社区来说是好事。

当 PS4 于 2013 年发布时,它宣传的功能之一是渐进式下载——允许玩家在游戏下载时开始玩游戏。尽管这对游戏机来说是一个突破,但网络已经做了 20 年了。 HTML 规范(警告:8MB 文档),尽管体积很大,但在获取大约 20KB 后就开始呈现。

不幸的是,这是我们经常通过单页应用程序进行的工程,通过渠道传送到不利于流媒体的媒介,例如大型 JS 包。

我喜欢这篇文章的整体氛围,因为它表明我们在选择工具时应该谨慎;我们只应为合适的工作选择合适的工具,而不是将每个问题都视为需要一个用 JavaScript 制成的巨型锤子。还有!Burke Holland 上周写了一篇关于这个主题的 有趣的文章,其中包含他的一些想法。

编辑 W3C HTML5 规范

🔗 http://www.brucelawson.co.uk/2017/editing-the-w3c-html5-spec/
阅读评论

Bruce Lawson 被选中共同编辑 W3C HTML5 规范,并且在他的公告文章中阐明了它与 WHATWG 规范 之间的区别。

WHATWG 规范是一个面向未来的文档;许多想法都在那里孵化。W3C 规范是对可互操作工作的快照——那些不太关心未来会发生什么,但需要关于现在什么有效的可靠建议的作者可能会发现此规范更容易使用。

说实话,我之前不熟悉 WHATWG 规范,现在我发现知道有两个工作组以不同但(某种程度上)协作的方式推动 HTML 向前发展非常有趣。

向您致敬,布鲁斯! 当然,支持开放标准!

减少 CSS 中的复杂性

🔗 https://codeburst.io/declining-complexity-in-css-ca65c4d606e4
阅读评论

Eric Meyer 和 Estelle Weyl 的《CSS:权威指南》第四版最近发布。新书重达 1,016 页,比第三版的 447 页大幅增加,而第三版比第二版的 436 页略有增加。

继续阅读 →

可样式化

🔗 https://stylable.io/
阅读评论

Wix 开发团队将他们的帽子扔进了 CSS 预处理器竞技场

Stylable 是一种 CSS 预处理器,使您可以编写可重用、高性能、带样式的组件。每个组件都公开一个样式 API,该 API 映射其内部部分,因此您可以跨团队重用组件,而不会牺牲可样式性。

  • 将样式范围限定到组件,以防止它们“泄漏”并与其他样式发生冲突。
  • 启用自定义伪类和伪元素,这些伪类和伪元素抽象了组件的内部结构。然后可以从外部对这些元素进行样式化。
  • 使用主题,因此您可以在整个 Web 应用程序中应用不同的外观和风格。

在构建时,预处理器将 Stylable CSS 转换为平面、静态、有效、原始的 CSS,该 CSS 在跨浏览器工作。

看起来 Sass 大师 Chris Eppstein 正在加入范围样式的游戏,使用尚未发布的 CSS Blocks。并且想想 Vue 对 <style scoped> 的支持,以及 实用程序库 的流行程度。我认为范围样式可能是 2018 年最热门的 CSS 主题。

更愉快的 HTML5 表单验证

🔗 http://daverupert.com/2017/11/happier-html5-forms/
阅读评论

HTML 在过去几年中为我们提供了大量 表单验证 内容。Dave Rupert 指出了其中的 UX 问题

如果您曾经尝试过 HTML5 表单验证,您可能已经感到失望。开箱即用的体验并不是您想要的。将 required 属性添加到输入效果很好。但是,input:invalid 的样式部分有点糟糕,因为空输入会触发 :invalid 状态,甚至是在用户与页面交互之前。

幸运的是,有一个 invalid DOM 事件确实会以有用的时间间隔触发:在提交表单时。请记住,这并不能为您带来超级深度的浏览器支持。如果您需要那个,可以考虑 使用 polyfill。我认为表单验证的未来要么是 HTML/CSS 提供更好的、更可控的 UX,要么就是这个。

飞机和烟灰缸

🔗 https://csswizardry.com/2017/10/airplanes-and-ashtrays/
阅读评论

Harry Roberts 谈论设计系统以及如何从一开始就在其中融入妥协。他认为,我们不能对允许和不允许的事情专横,因为设计,无论是产品、服务还是系统的设计,始终都是关于妥协的。

继续阅读 →

实时共享/Teletype

🔗 https://vscode.js.cn/blogs/2017/11/15/live-share
阅读评论

Amanda Silver 介绍了“Visual Studio 实时共享”,它

使使用 Visual Studio 2017 或 Visual Studio Code 的开发人员能够实时协作!

这比仅仅是多个光标更深入。两个人都获得了相同的精美 VS 代码 UI 功能,例如 IntelliSense 和 Peek。

GitHub 的 Atom 编辑器也有 Teletype,它

允许开发人员与团队成员共享他们的工作区,并实时协作编写代码。

Atom 有一个主机概念,在其中

当主机在文件之间移动时,协作者会自动跟随活动选项卡。

我不得不提 CodePen 有 协作模式 和 教授模式,这些模式不需要任何设置。向某人发送一个 URL,然后开始吧!

SVG 作为占位符

🔗 https://medium.freecodecamp.org/using-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c
阅读评论

不久之前,Mikael Ainalem 的 Pen 演示了您如何在 HTML 中使用 SVG 轮廓,然后延迟加载图像(后来由 Emil Tholin 变成 一个 webpack 加载器)。它有点像 骨架屏幕,因为它为用户提供了即将到来的内容的提示。或者 模糊放大技术,它会加载一个非常小的图像,并模糊放大作为占位符图像。

José M. Pérez 记录了这些,以及一些更基本的选择(无、图像占位符或纯色),最重要的是,一个使用 Primitive(它有 一个 mac 应用程序 和 一个 JavaScript 版本)的非常巧妙的新想法,它创建重叠的 SVG 形状用作占位符图像。可能比其他一些技术更大,但仍然比高分辨率 JPG 小得多!

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 最新
  • 1
  • ...
  • 94
  • 95
  • 96
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发的最新动态

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

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

© 2024 . All rights reserved.