집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3에서 점진적인 향상과 우아한 저하를 사용하는 방법

CSS3에서 점진적인 향상과 우아한 저하를 사용하는 방법

php中世界最好的语言원래의: 2018-01-30 10:27:282088검색

이번에는 CSS3에서 점진적인 향상과 우아한 저하를 사용하는 방법을 보여 드리겠습니다. 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 지원은 다음과 같습니다.

오랜 시간 이전: 브라우저는 접두어 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 웹 사이트의 update 사용자가 수억 명에 달하는 웹 사이트의 경우 하위 버전 사용자가 사용할 수 있는지 여부를 고려하지 않고 특정 특수 효과를 추구하는 것은 절대 불가능합니다. 낮은 버전에서 높은 버전으로의 접근성을 보장해야 합니다. 그런 다음 점진적인 개선으로 이동하여 더 높은 버전의 사용자에게 더 나은 사용자 경험을 제공하기 위해 새로운 기능을 사용해야 합니다. 그러나 반례는 없습니다. 십대를 위한 소프트웨어(또는 웹사이트)를 개발한다면 이 그룹의 사람들은 항상 새로운 것을 시도하고 멋진 특수 효과를 좋아하며 소프트웨어를 최신 버전으로 업데이트하는 것을 좋아한다는 것을 알고 계실 것입니다. 사용자). 이러한 상황에 직면하면 점진적인 향상의 개발 프로세스가 실제로 최선의 선택입니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!