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

Links

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

改善(几乎)所有项目的 CSS 单行代码

Alvaro Montoro | https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project
阅读评论

这些类型的汇总总是让我着迷。 我的妻子会花几个小时翻阅 Zillow 上房屋内部的照片,因为她喜欢看不同的人如何装饰、风水等等。 那是她小小的窥视天堂之旅。 我的呢? 很可能是滚动浏览开发人员触手可及的 CSS 代码片段。

Alvaro 非常友善地 分享了他最值得信赖的 CSS 代码

  1. 限制视窗内内容的宽度
  2. 增大正文大小
  3. 增大文本行之间的间距
  4. 限制图像的宽度
  5. 限制内容内文本的宽度
  6. 以更平衡的方式包装标题
  7. 表单控件颜色与页面样式匹配
  8. 易于理解的表格行
  9. 表格单元格和标题的间距
  10. 减少动画和运动
继续阅读 →

每个人都自由(编写网站)

Sara Joy | https://sarajoy.dev/blog/write-websites/
阅读评论

Sara Joy 改编了歌曲 “每个人都自由(涂抹防晒霜)”(YouTube),原作者是 Baz Luhrman,歌词直接摘自 Mary Schmich 的经典文章 “涂抹防晒霜”。 自 1999 年以来高中毕业的每个人都不必去查找这首歌,因为它已经成为非官方的官方毕业典礼主打歌。 如果你在 99 年毕业,那么我很抱歉。 你可能仍在接受因这首朗朗上口的旋律在广播电台(是的,广播电台)上无限循环播放而引起的耳虫感染的持续治疗。 另一方面,我们这些来自 90 年代后期的班级的人患上了更严重的耳虫病,因为 “我将记得你” 和 “你人生的最佳时机” 爆发。

继续阅读 →

过渡到自动高度

Frontend Masters | https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/
阅读评论

我知道这是 Chris 一直想要的东西,所以他发布了 一篇精彩的文章,仅仅在新闻发布后的第二天。 事实上,我最初是从他的文章中了解到这个消息的,并且无法找到任何发布的公告。 因此,我认为我应该记一些笔记,因为它感觉是一个重大的发展。

消息是:过渡到 auto 现在是可行的! 好吧,它将成为现实。 Chrome Canary 最近发布了对它的支持,现在只有在那里可以找到它。 而且即使那样,我们仍然不知道 Chrome Canary 的实现是否会在该功能正式发布时被纳入语法中。

继续阅读 →

关于 CSS 选择器性能的真相

🔗 https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/
阅读评论

天啊,让 Patrick Brosset 来谈论 CSS 性能,他总是以最平易近人、最实用的方式进行。 并不是说 CSS 总是 导致速度下降的原因,或者说 CSS 即使是最容易解决的问题,也是提高性能的关键。

但如果你正在寻找 CSS 方面的性能提升,Patrick 有一个不错的方法,可以使用 Edge DevTools 来识别最昂贵的选择器。

  • 打开 DevTools。
  • 转到“性能”选项卡。
  • 确保你已启用“启用高级渲染工具”选项。 这在我的过程中让我感到困惑。
  • 录制页面加载。
  • 在报告中打开“自下而上”选项卡。
  • 查看重新计算的样式的大小。
继续阅读 →

帮助选择 CSS 嵌套的语法

🔗 https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/
阅读评论

CSS 嵌套 再次引起广泛关注。 还记得今年早些时候 Adam 和 Miriam 将三种语法选项提出来进行投票 吗? 这些结果已经统计出来了,而且 结果甚至没有悬念。

现在,你有另一个机会来参与嵌套的未来,这一次是在 WebKit 博客上。 Adam 和 Miriam 调查的结果引发了进一步的讨论,并且又增加了两个想法。 这个新的调查让你可以选择所有五个选项。

Jen Simmons 已经对这些选项进行了全面的概述,包括对嵌套的复习,我们如何得出五个选项的详细信息,以及大量示例,这些示例展示了这些选项在各种用例中的表现。 让我们通过完成这个简短的单问题调查来回报这里所做的一切努力。

2022 年假日雪景盛典

🔗 https://lu.ma/fh-holiday-2022
阅读评论

我们有一个真正的节日盛宴! 加入 前端马社区 的主持人 Alex Trost,参加12 月 16 日星期五的 2022 年假日雪景盛典。

有一系列 12 位优秀的演讲者——包括 Chris Coyier、Cassidy Williams、Kevin Powell 和 Angie Jones——每个人都讨论了不同的前端和 Web 开发主题。 这就像圣诞节的 12 天,但压缩成一个为我们这些 Web 极客准备的 4 小时会议。

这是一个非常好的事业。 此活动免费,但包括为无国界医生筹款,目标是筹集 20,000 美元。 你可以 在这里捐款,你捐出的任何金额都将由活动赞助商匹配。 所以,来参加前端的乐趣,并在此过程中帮助一个伟大的事业。

在你的计算机上设置屏幕阅读器测试环境

🔗 https://www.sarasoueidan.com/blog/testing-environment-setup/
阅读评论

Sara Soueidan 提供了你需要的一切,从现有的屏幕阅读选项到为它们设置虚拟机、安装它们以及配置键盘选项。 这确实是集所有分散的提示于一体的一站式参考资料,可以帮助你充分利用屏幕阅读器辅助功能测试。

感谢 Sara 编写了这份指南,尤其是在编写指南时没有对人们可能了解或不了解辅助功能测试做出任何判断或假设。 这份指南仅仅是 Sara 即将推出的 实用辅助功能课程 的一部分,该课程现已接受预订。

CSS 还行,我想。

🔗 https://www.youtube.com/watch?v=lbqOCS9bMpk
阅读评论

当我观看 YouTube 上的 @quayjn 的这个视频时,脸上露出了满意的笑容。 (虽然副标题中没有实际姓名,但根据我的线索,我认为是 Brian Katz)。

最好的是这个你可以用来跟着唱歌的 Pen…

我一定会想到 Una 为记忆 JavaScript 的 map()、filter() 和 reduce() 方法而在 这篇文章的最后 写的小歌,这篇文章 中提到了这一点。

WordPress 开发人员博客

🔗 https://developer.wordpress.org/news/
阅读评论

嘿,看看这个。 看起来 WordPress.org 上有一个全新的 关于 WordPress 开发的博客。 在该博客的最初提议中,Birgit Pauli-Haak 写道

继续阅读 →

DigitalOcean 欢迎 Cloudways 加入大家庭

🔗 https://www.cloudways.com/en/css-tricks.php?id=1223312&data1=Article-Link
阅读评论

嘿,各位! 如果你一直在关注 DigitalOcean 的最新消息,你可能已经知道我们 最近宣布收购 一家名为 Cloudways 的公司。 如果你对这意味着什么感到好奇,我们认为分享一个简短的关于 Cloudways 的描述,以及我们为什么如此激动地让他们加入 DO 和 CSS-Tricks 的大家庭可能会有所帮助!

继续阅读 →

Quick Hits

看看,2024 年 CSS 状态调查 现已开放,正在接受提交。

# 2024 年 8 月 21 日

来自 Jens Oliver Meiert 的免费电子书,它会以最好的方式让你感到无聊:死记硬背 HTML & CSS

# 2024 年 8 月 14 日

被 Google 杀死 被称为“坟墓”,但我将其视为实验的简历。

# 2024 年 8 月 14 日

Heydon 提醒我们,<address> 不是用来放置,你知道的,邮件地址的。

# 2024 年 8 月 12 日
更多快速提示 →
  • 较新
  • 1
  • 2
  • 3
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发的最新动态

使用我们手工制作的时事通讯

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

© 2024 . All rights reserved.