发布于 由admin

CSS `Ambient Light Sensor API` 结合 `Custom Properties` 动态调整对比度

同学们，早上好！今天咱们聊点刺激的，把CSS和一些神奇的API揉在一起，搞点好玩的：用Ambient Light Sensor API结合Custom Properties，让网页的对比度像变色龙一样，根据环境光线自动调整！

第一节：开胃小菜 – Ambient Light Sensor API 是个啥？

简单来说，这玩意儿就像一个光线探测器，能告诉你的浏览器，现在周围有多亮。有了它，网页就能感知周围的光线强度。听起来是不是有点像科幻电影？

先别急着激动，咱们先看看怎么用它。不过要注意，这个API不是所有浏览器都支持，所以用之前最好检查一下。

if ('AmbientLightSensor' in window) {
  // 浏览器支持 Ambient Light Sensor API
  console.log('Ambient Light Sensor is supported!');
} else {
  // 浏览器不支持
  console.log('Ambient Light Sensor is NOT supported!');
}

这段代码就是个简单的“敲门砖”，看看AmbientLightSensor这个对象是否存在于window对象中。如果存在，就说明浏览器支持这个API，否则就只能遗憾地说“不支持”了。

如果浏览器支持，我们就可以创建AmbientLightSensor的实例了。

let sensor = new AmbientLightSensor();

sensor.addEventListener('reading', () => {
  console.log('Current light level:', sensor.illuminance);
});

sensor.addEventListener('error', event => {
  console.error(event.error.name, event.error.message);
});

sensor.start();

这段代码做了什么呢？

  1. let sensor = new AmbientLightSensor();: 创建一个新的AmbientLightSensor对象。这就相当于你买了一个新的光线传感器。
  2. sensor.addEventListener('reading', ...): 给传感器添加一个监听器，当传感器读取到新的光线数据时，就会触发这个监听器。sensor.illuminance就是当前的光照强度，单位是勒克斯（lux）。你可以把它理解为“亮度值”。
  3. sensor.addEventListener('error', ...): 别忘了处理错误！如果传感器出了什么问题，比如权限被拒绝，或者设备错误，这个监听器就会被触发。
  4. sensor.start();: 最后，启动传感器，让它开始工作。

这段代码会不断地在控制台输出当前的光照强度。你可以在不同的光线环境下测试一下，看看输出的值有什么变化。

第二节：主菜 – CSS Custom Properties 上场

CSS Custom Properties，又名CSS变量，是不是听起来很枯燥？别怕，它其实是个很好玩的东西，可以让你在CSS中定义变量，然后在其他地方引用这些变量。

:root {
  --contrast-level: 1; /* 默认对比度 */
}

.my-element {
  filter: contrast(var(--contrast-level));
}

这段代码做了什么？

  1. :root { --contrast-level: 1; }: 在:root选择器中定义了一个名为--contrast-level的CSS变量，并设置它的初始值为1。:root选择器代表文档的根元素，通常是<html>元素。这意味着这个变量在整个文档中都可以访问。
  2. .my-element { filter: contrast(var(--contrast-level)); }: 在.my-element选择器中，使用了filter: contrast()属性来调整元素的对比度。var(--contrast-level)就是引用我们刚刚定义的CSS变量。

现在，你可以通过修改--contrast-level的值来动态地调整.my-element元素的对比度。是不是感觉有点意思了？

第三节：灵魂伴侣 – Ambient Light Sensor API + CSS Custom Properties = 完美搭档

现在，我们把Ambient Light Sensor API和CSS Custom Properties这两个好伙伴拉到一起，让他们发挥更大的作用。

if ('AmbientLightSensor' in window) {
  const sensor = new AmbientLightSensor();

  sensor.addEventListener('reading', () => {
    const illuminance = sensor.illuminance;
    // 根据光照强度计算对比度
    let contrastLevel = calculateContrast(illuminance);

    // 更新 CSS Custom Property
    document.documentElement.style.setProperty('--contrast-level', contrastLevel);
  });

  sensor.addEventListener('error', event => {
    console.error(event.error.name, event.error.message);
  });

  sensor.start();
} else {
  console.log('Ambient Light Sensor is NOT supported!');
}

function calculateContrast(illuminance) {
  // 根据光照强度计算对比度的逻辑
  // 这是一个简单的例子，你可以根据自己的需求进行调整
  let contrast = 1;
  if (illuminance < 50) {
    contrast = 1.5; // 光线较暗时，增加对比度
  } else if (illuminance > 200) {
    contrast = 0.8; // 光线较亮时，降低对比度
  }
  return contrast;
}

这段代码做了什么呢？

  1. const illuminance = sensor.illuminance;: 获取当前的光照强度。
  2. let contrastLevel = calculateContrast(illuminance);: 调用calculateContrast()函数，根据光照强度计算出合适的对比度。
  3. document.documentElement.style.setProperty('--contrast-level', contrastLevel);: 使用document.documentElement.style.setProperty()方法，动态地更新<html>元素的--contrast-level CSS变量的值。

calculateContrast()函数只是一个简单的例子，你可以根据自己的需求来设计更复杂的计算逻辑。例如，你可以使用一个映射表，将不同的光照强度范围映射到不同的对比度值。

function calculateContrast(illuminance) {
  // 光照强度和对比度的映射表
  const contrastMap = {
    0: 2,       // 极暗
    50: 1.5,    // 较暗
    100: 1.2,   // 一般
    200: 1,     // 较亮
    300: 0.8,    // 很亮
    500: 0.6     // 极亮
  };

  let contrast = 1; // 默认对比度

  // 找到最接近的光照强度值
  for (const threshold in contrastMap) {
    if (illuminance < threshold) {
      contrast = contrastMap[threshold];
      break;
    } else {
      contrast = contrastMap[threshold]; // 使用最后一个值作为默认值，当大于所有threshold时
    }
  }

  return contrast;
}

这个calculateContrast函数使用一个contrastMap对象，它将光照强度阈值映射到对应的对比度值。函数遍历contrastMap，找到第一个光照强度阈值大于当前光照强度值，然后使用对应的对比度值。如果光照强度大于所有阈值，则使用contrastMap中最后一个值作为默认对比度。

第四节：锦上添花 – 优化用户体验

光有了自动调整对比度的功能还不够，我们还可以做一些优化，让用户体验更好。

  • 平滑过渡: 使用CSS的transition属性，让对比度的变化更加平滑。
.my-element {
  filter: contrast(var(--contrast-level));
  transition: filter 0.3s ease-in-out; /* 添加过渡效果 */
}
  • 节流: AmbientLightSensor可能会频繁地触发reading事件，为了避免过度消耗资源，可以使用节流函数，限制事件触发的频率。
function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const now = Date.now();

    if (!timeoutId) {
      if (now - lastExecTime >= delay) {
        func.apply(this, args);
        lastExecTime = now;
      } else {
        timeoutId = setTimeout(() => {
          func.apply(this, args);
          lastExecTime = Date.now();
          timeoutId = null;
        }, delay - (now - lastExecTime));
      }
    }
  };
}

if ('AmbientLightSensor' in window) {
  const sensor = new AmbientLightSensor();

  const throttledReadingHandler = throttle(() => {
    const illuminance = sensor.illuminance;
    let contrastLevel = calculateContrast(illuminance);
    document.documentElement.style.setProperty('--contrast-level', contrastLevel);
  }, 200); // 200ms 节流

  sensor.addEventListener('reading', throttledReadingHandler);

  sensor.addEventListener('error', event => {
    console.error(event.error.name, event.error.message);
  });

  sensor.start();
} else {
  console.log('Ambient Light Sensor is NOT supported!');
}
  • 权限处理: AmbientLightSensor需要用户授权才能访问，所以要做好权限处理，当用户拒绝授权时，给出友好的提示。
if ('AmbientLightSensor' in window) {
  const sensor = new AmbientLightSensor();

  sensor.addEventListener('reading', () => {
    // ... (省略代码)
  });

  sensor.addEventListener('error', event => {
    if (event.error.name === 'NotAllowedError') {
      console.log('Permission to access sensor was denied.');
      // 显示提示信息，引导用户授权
    } else {
      console.error(event.error.name, event.error.message);
    }
  });

  sensor.start();
} else {
  console.log('Ambient Light Sensor is NOT supported!');
}

第五节：更上一层楼 – 扩展应用场景

除了调整对比度，我们还可以利用Ambient Light Sensor API和CSS Custom Properties做更多的事情。

  • 夜间模式: 根据环境光线自动切换夜间模式。
function calculateTheme(illuminance) {
  let theme = 'light'; // 默认主题

  if (illuminance < 50) {
    theme = 'dark'; // 光线较暗时，切换到夜间模式
  }

  return theme;
}

// 更新 CSS Custom Property
document.documentElement.style.setProperty('--theme', theme);
:root {
  --bg-color: #fff;
  --text-color: #000;
}

:root[style*='--theme: dark'] {
  --bg-color: #000;
  --text-color: #fff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

  • 动态调整亮度: 调整网页的亮度，让用户在不同的光线环境下都能获得最佳的阅读体验。

  • 节能模式: 当环境光线充足时，降低网页的功耗，延长设备的续航时间。

总结：

今天我们一起学习了如何使用Ambient Light Sensor API结合CSS Custom Properties来动态调整网页的对比度。虽然这个API还有一些兼容性问题，但是它代表了Web开发的未来方向：让网页更加智能，更加适应用户的环境。希望今天的课程能给大家带来一些启发，让大家在Web开发的道路上越走越远！

下面是一个表格，总结了今天讲到的关键点：

技术点 描述 示例代码
Ambient Light Sensor API 用于获取设备周围的光照强度。 javascript<br>if ('AmbientLightSensor' in window) {<br> const sensor = new AmbientLightSensor();<br><br> sensor.addEventListener('reading', () => {<br> console.log('Current light level:', sensor.illuminance);<br> });<br><br> sensor.addEventListener('error', event => {<br> console.error(event.error.name, event.error.message);<br> });<br><br> sensor.start();<br>} else {<br> console.log('Ambient Light Sensor is NOT supported!');<br>}<br>
CSS Custom Properties 也称为CSS变量，用于在CSS中定义和使用变量。 css<br>:root {<br> --contrast-level: 1;<br>}<br><br>.my-element {<br> filter: contrast(var(--contrast-level));<br>}<br>
动态调整对比度 结合Ambient Light Sensor API和CSS Custom Properties，根据环境光线自动调整网页的对比度。 javascript<br>if ('AmbientLightSensor' in window) {<br> const sensor = new AmbientLightSensor();<br><br> sensor.addEventListener('reading', () => {<br> const illuminance = sensor.illuminance;<br> let contrastLevel = calculateContrast(illuminance);<br> document.documentElement.style.setProperty('--contrast-level', contrastLevel);<br> });<br><br> sensor.addEventListener('error', event => {<br> console.error(event.error.name, event.error.message);<br> });<br><br> sensor.start();<br>} else {<br> console.log('Ambient Light Sensor is NOT supported!');<br><br>}<br><br>function calculateContrast(illuminance) {<br> let contrast = 1;<br> if (illuminance < 50) {<br> contrast = 1.5;<br> } else if (illuminance > 200) {<br> contrast = 0.8;<br> }<br> return contrast;<br>}<br>
优化用户体验 通过平滑过渡、节流和权限处理等方式，提升用户体验。 平滑过渡：<br>.my-element {<br> filter: contrast(var(--contrast-level));<br> transition: filter 0.3s ease-in-out;<br>}<br>

节流：使用throttle函数限制事件触发频率。

权限处理：监听error事件，处理NotAllowedError。
扩展应用场景 夜间模式、动态调整亮度、节能模式等。 夜间模式：根据光照强度切换主题。

各位，下课！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注