Progressive Enhancement/Graceful Degradation에서 중복성의 역할을 어떻게 해결해야합니까?

Question

이 질문은 placeholder 텍스트의 모범 사례에 대한 다른 질문에 inputs 및 textareas이라는 질문에 답변 할 때 발생했습니다.

HTML5 placeholder을 사용하는 것이 가장 좋습니다. 그러나 현재로서는 자바 스크립트를 사용하는 오래된 브라우저의 경우 성능이 저하 된 솔루션을 추가해야합니다. 여기

JsFiddle : http://jsfiddle.net/leifparker/DvqYU/16/

문제는입니다 : 둘 다 거의 정확하게 같은 일을 수행하기 때문에, 왜 모두 포함 귀찮게? 자바 스크립트 전용 솔루션을 활용하는 것이 왜 보편적으로 받아 들여질 때까지 HTML5 구현을 포기할 필요가 있을까요?

HTML5 placeholder 속성과 hasPlaceholderSupport() 기능을 추가하면 상당히 적은 라인 (4)을 추가 할 수 있지만 저하 된 지원이 필요하기 때문에 점진적 중복을 걱정할만한 이유가 있습니까?

나는 양쪽에 합리적인 근거가 있으며, 나는 그것을 듣고 싶어합니다.

미리 감사드립니다.

Answer 1

귀찮은 이유가 있습니다. 시간이 갈수록 모든 브라우저가 자리 표시 자 속성을 지원할 것으로 예상됩니다. 현재는 just a few browsers do not support it (가장 중요한 것은 , IE 9는 열등하고 Android 브라우저)입니다. 따라서 결국 자리 표시 자 대체 코드가 필요하지 않게됩니다. 모든 브라우저에서 스크립트를 사용하여 웹 사이트를 출하하면 몇 년 안에 완전히 필요하지 않게됩니다.

대신, 필요한 경우에만 자바 스크립트 솔루션에 다시 하락에 대한 특징 검출을 사용하여 :

1. 당신은 불필요 이미 자리 표시 자 속성을 지원하는 브라우저에서 자바 스크립트 코드의 비트를 실행하지 마십시오.
2. 필요한 경우 대체 바이트 만 저장하여 폴백 스크립트를로드 할 수 있습니다.

이것은 Modernizr 및 yepnope.js (Modernizr에 포함)와 같은 라이브러리가 이미 수행 한 것입니다. 나는 모더 나이저를 사용하고 placeholder-polyfill.js 파일로 자리 polyfill를 추출 권하고 싶습니다, 그래서 당신의 코드는 다음과 같을 수 있습니다 :

Modernizr.load({ 
    test: Modernizr.placeholder, 
    nope: 'placeholder-polyfill.js' 
}); 

그냥 yepnope.js이 원하는 자신의 특징 검출 기능 (들)을 실행하는 경우 :

를

yepnope({ 
    test: hasPlaceholderSupport(), 
    nope: 'placeholder-polyfill.js' 
}); 

이렇게하면 대부분의 브라우저에서 리소스로드를 줄이고 성능을 향상시킬 수 있습니다. 앞으로 모든 브라우저는 테스트를 통과하여 성능을 향상시킬 것입니다. 그런 다음 yepnope.js/Modernizr 호출을 제거하면됩니다.

현대적인 브라우저의 기능을 이미 활용하면서 코드를 미래 보장하는 것에 대한 생각이 더 많습니다.

Answer 2

필자가 볼 때 얻을 수있는 점은 필요할 때만 jsFiddle을로드 할 수 있다는 것입니다. 이렇게하면로드에 소요되는 시간을 절약하고 추가 코드를 파싱하고 실행할 수 있습니다. 페이지가 더 빨리로드되고 기본 html5 지원이 JavaScript에서 에뮬레이트하는 것보다 빠릅니다.