html

기능을 테스트해야한다는 데 동의하지만 ” ‘최신 브라우저’에서 지원하지만 ‘이전 브라우저’는 지원하지 않는 기능은 무엇입니까?”에 대한 간단한 답을 찾기가 어렵습니다.

그래서 여러 브라우저를 실행하고 Modernizer를 직접 조사했습니다. 꼭 필요한 몇 가지 기능을 추가 한 다음 “inputtypes.color”를 추가했습니다. Chrome, Firefox, Opera, Edge … 그리고 IE11이 아닌 모든 주요 브라우저를 포함하는 것 같기 때문입니다. 이제 사용자가 Chrome / Opera / Firefox / Edge를 사용하는 것이 더 나을 것이라고 부드럽게 제안 할 수 있습니다.

이것이 제가 사용하는 것입니다. 특정 사례에 대해 테스트 할 항목 목록을 편집 할 수 있습니다. 누락 된 기능이 있으면 false를 반환합니다.

/**
 * Check browser capabilities.
 */
public CheckBrowser(): boolean
{
    let tests = ["csstransforms3d", "canvas", "flexbox", "webgl", "inputtypes.color"];

    // Lets see what each browser can do and compare...
    //console.log("Modernizr", Modernizr);

    for (let i = 0; i < tests.length; i++)
    {
        // if you don't test for nested properties then you can just use
        // "if (!Modernizr[tests[i]])" instead
        if (!ObjectUtils.GetProperty(Modernizr, tests[i]))
        {
            console.error("Browser Capability missing: " + tests[i]);
            return false;
        }
    }

    return true;
}

그리고 여기에 “inputtypes.color”에 필요한 GetProperty 메소드가 있습니다.

/**
 * Get a property value from the target object specified by name.
 *
 * The property name may be a nested property, e.g. "Contact.Address.Code".
 *
 * Returns undefined if a property is undefined (an existing property could be null).
 * If the property exists and has the value undefined then good luck with that.
 */
public static GetProperty(target: any, propertyName: string): any
{
    if (!(target && propertyName))
    {
        return undefined;
    }

    var o = target;

    propertyName = propertyName.replace(/\[(\w+)\]/g, ".$1");
    propertyName = propertyName.replace(/^\./, "");

    var a = propertyName.split(".");

    while (a.length)
    {
        var n = a.shift();

        if (n in o)
        {
            o = o[n];

            if (o == null)
            {
                return undefined;
            }
        }
        else
        {
            return undefined;
        }
    }

    return o;
}