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

Links

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

Client-Hints Polyfill

🔗 https://github.com/jonathantneal/http-client-hints
阅读评论

根据客户端信息做出服务器端选择有点像现代的圣杯。 Client-Hints 有望在将来使这变得更容易,但我们现在还没有。 我喜欢 基于 cookie 的方法。 这个由 Jonathan Neal 编写的 polyfill 旨在使用基于 cookie 的方法来复制 Client-Hints。

CSS 中的客户端全文搜索

🔗 http://redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html
阅读评论

François Zaninotto 的一个巧妙想法。 在可搜索元素中添加一个 data-index 属性,该属性包含其子元素的所有文本内容,这些文本内容组合在一起。 然后,您可以使用 [data-index*=""] 选择器查找匹配项,这速度很快。 从本质上讲,DOM 权重翻了一番,但这很少是一个大问题。

BeeLine 阅读器

🔗 http://www.beelinereader.com/
阅读评论

尝试通过对文本行应用颜色渐变来使屏幕阅读更容易。 例如,一行文本将逐渐变为红色,下一行将从红色开始,使您的眼睛更容易跳到正确的位置。 看起来很傻,但我试过几次,它确实让我阅读速度更快,更舒适。

我不确定为什么它必须全部是“版权所有”/“专利申请中”等等。 我想,如果这个想法是开放的,而公司通过对这个想法的良好实现(例如付费应用程序组件)来赚钱,那将更有利于世界。

强制浮动元素旁边元素的边距/填充

🔗 http://perishablepress.com/margin-list-floated-image/
阅读评论

Jeff Starr 解释了一个经典的 CSS 布局问题,并建议了一个解决方案。 正是溢出 做到了,通过触发我认为称为新的块级格式化上下文的内容。

CSS 从“auto”动画

🔗 http://n12v.com/css-transition-to-from-auto/
阅读评论

我毫不怀疑 CSS 将有一天允许这样做,但现在,您无法将元素的宽度或高度从固定值动画到 auto。 当希望从隐藏动画到可见(例如 jQuery 的 slideDown())时,这特别有用。 Nikita Vasilyev 展示了如何使用一点 JS 来做到这一点,但仍然使用 CSS 进行实际的动画/过渡。

更难的是 到 auto:1) 测量宽度 2) 设置 auto 3) 再次测量 4) 设置回之前的值 5) 强制重绘 6) 应用过渡 7) 将宽度更改为测量的 auto 值 8) 真正设置到 auto。 #wipesbrow

是的,有 max-height/width 技术,但我不是粉丝。 它会弄乱过渡时间,并且需要魔法数字。

Tridiv

🔗 http://tridiv.com/
阅读评论

Julian Garnier 的一个 Web 应用程序,用于在 CSS 中构建和操作 3D 形状创作。 界面很天才。 一个面板从一个角度向您展示创作,这样您就可以看到它的 3D 效果,并将其旋转。 其他三个面板从不同的正面角度向您展示创作,这样您就可以在相关方向上拖动它们。

如果您还没有印象,查看演示。

在预览模式下,有一个按钮,您只需单击一下即可 将其 移动到 CodePen。 怎么样?

页面顶部 CSS

🔗 http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/
阅读评论

页面上最重要的 CSS 是什么? 影响您立即看到的内容的样式。 很有可能,这比您的整个样式表少得多。 如果您可以立即提供仅此 CSS,而不是您的整个(阻塞)样式表,那会怎样? Paul Kinlan 分享了一个想法。

让我们 <cite> 人们

🔗 http://www.brucelawson.co.uk/2013/on-citing-quotations-again/
阅读评论

Bruce Lawson

我再次建议将 <cite> 的定义恢复为包含标记引用者的名称的实际使用,并且规范指出引用内部的引用是将引用与引用的作品或人联系起来的一种方式(尽管不是唯一的方式)。

+1

牛车道已经被铺平了,所以我们只需要把它踩实就可以了。

不要在您的样式表中咒骂

🔗 http://dt.deviantart.com/journal/We-Give-a-F-How-the-Site-Loads-392679726
阅读评论

来自 deviantART 的 Aimee Ault 发现他们的某些样式表无法加载到某些用户。 原来,这些用户正在

从安装了过度敏感的系统范围的脏话过滤器的计算机访问该网站。 这些用户的浏览器很可能在遇到样式表中的词语时就停止解析样式表,从而导致页面变得相当难看和/或损坏。

理想情况下,您有一个构建系统来压缩 CSS 并删除注释,但如果由于某种原因您发布了包含注释的 CSS,那么不要咒骂。

使用 WebGL 添加 3D 效果

🔗 http://html5hub.com/using-webgl-to-add-3d-effects-to-your-website/
阅读评论

由 Guillaume Lecollinet 制作的 此演示 感觉超级未来。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 160
  • 161
  • 162
  • ...
  • 219
  • 旧的

CSS-Tricks 由 DigitalOcean 提供支持。

关注 web 开发的最新动态

使用我们精心制作的时事通讯

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

© 2024 . All rights reserved.