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

Links

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

面向设计师的样式

🔗 https://the-pastry-box-project.net/james-kyle/2018-january-22
阅读评论

James Kyle

组件是设计师的基本工具。设计师很早就使用某种“组件”模型构建设计系统了。随着网络的成熟,从原子设计到 Sketch 符号,“组件”(以某种形式)已成为网页设计师最佳实践的体现……

设计师不关心选择器或 #TheCascade。他们可能会利用它,因为它可用,但设计思考过程中从未出现过 #TheCascade。

(好吧好吧……大多数设计师。你很特别。但我们都知道这一点。)

我认为 James 在这里提出了有力的观点。不出所料,我属于喜欢 CSS 的阵营。我并不认为它特别难或麻烦。然而,在设计时我并没有用 CSS 的思维方式进行思考。用组件进行思考(和工作)要容易得多,根据需要嵌套它们。如果开发流程与之匹配,那很好。

我也同意 Sarah Federman 的观点,她在 Twitter 上发表了评论

现在就查看组件 CSS 工具的现状并断言它对设计师友好,似乎还为时尚早。

整个对话值得一读,结尾是

将组件设计视为与代码交互的界面的工具才是重点/未来发展方向。希望当我们能更贴近设计师的舒适区时,他们将更有能力创建组件样式。

与 Jason Pamental 谈论可变字体

🔗 https://shoptalkshow.com/episodes/296-variable-fonts-jason-pamental/
阅读评论

我们今天已经用可变字体给您来了个组合拳。Robin 分享了 Richard Rutter 关于其在现实世界中用法的文章。Ollie Williams 向我们介绍了在网络上使用它们的来龙去脉。

我认为我们可以将其变成三连击,并链接我们与 Jason Pamental关于可变字体的讨论。我和 Dave 与 Jason 谈论了一个小时,深入探讨了这个可变字体业务的真实情况、可能性和未来。不要错过他的或Mandy Michael 的演示合集。

如何在现实世界中使用可变字体

🔗 https://medium.com/@clagnut/how-to-use-variable-fonts-in-the-real-world-e6d73065a604
阅读评论

昨天 Richard Rutter 发布了一篇很棒的文章,探讨了 Clearleft 团队如何使用可变字体构建新的 Ampersand 会议网站(这项技术允许我们将多种宽度和粗细打包到单个字体文件中)。不过,最令人兴奋的部分是

两个月前,浏览器对可变字体的支持率仅为 7%,但截至今天上午,支持率已超过 60%。这意味着字体变体现在是一项可用的技术。

而且很巧妙的是,有相当数量的可变字体可供试验,不仅在浏览器中,而且在桌面设计应用程序中也是如此。

支持可变字体的软件的普及程度可能比您想象的要高。例如,最新版本的 Photoshop 和 Illustrator 支持它们,如果您使用的是 macOS 10.13+ 或 iOS 11+,系统字体 San Francisco 则广泛使用字体变体。也就是说,可供使用的可变字体的可用性极其有限。在撰写本文时,实际上还没有可用的商业可变网络字体,但免费和实验性的可变网络字体数量正在不断增加,如Axis Praxis 操场中所示。

Adobe 也发布了一批可变字体,如果您正在寻找更多字体。

使用 Stylish 或 Stylebot 随心所欲地修改任何网站的 CSS

🔗 http://mediatemple.net/blog/tips/bend-websites-css-will-stylish-stylebot/
阅读评论

作为一个自称的 CSS 极客,我经常会在需要修复错误或根据自己的喜好调整网站时,将自己的 CSS 注入到网站中。

这篇文章详细介绍了我是如何使用 Stylish 和 Stylebot 浏览器扩展来实现这一点的。

Safari 即将来临的新功能

🔗 https://twitter.com/rmondello/status/956236581987172354
阅读评论

这是 Ricky Mondello 发布的一条很棒的推文,概述了最新版 Safari(适用于 macOS 和 iOS)中所有很酷的新功能。我最喜欢的功能包括能够用 mp4 替换 gif、支付请求 API 和对Web 应用清单的支持。

随处可见的安全上下文

🔗 https://blog.mozilla.org/security/2018/01/15/secure-contexts-everywhere/
阅读评论

Mozilla 的 Anne van Kesteren 表示

立即生效,所有新的网络公开功能都将限制在安全上下文中。网络公开意味着该功能可以通过网页或服务器观察到,无论是通过 JavaScript、CSS、HTTP、媒体格式等。功能可以是现有 IDL 定义对象的扩展、新的 CSS 属性、新的 HTTP 响应标头,或者更大的功能,例如 WebVR。相比之下,新的 CSS 颜色关键字可能不会限制在安全上下文中。

换句话说,如果您的网站不是 HTTPS,则无法获得新的 Web 技术功能。天哪。原因是 Web 应该使用 HTTPS,所以如果您尝试在不先使用 HTTPS 的情况下使用花哨的功能,这就是我们用棍子打你的方式。

观察第一个主要功能的发布以及他们是否会信守诺言将非常有趣。互联网的 Web 开发论坛将充斥着为什么我的 Flexbox 不支持 grid-gap(或某个即将推出的功能)的问题,答案将是:与您的服务器团队联系。如果他们将容器查询置于此之后会怎样?那将是开发者愤怒的滑稽毁灭性龙卷风。

无头 CMS 的终极指南

🔗 http://synd.co/2mxvC1p
阅读评论

世界变了——CMS 也必须改变

拥有响应式网站已不再足够。您的受众期望在所有设备上都能获得无缝且个性化的客户体验——无头技术的时代即将来临。

无头 CMS 是下一代内容管理系统,适用于希望通过不断增长的渠道吸引客户,从而保持领先地位的品牌。

下载无头 CMS 的终极指南电子书,深入了解什么是无头 CMS,以及在选择新的 CMS 时为什么它应该排在您的首位。

立即下载电子书!

继续阅读 →

认识新的对话框元素

🔗 https://keithjgrant.com/posts/2018/meet-the-new-dialog-element/
阅读评论

Keith Grant 讨论了 HTML 5.2 如何引入了一个独特的新元素:<dialog>。这是一个绝对定位且水平居中的模态框,显示在页面上其他内容的顶部。Keith 探讨了如何设置此新元素的样式、JavaScript 中的基本打开/关闭功能,当然还有我们需要获得跨浏览器支持的 polyfill。

此外,我以前从未听说过 ::backdrop 伪元素。值得庆幸的是,此伪元素的MDN 文档对其进行了更详细的介绍。

MDN 上新的 Flexbox 指南

🔗 https://hacks.mozilla.ac.cn/2018/01/new-flexbox-guides-on-mdn/
阅读评论

MDN 发布了由 Rachel Andrew 撰写的新版和更新版Flexbox 指南。该指南包含 11 篇文章,演示了布局、用例以及您可能想要或需要了解的有关该主题的所有内容。所有相关的 Flexbox 属性都很好地附加到目录中,使之非常易于使用。

继续阅读 →

Incapsula 全球 DDoS 威胁态势报告

🔗 http://synd.co/2EN1es9
阅读评论

新发布的2017 年第三季度全球 DDoS 威胁态势报告提供了有关攻击和缓解措施的见解。以下是一些主要发现

  • 比特币是受攻击最多的行业之一
  • 高数据包速率攻击变得越来越普遍
  • 三分之一的网络层攻击具有很强的持久性
  • 来自印度和土耳其的僵尸网络活动持续攀升

在此处了解受攻击最多的国家/地区、行业和媒介,以及如何使用Incapsula保护您的网站。

继续阅读 →

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 90
  • 91
  • 92
  • ...
  • 219
  • 较旧

CSS-Tricks 由DigitalOcean提供支持。

关注 Web 开发最新动态

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

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费信用额度!
CSS-Tricks
  • 为我们写文章!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.