如何检测CSS代码是否激活及Flex布局是否正常工作

Hey there! Let's tackle your questions one by one, since they're all related to browser compatibility and CSS feature detection:

有几种可靠的方法可以验证目标CSS规则是否生效：

• 检查计算样式：使用window.getComputedStyle()获取元素实际渲染后的样式，再与预期值对比。示例：

const testElement = document.querySelector('.target-element');
const computedStyle = window.getComputedStyle(testElement);
// 假设你的CSS设置了 .target-element { color: #ff0000; }
if (computedStyle.color === 'rgb(255, 0, 0)') {
  console.log('目标CSS已激活生效');
} else {
  console.log('目标CSS未正常生效');
}

• 利用CSS变量（如果适用）：如果你使用了自定义属性，可以直接检查其解析后的值：

const varValue = window.getComputedStyle(testElement).getPropertyValue('--primary-color');
if (varValue.trim() === '#ff0000') {
  // CSS变量已正确应用
}

考虑到你需要兼容IE 10及以下（仅支持带前缀的-ms-flexbox实现），检测逻辑需要覆盖标准Flexbox和旧IE变体：

• 原生JS检测函数：创建临时元素，应用Flexbox属性，检查浏览器是否能识别：

function isFlexboxSupported() {
  const testDiv = document.createElement('div');
  // 同时测试标准flex和IE的前缀版本
  testDiv.style.display = 'flex';
  testDiv.style.display = '-ms-flexbox';
  // 如果display属性不为空，说明浏览器支持至少一种Flex变体
  return testDiv.style.display !== '';
}

// 使用示例
if (isFlexboxSupported()) {
  console.log('Flex布局可正常工作');
} else {
  console.log('当前浏览器不支持Flex布局');
}

• 现代浏览器快捷方式：CSS.supports：针对较新的浏览器，可以直接用内置的特性检测API：

const flexSupported = CSS.supports('display', 'flex') || CSS.supports('display', '-ms-flexbox');

注意：IE 10的-ms-flexbox和标准Flexbox存在差异（比如属性名不同，如-ms-flex-direction）。如果需要完整的标准Flexbox支持，可以扩展检测逻辑，比如检查flex-direction等具体属性是否被识别。

完全可以实现！结合上面的Flex检测函数，当检测到不支持时，动态插入提示元素即可：

原生JS实现 #

// 等待页面加载完成后再执行检测
window.addEventListener('DOMContentLoaded', () => {
  if (!isFlexboxSupported()) {
    // 创建提示横幅
    const alertBanner = document.createElement('div');
    alertBanner.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #dc3545;
      color: white;
      padding: 1rem;
      text-align: center;
      z-index: 9999;
      margin: 0;
    `;
    alertBanner.textContent = '您的浏览器版本过旧，请下载新版本';
    document.body.prepend(alertBanner);
  }
});

jQuery实现 #

如果你使用jQuery，代码可以更简洁：

$(document).ready(() => {
  if (!isFlexboxSupported()) {
    $('<div>', {
      css: {
        position: 'fixed',
        top: '0',
        left: '0',
        width: '100%',
        backgroundColor: '#dc3545',
        color: 'white',
        padding: '1rem',
        textAlign: 'center',
        zIndex: '9999',
        margin: '0'
      },
      text: '您的浏览器版本过旧，请下载新版本'
    }).prependTo('body');
  }
});

内容的提问来源于stack exchange，提问作者SenTisso