【译】媒体查询特性 - 适应用户偏好 | perfers-reduced-motion | prefers-color-scheme | Save data

简介: 【译】媒体查询特性 - 适应用户偏好 | perfers-reduced-motion | prefers-color-scheme | Save data


为了践行新的一年能翻译12+的国外技术博客文章的目标,今天就让我们开始第一篇。

本篇文章翻译自一位专注于H5、CSS、web性能的自由开发者: Michael Scharnagl。

译者引言:

当我们在使用APP时,我们在 设置中常会发现这么一项操作:如无图模式夜间模式等等,这些设置项来自对用户偏好的考量。为了打造轻应用的进展中,在web中也将逐步实现这样的特性。今天,我们就来了解一下关于在web中打造用户偏好的特性。

适应用户偏好

在过去的几年里,浏览器实现了各种功能,可以使用CSS、JavaScript或检查服务器端的首选项来响应web上的用户偏好。在本文中,将展示浏览器当前公开的用户偏好、处理它们的最佳方式,以及对未来的展望,以了解可能很快就会出现什么。

perfers-reduced-motion

让我们从减少运动媒体查询perfers-reduced-motion)开始。这项特性是在Safari10.1中引入的,目前在Safari、IOS Safari、Firefox和Chrome的最新版本中得到支持。

perfers-reduced-motion这项特性被用于检测用户是否需要系统将其使用的动画或运动最小化。你可以用下面的方式检测:

@media (perfers-reduced-motion: reduce) {
    /* disable animations/transitions 禁用动画或过渡*/ 
}

或者使用另一种方式:

var motionQuery = matchMedia('(perfers-reduced-motion)');
function handleReduceMotionChanged() {
  if (motionQuery.matches) {
    /*disabled animations/transitions 禁用动画或过渡*/
  }else {
    /*enable animations/transitions 开启动画或过渡*/
  }
}
motionQuery.addListenet(handleReduceMotionChanged);
handleReduceMotionChanged();

但是,对所有CSS 动画(animation)和过渡(transition)禁用perfers-reduced-motion:reduce的方式是:

@media (perfers-reduced-motion: reduce) {
    * {
      transition: none !important;
      animation: none !important;
    }
}

但是,这样做并不会触发动画开始/结束事件或关键帧(animation start/end events or keyframe states)状态。所以,如果你的代码依赖于这些事件,你还需要这么做:

@media (perfers-reduced-motion: reduce) {
    * {
      transition-duration: 0.1s !important;
      animation-duration: 0.1s !important;
    }
}

这样做的好处就是,即使用户喜欢 perfers-reduced-motion,你也能对部分元素使用animation或transition

这里,我们推荐您阅读 这篇文章 : Designing Safer Web Animation For Motion Sensitivity 作者介绍了关于何时应该使用animation/transition。

prefers-color-scheme

另一个用户偏好 是媒体查询中的prefers-color-scheme特性。目前Safari12.1和Firefox67均已得到支持(2019年3月10日)。

perfers-color-scheme这项特性很可能在MacOS的Dark/Light模式中比较熟悉。

例如,你可是在CSS中使用下面如下的方式来检查用户是否喜欢Dark模式。而对于Light模式,perfers-colors-scheme的默认值就是light

@media (perfers-color-scheme: dark) {
  /* adust style for dark mode 调整为Dark模式*/
}

同时,你可以使用js检测:

var colorSchemeQuery = matchMedia('(perfers-color-schme:dark)');
function handleColorsSchemeChanged() {
  if(colorSchemeQuery.matches) {
    /* dark mode*/
  }else {
    /* light mode */
  }
}
colorSchemeQuery.addListener(handleColorSchemeChanged);
handleColorsSchemeChanged()l

关于Dark 模式的设计,你可以阅读这篇文字 : designing for dark mode

Save data

接下来,我们看看 SaveData这个请求头

用户可以在他们的浏览器中激活 SaveData 模式。而如果当用户启用这项模式时,开发人员可以设法提供系统字体而不是Web字体,或提供低分辨率图像而不是高分辨率图像等等,这样我们就能够提供一个轻应用的方式。

我们通过js方式检测:

if("connection" in navigator) {
  if (navigator.connection && navigator.connection.saveData === true) {
    // saveDate 模式 开启 - 不要假装高分辨率图像或网页字体等**重资源**
  }
}

或者使用服务端程序进行检测。例如PHP的方式是:

if (isset($_server[”HTTP_SAVE_DATA“]) && strtolower($_SERVER["HTTP_SAVE_DATA"])=== "on") {
  // 检测到 'Save-Data'
  $saveData = true; 
}

目前,还没有针对Save-Data的媒体查询。

更多关于快速和轻应用程序的信息与保存数据,推荐这篇文字。

Do Not Track

这也是一项请求头特性。由于这项特性会跟踪用户,所以在Safari Technology Preview 75中被禁用了。同时,不确定其他浏览器是否也会禁用这项功能。

你可以使用js检测它:

var doNotTrack = (navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1" || window.doNotTrack === "1");
if (!doNotTrack) {
  /* 如果确实需要track,请加载分析*/
}

或者使用服务端程序进行检测。例如PHP的方式是:

$donottrack= (isset($_SERVER['HTTP_DNT']) && $_SERVER['HTTP_DNT'] == 1); 
if (!$donottrack) {
  echo 'embed analytics script if you really need to'; 
}

展望

把决定权交给用户

如果您尊重用户的偏好,那么您还应该确保用户可以在您的站点上重新设置它,这是非常好的。一般情况下,用户可能更喜欢暗模式,但您的站点上可能更喜欢亮模式——所以您应该有一个设置来更改主题,并使用该设置覆盖浏览器公开/默认的一般用户设置。同时,总是要确保用户可以很容易地找到这些设置。

下一步

从媒体查询 Level 5这个阶段开始,我们可以看到接下来浏览器将会出现什么功能支持用户偏好。

如:inverted-colorsperfers-reduced-transparencyperfers-contrast

正如你所看到的,目前有各种各样的方法来调整你的网站,以满足用户的偏好,在未来还会有更多的方法。这一特性有助于提高可访问性、性能和隐私,当您适应这些特性时,您可以让您的用户满意。

@ 本篇译文地址

参考



相关文章
|
6月前
|
监控 前端开发 JavaScript
前端 viewport 在 Image lazy loading 场景中扮演的作用
前端 viewport 在 Image lazy loading 场景中扮演的作用
|
6月前
|
设计模式 编译器 API
【C/C++ Pimpl模式】隐藏实现细节的高效方式 (Pimpl Idiom: An Efficient Way to Hide Implementation Details)
【C/C++ Pimpl模式】隐藏实现细节的高效方式 (Pimpl Idiom: An Efficient Way to Hide Implementation Details)
463 1
|
3月前
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
36 4
|
5月前
|
UED Python
如何使用Pygame的display模块显示文本?
【6月更文挑战第11天】如何使用Pygame的display模块显示文本?
74 6
|
4月前
|
前端开发
前端 CSS 经典:mix-blend-mode 属性
前端 CSS 经典:mix-blend-mode 属性
30 0
SAP UI5 Responsive Grid Layout 里的 Label-Field Ratio 在屏幕类型 S 下的表现
对于 SAP UI5 SimpleForm 的每种尺寸,我们可以定义用于标签(labelSpanXL、labelSpanL、labelSpanM、labelSpanS)、字段(隐式)和空网格列(emptySpanXL、emptySpanL、emptySpanM、emptySpanS)的网格列数。
|
JavaScript 开发者
动画-transition-group 中 appear 和 tag 属性的作用|学习笔记
快速学习动画- transition-group 中 appear 和 tag 属性的作用
266 0
动画-transition-group 中 appear 和 tag 属性的作用|学习笔记
|
算法 Swift iOS开发
高级 SwiftUI 动画 — Part 1:Paths
在本文中,我们将深入探讨一些创建 SwiftUI 动画的高级技术。我将广泛讨论 Animatable 协议,它可靠的伙伴 animatableData,强大但经常被忽略的 GeometryEffect 以及完全被忽视但全能的 AnimatableModifier 协议。
220 0
高级 SwiftUI 动画 — Part 1:Paths
|
Java iOS开发 MacOS
高级 SwiftUI 动画 — Part 3:AnimatableModifier
之前的两篇文章animating paths 和 transform matrices 对 Animatable 协议使用做了介绍,今天这篇文章将为大家介绍 AnimatableModifier,使用它可以完成更多的动画工作。
137 0
|
开发工具
高级 SwiftUI 动画 — Part 2:GeometryEffect
在本系列的第一部分,我介绍了Animatable协议,以及我们如何使用它来为路径制作动画。接下来,我们将使用一个新的工具: GeometryEffect,用同样的协议对变换矩阵进行动画处理。如果你没有读过第一部分,也不知道Animatable协议是什么,你应该先读一下。或者如果你只是对GeometryEffect感兴趣,不关心动画,你可以跳过第一部分,继续阅读本文。
141 0
高级 SwiftUI 动画 — Part 2:GeometryEffect