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

Links

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

Ionic 中的 Shadow DOM

🔗 https://blog.ionicframework.com/shadow-dom-in-ionic-and-why-its-awesome/
阅读评论

Mike Hartington 对 Shadow DOM 的优秀和实用性赞不绝口

【Shadow DOM】实际上建立在两个简单的概念之上,即隔离和定位。需要创建与全局作用域隔离的 DOM 片段?Shadow DOM 可以提供帮助。需要指定 DOM 片段的确切位置?Shadow DOM 的作用域 API 正是您需要的!

可以将使用 Shadow DOM 的组件视为 HTML 模块。标记和样式被隔离到它们自己的 DOM 树中,并从全局上下文中移除。

上次我们在这里讨论过它,我展示了 Twitter 如何将其用于嵌入推文——这是一个非常棒的用例——以及它如何回退到 iframe。Mike 说他们在不支持的情况下对其进行了 polyfill。

继续阅读 →

OpenType 功能的完整 CSS 演示

🔗 https://sparanoid.com/lab/opentype-features/
阅读评论

我很高兴存在这样的功能指南,因为我们已经知道可变字体可以做很多奇怪的事情——干得漂亮,刘桐孝!

对于font-feature-settings,有相当多的可能值,例如

aalt、swsh、cswh、calt、hist、hlig、locl、rand、nalt、cv01-cv99、salt、subs、sups、titl、rvrn、liga、dlig、size、ornm、ccmp、kern、mark、mkmk、smcp、c2sc、pcap、c2pc、unic、cpsp、case、ital、ordn、lnum、onum、pnum、tnum、frac、afrc、dnom、numr、sinf、zero、mgrk、flac、dtls、ssty、ss01-ss20、smpl、trad、tnam、expt、hojo、nlck、jp78、jp83、jp90、jp04、hngl、ljmo、tjmo、vjmo、fwid、hwid、halt、twid、qwid、pwid、palt、pkna、ruby、hkna、vkna、rlig、init、medi 和 fina

……仅举几例。

提升您的主机。使用 DigitalOcean 入门,获得 100 美元优惠。

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

厌倦了缓慢且不可靠的网络托管?了解如何在 DigitalOcean 的云平台上轻松自行托管您的下一个项目。使用我们用户友好的控制面板或简单的 API,构建和管理超高速网站、博客和其他静态网页,所有这些都具有 99.99% 的正常运行时间 SLA。使用我们针对 WordPress、Ghost 和 Discourse 的一键安装应用程序节省时间。使用 Spaces 从未担心过存储空间不足——高度可扩展、价格合理的对象存储。

立即注册,CSS-Tricks 阅读者可享受 100 美元的免费积分。

使用代码进行设计

🔗 https://matthewstrom.com/writing/designing-with-code.html
阅读评论

华尔街日报设计总监 Matthew Ström 谈论我非常重视的事情:代码和设计工具之间的联系

我们正处于设计工具复兴的时期。在 Sketch 1.0 发布以来的 8 年里,传统设计工具之间出现了一波竞争浪潮。随着设计师可用的工具数量呈指数级增长,曾经被认为是边缘的想法正在获得更广泛的受众。

其中一个想法将极大地改变数字产品的设计方式:在更深层次上集成设计和代码。Figma 可以实时更新 React 代码库;InVision、Abstract 和 Zeplin 已取消了设计-开发人员的交接文档;Framer 的新 Framer X 可以直接将其工作区中的交互式 React 组件呈现出来。这些例子仅仅暗示了未来会发生什么。

继续阅读 →

JAMstack_conf

🔗 https://jamstackconf.com/
阅读评论

我喜欢一个因为技术发展而出现的优秀会议。JAMstack_conf

静态网站生成器、无服务器架构和强大的 API 赋予前端团队全栈能力——无需承担基础设施的负担。这是一种称为JAMstack的新方法。

我将在那里演讲!我对所有这些都非常感兴趣,并且尽力学习和记录尽可能多的内容。

使用优惠码 csstricks100 享受 100 美元的优惠。

​无头 CMS 的终极指南

🔗 http://bit.ly/2N1vwOD
阅读评论

是否难以通过无缝的全渠道数字体验吸引您的客户?

那么无头 CMS 就是您一直在等待的技术。但是,随着围绕这项新技术的炒作,您可能会感到有些迷茫。

下载我们免费的无头 CMS 指南,获取理解无头 CMS 架构和多渠道内容管理所需的所有信息,了解如何使您的内容免受任何即将推出的技术的侵害,并了解与编程语言无关的好处。

获取您免费的《无头 CMS 的终极指南》电子书。

​使用 HelloSign API 重新投资您的时间

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

G2 Crowd 表示 HelloSign 的 API 的实施速度是任何其他电子签名提供商的两倍。您将如何利用节省的所有时间?立即免费试用!

两个按钮的故事

🔗 https://medium.com/buildit/a-tale-of-two-buttons-e63185aefd5f
阅读评论

我喜欢像 James Nash 撰写的这篇关于前端开发人员思维过程的文章。假设您有一个按钮,它需要在“正常”条件下(浅色背景)工作,以及一个用于深色背景的反色按钮。您是否在按钮本身设置了一个修饰符类?容器上呢?继承和级联如何提供帮助?自定义属性呢?

我认为拥抱 CSS 的级联可以成为鼓励 UI 中一致性和简单性的好方法。与其让每个新组件都自由发挥,不如训练设计师和开发人员都以与现有组件保持一致和重复使用现有组件的方式进行思考。

CSS 逻辑属性

🔗 https://blogs.igalia.com/mrego/2018/08/08/css-logical-properties-and-values-in-chromium/
阅读评论

像 margin-left 这样的属性看起来相当合乎逻辑,但正如 Manuel Rego Casasnovas 所说

假设您的网站上有一些从右到左 (RTL) 的内容,您的左侧可能是物理上的右侧,因此,如果您通常为某些元素设置 margin-left: 100px,则可能需要将其替换为 margin-right: 100px。

方向、书写模式,甚至 flexbox 都具有颠倒事物并使属性比您希望的更不合理且更难以维护的功能。现在我们将为此使用 margin-inline-start。完整列表如下:

  • margin-{block,inline}-{start,end}
  • padding-{block,inline}-{start,end}
  • border-{block,inline}-{start,end}-{width,style,color}

Manuel 深入探讨了所有浏览器支持细节。

Rachel Andrew 也解释了逻辑

……这些值已不再依赖于网络上的内容映射到屏幕的物理尺寸这一基本假设,其中句子的第一个单词位于其所在框的左上角。如果从未遇到过我们以简写方式设置这些值的方式,则网格区域中的行顺序完全有意义。

继续阅读 →

“老派人士”

🔗 https://gomakethings.com/my-biggest-challenge-with-javascript/
阅读评论

有人问 Chris Ferdinandi 他作为一名 Web 开发人员面临的最大挑战是什么

……我现在最头疼的事情是判断新事物何时会以更好的方式改变我们行业的运作方式,以及何时仅仅是昙花一现,一两年就会消失。

我尽量避免从一个潮流跳到另一个潮流,但我也不想成为那个错过行业重要飞跃的老家伙。

他继续解释了一种情况,即作为一名年轻的开发人员,他非常激进,甚至拒绝了一份他们不适应响应式设计的工作。但现在担心这种情况可能会发生在他身上

但我永远不会忘记那一刻。因为对我来说很明显,有一批老派的开发人员不理解,也看不到我们行业即将发生的巨大转变。

现在我成为了老派人士的一员,并且已经做了很长时间,我总是害怕这种情况会发生在我身上。

我感同身受。

我尽量保持尽可能的新潮和激进,以弥补老派综合征。我拥有超过十年的专业网站建设经验,这些经验不会消失(尽管有些人认为并非如此)。我希望这些事情能让我保持平衡。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 76
  • 77
  • 78
  • ...
  • 219
  • 较旧

CSS-Tricks 由DigitalOcean提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.