相对于另一个元素定位元素
阅读评论
目前在 CSS 中不可行,但正在讨论类似以下的语法
.el {
position: element(#target)
}
当然,有很多细节、陷阱和边缘情况,但听起来很有可能。
来自网络各处我们正在阅读并有一些想法的内容。有没有我们应该知道的链接?告诉我们!
目前在 CSS 中不可行,但正在讨论类似以下的语法
.el {
position: element(#target)
}
当然,有很多细节、陷阱和边缘情况,但听起来很有可能。
Chrome 取消了position: sticky;
,但 Firefox 和 Safari 仍然保留了它。Dudley Storey 展示了如何实现常见的侧边栏模式,其中一段内容在您向下滚动时跟随您,但仅在有空间时才显示。他使用 CSS 完成了此操作,并且演示使用stickyfill补充了支持。
Chris Ruppel 使用will-change
修复了一个真实的滚动问题。
我以为我们应该仅通过 JavaScript 应用/删除 will-change 吗?或者滚动是否不同,因为始终存在滚动的可能性并且没有本机的 scrollEnd 事件?
Rachel Andrew 提醒我们,新的 CSS 布局方法赋予我们的力量可能会被用来形成新的反模式。
能力越大,责任越大。正如开发人员可以从一个结构良好、语义化的文档开始,并使用 Grid 和 Flexbox 来满足设计需求一样,他们也可能完全不再关心文档结构。更糟糕的是,我相信,尤其是在 Grid 中,会有一种强烈的诱惑,将文档结构扁平化,以便所有元素都成为声明了 Grid 的元素的子元素。使布局变得简单,但代价是什么?
Guil Hernandez 介绍了使用非常简单的 HTML 和 CSS 的全新scroll-snap-*
属性,滑块(具有良好的用户体验)将多么容易实现。CSS 最近发展得相当快,像这样的特性从“从未听说过”变成了
…CSS 滚动捕捉点的浏览器支持仅限于 IE10+ 和 Firefox 39+。但看起来 Safari 9 将包含支持,您可以在 Chrome Canary 中启用滚动捕捉点。
在你意识到之前。Chrome 的支持意味着它将逐渐普及到 Opera 和 Android,Safari 的支持意味着它将逐渐普及到 iOS,因此很快将在整个平台上获得非常稳定的支持。
从用户的角度查看您的网站。
FullStory 精确记录每个客户会话在浏览器中的呈现方式——解锁像素级回放、DOM 和控制台检查、任何页面元素或交互的可搜索性等等。
观察和了解真实用户如何与您的网站交互。超越分析,了解客户为什么没有采取预期操作,或者准确地排除问题会话,而无需在事后重新创建错误。查看获得完整故事的感觉,免费试用 14 天。
脱颖而出。在今天提高您的技能,并了解您在一两年内将如何完成工作。An Event Apart——为网站制作人员准备的三天设计、代码和内容盛宴——是响应式设计和移动优先等理念诞生的场所,也是今年的与会者已经学习网格布局、CSS 形状和其他高级技术将如何从根本上改变……好吧,一切。不要错过!
在即将到来的芝加哥展会上,Dave Rupert 和我将在舞台上进行现场 ShopTalk Show!我们正在收集问题,专门用于此活动。
嘿。我听说你喜欢 CSS 技巧。你可能也会喜欢 Louis Lazaris 的这些 CSS 事实。
而且我敢打赌,你也会喜欢 Lea Verou 的新书CSS Secrets。
此版本中有很多很棒的东西,例如动画利用了requestAnimationFrame。
不过,您应该在升级之前进行认真的测试。不仅因为这是 alpha 版本,还因为.show()
和.hide()
现在的工作方式大不相同。它们不会做任何花哨的事情来与 CSS 配合使用或将元素恢复到隐藏之前的显示类型。这些是使用非常广泛的方法。很有可能您的代码库中有一些。
最佳实践已成为:根本不要使用这些方法,只切换处理元素可见性的类。
我加入了 Saron Yitbarek 的播客,我们进行了精彩的对话,讨论了我的一些历史和正在进行的项目。