CSS3의 점진적인 향상과 점진적인 저하

CSS3의 등장 이후 점진적인 향상과 우아한 저하라는 두 가지 개념이 대중화되었습니다. 저급 브라우저는 CSS3를 지원하지 않지만 CSS3의 특수효과는 포기하기엔 너무 좋기 때문에 고급 브라우저에서는 CSS3를 사용하고 저급 브라우저에서는 가장 기본적인 기능만 보장합니다. 둘 다의 목적은 서로 다른 브라우저에서 서로 다른 경험에 초점을 맞추는 것이지만 초점이 다르기 때문에 워크플로우도 달라집니다.

점진적 개선: 처음부터 낮은 버전의 브라우저용 페이지를 구축하여 기본 기능을 완성한 다음 효과, 상호 작용 및 추가 기능을 위해 고급 브라우저를 대상으로 하여 더 나은 경험을 제공합니다.

Graceful Degradation: 처음부터 완벽하게 기능하는 사이트를 구축한 다음 브라우저에 맞게 테스트하고 수정합니다. 예를 들어 먼저 CSS3의 기능을 활용해 애플리케이션을 구축한 뒤, 점차적으로 주요 브라우저를 해킹해 하위 버전의 브라우저에서도 정상적으로 브라우징이 가능하도록 하는 식이다.

전통적인 소프트웨어 개발에서는 상향 호환성과 하위 호환성이라는 개념이 자주 언급됩니다. 점진적인 향상은 상위 호환성과 동일하고, 점진적 성능 저하는 하위 호환성과 동일합니다. 이전 버전과의 호환성은 상위 버전이 하위 버전을 지원하거나 이후 개발 버전이 이전 개발 버전을 지원하고 호환된다는 것을 의미합니다. 대부분의 소프트웨어는 이전 버전과 호환됩니다. 예를 들어 Office2010은 Office2007, Office2006, Office2005, Office2003 등에서 만든 Word 파일을 열 수 있지만 Office2003은 Office2007, Office2010 등에서 만든 Word 파일을 열 수 없습니다.

둘 사이의 차이점:

우아한 저하와 점진적인 향상은 동일한 것에 대한 두 가지 관점일 뿐입니다. 점진적인 저하와 점진적인 향상은 모두 동일한 웹 사이트가 다양한 기기의 다양한 브라우저에서 얼마나 잘 작동하는지에 중점을 둡니다. 주요 차이점은 각각이 주의를 집중하는 위치와 그 주의가 작업 흐름에 어떻게 영향을 미치는가입니다.

우아한 저하 관점은 웹사이트가 가장 발전되고 완전한 브라우저에 맞게 설계되어야 한다고 믿습니다. 개발 주기의 마지막 단계에서 "오래된" 것으로 간주되거나 기능이 누락된 브라우저에 대한 테스트를 준비하고 테스트 대상을 이전 버전의 주류 브라우저(예: IE, Mozilla 등)로 제한합니다. 이 디자인 패러다임에서 구형 브라우저는 "나쁨이지만 무난한" 브라우징 경험만 제공하는 것으로 간주되었습니다. 특정 브라우저에 맞게 약간의 조정을 할 수 있습니다. 그러나 그것들은 우리의 관심의 초점이 아니기 때문에 더 큰 버그를 수정하는 것 외에는 다른 차이점은 무시될 것입니다.

점진적 향상 관점에서는 콘텐츠 자체에 초점을 맞춰야 한다고 믿습니다. 차이점을 주목하세요. 저는 "브라우저"라는 단어도 언급하지 않았습니다. 콘텐츠는 우리가 웹사이트를 구축하도록 동기를 부여하는 요소입니다. 일부 웹사이트는 이를 표시하고, 일부는 수집하고, 일부는 검색하고, 일부는 운영하고, 일부 웹사이트는 위의 내용을 모두 포함하기도 하지만, 모두 콘텐츠를 포함한다는 점은 동일합니다. 이는 점진적인 향상을 보다 합리적인 설계 패러다임으로 만듭니다. 이것이 Yahoo!에서 즉시 채택되어 "등급별 브라우저 지원" 전략을 구축하는 데 사용된 이유입니다.

사례 분석:

(1) 코드

    .transition { /*渐进增强写法*/
          -webkit-transition: all .5s;
          -moz-transition: all .5s;
          -o-transition: all .5s;
             transition: all .5s;
    }
    .transition { /*优雅降级写法*/
              transition: all .5s;
           -o-transition: all .5s;
         -moz-transition: all .5s;
      -webkit-transition: all .5s;
    }

(2) 접두사 CSS3(-webkit- / -moz- / -o-*) 및 브라우저의 일반적인 CSS3 지원은 다음과 같습니다.

A 오래 전: 브라우저는 접두어가 붙은 CSS3과 일반 CSS3을 지원하지 않습니다.

얼마 전: 브라우저는 접두어가 붙은 CSS3만 지원하고 일반 CSS3은 지원하지 않습니다.

현재: 브라우저는 접두어가 붙은 CSS3과 일반 CSS3을 모두 지원합니다. 미래: 브라우저는 접두사 CSS3를 지원하지 않고 일반 CSS3만 지원합니다.

(3) 점진적인 개선 작성 방법으로 이전 버전 브라우저의 가용성을 우선적으로 고려하고 마지막으로 새 버전의 가용성을 고려합니다. 접두어가 붙은 CSS3과 일반 CSS3를 기간 3에 모두 사용할 수 있는 상황에서는 일반 CSS3가 접두어가 붙은 CSS3보다 우선 적용됩니다. 단계적 다운그레이드를 작성하는 방법은 새 버전의 브라우저 가용성을 우선적으로 고려하고 마지막으로 이전 버전의 가용성을 고려하는 것입니다. 접두사가 붙은 CSS3과 일반 CSS3을 모두 사용할 수 있는 기간 3의 경우 접두사가 붙은 CSS3가 일반 CSS3를 재정의합니다.

CSS3에 관한 한 저는 점진적인 향상 방식의 글쓰기를 선호합니다. 브라우저에서 접두사 CSS3의 일부 속성의 구현 효과가 일반 CSS3의 구현 효과와 다를 수 있으므로 결국 일반 CSS3가 우선합니다. 접두사 CSS3와 일반 CSS3에서 어떤 속성이 다른 명시적 효과를 갖는지 궁금하다면.

(4) 선택 방법

사용자가 사용하는 클라이언트 버전에 따라 결정하십시오. 내 말을 참고하세요. 저는 브라우저를 사용하지 않고 클라이언트를 사용하고 있습니다. 점진적인 향상과 우아한 저하의 개념은 본질적으로 소프트웨어 개발 프로세스 중에 새로운 기능에 직면한 낮은 버전 소프트웨어와 높은 버전 소프트웨어 간의 호환성 결정이기 때문입니다. 서버측 프로그램에서는 이러한 문제가 거의 발생하지 않습니다. 개발자가 서버측 실행 프로그램의 버전을 제어할 수 있으므로 점진적인 향상 및 점진적인 저하 문제가 없기 때문입니다. 그러나 클라이언트 프로그램은 개발자의 통제 범위를 벗어납니다(사용자에게 브라우저를 업그레이드하도록 강요할 수는 없습니다). 우리가 클라이언트라고 부르는 것은 브라우저, 모바일 단말 장치(예: 휴대폰, 태블릿, 스마트 시계 등) 및 해당 애플리케이션(브라우저는 웹 사이트에 해당하고 모바일 단말 장치는 해당 APP에 해당)을 의미할 수 있습니다.

이제 사용된 클라이언트 프로그램 버전의 비율을 분석할 수 있는 매우 성숙한 기술이 있습니다. 물론 낮은 버전의 사용자가 많다면, 높은 버전의 사용자가 많으면 대부분의 사용자에 대한 사용자 경험을 향상시키기 위해 점진적인 향상의 개발 프로세스가 선호될 것입니다. 저하가 바람직할 것입니다.

그런데 실제 상황은 어떤가요? 대부분의 대기업은 비즈니스가 최우선이고 사용자 경험 개선이 최우선이 될 수 없기 때문에 점진적인 개선 접근 방식을 채택합니다. 예를 들어, Sina Weibo 웹사이트의 프런트 엔드를 업데이트할 때 수억 명의 사용자가 있는 웹사이트에서는 하위 버전의 사용자가 사용할 수 있는지 여부를 고려하지 않고 특정 특수 효과를 추구하는 것은 절대 불가능합니다. 진행하기 전에 낮은 버전에서 높은 버전으로 진행하세요. 점진적 개선은 새로운 기능을 사용하여 사용자에게 더 나은 사용자 경험을 제공합니다. 그러나 반례는 없습니다. 십대를 위한 소프트웨어(또는 웹사이트)를 개발한다면 이 그룹의 사람들은 항상 새로운 것을 시도하고 멋진 특수 효과를 좋아하며 소프트웨어를 최신 버전으로 업데이트하는 것을 좋아한다는 것을 알고 계실 것입니다. 사용자). 이러한 상황에 직면하면 점진적인 향상의 개발 프로세스가 실제로 최선의 선택입니다.

위 내용은 CSS3의 점진적인 향상과 우아한 저하에 대한 설명입니다. 모두에게 도움이 되기를 바랍니다.

점진적 향상과 우아한 저하의 차이점은 무엇입니까

점진적 향상과 우아한 저하에 대하여_html/css_WEB-ITnose

javascript_javascript 기술의 점진적인 향상과 원활한 저하에 대한 간략한 논의

위 내용은 CSS3의 점진적인 향상과 점진적인 저하의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!