118
你有没有开过一个网站,开始阅读,经过一段时间后,所有资产都已完成加载,你发现你丢失了你的滚动位置?我每天都经历这种情况,尤其是在我的移动设备上通过慢速连接进行冲浪时 - 这是一种令人沮丧和分心的经历。
每次浏览器必须重新计算文档中元素的位置和几何时,都会发生重排。当新的DOM元素添加到页面,图像加载或元素的维度发生变化时,会发生这种情况。在本文中,我们将分享技术,以尽量减少这种内容转移。
加载网站时,需要一些时间才能加载图像并且浏览器能够计算所需的空间。以节流设置为3G录制的以下GIF演示了该效果。
避免这种情况的一种方法是为所有图像设置固定的宽度和高度,但这对于响应式网站来说并不实用,因为我们希望图像和视频适应可用空间。
使用固有比率(也称为padding-bottom黑客),我们可以定义媒体占用的大小。
获取值的公式padding-bottom是:
(height of the asset / width of the asset) * 100(%)
如果我们的图像宽度为1600像素,高度为900像素,则值为:
(900 / 1600) * 100(%) = 56.25%
这是一个Sass mixin,我们可以用来定义图像,视频,iframe,对象和嵌入内容的宽高比。
@mixin aspect-ratio($width, $height) { position: relative; padding-bottom: ($height / $width) * 100%; img, video, iframe, object, embed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }}
.ratio-sixteen-nine { @include aspect-ratio(1600, 900);}
<figure class="ratio-sixteen-nine"> <img src="waterfall.jpg" alt="Waterfall in Iceland"></figure>
为了使体验更好,我们可以通过向包装器添加背景来设置占位符的样式。
figure { background: #ddd url(camera-icon.svg) no-repeat center center;}
对于图像,我们可以使用图标向用户指示将显示图像。通过实现宽高比占位符,用户可以决定是等待图像还是继续阅读,而不会丢失当前的滚动位置。
除了媒体内容之外,您的网站可能正在使用通过JavaScript添加的小部件或第三方内容,如果处理不当,也会转移内容。
虽然现在很多网站都有响应,但大多数广告仍有固定的尺寸。对于响应式网站,我们可以在HTML中使用占位符,如果它们与指定的屏幕大小匹配,我们会在其中加载预定义的广告。
/* On small screens show 320x250 banner */@media all and (max-width: 500px) { .ad-container-s { width: 320px; height: 250px; }}/* On medium screens show 728x90 banner */@media all and (min-width: 800px) { .ad-container-m { width: 728px; height: 90px; }}
在我们的示例中,我们有一个中矩形(300×250)和一个排行榜(728×90)。在小屏幕上,我们将显示矩形,而在更大的屏幕上,我们将显示排行榜。通过为占位符设置固定尺寸,广告的加载不会触发内容转移。
许多人永远不会看到广告,只会看到空占位符,因为他们会使用广告拦截器,或广告不会出于其他原因。因此,您应该为占位符设置样式,以指示通常有广告。如果您已使用广告拦截器检测脚本,则可以使用消息或产品宣传替换占位符。
如果广告的劣势较少,用户甚至可能会重新考虑在您的网站上使用广告拦截器 - 这会分散注意力。
对于其他小部件,我们可能事先不知道它们的确切大小,但我们可以定义小部件所需的最小高度。
.widget { min-height: 400px;}
通过使用min-height,我们将为大多数情况保留足够的空间,并在窗口小部件需要更多空间时避免大的跳跃。
找到合适的尺寸min-height需要一些时间,但用户会感谢他们的阅读体验没有突然中断。
字体具有不同的x高度。因此,我们的后备字体和Web字体将占用不同的空间量。
目前,加载Web字体的一个最佳实践是使用Font Face Observer脚本来检测何时加载了字体,以便之后可以在CSS中应用它。
在此示例中,一旦Web字体可以使用,我们就将webfont-loaded该类应用于该html元素。
var font = new FontFaceObserver('Lato');font.load().then(function () { document.documentElement.className += " webfont-loaded";});
在CSS中,我们在成功加载后应用Web字体。
p {font-family: sans-serif;}.webfont-loaded p {font-family: 'Lato', sans-serif;}
当web字体最终完成加载时,我们会注意到快速跳转。为了最大限度地减少这种情况,我们可以修改后备字体的x高度,以尽可能地匹配Web字体,从而减少跳跃。
该font-size-adjust属性允许您指定使用后备字体时的最佳宽高比。对于大多数字体,比率介于0.3和0.7之间。
要为您的网络字体找到正确的宽高比,我建议您将浏览器设置为并排显示两个段落,一个使用网络字体,另一个使用后备字体,然后使用浏览器的开发人员工具调整属性。
p { font-size-adjust: 0.5;}
因为font-size-adjust目前仅支持 Firefox和Chrome(标志后面),我们可以使用letter-spacing和组合line-height来调整其他浏览器中后备字体的大小。
p { font-family: sans-serif; font-size: 18px; letter-spacing: 1px; line-height: 0.95;}/* Older browsers */p { letter-spacing: 1px; line-height: 0.95;}/* If browser supports font-size-adjust, use this */@supports (font-size-adjust: none) { p { letter-spacing: 0; line-height: 1; font-size-adjust: 0.59; }}/* Once the web font has loaded, apply this */.webfont-loaded p { font-family: 'Lato', sans-serif; letter-spacing: 0; line-height: 1;}
在这里,我们首先定义letter-spacing并line-height作为后备,我们正在使用@supports功能检测,然后font-size-adjust在支持时应用。
我们不会为所有字体提供完美的解决方案,但它会在字体更改时最大限度地减少分心。
到目前为止,我们已经介绍了媒体,小部件和字体,但是当应用主布局的CSS时,内容也会发生变化。
如Jake Archibald所示,Flexbox 可以导致水平移动。
使用flexbox时,内容控制布局的显示方式,而使用网格布局时,将根据网格定义显示布局。因此,使用网格作为主要布局更好。
如果您在具有良好Internet连接的快速计算机上进行开发,您可能不会看到内容转移,但是在慢速连接上进行冲浪的用户将会。
.wrapper { display: flex;}.sidebar { flex: 1 1 30%;}.content { flex: 1 1 70%;}/* Use grid instead of flexbox if supported */@supports (display: grid) { .wrapper { display: grid; grid-template-columns: 30% 70%; } .sidebar { grid-column: 1; } .content { grid-column: 2; }}
目前对CSS网格布局的支持并不是很好,但是在Safari 10发布的下个月它将会增加,而基于Firefox和Blink的浏览器可能会默认启用它。为了面向未来,我们应该使用flexbox作为基础,并在支持的情况下增强网格布局的体验。
根据用户交互更改CSS属性通常会导致水平移位。使用其他CSS属性可以避免这种情况。
更改文本的字体粗细时,元素的大小将发生变化,并且会发生内容转换。
a:hover, a:focus { font-weight: bold;}@supports (text-shadow: none) { a:hover, a:focus { font-weight: normal; text-shadow: 1px 0 0 currentColor; }}
重绘text-shadow可能在计算上比更改更密集font-weight,但它是在更改为较重的文本时防止跳转效果的唯一方法。
我们再一次使用特征检测来text-shadow代替font-weight用户的交互。由于@supports支持的浏览器数量较少text-shadow,我们还可以考虑使用Modernizr检测该功能并在所有支持的浏览器中应用此改进。
小细节往往会带来很好的体验。您的用户将会欣赏避免的每一次内容转移。
现在您已经了解了避免内容跳转的方法,您可能想知道为什么浏览器无法更有效地阻止内容跳转。
Chrome团队最近推出了滚动锚定功能。
滚动锚定是一种建议的干预措施,可调整滚动位置以减少可见内容跳跃。
目前,滚动锚定仅适用于Chrome中的实验性标记,但其他浏览器供应商已表现出兴趣并希望将来能够实施。
如您所见,有许多解决方案可以避免页面加载的跳跃效应。是的,实现所有这些技术需要一些时间,但这是完全值得的 - 直到更多浏览器支持滚动锚定。
如果你花时间通过使用上面提到的技术来避免跳跃 - 定义占位符,保留空间和准备回退 - 那么用户将有一个不那么讨厌的体验,并且能够不受干扰地享受你的内容。
您如何最大限度地减少网站上的内容转移?你有没有发现任何防止跳跃效果的技巧或技巧?
热门分享
最新文章
2019.10.25
东莞企业网站开发:GoogleAdWords针对特定的投资提供可靠流量
2019.10.12
东莞做网站:一个网站需要多少页呢?
2019.10.12
东莞高端网站建设:自由职业技巧来构建你的客户基础
2019.09.11
东莞手机网站建设:螺旋桨框架结合引导&谷歌材料设计
2019.08.23
东莞公司网站设计:用户体验设计和GDPR你需要知道的一切
2019.08.16
东莞企业网站建设:用户体验研究在产品开发中的价值
2019.08.16
东莞网站设计:在WordPress主题中使页脚响应
2019.08.16
东莞高端建站:时间感知如何影响交互设计
2019.08.16
东莞网站制作:如何聘请网页设计师或设计公司
2019.08.16
东莞网站定制:使用CSS和JavaScript创建SVG动画
随机推荐
2019.08.13
东莞网站制作:利用个性化技术推动应用程序参与
2019.08.16
东莞网站制作:如何聘请网页设计师或设计公司
2019.08.14
东莞网站优化:11个电子邮件通讯设计技巧提升点击次数和参与度
2019.08.13
东莞网站开发:使用故事结构更好地参与
2019.08.14
东莞企业网站开发:如何在营销中创造紧迫感以促进转换
2019.08.15
东莞网站优化:什么是SEO优化?
2019.08.14
东莞网站建设:促进销售的15个智能电子商务个性化示例
2019.08.12
东莞网站建设:如何创建一个有用的,更好的404页面
2019.08.13
东莞网站制作:如何了解您的用户
2019.08.09
东莞网站开发:WordPress优化的详细指南