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

Links

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

无需媒体查询的响应式网格布局

🔗 https://andy-bell.design/wrote/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
阅读评论

Andy Bell 制作了一个非常酷的演示,向我们展示了如何在完全不使用媒体查询的情况下创建响应式网格布局。当您更改浏览器窗口的大小时,它看起来像这样

我认为这是一种很棒的布局技巧,只有 6 行 (!) CSS 代码。

.auto-grid {
  --auto-grid-min-size: 16rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 1rem;
}

这向我们表明,我们不必编写大量的媒体查询来更改网格中的列数。Andy 还证明了 CSS Grid 可以自动化许多乏味的布局样式工作。

继续阅读 →

团队协作和沟通对项目的影响

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

CSS-Tricks 团队前几天在 Miranda 向我们介绍了一个叫做“俯冲和便便”的东西时笑翻了。这对我们大多数人来说都是一个新词,但请告诉我您是否曾经亲身经历过这种情况。

其想法是,组织中的某个人——通常是级别较高的人,例如经理或主管——没有参与项目,但会“俯冲”进入项目的审查环节(例如团队演示),并在已完成的工作上“便便”。例如,设计中的颜色,我们为什么使用这个框架而不是那个框架,或者任何其他不关注项目范围或会议内容的事情。而且,没有人想反驳一个最高权力者(HiPPO)。

继续阅读 →

了解 MutationObserver API

🔗 https://www.smashingmagazine.com/2019/04/mutationobserver-api-guide/
阅读评论

MutationObserver 监视 DOM,特别是您告诉它监视的地方,例如

document.querySelector('#watch-this');

…它可以告诉您(触发回调)何时发生事情——例如,当添加、移除、更改子节点或其他一些事情时。

我就在前几天用它来监视 Pen 的<head></head>,并检测到新注入的已处理 Sass 代码,因此您可以使用 CodePen并排查看 Sass 和 CSS

继续阅读 →

UX 的位置

🔗 https://m.signalvnoise.com/the-place-of-ux/
阅读评论

每次我嘴里说出或用手指输入“UX”时,我都会想,“我是否正确使用了这个术语?”如今,它感觉是一个如此庞大且含义丰富的术语,也许我使用它的方式只会加剧混淆。Ryan Singer很好地阐述了这个问题

关于 UX 设计师、用户研究以及用户知识应该在多大程度上渗透到整个组织中的作用,争论仍在继续。在一个极端,UX 被视为一个专门的知识领域,用于为项目的定义提供信息并设定需求。在另一个极端,UX 是整个组织都应该在某种程度上负责的事情。

它可能感觉如此庞大,就像UX实际上是整个项目中唯一重要的事情。它也可能感觉如此微不足道,就像特定下拉菜单上额外的 2px 填充将使选项更容易点击。

消灭 IE6 的阴谋

🔗 http://blog.chriszacharias.com/a-conspiracy-to-kill-ie6
阅读评论

Chris Zacharias 发布了一些关于 YouTube 团队在 2009 年为什么添加了一个横幅,要求用户从 IE6 切换到更现代的浏览器的笔记

YouTube 令人难以置信的增长带来的苦乐参半的结果是,如此多的故事将在所有新涂层之下丢失。这就是为什么我想讲述十年前,一个小型网页开发团队如何在 YouTube 内部密谋消灭 IE6 并成功逃脱的故事。

我不记得导致我们的网页开发团队在 YouTube 餐厅共进午餐时制定了消灭 IE6 计划的确切触发事件。也许是我推出了一张 CSS 样式表,其中包含一个在半支持的 HTML 元素上使用的属性选择器。任何理性的网页开发人员都会期望不支持此功能的浏览器忽略它。但旧版本的 IE 并非如此。在非常特定的条件下,IE 中不支持的 HTML 元素上的属性选择器将创建内部递归,这充其量会导致浏览器崩溃,最坏的情况下会导致蓝屏死机。

继续阅读 →

分裂

🔗 https://adactio.com/journal/15050
阅读评论

Jeremy 谈论了 Web 核心语言与用于生成这些语言代码的所有工具之间的分歧

一方面,您拥有 Web 的原材料:HTML、CSS 和 JavaScript。这是用户最终将与之交互的内容。

另一方面,您拥有所有帮助您生成 HTML、CSS 和 JavaScript 的工具和技术:预处理器、后处理器、转译器、捆绑器和其他构建工具。

Jeremy 最喜欢原材料方面,但承认两个世界的健康平衡是一个健康的组合。

我认为优秀的 Frontend 开发人员非常清楚这种分裂。我们做出的每一个选择都是开发人员生产力和复杂性管理与用户体验之间的权衡。诀窍是尽可能少地惩罚用户,同时尽可能多地给自己。

使用 Photo Vectorizer 将您的照片轻松转换为矢量

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

Photo Vectorizer 是一款易于使用的 Photoshop 动作,可以将任何照片转换为矢量。只需点击几下鼠标,您就可以通过将照片转换为矢量来节省大量时间和精力。凭借超清晰的结果,这些矢量非常适合任何在线或印刷项目。

继续阅读 →

命名以提高可访问性

🔗 https://hiddedevries.nl/en/blog/2019-04-18-naming-things-to-improve-accessibility?utm_source=CSS-Weekly&utm_campaign=Issue-360&utm_medium=email
阅读评论

我喜欢 Hidde de Vries 的这篇总结陈述

在现代浏览器中,我们的标记成为一个可访问性树,最终决定了我们的界面对辅助技术的显示方式。您是否编写了此标记并不重要

  • 在.html 文件中
  • 在 Twig、Handlebars 或 Nunjucks 中
  • 作为 Vue 单文件组件中的<template>
  • 导出到 React 组件的 JSX 中
  • 由奇怪的遗留 CMS 输出

是哪个标记决定了您的网站对 AT 用户来说是否体验愉快。简而言之:标记才是最重要的

作为前端开发人员,您会发现自己在许多不同的地方使用许多不同的技术编写标记。我认为无论在哪里以及如何编写,您都应该考虑如何以最佳方式编写它。

地球日、API 和阳光。

🔗 https://clearleft.com/posts/earth-day
阅读评论

Cassie Evans 展示了一些真正巧妙的网页设计理念,并探索了使用其团队在 Clearleft 最近聘用的公司提供的 API 来覆盖其建筑物屋顶上的太阳能电池板。Cassie 概述了她设计一个使用 API 的网页的过程,以填充一些关于建筑物现在安装了太阳能电池板后使用的能量的轻量级数据可视化。

在 Clearleft,我们一直在采取一些措施来减少我们的环境影响。2018 年 12 月,我们在我们家的屋顶上安装了太阳能电池板。

随着第一个辉煌的夏日阳光开始照耀在我们身上,我们开始思考它们在过去 5 个月里对环境产生了什么影响。

幸运的是,我们的太阳能电池板有一个 API,因此我们不仅可以找到这些信息,还可以从 SolarEdge 请求这些信息并在我们自己的界面中显示这些信息。

这篇文章很好地介绍了使用Fetch API,这也是Zell Liew 详细介绍过的事情,涵盖了使用 JavaScript 与 API 交互的历史,处理错误以及使用 API 时可能发生的奇怪事情。

但同样有趣且有用的是阅读 Cassie 在为页面绘制线框图、研究如何使用 Fetch API 以及将动画集成到可爱的 SVG 插图中的思考过程。这是一项许多人可以产生共鸣并从中学习的设计和开发练习。

哦,说到数据可视化,Dan Englishby 今天刚在将数据放入图表中的多种方法上发布了一些内容。在那里也涵盖了使用实时 API 的内容,并且是 Cassie 文章的不错延续。

通过版本号感知速度

🔗 https://daverupert.com/2019/04/perceived-velocity/
阅读评论

HTML5 和 CSS3 非常重要。如此重要,以至于它们成为了真正有意义的流行词,并且在推动 Web 技术发展方面取得了巨大的成功。JavaScript 现在也为其大型版本命名:ES6、ES7、ES8……而且看起来它将继续这样。

但 HTML 和 CSS 已不再进行此游戏。在整个 HTML5/CSS3 之后不久,消息是将不会有 HTML6/CSS4。这样做有其原因,例如,也许对于CSS 模块独立发展而不受某些全局版本号的影响更有益。

也就是说……正如 Dave 所说

……自那以后的兴奋低迷是显而易见的……。

人们对 Web 的三大语言的热情并不相同。

我正在努力了解为什么这三种旨在协同工作的技术在受欢迎程度方面如此不平衡,以及它们的社区为何彼此分裂。频谱的一端经历了繁荣,而另一端则经历了萧条。涨潮并不能托起所有的船。

当然,HTML 和 CSS 的主要版本号发布可能会引发大量新的热情。

我来帮忙。HTML6 可以拥有HTML 导入以用于Web 组件、<include> 和多选。CSS4 获得容器查询、子网格、标准化的表单控件样式以及过渡到auto 尺寸。

Quick Hits

# 2024 年 8 月 23 日

# 2024年8月21日
# 2024年8月14日
# 2024年8月14日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 60
  • 61
  • 62
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.