浏览器支持与回退机制

浏览器支持与回退机制

1. 通过样式层叠提供回退样式
2. 添加辅助类（在根元素添加辅助类 如textshadow/no-textshadow）---或者使用@support，但@support也仅在支持其规则的浏览器生效慎用
3. js代码

可以通过检测样式属性是否支持来实现回退机制，是，则添加相应类名生效（检测属性值同理）

原理：浏览器解析css代码时，会丢弃无法使用部分

//测试是否支持属性，第二个参数为类名

function testProperty(property,className){

    let root = document.documentElement

    if(property in root.style){

        root.classList.add(className)

    }else{

        root.classList.add('no'+className)

    }

}
testProperty('height','hasHeight')

//测试是否支持属性值，(标签名，属性，属性值)

function testValue(label, property,value){

    let dummy = document.createElement(label)

    dummy.style[property] = value

    if(dummy.style[property]){

        return true

    }else{

        return false
    
    }

}

console.log(testValue('p','height','1px'))